In this article I will give you brief introduction on ASP.NET MVC 4 mobile features.
You need to Install ASP.NET MVC 4 if you don't have.
Let's start the exercise:
Step 1: Create ASP.NET MVC 4 WebApplication.
Step 2: Select project template and select ASPX or Razor as View Engine. I have selected ASPX.
Step 3: Now compile and run the application, in different devices. You will notice the layout remains intact.
Step 4: One can not have different device to test. To test in different agent, you can download FireFox User Agent Switcher
Download above will get limited options of Agent Switcher.
To get complete list of Agent Switcher, go to Tools -> Default User Agent -> User Agent Switcher -> Options
On Click of Options, you will get User Agent Switcher Options as shown below.
Now Click on Import and paste below .xml file URL and click OK.
You will get all full list of User Agent Switcher. Now you can try on different OS, device and browser.
Step 5: Now expand Views folder and all the folders inside it. You will get files withe .cshtml if you have selected Razor View Engine and .aspx if your have select ASPX View Engine.
The above is the only difference you will get if you select Razor or ASPX View Engine.
Step 6: Now open Scripts folder you will notice jquery.mobile-1.0.js and jquery.mobile-1.0.min.js.
As you see the jquery mobile version is 1.0. At the time of writing this post 1.1 is already released. You can download latest version of jquery mobile from here
Step 7: Open _Layout.cshtml or Site.master, you will notice
<!DOCTYPE html> <meta charset="utf-8" />
Above notations are of HTML5.
Next thing to look upon in _Layout.cshtml or Site.master is
<meta name="viewport" content="width=device-width" />
The page area fits in the viewport. One can set the width and height, width and height can be larger or smaller than device's screen. A mobile website should start with the device screen's width and height without zooming in or out.
Initial scale of viewport should be 1 which means viewport area:viewport visible
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Step 8: Now, you will notice these line in _Layout.cshtml.
@Styles.Render("~/Content/mobileCss", "~/Content/css") @Scripts.Render("~/bundles/modernizr") @Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") @RenderSection("scripts", required: false) And Site.Master will contain below lines. <%: Styles.Render("~/Content/mobileCss", "~/Content/css") %> <%: Scripts.Render("~/bundles/modernizr") %> <%: Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile") %>
Above lines loads the css and jss specified in BundleConfig.cs placed in App_Start.
The structure of BundleConfig.cs is like below.
This ends the inroduction of ASP.NET MVC 4 Mobile Features.