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”)”/>
<scripttype=”text/javascript”src=”@Url.Content(“http://code.jquery.com/jquery-1.5.2.min.js”)”></script>
<scripttype=”text/javascript”src=”@Url.Content(“http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js”)”></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 :
