forum

Home / DeveloperSection / Forums / How we achieve tight coupling view in asp.net MVC?

Ask Question

How we achieve tight coupling view in asp.net MVC?

Anonymous User28828-Jan-2020

Explain me about how we achieve tight coupling view in asp.net MVC.

asp.net mvc asp.net mvc 
Updated on 28-Jan-2020
Anonymous User

Anonymous User

Follow
I am a content writter !

Can you answer this question?

Answer

1 Answers

Nishi Tiwari

Nishi Tiwari

28-Jan-2020

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

How we achieve tight coupling view in asp.net MVC?

  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

How we achieve tight coupling view in asp.net MVC?

  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.

How we achieve tight coupling view in asp.net MVC?

 

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.

How we achieve tight coupling view in asp.net MVC?

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

Liked By