ASP.NET MVC 4.0 Mobile Template

Microsoft has released the much awaited ASP.NET MVC 4.0 developer preview and there are lots of features bundle with it. One of the greatest features is a mobile website. Yes, Now with ASP.NET MVC 4.0 you can create mobile site also. So let’s create a simple application and let’s see how it works.

To create mobile site first you need to click File->New Project->ASP.NET MVC 4.0 Web application. Like following.

Hello world ASP.NET MVC 4.0 Mobile site-www.dotnetjalps.com

Now once you click OK it will open a new another dialog like following where we have to choose the Mobile site.

Mobile Application with asp.net mvc 4.0-www.dotnetjalps.com

As you can see in above post I have selected Razor view Once you click it will create a new application like following. As you can see similar structure as normal MVC Application application below.

ASP.NET MVC 4.0 Mobile Structure-http://www.dotnetjalps.com

This view are based on the standard jQuery Mobile. So this can be viewed in any tablet or mobile device. So if you have IPad and IPhone both then it will work on both. You need not to different application for both. see the browser first I have selected standard IPad size of browser.

Ipad

Now lets see how it look in mobile. So I have made my browser same site as mobile. As you can see its working in both.

Mobile View with ASP.NET MVC 4.0-http://www.dotnetjalps.com

If you see the code of view you can see the razor syntax over there. Nothing change in razor syntax. But as you can see in below code you need to use Jquery mobile attributes like data-Role and other stuff which will convert standard HTML into mobile or device compatible website.

<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>

That's it. It’s very easy you can create mobile compatible site in few hours. Hope you like it. Stay tuned for more.. Till then happy programming.

Namaste!!

Shout it
Published Sunday, October 9, 2011 2:52 PM by Jalpesh P. Vadgama

Comments

# re: ASP.NET MVC 4.0 Mobile Template

Friday, October 14, 2011 11:52 AM by Buy mobile phones

very rarely i have seen this type of nice articles online, it is really nice and i really enjoyed the way how you explained and classified it further. and i really like the pictorials you have used, they are very reasonable for this article.

# re: ASP.NET MVC 4.0 Mobile Template

Monday, November 14, 2011 9:27 PM by Moncler Jackets

see the razor syntax over there. Nothing change in razor syntax. But as you

# re: ASP.NET MVC 4.0 Mobile Template

Wednesday, November 23, 2011 7:04 AM by scott_t_ct

Hey I want to move the login button in the header section to the right side, and put a back button on all but the home page, but when I try this it causes an overlap error.

# re: ASP.NET MVC 4.0 Mobile Template

Sunday, December 11, 2011 12:21 AM by Jalpesh P. Vadgama

@Scott- What kind of error you are getting?Can you please provide more details

# re: ASP.NET MVC 4.0 Mobile Template

Monday, May 7, 2012 3:42 AM by developerjigar

Very nice article. Had completed one mobile based web application and it is really nice to work with such templates.

People can enjoy rich web application on mobile device with full feelings of native features..