Tightly coupled view (model bounded view) MODEL VIEW CONTROLLER HOW TO CREATE TIGHTLY COUPLE VIEW IN ASP.NET MVC MVC,ASP.NET MODEL VIEW CONTROLLER

1. WELCOME TO IT PROGRAMMING WORLD
अगर आपने अभी तक मेरे चैनल को सब्सक्राइब नह ीं ककया है
तो प्ल ज कर ल जजये जो मई नेक्स्ट विडियो अपलोि कर तो
आपको पता चल सके
आगत आपको ये विडियो एच लगा है तो विडियो को LIKE और
SHARE जरूर करे
 धन्यिाद्
 आईट प्रोग्राममींग िर्लिड

2. Tightly Coupled View
(Model bounded view)
in Asp .NET MVC
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.
2

3. Working with Controllers
Controller:
Process incoming request.
Executes the appropriate code initiated or
required by the user
Communicating with the "Model" to validate
and process the data.
3
4/18/2018

4. What is Controllers
Controller - is a class...
it is .cs code [C# file], which is inherited by a
built-in controller classes.
4

5. 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
5

6. 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; }
 }
 }
6

7. Create Controller in Asp.Net MVC Application
7
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();
}
}
}

8. 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());
 }
 }
 }
8

9. 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.
9

10.  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>
10

11.  <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>
11

12. Continue Codes
 <p>
 <input type="submit" value="Create"/>
 </p>
 </fieldset>
 }
 <div>
 @Html.ActionLink("Back to List", "Index")
 </div>
 @section Scripts {
 @Scripts.Render("~/bundles/jqueryval")

 }
12

13. Here red mark border is showing view is tightly
coupled to person Model. 13
This way we can achieve Model bounded view or tightly coupled
view in asp.net MVC.
This way we can achieve Model bounded view or tightly
coupled view in asp.net MVC.

14. Thanking for watching ……………..
Please Subscribe my Channel for next Coming videos direct to
You……….
 Hope This Video is helpful for you… Like and share not
forget……..
 If any feedback Comments ………
 IT PROGRAMMING WORLD
 KRISHNA RAJPUT SINGH