Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Introduction to ASP.NET MVC 4 Mobile

DZone's Guide to

Introduction to ASP.NET MVC 4 Mobile

· Mobile Zone
Free Resource

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.

ASP.NET MVC 4 Mobile

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

ASP.NET MV 4 Mobile User Agent Switcher

On Click of Options, you will get User Agent Switcher Options as shown below.

FireFox Agent Switcher

Now Click on Import and paste below .xml file URL and click OK.

http://techpatterns.com/downloads/firefox/useragentswitcher.xml

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.


ASP.NET MVC 4 - View Engine Mobile

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.

ASP.NET MVC 4 - jQuery Mobile

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.

ASP.NET MVC 4 Mobile BundleConfig

The structure of BundleConfig.cs is like below.


ASP.NET MVC 4 Structure

This ends the inroduction of ASP.NET MVC 4 Mobile Features.

 

 

 

 

 

Topics:

Published at DZone with permission of Sumit Dutta, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}