ASP.NET MVC Razor Template with JQuery Mobile Web for Android, Windows Phone , BlackBerry


ASP.NET MVC 3 Razor applications with JQuery Mobile is pretty straightforward for developing rich web for mobile. This article demonstrates to build asp.net mvc 3 Razor applications with JQuery , HTML 5 & CSS 3 templates running in smartphones . Build an application for ASP.NET MVC Razor application in Visual Studio 2010 & add the following JQuery template in _layout.cshtml:

<!DOCTYPEhtml>

<html>

<head>

<title>@ViewBag.Title</title>

<meta name=”apple-mobile-web-app-capable”content=”yes”/>

<meta name=”viewport”content=”width=device-width; initial-scale=1.0″/>

<link rel=”stylesheet”href=”@Url.Content(http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css&#8221;)”/>

<scripttype=”text/javascript”src=”@Url.Content(http://code.jquery.com/jquery-1.5.2.min.js&#8221;)”></script>

<scripttype=”text/javascript”src=”@Url.Content(http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js&#8221;)”></script>

</head>

<body>

@RenderBody()

</body>

</html>

Next , Put the code in Index.cshtml for SmartPhone View:

@model IEnumerable<MVC3_JQueryMobile.Models.HMS_000ITEM>

@{

ViewBag.Title = “Index”;

Layout = “~/Views/Shared/_Layout.cshtml”;

}

<div data-role=”page”>

<div data-role=”header”>

<h1> Health Record </h1>

</div>

<div data-role=”content”> 

<ul data-role=”listview”>

<li>@Html.ActionLink(“Patients Record”, “Index”, “Home”)</li>

<li>@Html.ActionLink(“Daily Health Record”, “Index”, “Category”)</li>                   

<li>@Html.ActionLink(“View Report”, “Index”, “Expense”)</li>

</ul>

</div>

<div data-role=”footer”>     

<nav data-role=”navbar”>

<ul>

<li><ahref=”#”class=”ui-btn-active”>Patient Details</a></li>

<li><ahref=”#”>Report Chart</a></li>

<li><ahref=”#”>Contact Us</a></li>

</ul>

</nav>

</div>

Check out the output in Android & Windows Phone 7.1 & BlackBerry 9800:

  •    Check in BlackBerry 9800 Browser :

  • Testing Website in Internet Explorer 9 for Windows Phone 7.1 Mango :

Advertisements
%d bloggers like this: