MVC FAQs 3

So how do we implement bundling in MVC?

Open BundleConfig.cs from the App_Start folder.

In BundleConfig.cs, add the JS files you want bundle into a single entity in to the bundles collection. In the below code we are combining all the javascript JS files which exist in the Scripts folder as a single unit in to the bundle collection.

 Collapse | Copy Code

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

Below is how your BundleConfig.cs file will look like:

 Collapse | Copy Code

public  class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/Scripts/MyScripts").Include(
           "~/Scripts/*.js"));
        BundleTable.EnableOptimizations = true;
    }
}

Once you have combined your scripts into one single unit we then to include all the JS files into the view using the below code. The below code needs to be put in the ASPX or Razor view.

 Collapse | Copy Code

<%= Scripts.Render("~/Scripts/MyScripts")  %>

If you now see your page requests you would see that script request is combined into one request.

How can you test bundling in debug mode?

If you are in a debug mode you need to set EnableOptimizations to true in the bundleconfig.cs file or else you will not see the bundling effect in the page requests.

 Collapse | Copy Code

BundleTable.EnableOptimizations = true;

Explain minification and how to implement it

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.

 Collapse | Copy Code

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

After implementing minification the JavaScript code looks like below. You can see how whitespaces and comments are removed to minimize file size, thus increasing performance.

 Collapse | Copy Code

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

How do we implement minification?

When you implement bundling, minification is implemented by itself. In other words the steps to implement bundling and minification are the same.  

Explain Areas in MVC?

Areas help you to group functionalities in to independent modules thus making your project more organized. For example in the below MVC project we have four controller classes and as time passes by if more controller classes are added it will be difficult to manage. In bigger projects you will end up with 100’s of controller classes making life hell for maintenance.

 

If we can group controller classes in to logical section like “Invoicing” and “Accounting” that would make life easier and that’s what “Area” are meant to.

You can add an area by right clicking on the MVC solution and clicking on “Area” menu as shown in the below figure.

In the below image we have two “Areas” created “Account” and “Invoicing” and in that I have put the respective controllers. You can see how the project is looking more organized as compared to the previous state. 

 

Explain the concept of View Model in MVC?

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.

 Collapse | Copy Code

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 indicationwhich 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 Model	Customer ViewModel
CustomerName	TxtCustomerName
Amount	TxtAmount
	CustomerBuyingLevelColor

What kind of logic view model class will have?

As the name says view model this class has the gel code or connection code which connects the view and the model.
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.