ASP.NET MVC 4 introduced a Mobile Site template that leverages the jQuery Mobile to serve up views tailored for consumption on Mobile devices. Even though the latest ASP.NET site templates have responsive CSS, the mobile views aren’t particularly suited for data intensive views. It would be better if we had views dedicated to handle smaller mobile screens and be mindful of touch based navigation.
You can either create a brand new site specifically targeted for Mobile (if you are starting a green-field project) or you can add Mobile views to an existing MVC project with advanced features like view switching between Mobile and Desktop views.
Today, we are going to look at building a Mobile site ground up, so we’ll start with the mobile site template in Visual Studio
Creating a new Mobile Site
Let’s get started with our Mobile Site.Step 1: Fire up Visual Studio and select New Project. Select the MVC4 Template, give the project a name (e.g. GettingStartedMv4Mobile).
Step 2: From the Project Template dialog, select Mobile Application, and Click OK to create the base project.
Step 3: Run the application (Hit F5). When you reduce the browser to the approximate size of a Mobile Screen, you will see the following
Now that’s a pretty impressive starter template. Next, let’s dig in as see what’s under the hood.
Under the Hood – The Layout
First let’s look at the _Layout.cshtml. At the outset everything looks normal but on a closer look we can see some unique things. These are bold and italicized below.
The ViewPort Tag – First thing of course is the viewport tag that sets the content width to the reported device-width. Typical behavior for mobile browsers is to zoom the entire page in the small viewport if this tag is not specified.
The Mobile Specific CSS – Next we see that we have a style bundle that’s referred to as the mobileCss. If we refer to the App_Start\BundleConfig.cs, we will see the following classes are being bundled in the mobileCss bundle
The HTML5 ‘data-‘ tags – Next when we move on, we notice that the first <div> in the <body> has an attribute called ‘data-role’ with its value set to ‘page’ and another attribute called ‘data-theme’ with its value set to ‘b’. What are these ‘data-‘ tags? Well as per HTML5 specs attributes on HTML elements prepended with ‘data-‘ will be considered as valid HTML and can be used to define additional meta information. In our case here, these two tags are used by jQuery mobile to setup the correct style templates. You can experiment around with data-theme values of a,b,c etc. and see how things change.
The next div tag has a ‘data-role’ set to ‘header’. This tells jQuery mobile that the div should be formatted as a header so using the specified the div is positioned to the top of the screen with the title text in the center and height set to a mobile appropriate height. In our case, we get the black header on top with the white text.
The final div tag of interest has a ‘data-role’ set to content that is used as the container for the rest of the components (that will be specified in the Index.cshtml).
Digging Deeper in HTML Markup – The Index.cshtml
Now that we’ve looked at how the Page and the Header was setup, let us see how we got the ‘fancy’ navigation list. The markup is as follows@{
ViewBag.Title = "Home Page";
}
<h2>@ViewBag.Message</h2>
<p>
To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">Navigation</li>
<li>@Html.ActionLink("About", "About", "Home")</li>
<li>@Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
As we can see now, there are two data-role attributes in play here. In fact the ‘navigation list’ is nothing but a <ul> that has a data-role set to listview. This tells jQuery Mobile that it should render the <ul> as a list and setup the associated styles as per the theme selected earlier.
Next we see a ‘data-inset’ attribute that’s set to ‘true’. This actually provides an additional padding and rounded edges around the list. If it is set to false, the list would occupy the entire width without any left or right padding and it would not have rounded corners as shown below.
Finally the first <li> is attributed the data-role of list-divider. This essentially means that the list item is not clickable/tappable and the ‘next-arrow’ on the right hand side is not shown for it.
Similarly if we look in the Login.cshtml, we will see the required data-role and other data-* annotations that give it the following look and feel.
Conclusion
To wrap up, we saw how we can leverage the built in ASP.NET MVC 4 Project template for Mobile Sites to quickly get started with a mobile dedicated website.In the next part, we will see how we can add Mobile specific pages to an existing ASP.NET Web Site and seamlessly transition between mobile and desktop views.
Download the entire source code at Github
No comments:
Post a Comment