MVC Architecture is a framework for developing applications in another way. MVC
Architecture mainly used for separation concerns and the user has all-over
control on the HTML in MVC. In early when we use web-form, our code-behind is connected to the UI. So the developer has no full control over HTML generated from web-form. But in the case of MVC, it is separated. In MVC architecture mainly application is divided into 3 parts.
- Model
- View
- Controller
1.Model:
The model means a real-time entity. Model is used for maintaining data and we can also perform some server-side validation in Model. Every
Form in the application has some business logic. Business logic is a
simple term like we want data in some format for that we add validation for fields used on the webform that's called as Business logic. And by using the Model in MVC, we do the same thing. Firstly we declare the Class with Properties. And each Property has its own validation like below.
namespace MvcApplication1.Models
{
public sealed class EmployeeDetail
{
# region Memeber Variables
private Guid? l_companyId = null;
private Guid? l_employeeId = null;
private string l_employeeName = null;
# endregion
# region Properties
public Guid? CompanyId
{
get
{
return l_companyId;
}
set
{
l_companyId = value;
}
}
public Guid? EmployeeId
{
get
{
return l_employeeId;
}
set
{
l_employeeId = value;
}
}
public string Name
{
get
{
return l_employeeName;
}
set
{
if (string.IsNullOrEmpty(value.Trim()))
{
throw new ArgumentException("Employee Data", "Employee Name is null or empty.");
}
l_employeeName = value.Trim();
}
}
# endregion
}
}
If you can see in the above example I have added validation on the Name of the employee as it can't be null or empty. This is called Business logic.
When the request came to the controller, the controller uses the model and passes data to a user in the form of HTML using View.
2.View:
The view is responsible for user interaction. When the user seepage on the browser it is a view. When the controller gets the request from the user, the controller creates HTML using view and model. View means HTML with some c# code inside it. When you see MVC Project architecture, you get one folder with the name Views, In this folder, all views are created. Below is a simple View Example
@model MvcApplication1.Models.EmployeeDetail
@{
ViewBag.Title = "EmployeeDetail";
}
<h2>EmployeeDetail</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeDetail</legend>
<div class="editor-label">
@Html.LabelFor(model => model.CompanyId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CompanyId)
@Html.ValidationMessageFor(model => model.CompanyId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.EmployeeId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EmployeeId)
@Html.ValidationMessageFor(model => model.EmployeeId)
</div>
<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>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
This is a view created for the above model by using scaffolding.
@{
ViewBag.Title = "EmployeeDetail";
}
<h2>EmployeeDetail</h2>
@using (Html.BeginForm()) {
@Html.AntiForgeryToken()
@Html.ValidationSummary(true)
<fieldset>
<legend>EmployeeDetail</legend>
<div class="editor-label">
@Html.LabelFor(model => model.CompanyId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.CompanyId)
@Html.ValidationMessageFor(model => model.CompanyId)
</div>
<div class="editor-label">
@Html.LabelFor(model => model.EmployeeId)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.EmployeeId)
@Html.ValidationMessageFor(model => model.EmployeeId)
</div>
<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>
<p>
<input type="submit" value="Create" />
</p>
</fieldset>
}
<div>
@Html.ActionLink("Back to List", "Index")
</div>
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
}
This is a view created for the above model by using scaffolding.
3.Controller:
The controller is a core part of MVC architecture. When the user hits the URL, the control first goes to the controller then the controller decides which action method is to be executed. And inaction method which model to use and which view we have to render on the browser. This functionality is performed by the controller.
The controller is a simple cs class file with a class name ends with Controller word and inherited from the "Controller" class. See below sample code for creating a controller.
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index(int id)
{
return View("Index");
}
public ActionResult EmployeeDetail(int id)
{
return View();
}
}
}
These are the main MVC architecture's 3 pillars.
3 Comments
This blog is amazing guys, All posts here are very informative to get a detailed understanding in the subject. Really I learned a lot about MVC Architecture here. Here AngularJS is a MVC based framework. In the coming chapters, we will see how AngularJS uses MVC methodology.
ReplyDeleteAngularJS Training in Chennai
ReplyDeleteThanks for sharing the knowledgeable stuff to enlighten us no words for this amazing blog.. learnt so many things I recommend everyone to learn something from this blogger and blog.. I am sharing it with others also
IT Software Training in Chennai | Python Training in Chennai | Dot Net Training in Chennai |Android Training in Chennai
Nice post..
ReplyDeleteSSIS training
SSRS training
tableau training
Teradata training
Windows admin training