Tightly Coupled View (Model bounded view) in Asp.Net MVC

  Total Views : 4526
  Comments : 0
 
  Keywords : Model bounded view in asp.net mvc with example, Tightly coupled view in asp.net mvc with example, Make application tightly coupled in asp.net mvc, what is tightly coupled view in asp.net mvc

Here we will learn what is tight coupling in asp.net mvc or model bound view in asp.net mvc and how to use tight coupling in asp.net mvc with example.

 

In asp.net mvc model bounded view is a tightly coupled and it is used to create view. Let’s create Model bounded view or 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 adding Model Right click on Models folder à select Add à then select Class in asp.net mvc application. After that a new Dialog (Add New Item) will popup asking you to enter Class name in that enter name “Person” like as shown below

 

adding new model to models folder in asp.net mvc

 

After adding model now let’s add some properties in this Person class like as shown following

 

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 add simple Controller with name “PersonDetails” for that right click on Controllers folder à select Add à Select Controller. Once we select Controller new popup will open in that mention name as “PersonDetails” and select Template select Empty MVC controller and click on add after configuring it like as shown below

 

add controller with empty mvc controller template in asp.net mvc

 

After adding controller you 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 controller method by adding [HttpGet] attribute to Action Method and return 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 let’s add view for that just right click inside controller and select Add View you will get a pop up like as shown below. Inside this popup you will see default View name will be there no need to change that and we are going to use Razor engine that why we should select Razor engine. In Model class we are going to select Person Model which we created. In Scaffold template select Create item and click on Add button finally.

 

Add view person controller in asp.net mvc application

 

After click Add button our View will create which is tightly coupled to model that would be like 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 is showing view is tightly coupled to person Model.

 

tightly coupled view in asp.net mvc application

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

 Comments (0)

Be the first to give your valuable feedback

Leave a comment

  • Default Tutlane User