Click here to Skip to main content
Click here to Skip to main content

Learn MVC (Model view controller) Step by Step in 7 days – Day 5

, , 1 Aug 2014 CPOL
Rate this:
Please Sign up or sign in to vote.
As the article's name says, learn MVC. Ao the agenda is simple, we are going to learn ASP.NET MVC in 7 days.
So, What’s the agenda?
Day 1: -Controllers, strong typed views and helper classes
Day 2: - Unit test, routing and outbound URLS
Day 3:- Partial views, Data annotations,Razor, Authentication and Authorization
Day 4:- JSON, JQuery, State management and Asynch controller
Day 5:- Bundling , Minification , ViewModels,Areas and Exception handling
Day 6: - Display Modes,MVC OAuth,Model Binders,Layout and Custom view engine
Lab 18: - MVC bundling and minification
Understanding Bundling
Understanding Minification
Step 1: - Create a MVC project with Empty template
Step 2: - Create a controller which invokes a view
Step 3: - Run and see how multiple calls are made.
Step 4: - Referencing “System.Web.Optimization”
Step 5: - The bundle config file
Step 6: - Call the bundle config file from global.asax.cs file
Step 7: - Render the bundles in the view
Step 8: - Watch your Bundling and Minification in real
Lab 19: - MVC View model
Theory
What kind of logic view model class will contain?
Step 1 :- Creating the customer model
Step 2: - Creating the view model
Step 3: - Consume view model in the view
Should VM be composed or inherited.
Advantages of VM
Lab 20: - Exception Handling
Introduction
Step 1: - Add a controller and action which raises error
Step 2: - Create an Error view
Step 3: - Reuse across Actions within same controller (OnException)
Step 4: - Reuse across any action and any controller (FilterConfig)
Step 5: - Error handling across project: - Application_Error
Lab 21: - MVC Area
What is Area and Why Area?
How to use Areas?
Step1: - Add Area using the MVC template.
Step 2: Start pushing relevant files to relevant areas
What is the difference Areas vs. Folders?
What is for the sixth day?
Are you completely new to MVC?
Do not miss MVC interview questions with answers

So, What’s the agenda?

In day 5 we will look in to how to bundling and minification to maximize performance of MVC application. We will also look in to the concept and advantages of view model which is nothing but a bridge between model and the view.

In case you have missed the past 4 days of the MVC learn series below are the links for the same.

Day 1: -Controllers, strong typed views and helper classes

http://www.codeproject.com/Articles/207797/Learn-MVC-Model-view-controller-Step-by-Step-in-7

Day 2: - Unit test, routing and outbound URLS

http://www.codeproject.com/Articles/259560/Learn-MVC-Model-view-controller-Step-by-Step-in-7

Day 3:- Partial views, Data annotations,Razor, Authentication and Authorization

http://www.codeproject.com/Articles/375182/Learn-MVC-Model-View-Controller-Step-by-Step-in-4

Day 4:- JSON, JQuery, State management and Asynch controllers

http://www.codeproject.com/Articles/667841/Learn-MVC-Model-view-controller-Step-by-Step-in-3

Day 5:- Bundling , Minification , ViewModels,Areas and Exception handling

http://www.codeproject.com/Articles/724559/Learn-MVC-Model-view-controller-Step-by-Step-in-7

Day 6: - Display Modes,MVC OAuth,Model Binders,Layout and Custom view engine

http://www.codeproject.com/Articles/789278/Learn-MVC-Model-view-controller-Step-by-Step-in-d

Lab 18: - MVC bundling and minification

Both these concepts bundling and minification helps us to increase performance.

Understanding Bundling

Web projects always need CSS and script files.Bundling helps us to combine to multiple javascript and CSS file in to a single entity during runtime thus combining multiplerequests in to a single request which in turn helps to improve performance.

For example consider the below web request to a page. The below request are recorded by using chrome developer tools. This page consumes two JavaScript files “Javascript1.js” and “Javascript2.js”. So when this is page is requested it makes three request calls:-

  • One for the “Index” page.
  • Two requests for the other two JavaScript files “Javascript1.js” and “Javascript2.js”.

Now if you think a little the above scenario can become worst if we have lot of javascript files(especially JQUERY files) resulting in multiple requests thus decreasing performance.

If we can somehow combine all the JS files in to a single bundle and request them as a single unit that would result in increased performance (See the next figure which has a single request).

Understanding Minification

Minification reduces the size of script and CSS files by removing blank spaces , comments etc. For example below is a simple javascript code with comments.

// This is test
var x = 0;
x = x + 1;
x = x * 2;

After implementing minification the javascript code looks something as below. You can see how whitespaces and comments are removed to minimize file size and thus increasing performance as the file size has become smaller and compressed.

var x=0; x=x+1; x=x*2;

So let’s demonstrate a simple example of bundling and minification with MVC 4.0 step by step.

Step 1: - Create a MVC project with Empty template

So to understand bundling and minification , let’s go ahead and create a empty MVC project. In that let’s add a “Script” folder and inside”Script” folder , lets add two javascript files as shown in the below figure.

Below is the code for “Javascript1” file.

// This is test
var x = 0;
x = x + 1;
x = x * 2;

Below is the code for “Javascript2” file.

alert("Hello");

Step 2: - Create a controller which invokes a view

Now let’s go ahead and create a controller which invokes a view called as “MyView” which consumes both the javascript files.

public class SomeController : Controller
{
        //
        // GET: /Some/

        public ActionResult MyView()
        {
            return View();
        }
        }

Below is the ASPX view which consumes both javascript files.

<html>
<script src="../../Scripts/JavaScript1.js"></script>
<script src="../../Scripts/JavaScript2.js"></script>
<head>
</head>
<body>
<div>
        This is a view.

</body>
</html>

Step 3: - Run and see how multiple calls are made.

Now run the MVC application in Google chrome , press CNTRL + SHIFT + I keyboard keys to see the below output. You can see there are three requests: -

  • First request is to the view “MyView”.
  • The other two requestsfetch “javascript1” and “javascript2” respectively.

Now bundling is all about making those two JavaScript call’s in to one.

Step 4: - Referencing “System.Web.Optimization”

Bundling and minification is done by “System.Web.Optimization” namespace. Now this DLL is not a part of .NET or ASP.NET framework. We need to use NUGET to download this DLL. So go to NUGET and search for ASPNET.Web.Optimization.

In case you are new to Nuget and do not know how to use it please see this video for basics

So once you have got the optimization in your package , click on install to get the references in your project.

Step 5: - The bundle config file

Now this step depends on which MVC template you have selected. If you have selected the “Basic” template then the “BundleConfig” file is ready made and if you have selected the “Empty” template then you have do lot of work.

Currently we have selected “Empty” template so that we can know things from scratch.

So go ahead and add ‘BundleConfig” class file and create a “RegisterBundles” method as shown in the below code. In the below code the “bundles.add” says that add all the javascript files in the “Scripts” folder in to one bundle called as “Bundles”.

Important note: - Do not forget to import “using System.Web.Optimization;” in the class file or else you will end up with errors.

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {

            bundles.Add(new ScriptBundle("~/Bundles").Include(
               "~/Scripts/*.js"));

BundleTable.EnableOptimizations = true;
        }

    }

Step 6: - Call the bundle config file from global.asax.cs file

This step is not necessary to be performed by project who have created using “Basic” template. But below goes the steps for people who have created using “Empty” template. Open the global.asax.cs file and in the application start call the “RegisterBundles” method as shown in the below code.

protected void Application_Start()
        {
…
    …
            BundleConfig.RegisterBundles(BundleTable.Bundles);
        }

Step 7: - Render the bundles in the view

Once the bundling is done we need to remove the “script” tag and call the “Optmization” dll to render the bundle.

<script src="../../Scripts/JavaScript1.js"></script>
<script src="../../Scripts/JavaScript2.js"></script>

Below is the code which will bundle both javascript files in to one unit thus avoiding multiple request call for each file.

<%= System.Web.Optimization.Scripts.Render("~/Bundles")  %>

Below is the complete bundling code called inside the MVC view.

<%= System.Web.Optimization.Scripts.Render("~/Bundles")  %>
<head runat="server">
<meta name="viewport" content="width=device-width" />
<title>MyView</title>
</head>
<body>
<div>
        This is a view.


</body>
</html>

Step 8: - Watch your Bundling and Minification in real

So now that you are all set,it’s time to see the bundling and minification in real. So run google chrome, press CNTRL + SHIFT + I and you can see the magic there is only one call for both the javascript files.

If you click on the preview tab you can see both the javascript files have been unified and…. GUESS , yes minification has also taken place. Remember our original javascript file.

// This is test
var x = 0;
x = x + 1;
x = x * 2;

You can see in the below output how the comments are removes , white spaces are remove and the size of the file is less and more efficient.

Lab 19: - MVC View model

Theory

A view model is a simple class which represents data to be displayed on the view.

For example below is a simple customermodel object with “CustomerName” and “Amount” property.

CustomerViewModel obj = new CustomerViewModel();
obj.Customer.CustomerName = "Shiv";
obj.Customer.Amount = 1000;

But when this “Customer” model object is displayed on the MVC view it looks something as shown in the below figure. It has “CustomerName” , “Amount” plus “Customer Buying Level” fields on the view / screen. “Customer buying Level” is a color indication which indicates how aggressive the customer is buying.

“Customer buying level” color depends on the value of the “Amount property. If the amount is greater than 2000 then color is red , if amount is greater than 1500 then color is orange or else the color is yellow.

In other words “Customer buying level” is an extra property which is calculated on the basis of amount.

So the Customer viewmodel class has three properties

  • “TxtCustomerName” textbox takes data from “CustomerName” property as it is.
  • “TxtAmount” textbox takes data from “Amount” property of model as it is.
  • “CustomerBuyingLevelColor” displays color value depending on the “Amount “ value.
Customer ModelCustomer ViewModel
CustomerNameTxtCustomerName
AmountTxtAmount
CustomerBuyingLevelColor

What kind of logic view model class will contain?

So the view model class can have following kind of logics: -

  • Color transformation logic: - For example you have a “Grade” property in model and you would like your UI to display “red” color for high level grade, “yellow” color for low level grade and “green” color of ok grade.
  • Data format transformation logic: - Your model has a property “Status” with “Married” and “Unmarried” value. In the UI you would like to display it as a checkbox which is checked if “married” and unchecked if “unmarried”.
  • Aggregation logic: -You have two differentCustomer and Address model classes and you have view which displays both “Customer” and “Address” data on one go.
  • Structure downsizing: - You have “Customer” model with “customerCode” and “CustomerName” and you want to display just “CustomerName”. So you can create a wrapper around model and expose the necessary properties.

Let’s do a small lab to understand MVC view model concept using the below screen which we discussed previously.

Step 1 :- Creating the customer model

I will use a top down approach for creating the above screen: -

  • Step 1: - First create the “customer” model.
  • Step 2: - Create the view model.
  • Step 3: - Consume the view model in the view.

So let’s go ahead and create a “Customer” model with the below properties. Because this is a view model I have avoided the color property in the below class.

public class CustomerModel
    {
        private string _CustomerName;

        public string CustomerName
        {
            get { return _CustomerName; }
            set { _CustomerName = value; }
        }

        private double _Amount;

        public double Amount
        {
            get { return _Amount; }
            set { _Amount = value; }
        }

    }

Step 2: - Creating the view model

The next thing is to create a view model class which will wrap “Customer” model and add UI properties. So let’s create a folder “ViewModels” and in that add a class “CustomerViewModel”.

Below goes the code for “CustomerViewModel” class. Below are some important points to note about the view model class: -

  • You can see in the below class how “CustomerViewModel” class wraps “CustomerModel” class.
  • Also most important point we have created properties which go with the UI naming convention (TxtName, TxtAmount, CustomerLevelColor etc).
  • Now for the most important watch the code for “CustomerLevelColor” property , it displays color depending on the amount of customer sales. A “ViewModel” exists for such kind of gel code / bridge code which connects the model and view.
public class CustomerViewModel
    {
        private CustomerModel Customer = new CustomerModel();
        public string TxtName
        {
            get { return Customer.CustomerName; }
            set { Customer.CustomerName = value; }
        }    

        public string TxtAmount
        {
            get { return Customer.Amount.ToString();  }
            set { Customer.Amount = Convert.ToDouble(value); }
        }

        public string CustomerLevelColor
        {
            get
            {
                if (Customer.Amount > 2000)
                {
                    return  "red";
                }
                else if (Customer.Amount > 1500)
                {
                    return "orange";
                }
                else
                {
                    return "yellow";
                }
            }

        }


    }

Step 3: - Consume view model in the view

The next step is to create a strongly typed MVC view where we can consume the view model class. In case you are not aware of MVC strongly typed views please see Learn MVC Day 1, Lab 4

If you see the view it is now decorated or you can say binded with view model class. The most important thing to watch is your view is CLEAN. It does not have decision making code for color coding. Those gel codes have gone inside the view model class. This is what makes VIEW MODEL a very essential component of MVC.

This view can be invoked from a controller which passes some dummy data as shown in the below code.

public class CustomerController : Controller
    {
        //
        // GET: /Customer/

        public ActionResult DisplayCustomer()
        {
            CustomerViewModel obj = new CustomerViewModel();
            obj.Customer.CustomerName = "Shiv";
            obj.Customer.Amount = 1000;
            return View(obj);
        }

    }

Should VM be composed or inherited.

Lot of architects make mistakes of creating a view model class by inheriting. If you see the above view model class it is created by composition and not inheritance.

So why does composition make more sense?. If you visualize we never say “This Screen is a child of Business objects”, that would be a weird statement.

We always say “This screen uses those models”. So it’s very clear it’s a using relationship and not an IS A (child parent) relationship.

Some of the scenarios where inheritance will fail are: -
  • When you DO NOT want some properties from the model in your view
  • When you have a view which uses multiple models.

So do not get lured with the thought of creating a view model by inheriting from a model you can end up in to a LISKOV issue(read about SOLID LISOV from here)

It looks like a duck, quacks like a duck but it is not a duck. It looks like a model has properties like a model but it is not exactly a model.


Image from http://tomdalling.com

Advantages of VM

  • Reusability: - Now that my gel code has come in to a class. I can create the object of that class in any other UI technology (WPF, Windows etc) easily.
  • Testing: - We do not need manual testers to test the UI look and feel now. Because our UI code has moved in to a class library (least denominator) we can create an object of that class and do unit testing. Below is a simple unit test code which demonstrates unit testing of UI look and feel logic. You can see how the color testing is done automatically rather than some manual tester testing it manually.
[TestMethod]
publicvoid TestCustomerLevelColor()
{
CustomerViewModel obj = new CustomerViewModel();
obj.TxtName = "Shiv";
obj.TxtAmount = "1000";
Assert.AreEqual("Red",obj.CustomerLevelColor);
}

Lab 20: - Exception Handling

Introduction

When it comes to exception handling Try…Catch block is the favorite choice among .NET developers. For example in the below code we have wrapped the action code in a TRY CATCH block and if there are exceptions we are invoking an “Error” view in the catch block.

public ActionResult TestMethod()
{
    try
    {
        //....
        return View();
    }
    catch (Exception e)
    {
        //Handle Exception;
        return View("Error");
    }
}

The big problem with the above code is REUSABILITY of exception handling code. MVC provides you to reuse exception handling code at three levels: -

  • Across Actions within same controller: - You can use the “OnException” event where you can write logic which can be reused across “Action” in the same controller.
  • Across any Controller and Actions: - In MVC we can use “FilterConfig” to create an attribute which can be applied to any controller and any action.
  • Across project level: - UsingApplication_Error handler in Global.asax. So when exception is raised from any part of the MVC project it will be routed to this central error handler.

Let’s go step by step to demonstrate all the above 3 ways of handling errors in MVC.

Step 1: - Add a controller and action which raises error

So the first thing is to add a simple controller and action which raises some kind of exception. In the below code you can see we have added a “TestingController” with an action “TestMethod” where we have raised divide by zero exception.

public class TestingController : Controller
{
    public ActionResult TestMethod()
    {
        int x = 0;
        x /= x;
        //Above line leads to DivideByZeroException
        return View();
    }
}

So if you execute the above action you would end up with error as shown in the below figure.

Step 2: - Create an Error view

Now once the error is caught by any of the three above methods we would like throw some error page for display purpose. So let’s create a simple view by the name “Error” as shown in the figure below.

So now that we have an error and also an error view it’s time to do demo’s using all the three ways. So first let’s start with “OnException” i.e. exception code reusability across actions but in the SAME CONTROLLER.

Step 3: - Reuse across Actions within same controller (OnException)

To implement exception go to the “TestingController” and override the “OnException” method as shown in the below code. This method executes when any error occurs in any action of the “TestingController”.

The viewname i.e. “Error” is set in the result property of “filterContext” object as shown in the below code.

protected override void OnException(ExceptionContext filterContext)
{
    Exception e = filterContext.Exception;
    //Log Exception e
    filterContext.Result = new ViewResult()
    {
        ViewName = "Error"
    };
}

Now if you try to invoke the “TestMethod” from the “TestController” you should see the “Error” view as shown in the below figure.

The “OnException” method helps to provide error handling for a specific controller but what if we want to reuse the exception logic across any controller and any action. That’s where we have “FilterConfig” way which is the next thing.

Step 4: - Reuse across any action and any controller (FilterConfig)

In Web.Config simply enable custom error as follows.

<customErrors mode="On">

In App_Start folder open FilterConfig.cs and make sure that HandleErrorAttribute is added to GlobalFilterCollection.

HandleErrorAttribute at global level confirms that exceptions raised by each and every action in all the controllers will be handled.

Note: If you are curious about how to make “HandleErrorAttribute” controller specific or action specific then click here and learn in detail about exception handling in ASP.NET MVC.

If you execute the controller you should get the same error page as shown in step 3.

Step 5: - Error handling across project: - Application_Error

To handle error across MVC project we can use listed to “Application_Error” event in global.asax file and write logic of error handling in the same.

That’s it. A simple demonstration of Exception handling in MVC using all the 3 ways.

Note: We have uploaded a supporting article for our step by step series. It explains in detail exception handling in ASP.NET MVC. If you are willing to read more about it, click here.

Lab 21: - MVC Area

What is Area and Why Area?

In ASP.NET MVC we have a concept of Areas using which we can break our system into modules and organize our project in a better manner.

Assume we have a system which consists of two modules Customer and Order Processing. Normally when we create Asp.Net MVC Project our structure consist of 3 folders – Controllers, Model and Views. So Project structure will be something like this.

As you can see nothing is organized. When it comes to code management it will be very difficult.
Side image is the structure of the project when we had 2 modules, imagine a situation when we have hundreds of modules in single system.

Examples for Areas in real world

Country is divided into states to make development and management easy.

Just like real world we use the concept of area in Asp.Net MVC to break single system into modules. One area represents one module by means of logical grouping of controllers, Models and Views.

How to use Areas?

Step1: - Add Area using the MVC template.

To add area right click your project and say Add>>Area as shown in the below figure.

Step 2: Start pushing relevant files to relevant areas

Put all your related files into respected areas as shown in the below figure. In the below figure you can see I have created two areas “Customer” and “Order”. And each of these areas have their own View , controller and models.

Note: - Area is logical grouping not physical, so no separate dlls will be created for every area.

What is the difference Areas vs. Folders?

One can ask a question why we should use Areas for breaking system into modules when we can just use folders. In simple words, answer for this question is “To avoid of huge manual work”

In order to achieve same functionality using simple folder you have to do following things.

  • Create module structure manually.
  • a. One folder for every module.
    b. Three Folder inside every module folder naming Controller, Models and Views
    c. One Web.Configfile for every module (to store settings related to that module).
  • Create one custom route for every module Controllers.
  • Create Custom View Engine for every module which will search for the view in customized locations instead of predefined locations (Views/{Controllers} or Views/Shared )

Default View Search

Customized View Search

What is for the sixth day?

Final note, you can watch my C# and MVC training videos on various sections like WCF, Silver light, LINQ, WPF, Design patterns, Entity framework etc. By any chance do not miss my .NET/C# interview questions and answers book from www.questpond.com.

For technical training related to various topics including ASP.NET, Design Patterns, WCF, MVC, BI, WPF contact SukeshMarla@gmail.com or visit www.sukesh-marla.com

Are you completely new to MVC?

In case you are completely a fresher I will suggest to start with the below 4 videos which are 10 minutes approximately so that you can come to MVC quickly.

Lab 1: A simple Hello World ASP.NET MVC application

Lab 2: In this lab we will see how we can share data between the controller and the view using view data

Lab 3: In this lab we will create a simple customer model, flourish it with some data, and display it in a view

Lab 4: In this lab we will create a simple customer data entry screen with some validation on the view

Start with MVC 5

In case you want to start with MVC 5 start with the below video Learn MVC 5 in 2 days.

Do not miss MVC interview questions with answers

Every lab I advance in this 7 days series I am also updating a separate article which discusses about important MVC interview questions which are asked during interviews. Till now I have collected 60 important questions with precise answers you can have a look at the same from here

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Authors

Shivprasad koirala
Architect http://www.questpond.com
India India

I am a Microsoft MVP for ASP/ASP.NET and currently a CEO of a small
E-learning company in India. We are very much active in making training videos ,
writing books and corporate trainings. Do visit my site for 
.NET, C# , design pattern , WCF , Silverlight
, LINQ , ASP.NET , ADO.NET , Sharepoint , UML , SQL Server  training 
and Interview questions and answers


Marla Sukesh
Technical Lead ShawMan Softwares
India India
Learning is fun but teaching is awesome.
 
Code re-usability is my passion ,Teaching and learning is my hobby, Becoming an successful entrepreneur is my goal.
 
By professional I am a Corporate Trainer.
I do trainings on WCF, MVC, Business Intelligence, Design Patterns, HTML 5, jQuery, JSON and many more Microsoft and non-Micrsoft technologiees.

Find my profile here

 

My sites

 

@Twitter
@Facebook
Follow on   Twitter   Google+   LinkedIn

Comments and Discussions

 
QuestionTHANKS! PinmemberSaurabharoma16-Sep-14 22:03 
QuestionNeed help!!!!! PinmemberPraveen Kumar U11-Apr-14 6:57 
AnswerRe: Need help!!!!! PinmvpRanjan.D25-Jun-14 1:43 
Although you could completely reuse the BL, DAL and Models of MVC project in WPF but View model in WPF is not just a simple view model in MVC. The view model of a WPF application has necessary bindings to the view controls. Essentially the view model in WPF acts as a controller in MVC.
 
Thanks,
GeneralRe: Need help!!!!! PinprofessionalMarla Sukesh27-Jun-14 19:04 
QuestionMost thankful !!!! Pinmembercs3infomat9-Apr-14 8:50 
QuestionA+ Certification PinmemberNavi Kaura27-Feb-14 16:24 
AnswerRe: A+ Certification Pinprotectorthatraja2-May-14 1:53 
GeneralWaiting for day 6 and 7 Pinmemberdsuraj21-Feb-14 6:28 
GeneralRe: Waiting for day 6 and 7 PinprofessionalMarla Sukesh21-Feb-14 6:35 
GeneralRe: Waiting for day 6 and 7 PinmvpShivprasad koirala24-Jun-14 15:06 
QuestionInteresting PinmemberMahsa Hassankashi15-Feb-14 23:32 
AnswerRe: Interesting PinprofessionalMarla Sukesh16-Feb-14 17:27 
GeneralRe: Interesting PinmemberMahsa Hassankashi17-Feb-14 1:19 
GeneralMy vote of 5 PinmemberslhCoding14-Feb-14 5:19 
GeneralRe: My vote of 5 PinprofessionalMarla Sukesh14-Feb-14 7:33 
GeneralRe: My vote of 5 PinmvpShivprasad koirala14-Feb-14 8:04 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web04 | 2.8.141220.1 | Last Updated 2 Aug 2014
Article Copyright 2014 by Shivprasad koirala, Marla Sukesh
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid