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

About Anindita
Anindita Basak is working as Big Data Cloud Consultant in Microsoft. Worked in multiple MNCs as Developer & Senior Developer on Microsoft Azure, Data Platform, IoT & BI , Data Visualization, Data warehousing & ETL & of course in Hadoop platform.She played both as FTE & v- employee in Azure platform teams of Microsoft.Passionate about .NET , Java, Python & Data Science. She is also an active Big Data & Cloud Trainer & would love share her experience in IT Training Industry. She is an author, forum contributor, blogger & technical reviewer of various books on Big Data Hadoop, HDInsight, IoT & Data Science, SQL Server PDW & PowerBI.

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

  1. Pingback: facebook5862

  2. Pingback: reverse cell lookup

  3. Pingback: My Homepage

  4. Pingback: Nordsee beliebtes Ziel im Urlaub

  5. meera999 says:

    Anindita,

    This is Meera, I am new to MVC Mobile Web site design. I have created an application in VS2010 MVC4 and published on IIS7 Express. I am able to test for Windows Phones and iPhones using their Emulators. But I am unable to test this with Android.

    I have installed Android SDK and created Android Virtual device and try to browse the site like http://localhost:576 or http://10.10.4.33:576, no luck 😦 i am unable to test my mobile web site. Its saying Invalid URL.

    Could you please let me know how to test the MVC4 mobile web site using Android ?

    Appreciate your help.

    Thanks
    Meera

  6. Pingback: car insurance nz quote

  7. Pingback: funeral directors christchurch

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: