MVC Architecture Theory

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. 
  1. Model 
  1. View 
  1. 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. 
using System;

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.  

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

 

Post a Comment

3 Comments

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

    AngularJS Training in Chennai

    ReplyDelete

  2. Thanks 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

    ReplyDelete