Integration of Model, View & Controller
From the above section, we learned about MVC architecture in ASP.NET. But Model, View, and controller are separate components. They need to be integrated and put together to get a full-fledged web application. We will learn how to integrate them using a practical example code. Let’s make a student database management web application. Below is the step-by-step guide on how to make this application.
Create Controller
As seen below, in the StudentController.cs file inside the Controllers folder, create the StudentController class using the Index() function. This may be done directly in the Visual Studio GUI.
StudentController
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MVC_BasicTutorials.Controllers
{
public class StudentController : Controller
{
// GET: Student
public ActionResult Index()
{
return View();
}
}
}
As you can see above, the StudentController class is inherited from the Controller class. Every MVC controller must derive this abstract Controller class. This fundamental Controller class has several auxiliary methods that may be used for various things.
Create Model
In the model folder, create a new Student class. This sample class will hold the students' id, name, and age. So, as illustrated below, we'll need to add public properties for Id, Name, and Age.
Student Model class
public class Student
{
public int StudentId { get; set; }
public string StudentName { get; set; }
public int Age { get; set; }
}
The model class may be used to fill data in the display and to communicate data to the controller.
Create View
Create an Index.cshtml page in Student folder inside Views folder. This contains the code for what the user interface would look like.
Views\Student\Index.cshtml
@model IEnumerable<MVC_BasicTutorials.Models.Student>
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<p>
@Html.ActionLink("Create New", "Create")
</p>
<table class="table">
<tr>
<th>
@Html.DisplayNameFor(model => model.StudentName)
</th>
<th>
@Html.DisplayNameFor(model => model.Age)
</th>
<th></th>
</tr>
@foreach (var item in Model) {
<tr>
<td>
@Html.DisplayFor(modelItem => item.StudentName)
</td>
<td>
@Html.DisplayFor(modelItem => item.Age)
</td>
<td>
@Html.ActionLink("Edit", "Edit", new { id=item.StudentId }) |
@Html.ActionLink("Details", "Details", new { id=item.StudentId }) |
@Html.ActionLink("Delete", "Delete", new { id = item.StudentId })
</td>
</tr>
}
</table>
It contains both HTML and razor codes, as shown in the Index view above. The @ sign is used to start an inline razor expression. @Html is a class that helps you create HTML controls.
We need to pass a model object to a view to display the data on the view.
Integrate Model, View, Controller
We now need to send a model object from an action method to a view to run it correctly. As you can see in the preceding Index.cshtml, the model type is IEnumerable<Student>. As a result, we must supply it from the StudentController class's Index() action function, as seen below.
Must Read IEnumerable vs IQueryable.
Passing Model from Controller
public class StudentController : Controller
{
static IList<Student> studentList = new List<Student>{
new Student() { StudentId = 1, StudentName = "John", Age = 18 } ,
new Student() { StudentId = 2, StudentName = "Steve", Age = 21 } ,
new Student() { StudentId = 3, StudentName = "Bill", Age = 25 } ,
new Student() { StudentId = 4, StudentName = "Ram" , Age = 20 } ,
new Student() { StudentId = 5, StudentName = "Ron" , Age = 31 } ,
new Student() { StudentId = 4, StudentName = "Chris" , Age = 17 } ,
new Student() { StudentId = 4, StudentName = "Rob" , Age = 19 }
};
// GET: Student
public ActionResult Index()
{
//fetch students from the DB using Entity Framework here
return View(studentList);
}
}
We've constructed a list of student objects for demonstration purposes, as you can see in the code above (in real-life applications, you can fetch it from the database). We then provide this list object to the View() function as a parameter. The base Controller class defines the View() function, which automatically links a model object to a view.
You can now start the MVC project by clicking F5 and going to http://localhost/Student. In the browser, you'll see something like this.
Source
Check out Entity Framework Interview Questions to know more about it.
FAQs
-
Which would be the proper framework to be used: ASP.NET MVC or ASP.NET Web API?
ASP.Net MVC is used to create web applications that return both the view and the data, whereas Asp.Net Web API creates all HTTP services in a simple and basic approach that only delivers data, not the view.
-
From where is the view derived?
Every view in the ASP.NET MVC is derived from WebViewPage class included in System.Web.Mvc namespace.
-
What is Razor?
In ASP.NET MVC, one of the view engines supported is Razor. Razor lets you to use C# or Visual Basic to construct a combination of HTML and server-side code. The.vbhtml file extension is used by Razor views written in Visual Basic, whereas the.cshtml file extension is used by Razor views written in C#.
-
ASP.NET is open-source. Explain.
Microsoft has made the entire.NET server stack open source, making it a 'free' download. This comprises ASP.NET, the.NET compiler, the.NET Core Runtime, Framework, and Libraries, allowing developers to create applications with.NET on Windows, Mac, and Linux.
-
What is ASP.NET Core?
The open-source and cross-platform version of ASP.NET is called ASP.NET Core. Prior to the release of ASP.NET Core, the Windows-only versions of ASP.NET were simply referred to as ASP.NET.
Key Takeaways
We learned the MVC Integrate model, View, and Controller in ASP.NET using a practical coding example from this article.
But this is not enough; you need something extra to excel in web development truly. If you want to learn more about web development, you can read our articles or take our highly curated Web Development course.
Recommended Readings:
250+ registered 
