📊What is MVC Design Pattern?

Software Architecture

MVC stands for Model-View-Controller. MVC is a design pattern that separates the application into three areas: Controller, Model and View.

Controller

This area handles how data moves between the Model and View. It also handles input from users and changes to data in order to keep both Model and View up to date.

Model

This is the data, or the representation of the data, in an application. We can bind the model easily with the database. The data binding support number of the database like Oracle, SQLite, SQL Server, My SQL and more including the non relational database like Mongo DB, Azure Cosmos DB.

View

This is how the user interacts with and sees the data. View is responsible for the look and feel of system and also do some custom formatting or sorting etc. With Razor, you can use C# to render a page, creating HTML5-compliant web pages.

📝 The MVC design pattern, in terms of software architecture design, helps to achieve the separation of concerns principle.

Example:

Controller

public class HumanController : Controller {
    private readonly HumanContext _context;
    public HumanController(HumanContext context){
        _context = context;
    }

    public async Task Index() {
        return View(await _context.Humans.ToListAsync());
    }
 
    public async Task Details(int id)
    {
        var human = await _context.Humans.Find(id);
        if (human == null)
        {
            return NotFound();
        }
        return View(human);
   }
}

Model

public class Human { 
  public int Id { get; set; } 
       
  [Required] [MinLength(2)] 
  public string FullName { get; set; } 

  [Phone] 
  public string Phone { get; set; } 

  [EmailAddress] 
  public string Email { get; set; } 
}

View

<table class="table">
<thead>
  <th>@Html.DisplayNameFor(model => model.FullName)</th>
  <th>@Html.DisplayNameFor(model => model.Phone)</th> 
  <th>@Html.DisplayNameFor(model => model.Email)</th>
</thead>
<tbody>
  @foreach (var item in Model) {
    <tr>
      <td>@item.FullName</td>
      <td>@item.Phone</td>
      <td>@item.Email</td>
    </tr>
  }
</tbody>

---

Hi, I’m Wajid Khan. I am trying to explain computer stuff in a simple and engaging manner, so that even non-techies can easily understand, and delivered to your inbox weekly.

The following section is for Urdu readers. درج ذیل حصہ اردو قارئین کے لیے ہے۔

---

درج ذیل حصہ اردو قارئین کے لیے ہے۔

ڈیزائن پیٹرن کیا ہے؟ MVC

سافٹ ویئر آرکیٹیکچر

ایم وی سی کا مطلب ماڈل ویو کنٹرولر ہے۔ ایم وی سی ایک ڈیزائن پیٹرن ہے جو ایپلی کیشنز کو تین شعبوں میں تقسیم کرتا ہے۔

کنٹرولر: یہ ہینڈل کرتا ہے کہ ماڈل اور ویو کے درمیان ڈیٹا کیسے منتقل ہوتا ہے۔ یہ ماڈل اور ویو دونوں کو اپ ٹو ڈیٹ رکھنے کے لیے صارفین کے ان پٹ اور ڈیٹا میں تبدیلیوں کو بھی ہینڈل کرتا ہے۔

ماڈل: یہ ایک ایپلی کیشنز میں ڈیٹا ماڈل، یا ڈیٹا کی نمائندگی ہے۔

ویو: صارف کے ڈیٹا ماڈل، یا ڈیٹا کے ساتھ تعامل کرتا ہے اور اسے دیکھاتا ہے۔

👨‍💻CODE: Source Code vs Binary Code