C#.NET, ADO.NET, ASP.NET, JavaScript, JQuery, AngularJS

This article explains how to use CDN in MVC script bundles.

Bundling is a technique used in ASP.NET 4.5 to improve request load time. This technique improves load time by reducing the number of requests to the server and reducing the size of requested assets (such as CSS and JavaScript).

If you are using libraries like JQuery, AngularJS in your application, instead of loading them from your own server you can use the CDN url of these libraries. So, when you run your application in production environment these files will be loaded from CDN itself. If the CDN is not available then these files will be loaded from your server.

How to add CDN in MVC bundles:

First of all enable cdn feature (by default it is set to false).

bundles.UseCdn = true;

Then add your library (JQuery or AngularJS or any other) bundle from CDN. In my example am using JQuery library

var jqueryBundle = new ScriptBundle("~/bundles/jquery", "http://code.jquery.com/jquery-2.0.3.min.js").Include(
"~/Scripts/jquery-{version}.js");
jqueryBundle.CdnFallbackExpression = "window.jquery";
bundles.Add(jqueryBundle);

Use of CdnFallbackExpression is when CDN server is unavailable it loads the file from your server.

In this way we can use CDN in MVC script bundles.

Test CDN bundle in Local Evnironment (Debug Mode):

To test this feature locally you have to run your application in debug="false" mode or you cal also use BundleTable.EnableOptimizations = true;

For more posts on MVC visit : Asp.Net MVC

Razor is the name of the view engine which is introduced by microsoft in mvc3 and they revised it in mvc4. The main use of the view engine is, it processes the ASP.NET content and inserts dynamic content on the browser.

There are two view engines which are maintained by Microsoft.

1 ASPX engine : It works on the <% %> tags and it has important role in the ASP.NET development

2 Razor engine : It works on the regions of content denoted with the @ character.

Let us see the more features of Razor by the following mvc4 application.

Step 1: Create a Empty mvc4 application in Visual Studio and name it as RazorApp.

Step 2: Add a class file to your Model folder and name it as Employee.cs.

now add some properties to our Employee class like below

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

namespace RazorApp.Models

{

    public class Employee

    {

        public int EmployeeID { get; set; }

        public string Name { get; set; }

        public string Designation { get; set; }

        public decimal Salary { get; set; }

    }

}

Step 3: Add a Controller to your application

To add a Controller: Right click on Controller Folder --> select Add --> Select Controller --> Set the name to HomeController --> Select Template as Empty MVC Controller --> and finally click on ADD

Now add the following code to your Controller

using System;

using System.Linq;

using System.Web;

using RazorApp.Models;



namespace RazorApp.Controllers

{
    public class HomeController : Controller

    {
        //Add a Employee

        Employee employee = new Employee
        {
            EmployeeID=1,

            Name="John",

            Designation="Manager",

            Salary=10000M  //decimal representation
        };

        public ActionResult Index()
        {
            return View(employee); //returning our Employee object to View
        }

}

In the above code, We have created a Action method called Index and we populated properties of Employee Object. Also we have passed the Employee to View method so that it is used as the model when the View is rendered.

Step 4: Now we are going to create a View.

To create View Right click on the Index method of your HomeController class --> select Add View --> check the option "Create a strongly-typed view" --> now select Employee class from drop-down list --> Uncheck the "Use layout or master page option" --> finally click on ADD.

Now the newly added View is will appear in the Views/Home folder as Index.cshtml. It will look like

@model RazorApp.Models.Employee

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>       

    </div>

</body>

</html>

Look at the first line. The @model statement declares the type of the model object thar we are passing to the view from our action method. This statement allows us to use the methods, properties and fields of the view model object through @Model. (Example: To access the Name property of object we have to use @Model.Name)

Now, Change your View to look like the following code.

@model RazorApp.Models.Employee

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

</head>

<body>

    <div>

        @Model.Name

    </div>

</body>

</html>

Now run the application and you will see the output as following.

When you type @Model. in your View then the Visual Studio auomatically show the suggestions member names of that particulat Object Model.

And if you want to access the members which are not defined in Emploee class(like @Model.Company) then Visual Studio flag errors.

Now look at the following code in the View

@{
Layout = null;
}

This is the example of Razor code block. Using this we can include c# statements in a view. The statements written inside this block are executed when a view is rendered.

The above code block is used to se the property of the Layout property to null, wchich means we are not using any layout or master page for this particular application.

This is about Razors and i am going to explain "Creating Layout in MVC4" in my NEXT POST.