Services
Technology Web App Development Mobile App Development Windows App Development Database Development UI/UX Development Cloud Development SEO Digital Marketing Guest Posting Content Writing Artificial Intelligence Data Science ERP Development CRM Development CMS Development LMS Development Business Listing Blockchain Technology Startup Promotion AI Tools Integration
Products
Data Converter Cleaner TUC - Unit Converter Import Export Survey Manager Tweet Controller
Developer
Article Blog Forum Interview Beginner News Startup Quiz
Users
Career
Apply Job Internship
Pricing
Login Sign Up Get a Quote

forum

home / developersection / forums / how we achieve tight coupling view in asp.net mvc?
Ask Question
Anonymous User
Anonymous User

Student

I am a content writter !

Message

1 Answers

Nishi Tiwari
Nishi Tiwari 28 Jan 2020
Report Abuse

In asp.net mvc model bounded view is a tightly coupled and it is used for creating view. Let’s create tightly coupled View in asp.net mvc application for that first we need to create Model, Controller and View.

Create Model in Asp.Net MVC Application

For creating Model Right click on Models folder then select Add  then select Class in asp.net mvc application. After that a new Dialog (Add New Item) will show asking us to enter Class name in which enter name “Person” like as shown below

Nishi Tiwari

  After adding model now add some properties in this Person class as shown below 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

 

namespace Tutorial3.Models

{

public class Person

{

public int ID { get; set; }

public string Name { get; set; }

public string Address { get; set; }

public string Mobileno { get; set; }

}

}


Create Controller in Asp.Net MVC Application

Now create simple Controller with name “PersonDetails” for that right click on Controllers folder  select Add then Select Controller. Once we select Controller new popup box will open in which mention name as “PersonDetails” and select Template for example Empty MVC controller and click on add after configuring it like as shown

Nishi Tiwari

  After adding controller we can see default code generated 

 
using System; 
using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

 

namespace Tutorial3.Controllers

{

public class PersonDetailsController : Controller

{

//

// GET: /PersonDetails/

public ActionResult Index()

{

return View();

}

}

}

 Now we will change the controller method by adding [HttpGet] attribute to the Action Method and return with new instance Model Person like as shown below 

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using Tutorial3.Models;

 

namespace Tutorial3.Controllers

{

public class PersonDetailsController : Controller

{

//

// GET: /PersonDetails/

[HttpGet]

public ActionResult Index()

{

return View(new Person());

}

}

}


Create View in Asp.Net MVC Application

Now add view for which just right click inside controller and select Add View we will get a popup. Inside this popup we will see default View name and there no need to change that and we are going to use Razor engine that is why we should select Razor engine. In Model class we are going to select Person Model which we have created. In Scaffold template select Create item and click on Add button at last.

Nishi Tiwari

After click Add button our View will create which will be tightly coupled to model as shown below  

@model Tutorial3.Models.Person

 

@{

ViewBag.Title = "Index";

}

<h2>Index</h2>

@using (Html.BeginForm()) {

@Html.ValidationSummary(true)

<fieldset>

<legend>Person</legend>

<div class="editor-label">

@Html.LabelFor(model => model.Name)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Name)

@Html.ValidationMessageFor(model => model.Name)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Address)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Address)

@Html.ValidationMessageFor(model => model.Address)

</div>

<div class="editor-label">

@Html.LabelFor(model => model.Mobileno)

</div>

<div class="editor-field">

@Html.EditorFor(model => model.Mobileno)

@Html.ValidationMessageFor(model => model.Mobileno)

</div>

<p>

<input type="submit" value="Create"/>

</p>

</fieldset>

}

<div>

@Html.ActionLink("Back to List", "Index")

</div>

@section Scripts {

@Scripts.Render("~/bundles/jqueryval")

 

}

 Here red mark border in below is showing view is tightly coupled to person Model.

Nishi Tiwari

In this way we can achieve Model bounded view or tightly coupled view in asp.net MVC. 

advertising