ASP.NET MVC 3 Razor Mobile Ready Website Template & JQuery Mobile Web Template for Visual Studio 2010 SP1


ASP.NET MVC 3 Razor capability with Visual Studio 2010 has rich support for Mobile Devices. But , in Project development we have to keep all CSS, JQuery, JavaScript files to keep in touch , Copy & Paste in Project Folder / Drag & Drop. For Mobile Specific Views keep in mobile Section all Mobile Javascript, mobile.css, JQuery for Mobile files etc..

What If we have a seperate Template in Visual Studio 2010 for Mobile Ready ASP.NET MVC3 Razor Teamplete & JQuery for Mobile like this.

  •                  For JQuery for Mobile ASP.NET & ASP.NET MVC .

  •  On starting project with Mobile Ready ASP.NET MVC 3 Template, we got inbuilt support of MobileViewEngine file which helps to render the desktop MVC web application to mobile browser by detecting the User-Agent.
  • Having help for Mobile Specific View of websites without using any mobile.browser file or WURFL database. No need to write any extra code for mobile browser rendering logic .
  •   Put the simple logic here: (Already Available in ApplicationHelper.cs in the default project installed with template)

publicstaticbool IsSupportedMobileDevice(thisHttpRequestBase request)

{

bool isMobile = request.Browser.IsMobileDevice;

string userAgent = request.UserAgent.ToLowerInvariant();

isMobile = isMobile || (userAgent.Contains( “iphone”)

|| userAgent.Contains(“blackberry”)

|| userAgent.Contains(“mobile”)

|| userAgent.Contains(“windows ce”)

|| userAgent.Contains(“opera mini”)

|| userAgent.Contains(“palm”)

|| userAgent.Contains(“fennec”)

|| userAgent.Contains(“adobeair”)

|| userAgent.Contains(“ripple”)

);

return isMobile;

  • Next , Run the MVC 3 web application & check the view in desktop as well as in Windows Phone.

                                                                                       Desktop –  View

Mobile-  View

  •  To get the Rich Template in Visual Studio 2010 , go to Tools -> Extension Manager -> Search Online Templates -> Select ASP.NET MVC3 Razor Mobile Ready Template & JQuery for Mobile Template.

  • JQuery for Mobile with rich .css & javascript support. No need to download seperately & copy, paste or make seperate template.

  •  Download it & Install in your Visual Studio 2010 & Enjoy building MVC 3 Razor Website Ready for Mobiles with rich support API of HTML 5, JQuery.

  •    Install in Visual Studio 2010 as default template instead of copy & paste in Project/Item Template of Visual Studio 2010 folders.

  •    Lets work with Visual Studio 2010 installed templates of Mobile Ready ASP.NET MVC 3 Razor & JQuery for Mobile with HTML 5.

Building a i-Phone/i-Pad specific Website in ASP.Net with Oracle using JQTouch


In last article, I have described about exploring JQTouch & its themes in building websites for i-Phone,i-Pad & i-Pod(Touch) devices. Lets start with developing mobile ASP.Net 4.0 with Oracle using JQuery & JQTouch plugins for building lucrative Websites for i-Phone, i-Pad, i-Pod(Touch) devices.

Development as usual in Visual Studio 2010 with JQTouch & JQuery plugins to be installed & it’s looked like as:

<%@PageLanguage=”C#”AutoEventWireup=”true”CodeFile=”Default.aspx.cs”Inherits=”Mobile_i_Phone_Default” %

<! doctypehtml>

<htmllang=”en”>

<headrunat=”server”>

<title>JQuery for i-Phone</title>

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

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

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”theme.css”/>

<scripttype=”text/javascript”src=”jquery.js”></script>

<scripttype=”text/javascript”src=”jqtouch.js”></script>

<scripttype=”text/javascript”>

var jQT = $.jQTouch({

icon:’kilo.png’,

statusBar:’black’

});
</script>

</head>

<body>

<divid=”home”>

<divclass=”toolbar”>

<h3>Sri Aurobindo Seva Kendra</h3>

<%— <a href=”#”>Back</a>–%>
</div>

<imgsrc=”../Images/aboutus.jpg”height=”73″alt=”logo”/>

<ul  class=”edgetoedge”>

<liclass=”arrow”><aid=”0″href=”Default.aspx”rel=”external”>Home Page</a></li>

<liclass=”arrow”><aid=”1″href=”#date”>About Us</a></li>

<liclass=”arrow”><aid=”2″href=”Solution.aspx”rel=”external”>Solution</a></li>

<liclass=”arrow”><aid=”3″href=”#date”>Contact Us</a></li>

</ul>

</div>

</body>

</html>

Next, Building code for next external link:

<% @PageLanguage=”C#”AutoEventWireup=”true”CodeFile=”Solution.aspx.cs”Inherits=”Mobile_i_Phone_Solution” %>

<!doctypehtml>

<htmllang=”en”>

<headid=”Head1″runat=”server”>

<title>JQuery for i-Phone</title>

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

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

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”theme.css”/>

<scripttype=”text/javascript”src=”jquery.js”></script>

<scripttype=”text/javascript”src=”jqtouch.js”></script>

<scripttype=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

</head>

<body>

<divid=”departments”>

<divclass=”toolbar”>

<h1>Departments</h1>

<aclass=”button back”href=”Default.aspx”rel=”external”>Back</a>

</div>

<asp:RepeaterID=”Repeater1″runat=”server”DataSourceID=”SqlDataSource1″EnableViewState=”false”>

<HeaderTemplate>

<ulclass=”edgetoedge”>

</HeaderTemplate>

<ItemTemplate>

<liclass=”arrow”>  <ahref=’Doctors.aspx?DepartmentId=<%# Eval(“SGRM000_SGRCD”)%>rel=”external”>

<%# Eval(“SGRM000_LONGDESC”)%>

</a>

</li></ItemTemplate>

<FooterTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

<asp:SqlDataSourceID=”SqlDataSource1″runat=”server”

ConnectionString=”<%$ ConnectionStrings:ConnectionString %>

ProviderName=”<%$ ConnectionStrings:ConnectionString.ProviderName %>

SelectCommand=”SELECT SGRM000_SGRCD, SGRM000_LONGDESC FROM HMS_000SGRM ORDER BY SGRM000_SGRCD”>

</asp:SqlDataSource>

</div>

</body>

</html>

Next , Put second Navigtion for each department according to their DepartmentId as QueryString.

%@PageLanguage=”VB”AutoEventWireup=”false”CodeFile=”Doctors.aspx.vb”Inherits=”Mobile_i_Phone_Doctors” %

<!doctypehtml>

<htmllang=”en”>

<headid=”Head1″runat=”server”>

<title>JQuery for i-Phone</title>

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

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

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”jqtouch.css”/>

<linktype=”text/css”rel=”Stylesheet”media=”screen”href=”theme.css”/>

<scripttype=”text/javascript”src=”jquery.js”></script>

<scripttype=”text/javascript”src=”jqtouch.js”></script>

<scripttype=”text/javascript”>

var jQT = $.jQTouch({

icon:‘kilo.png’,

statusBar:‘black’

});

</script>

</head>

<body>

<divid=”doctors”>

<divclass=”toolbar”>

<h1>Doctors</h1>

<aclass=”button back”href=”Solution.aspx”rel=”external”>Back</a>

</div>

<asp:RepeaterID=”gv_doc”runat=”server”EnableViewState=”false”>

<HeaderTemplate>

<ulclass=”edgetoedge”>

</HeaderTemplate>

<ItemTemplate>

<liclass=”arrow”>  

<%# Eval(“item000_longdesc”)%>

</a>

</li></ItemTemplate>

<FooterTemplate>

</ul>

</FooterTemplate>

</asp:Repeater>

</div>

</body>

</html>

That’s it!! Lets View the Website in i-Phone.

Code-Behind in Visual Basic for Oracle Database:

Imports Oracle.DataAccess.Client

Imports System.Data

Partial ClassMobile_i_Phone_Doctors Inherits System.Web.UI.Page

ProtectedSub Page_Load(ByVal sender AsObject, ByVal e As System.EventArgs) HandlesMe.Load

Dim spreviousparam, sdept, ssql AsString

Dim objds AsNewDataSet

Dim x AsNewconnection

spreviousparam = Request.QueryString(“DepartmentId”)

‘Dim sparameter() As String = Split(spreviousparam, “!”)

‘sdept = sparameter(0)

ssql = “select item000_longdesc from hms_000item where item000_grcd=1 and item000_sgrcd='” & spreviousparam & “‘”

objds = x.GetResultsetds(ssql)

If (objds.Tables(0).Rows.Count > 0) Then

gv_doc.DataSource = objds.Tables(0)

gv_doc.DataBind()

End If

     End Sub

End class

The same application is to be viewed in BlackBerry 9800 .

  • View changes for ASP.Net 4.0 Details View controls in BlackBerry 9800 browser with custom JQTouch theme.

Similarly for default .mobi template view for BlackBerry Browser

  • ASP.Net JQuery Mobile Web in iPad 2 View :

 

 

 

This slideshow requires JavaScript.

 

%d bloggers like this: