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.
Anindita's Blog 
You must be logged in to post a comment.