Real Life Example Of ASP.NET MVC 5

What is MVC

MVC is an architecture pattern which separates logic, UI & database connection of our application. It’s divided into three broader sections, “Model”, “View” and “Controller”.

• The “View” is responsible for look and feel of our application.
  
  
• “Model” represents the real world object and provides data to the “View” (If we need data from the database then we can get it.).
  
  
• The “Controller” is responsible to take the end user request and load the appropriate “Model” and “View”.

The following diagram represents how MVC pattern works internally.

• Everytime first request comes into controller.
  
  
• Controller decides which action to be executed and that action goes to directly to View or through Model to View by taking data from database.

Real Life Example of MVC 5

Suppose there is one restaurant, in this restaurant some people are working as follows:

• Guys who are an expert cook, they works in kitchen.
  
  Guys (Manager) who take order from customer & write down that order on small paper with appropriate table number i.e one.
  
  
• Now some customer comes into the restaurant, the guy who is going to take an order shows menu card of this restaurant to that customer.
  
  
• Customer see this menu card. For example, customer see items such as Poha, Upma, Dosa etc. Now that customer would like to order Poha or dosa, then the customer can imagine how Poha or Dosa looks like.
  
  
  
• After taking order from customer, that guy (Manager) give this small purchi to a man who is sitting outside the kitchen. This man who is sitting outside the kitchen is acting like a Controller in MVC, means every order is handled by this controller.
  
  This man gives order to appropriate cook for making the order ready.
  
  
• The cook will see the order & try to make the food ready. If he needs some extra items to make food like for Dosa he need to make 1 Chatani from coconuts then cook, visit the fridge & take this coconut & make chatani ready by adding water, sugar etc. In this scenario the cook is taking data from the database means cook is acting like Model in MVC.
  
  
  
• After some time, the order of that customer is ready. Now the man sit outside the kitchen, calls the waiter & tell him to serve this order to the customer who ordered from table number one.
  
  
  
  
• Now waiter adds some items to make better look & feel of food like he add some.

Now the order is ready to eat. This is actual View in MVC. Waiter is responsible for making decorate view.


Some steps to create MVC 5 Project

Step 1: Create one project in Visual Studio 2013.

Add one controller

Step 2: Add one model to our project named MyOrder & add some properties:

public int QtyPoha {
    get;
    set;
}
//public string Poha { get; set; }
public int QtyUpma {
    get;
    set;
}
//public string Upma { get; set; }
public int QtyDosa {
    get;
    set;
}
//public string Dosa { get; set; }

  
Step 3: Add one View to our project by right clicking on action method.

Step 4: Now add model to our view & add some input textbox for taking user input like the following:

@model MvcApplication1.Models.MyOrder@
{
    Layout = null;
}
< !DOCTYPE html >< html >< head >< meta name = "viewport"
content = "width=device-width" / >< title > GetCustomerOrder < /title>< /head>< body >< div > @using(Html.BeginForm("Test", "Hotel", FormMethod.Post))
{@
    Html.Label("Enter Poha Qty")@ Html.EditorFor(m => m.QtyPoha, new
    {
        style = "width: 650px"
    }) < br / > @Html.Label("Enter Upma Qty")@ Html.EditorFor(m => m.QtyUpma, new
    {
        style = "width: 650px"
    }) < br / > @Html.Label("Enter Dosa Qty")@ Html.EditorFor(m => m.QtyDosa, new
    {
        style = "width: 650px"
    }) < br / >< input type = "submit"
    id = "submit" / >< br / > @ * @Html.Label("My Poha Qty : ") * @@ViewBag.QtyP
} < /div>< /body>< /html>

Step 5: Now add action method to our controller as:

[HttpPost]
public ActionResult Test(MyOrder m)
{
    if (ModelState.IsValid)
    {
        int QtyPoha = m.QtyPoha;
        ViewBag.QtyP = QtyPoha;
        int QtyUpma = m.QtyUpma;
        ViewBag.QtyU = QtyUpma;
        if (m.QtyDosa != null)
        {
            return RedirectToAction("TakeExtraMaterial", "TakeValuesFromDb");
        }
    }
    else if (m.QtyPoha > 0 && m.QtyUpma > 0)
    {
        return RedirectToAction("ViewForSnacs");
    }
    return View("GetCustomerOrder");
}
public ActionResult ViewForSnacs()
{
    return PartialView("ViewForSnacs");
}

Step 6: Now for just understanding, how model can take data from database. I have created one sample database with table & added some dummy data into this table:

Create Table DataFromFridge(Potatos varchar(100), Onion varchar(100), CoconutCream varchar(100), ChatMasala varchar(100)) Insert Into DataFromFridge
values('50gram', '20gram', '5Spoon', '5gram')
Select * from
DataFromFridge

Step 7: Now create another controller for database connectivity. Firstly, add some namespace to get database connection:

using System.Configuration;
using System.Data.SqlClient;
using System.Data;
public class TakeValuesFromDbController: Controller
{
    public ActionResult TakeExtraMaterial()
    {
        int i;
        SqlConnection con = new SqlConnection();
        con.ConnectionString = "Data Source=Rupesh-PC\\SA;Initial Catalog=My_Hotel;Integrated Security=True";
        con.Open();
        SqlCommand cmd = new SqlCommand("select * from DataFromFridge", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);
        if (dt.Rows.Count > 0)
        {
            i = dt.Rows.Count;
        }
        else
        {
            i = 0;
        }
        ViewBag.DbValue = i;
        return PartialView("OrderIsReady", ViewBag.DbValue);
    }
}

Step 8: Now add one folder to our project as Imgaes which will help us to show on UI part i.e. on partial views.

Add some images in this folder.

Step 9: Now create Partial View to show an output. Add image URL in this partial view:

• Partial View for OrderIsReady & add the following code snippet:
  

  <img src="@Url.Content(" ~/Images/Dosa1.jpg ")" alt="IMAGES" height="600px" width="800" />
  <br />
  <br />
  <p style="font-size:35px; color: blue">Db values contains: @ViewBag.DbValue </p>

• Partial View for ViewForSnacs & add some code like the following code snippet:
  

  <img src="@Url.Content(" ~/Images/Pohe.jpg ")" alt="IMAGES" height="300px" width="600" />
  <br />
  <br />
  <br />
  <img src="@Url.Content(" ~/Images/Upma.jpg ")" alt="IMAGES" height="300px" width="600" />

Now our solution structure looks like the following:



Step 10: Now run our application. I put some debugger here to understand how our application will work.

Now we have entered all values so it will redirect to TakeValuesFromDb Controller.



Step 11: Now our UI looks like the following. This is a Partial View.



Step 12: Now we will again rerun our application & enter only two values and check the controller. Now it will go to partial view of ViewForSnacs
& see our URL goes to Partial View of ViewForSnacs.



For more understanding you can download the code.

Summary

This article will help fresher candidates to understand ASP.NET MVC 5 & real life example of MVC 5.

Hope you enjoyed this one. Post your suggestions in comments section.