What is MVC (Model View Controller)?
MVC is an architectural pattern which separates the representation
and user interaction. It’s divided into three broader sections, Model,
View, and Controller. Below is how each one of them handles the task.
- The View is responsible for
the look and feel.
- Model represents the real world object and provides data to the View.
- The Controller is responsible
for taking the end user request and loading the appropriate Model and View.
Figure: MVC (Model view controller)
Can you explain the complete flow of MVC?
Below are the steps to control flows in MVC (Model, View, and controller)
architecture:
- All end user requests are first sent to the controller.
- The
controller depending on the request decides which model to load. The
controller loads the model and attaches the model with the appropriate
view.
- The final view is then attached with the model data and sent as a response to the end user on the browser.
Is MVC suitable for both
Windows and Web applications?
The MVC architecture is suited for a web application than Windows. For Window applications, MVP, i.e., “Model
View Presenter” is more applicable. If you are using WPF and Silverlight, MVVM is more suitable due to bindings.
What are the benefits of using MVC?
There are two big benefits of MVC:
- Separation of concerns is achieved as we are moving the code-behind
to a separate class file. By moving the binding code to a separate
class file we can reuse the code to a great extent.
- Automated UI testing is possible because now the behind code (UI
interaction code) has moved to a simple .NET class. This gives us
opportunity to write unit tests and automate manual testing.
Is MVC different from a three layered architecture?
MVC is an evolution of a three layered traditional architecture. Many components of
the three layered architecture are part of MVC. So below is how the mapping goes:
| Functionality | Three layered / tiered architecture | Model view controller architecture |
| Look and Feel | User interface | View |
| UI logic | User interface | Controller |
| Business logic /validations | Middle layer | Model |
| Request is first sent to | User interface | Controller |
| Accessing data | Data access layer | Data Access Layer |
Figure: Three layered architecture
What is the latest version of MVC?
When this note was written, four versions were released of MVC: MVC 1 , MVC 2, MVC 3, and MVC 4. So the latest is MVC
4.
What is the difference between each version of MVC?
Below is a detailed table of differences. But during
an interview it’s difficult to talk about all of them due to time limitation. So I have highlighted
the important differences that you can run through before the interviewer.
| MVC 2 | MVC 3 | MVC 4 |
- Client-side validation
- Templated Helpers Areas
- Asynchronous Controllers
Html.ValidationSummary Helper MethodDefaultValueAttribute in Action-Method- Parameters binding
- Binary data with Model Binders
- DataAnnotations Attributes
- Model-Validator Providers
- New
RequireHttpsAttribute Action Filter
- Templated Helpers
- Display Model-Level Errors
|
- Razor
- Readymade project templates
- HTML 5 enabled templates
- Support for Multiple View Engines, JavaScript, and AJAX
- Model Validation Improvements
|
- ASP.NET Web API
- Refreshed and modernized default project templates. New mobile project template.
- Many new features to support mobile apps
- Enhanced support for asynchronous methods
|
HTML helpers help you to render HTML controls in the view. For
instance if you want to display a HTML textbox on the view , below is
the HTML helper code.
Collapse |
Copy Code
<%= Html.TextBox("LastName") %>
For checkbox below is the HTML helper code. In this way we have HTML helper methods for every HTML control that exists.
Collapse |
Copy Code
<%= Html.CheckBox("Married") %>
Both of them provide the same HTML output, “HTML.TextBoxFor” is strongly typed while “HTML.TextBox” isn’t.
Below is a simple HTML code which just creates a simple textbox with “CustomerCode” as name.
Collapse |
Copy Code
Html.TextBox("CustomerCode")
Below is “Html.TextBoxFor” code which creates HTML textbox using the property name ‘CustomerCode” from object “m”.
Collapse |
Copy Code
Html.TextBoxFor(m => m.CustomerCode)
In the same way we have for other HTML controls like for checkbox we have “Html.CheckBox” and “Html.CheckBoxFor”.
Routing helps you to define a URL structure and map the URL with the controller.
For instance let’s say we want that when a user types “
http://localhost/View/ViewCustomer/”, it goes to the “Customer” Controller and invokes
the
DisplayCustomer action. This is defined by adding an entry in to the
routes collection using the
maproute function. Below is the underlined code which shows how the URL structure and mapping with controller and action is defined.
Collapse |
Copy Code
routes.MapRoute(
"View", "View/ViewCustomer/{id}", new { controller = "Customer", action = "DisplayCustomer",
id = UrlParameter.Optional });
Where is the route mapping code written?
The route mapping code is written in the “
global.asax” file.
Can we map multiple URL’s to the same action?
Yes, you can, you just need to make two entries with different key names and specify the same controller and action.
How can we navigate from one view to
another using a hyperlink?
By using the
ActionLink method as shown in the below
code. The below code will create a simple URL which helps to navigate to
the “Home” controller and invoke the
GotoHome action.
Collapse |
Copy Code
<%= Html.ActionLink("Home","Gotohome") %>
How can we restrict MVC actions to be invoked only by GET or POST?
We can decorate the MVC action with the
HttpGet or
HttpPost attribute to restrict the type of HTTP calls. For instance you can see in the below code snippet the
DisplayCustomer action can only be invoked by
HttpGet. If we try to make HTTP POST on
DisplayCustomer, it will throw an error.
[HttpGet]
public ViewResult DisplayCustomer(int id)
{
Customer objCustomer = Customers[id];
return View("DisplayCustomer",objCustomer);
}
How can we maintain sessions in MVC?
Sessions can be maintained in MVC by three ways: tempdata, viewdata, and viewbag.
What is the difference between tempdata, viewdata, and viewbag?
Figure: Difference between tempdata, viewdata, and viewbag
- Temp data - Helps to maintain data when you move
from one controller to
another controller or from one action to another action. In other words
when you redirect, tempdata helps to maintain data between those
redirects. It internally uses session variables.
- View data - Helps to maintain data when you move from controller to view.
- View Bag - It’s a dynamic wrapper around view data.
When you use
Viewbag type, casting is not required. It uses the
dynamic keyword internally.
Figure: dynamic keyword
- Session variables - By using session variables we can maintain data from any entity to any entity.
- Hidden fields and HTML controls - Helps to
maintain data from UI to controller only. So you can send data from HTML
controls or hidden fields to the controller using POST or GET HTTP
methods.
Below is a summary table which shows the different mechanisms for persistence.
| Maintains data between | ViewData/ViewBag |
TempData | Hidden fields | Session |
| Controller to Controller | No | Yes | No | Yes |
| Controller to View | Yes | No | No | Yes |
| View to Controller | No | No | Yes | Yes |
What are partial views in MVC?
Partial view is a reusable view (like a user control) which can be
embedded inside other view. For example let’s say all your pages of your
site have a standard structure with left menu,
header, and footer as shown in the image below.
Figure: Partial views in MVC
For every page you would like to reuse the left menu, header, and
footer controls. So you can go and create partial views for each of
these items and then you call that partial view in the main view.
How did you create a partial view and consume it?
When you add a view to your project you need to check the “Create partial view” check box.
Figure: Create partial view
Once the partial view is created you can then call the partial view in the main view using
the
Html.RenderPartial method as shown in the below code snippet:
Collapse |
Copy Code
<body>
<div>
<% Html.RenderPartial("MyView"); %>
</div>
</body>
How can we do validations in MVC?
One of the easiest ways of doing validation in MVC is by using data
annotations. Data annotations are nothing but attributes which can be
applied on model properties. For example, in the below code snippet we
have a simple
Customer class with a property
customercode.
This
CustomerCode property is tagged with a
Required data annotation attribute. In other words if this model is not provided customer code, it will not accept
it.
Collapse |
Copy Code
public class Customer
{
[Required(ErrorMessage="Customer code is required")]
public string CustomerCode
{
set;
get;
}
}
In order to display the validation error message we need to use the
ValidateMessageFor method which belongs to the
Html helper class.
Collapse |
Copy Code
<% using (Html.BeginForm("PostCustomer", "Home", FormMethod.Post))
{ %>
<%=Html.TextBoxFor(m => m.CustomerCode)%>
<%=Html.ValidationMessageFor(m => m.CustomerCode)%>
<input type="submit" value="Submit customer data" />
<%}%>
Later in the controller we can check if the model is proper or not by using
the
ModelState.IsValid property and accordingly we can take actions.
Collapse |
Copy Code
public ActionResult PostCustomer(Customer obj)
{
if (ModelState.IsValid)
{
obj.Save();
return View("Thanks");
}
else
{
return View("Customer");
}
}
Below is a simple view of how the error message is displayed on the view.
Figure: Validations in MVC
Can we display all errors in one go?
Yes, we can; use the
ValidationSummary method from the
Html helper class.
Collapse |
Copy Code
<%= Html.ValidationSummary() %>
What are the other data annotation attributes for validation in MVC?
If you want to check string length, you can use
StringLength.
Collapse |
Copy Code
[StringLength(160)]
public string FirstName { get; set; }
In case you want to use a regular expression, you can use
the
RegularExpression attribute.
Collapse |
Copy Code
[RegularExpression(@"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}")]public string Email { get; set; }
If you want to check whether the numbers are in range, you can use the
Range attribute.
Collapse |
Copy Code
[Range(10,25)]public int Age { get; set; }
Sometimes you would like to compare
the value of one field with another field, we can use the
Compare attribute.
Collapse |
Copy Code
public string Password { get; set; }[Compare("Password")]public string ConfirmPass { get; set; }
In case you want to get a particular error message , you can use the
Errors collection.
Collapse |
Copy Code
var ErrMessage = ModelState["Email"].Errors[0].ErrorMessage;
If you have created the model object yourself you can explicitly call
TryUpdateModel in your controller to check if the object is valid or not.
Collapse |
Copy Code
TryUpdateModel(NewCustomer);
In case you want add errors in the controller you can use
the
AddModelError function.
Collapse |
Copy Code
ModelState.AddModelError("FirstName", "This is my server-side error.");
How can we enable data annotation validation on client side?
It’s a two-step process: first reference the necessary jQuery files.
Collapse |
Copy Code
<script src="<%= Url.Content("~/Scripts/jquery-1.5.1.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.js") %>" type="text/javascript"></script>
<script src="<%= Url.Content("~/Scripts/jquery.validate.unobtrusive.js") %>" type="text/javascript"></script>
The second step is to call the
EnableClientValidation method.
Collapse |
Copy Code
<% Html.EnableClientValidation(); %>
What is Razor in MVC?
It’s a light weight view engine. Till MVC we had only one view type, i.e., ASPX. Razor was introduced in MVC 3.
Why Razor when
we already have ASPX?
Razor is clean, lightweight, and syntaxes are easy as compared to
ASPX. For example, in ASPX to display simple time, we need to write:
Collapse |
Copy Code
<%=DateTime.Now%>
In Razor, it’s just one line of code:
Collapse |
Copy Code
@DateTime.Now
So which is a better fit, Razor or ASPX?
As per Microsoft, Razor is more preferred because it’s light weight and has simple syntaxes.
How can you do authentication and authorization in MVC?
You can use Windows or Forms authentication for MVC.
How to implement Windows authentication for MVC?
For Windows authentication you need to modify the
web.config file and set
the authentication mode to Windows.
Collapse |
Copy Code
<authentication mode="Windows"/>
<authorization>
<deny users="?"/>
</authorization>
Then in the controller or on the action, you can use the
Authorize attribute which specifies which users have access to these controllers and actions. Below is the code snippet for
that. Now only the users specified in the controller and action can access it.
Collapse |
Copy Code
[Authorize(Users= @"WIN-3LI600MWLQN\Administrator")]
public class StartController : Controller
{
[Authorize(Users = @"WIN-3LI600MWLQN\Administrator")]
public ActionResult Index()
{
return View("MyView");
}
}
How do you implement Forms authentication in MVC?
Forms authentication is implemented the same way as in ASP.NET. The first step is to set
the authentication mode equal to
Forms. The
loginUrl points to a controller here rather than
a page.
Collapse |
Copy Code
<authentication mode="Forms">
<forms loginUrl="~/Home/Login" timeout="2880"/>
</authentication>
We also need to create a controller where we will check
if the user is proper or not. If the user is proper we will set the cookie value.
Collapse |
Copy Code
public ActionResult Login()
{
if ((Request.Form["txtUserName"] == "Shiv") &&
(Request.Form["txtPassword"] == "Shiv@123"))
{
FormsAuthentication.SetAuthCookie("Shiv",true);
return View("About");
}
else
{
return View("Index");
}
}
All the other actions need to be attributed with the
Authorize attribute so that any unauthorized user making a call to these controllers will
be redirected to the controller (in this case the controller is “Login”) which will do
the authentication.
Collapse |
Copy Code
[Authorize]
PublicActionResult Default()
{
return View();
}
[Authorize]
publicActionResult About()
{
return View();
}
How to implement AJAX in MVC?
You can implement AJAX in two ways in MVC:
Below is a simple sample of how to implement AJAX by using
the “AJAX” helper library. In the below code you can see we have a simple form which is created by using
the
Ajax.BeginForm syntax. This form calls a controller action called
getCustomer. So now the submit action click will be an asynchronous
AJAX call.
Collapse |
Copy Code
<script language="javascript">
function OnSuccess(data1)
{
}
</script>
<div>
<%
var AjaxOpt = new AjaxOptions{OnSuccess="OnSuccess"};
%>
<% using (Ajax.BeginForm("getCustomer","MyAjax",AjaxOpt)) { %>
<input id="txtCustomerCode" type="text" /><br />
<input id="txtCustomerName" type="text" /><br />
<input id="Submit2" type="submit" value="submit"/></div>
<%} %>
In case you want to make AJAX calls on hyperlink clicks, you can use
the
Ajax.ActionLink function as shown in the below code.
Figure: Implement AJAX in MVC
So if you want to create an AJAX asynchronous hyperlink by name
GetDate which calls the
GetDate function in the controller, below is the code for that. Once the controller responds, this data is displayed in the HTML
DIV tag named
DateDiv.
Collapse |
Copy Code
<span id="DateDiv" />
<%:
Ajax.ActionLink("Get Date","GetDate",
new AjaxOptions {UpdateTargetId = "DateDiv" })
%>
Below is the controller code. You can see how the
GetDate function has a pause of 10 seconds.
Collapse |
Copy Code
public class Default1Controller : Controller
{
public string GetDate()
{
Thread.Sleep(10000);
return DateTime.Now.ToString();
}
}
The second way of making an AJAX call in MVC is by using jQuery. In the below code you can see we are making an
AJAX POST call to a URL
/MyAjax/getCustomer. This is done by using
$.post. All this logic is put into a function called
GetData and you can make a call to the
GetData function on a button or a hyperlink click event as you want.
Collapse |
Copy Code
function GetData()
{
var url = "/MyAjax/getCustomer";
$.post(url, function (data)
{
$("#txtCustomerCode").val(data.CustomerCode);
$("#txtCustomerName").val(data.CustomerName);
}
)
}
What kind of events can be tracked in AJAX?
Figure: Tracked in AJAX
What is the difference between ActionResult and ViewResult?
ActionResult is an abstract class while ViewResult derives from
the ActionResult class. ActionResult has several
derived classes like ViewResult, JsonResult,
FileStreamResult, and so on.ActionResult can be used to exploit polymorphism and dynamism. So if you are returning different types of views dynamically,
ActionResult is the best thing. For example in the below code snippet, you can see we have a simple action called
DynamicView. Depending on the flag (IsHtmlView) it will either return
a ViewResult or JsonResult.
Collapse |
Copy Code
public ActionResult DynamicView()
{
if (IsHtmlView)
return View(); else
return Json();
What are the different types of results in MVC?
Note: It’s difficult to remember all the 12 types. But some
important ones you can remember for the interview are
ActionResult,
ViewResult, and
JsonResult. Below is a detailed list for your interest:
There 12 kinds of results in MVC, at the top is the
ActionResult class which is a base class that can have 11 subtypes as listed below:
-
ViewResult - Renders a specified view to the response stream
-
PartialViewResult - Renders a specified partial view to the response stream
-
EmptyResult - An empty response is returned
RedirectResult - Performs an HTTP redirection to a specified URL-
RedirectToRouteResult - Performs an HTTP redirection to a URL that is determined by the routing engine, based on given route data
-
JsonResult - Serializes a given ViewData object to JSON format
-
JavaScriptResult - Returns a piece of JavaScript code that can be executed on the client
-
ContentResult - Writes content to the response stream without requiring a view
-
FileContentResult - Returns a file to the client
-
FileStreamResult - Returns a file to the client, which is provided by a
Stream
FilePathResult - Returns a file to the client
What are ActionFilters in MVC?
ActionFilters help you to perform logic while an MVC action is executing or after an MVC action has executed.
Figure: ActionFilters in MVC
Action filters are useful in the following scenarios:
- Implement post-processing
logic before the action happens.
- Cancel a current execution.
- Inspect the returned value.
- Provide extra data to the action.
You can create action filters by two ways:
- Inline action filter.
- Creating an
ActionFilter attribute.
To create an inline action attribute we need to implement
the
IActionFilter interface. The
IActionFilter interface has two methods:
OnActionExecuted
and
OnActionExecuting. We can implement pre-processing logic or cancellation logic in these methods.
Collapse |
Copy Code
public class Default1Controller : Controller , IActionFilter
{
public ActionResult Index(Customer obj)
{
return View(obj);
}
void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext)
{
Trace.WriteLine("Action Executed");
}
void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext)
{
Trace.WriteLine("Action is executing");
}
}
The problem with the inline action attribute is that it cannot be
reused across controllers. So we can convert the inline action filter to an
action filter attribute. To create an action filter attribute we need to inherit
from
ActionFilterAttribute and implement the
IActionFilter interface as shown in the below code.
Collapse |
Copy Code
public class MyActionAttribute : ActionFilterAttribute , IActionFilter
{
void IActionFilter.OnActionExecuted(ActionExecutedContext filterContext)
{
Trace.WriteLine("Action Executed");
}
void IActionFilter.OnActionExecuting(ActionExecutingContext filterContext)
{
Trace.WriteLine("Action executing");
}
}
Later we can decorate the controllers on which we want the action
attribute to execute. You can see in the below code I have decorated the
Default1Controller with the
MyActionAttribute class which was created in the previous code.
Collapse |
Copy Code
[MyActionAttribute]
public class Default1Controller : Controller
{
public ActionResult Index(Customer obj)
{
return View(obj);
}
}
Can we create our custom view engine using MVC?
Yes, we can create our own custom view engine in MVC. To create our own custom view engine we need to follow
three steps:
Let’ say we want to create a custom view engine where
in the user can type a command like “<DateTime>” and it should
display the current date and time.
Step 1: We need to create a class which implements the
IView interface. In this class we should write the logic of how the view will be rendered in the
render function. Below is a simple code snippet for that.
Collapse |
Copy Code
public class MyCustomView : IView
{
private string _FolderPath; public string FolderPath
{
get { return _FolderPath; }
set { _FolderPath = value; }
}
public void Render(ViewContext viewContext, System.IO.TextWriter writer)
{
string strFileData = File.ReadAllText(_FolderPath);
string strFinal = strFileData.Replace("<DateTime>", DateTime.Now.ToString());
writer.Write(strFinal);
}
}
Step 2: We need to create a class which inherits from
VirtualPathProviderViewEngine
and in this class we need to provide the folder path and the extension
of the view name. For instance, for
Razor the extension is “cshtml”; for aspx, the view extension is
“.aspx”, so in the same way for our custom view, we need to provide an
extension. Below is how the code looks like. You can see the
ViewLocationFormats is set to the
Views folder and the extension is “
.myview”.
Collapse |
Copy Code
public class MyViewEngineProvider : VirtualPathProviderViewEngine
{
public MyViewEngineProvider() {
this.ViewLocationFormats = new string[] { "~/Views/{1}/{0}.myview",
"~/Views/Shared/{0}.myview" }; }
protected override IView CreateView(
ControllerContext controllerContext, string viewPath, string masterPath)
{
var physicalpath = controllerContext.HttpContext.Server.MapPath(viewPath);
MyCustomView obj = new MyCustomView(); obj.FolderPath = physicalpath; return obj; }
protected override IView CreatePartialView(ControllerContext controllerContext, string partialPath)
{
var physicalpath = controllerContext.HttpContext.Server.MapPath(partialPath);
MyCustomView obj = new MyCustomView(); obj.FolderPath = physicalpath; return obj;
}
}
Step 3: We need to register the view in the
custom view collection. The best place to register the custom view engine in the
ViewEngines collection is the
global.asax file. Below is the code snippet for that.
Collapse |
Copy Code
protected void Application_Start()
{
ViewEngines.Engines.Add(new MyViewEngineProvider());
…..
}
Below is a simple output of the custom view written using the commands defined at the top.
Figure: Custom view engine using MVC
If you invoke this view, you should see the following output:
How to send result back in JSON format in MVC
In MVC, we have the
JsonResult class by which we can return back data in JSON format. Below is a simple sample code which returns back
a
Customer object in JSON format using
JsonResult.
Collapse |
Copy Code
public JsonResult getCustomer()
{
Customer obj = new Customer();
obj.CustomerCode = "1001";
obj.CustomerName = "Shiv";
return Json(obj,JsonRequestBehavior.AllowGet);
}
Below is the JSON output of the above code if you invoke the action via the browser.
What is WebAPI?
HTTP is the most used protocol. For the past many years, browser was
the most preferred client by which we consumed data exposed over HTTP.
But as years passed by, client variety started spreading out. We had
demand to consume data on HTTP from clients like mobile,
JavaScript, Windows applications, etc.
For satisfying the broad range of clients REST was the proposed approach. You can read more about REST from
the WCF chapter.
WebAPI is the technology by which you can expose data over HTTP following REST principles.
But WCF SOAP also does the same thing,
so how does WebAPI differ?
| SOAP | WEB API |
| Size | Heavy weight because of complicated WSDL structure. | Light weight, only the necessary information is transferred. |
| Protocol | Independent of protocols. | Only for HTTP protocol |
| Formats | To
parse SOAP message, the client needs to understand WSDL format. Writing
custom code for parsing WSDL is a heavy duty task. If your client is
smart enough to create proxy objects like how we have in .NET (add
reference) then SOAP is easier to consume and call. | Output of WebAPI are simple string messages, JSON,
simple XML format, etc. So writing parsing logic for that is very easy. |
| Principles | SOAP follows WS-* specification. | WebAPI follows REST principles. (Please refer
to REST in WCF chapter.) |
With WCF you can implement REST,
so why WebAPI?
WCF was brought into implement SOA, the intention was never to
implement REST. WebAPI is built from scratch and the only goal is to
create HTTP services using REST. Due to the one point focus for creating
REST service, WebAPI is more preferred.
How to implement
WebAPI in MVC
Below are the steps to implement WebAPI:
Step 1:
Create the project using the WebAPI template.
Figure: Implement WebAPI in MVC
Step 2: Once you have created the project you will notice
that the controller now inherits from
ApiController and you can now
implement POST, GET, PUT, and DELETE methods of the HTTP protocol.
Collapse |
Copy Code
public class ValuesController : ApiController
{
public IEnumerable<string> Get()
{
return new string[] { "value1", "value2" };
}
public string Get(int id)
{
return "value";
}
public void Post([FromBody]string value)
{
}
public void Put(int id, [FromBody]string value)
{
}
public void Delete(int id)
{
}
}
Step 3: If you make an HTTP GET call you should get the below results:
Figure: HTTP
How can we detect that an MVC controller is called by POST or GET?
To detect if the call on the controller is a POST action or a GET action we
can use the
Request.HttpMethod property as shown in the below code snippet.
Collapse |
Copy Code
public ActionResult SomeAction()
{
if (Request.HttpMethod == "POST")
{
return View("SomePage");
}
else
{
return View("SomeOtherPage");
}
}
Bundling and minification helps us improve request load times of a page thus increasing performance.
Web projects always need CSS and script files. Bundling helps us
combine multiple JavaScript and CSS files in to a single entity thus
minimizing multiple requests in to a single request.
For example consider the below web request to a page . 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.
The below scenario can become worse if we have a lot of JavaScript files
resulting in multiple requests, thus decreasing performance. If we can
somehow combine all the JS files into 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).
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.
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;
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
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;
When you implement bundling, minification is implemented by itself.
In other words the steps to implement bundling and minification are the
same.
