New Features in MVC 4.0

In MVC 4.0 are the following new features:

Mobile Development
Bundling
Oauth Providers

NOTE: All of the following featurs of MVC 4.0 are only in Visual Studio 2012 and above versions.

Mobile Development

Earlier if you want to customize the screen for mobile devices then we need media querys.

@media only screen and (max-width: 850px) {
}

But if you want the same look and feel of mobile device then we do not have anything in MVC to do that. We need to wrote our own mobile detection code but now MVC provides a different platform for mobile development.

Suppose you have the file "home.cshtml" in the Desktop. If you want a different page for mobile devices then you need to add a file "home.Mobile.cshtml". The "mobile" is a keyword for when you open the home page in a mobile device, the "home.mobile.cshtml" page will be automatically hit. You can also create a different master page, like "_layout.Mobile.cshtml".

Now if you want a different layout for iPhone then you need to put the following code in the "Global.asax" in the "Application_Start" function. The following function will detect that a mobile request is coming from an iPhone browser. If it is then it will automatically redirect to the "home.iPhone.html" page.

DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("iPhone")
{
ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf
("iPhone", StringComparison.OrdinalIgnoreCase) >= 0)
});

You can build a mobile page in MVC using mobile jQuery and HTML5.

Bundling

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

How to use bundles

In Visual Studio 2012 in the "App_Start\BundleConfig.cs" file there is one method, "RegisterBundles", that is used to create, register and configure bundles. The following code shows a portion of the RegisterBundles method.

public static void RegisterBundles(BundleCollection bundles)
{
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
// Code removed for clarity.
}

Now the code above bundles "/bundles/jquery" in which all the files with file names matching "Scripts/jquery-{version}.js" are added, for example "Scripts/jquery-1.7.2.js".

If you want to add a js file from the CDN then you just need to add "bundles.UseCdn=true".

public static void RegisterBundles(BundleCollection bundles)
{
bundles.UseCdn = true; //enable CDN support
//add link to jquery on the CDN
var jqueryCdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery",
jqueryCdnPath).Include(
"~/Scripts/jquery-{version}.js"));
}

The code above does both for you. Create a bundle and add a CDN file.

Creating a Bundle

The bundle class "Include" method takes an array of strings, where each string is a virtual path to a resource. The following code from the RegisterBundles method in the App_Start\BundleConfig.cs file shows how multiple files are added to a bundle:

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css"
))

In MVC 3.0 if you want to add a specified number to the files of CSS and js files in "layout.cshtml" (master file in MVC) then you must write many lines of code to include that and when that page loads in the browser then it will require a lot of time to load.

Now in MVC4.0 Visual Studio 2012 provides bundles files ("App_Start\BundleConfig.cs") externally to add to the CSS and js files. Bundles improve loading time of the page and the layout file is also very clean.

<!DOCTYPE html>
<html lang="en">
<head>
@* Markup removed for clarity.*@
@Styles.Render("~/Content/themes/base/css", "~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
@* Markup removed for clarity.*@
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>

@Styles.Render("~/Content/themes/base/css", "~/Content/css") This line render the all the n of CSS whose bundle name is Content/themes/base/css and same for js.

OAuth Providers

An ASP.NET MVC 4 web application that enables users to log in with credentials from an external provider. There are various OAuth providers in MVC4.0 , such as Facebook, Twitter, Microsoft, Google and so on.

Enabling these credentials in your web sites provides a significant advantage because millions of users already have accounts with these external providers.

Two steps for enabling OAuth features in your website:

When you create an MVC 4 web application, the project is created with a file named AuthConfig.cs in the App_Start folder. The AuthConfig file contains code to register clients for external authentication providers. By default, this code is commented in AuthConfig.cs.
1. public static class AuthConfig
2. {
3. public static void RegisterAuth()
4. {
5. // To let users of this site log in using their accounts from other sites such as Microsoft, Facebook, and Twitter,
6. // you must update this site. For more information visit http://go.microsoft.com/fwlink/?LinkID=252166
8. //OAuthWebSecurity.RegisterMicrosoftClient(
9. // clientId: "",
10. // clientSecret: "");
12. //OAuthWebSecurity.RegisterTwitterClient(
13. // consumerKey: "",
14. // consumerSecret: "");
16. //OAuthWebSecurity.RegisterFacebookClient(
17. // appId: "",
18. // appSecret: "");
20. //OAuthWebSecurity.RegisterGoogleClient();
21. }
22. }
Register your website; if you want to use any of the preceding providers then just uncomment the code and register your website. What does "register your website" mean exactly and where to do that?

Facebook
Google
Microsoft
Twitter