A Sample of Mobile Web 2.0 with HTML5 Boilerplate, CSS3 Media Query, JQuery Mobile,Mobile Ajax/Dojo.


Mobile 2.0 is impossible to think without JQuery Mobile/JQTouch/Sencha/Mobile Ajax with cross-platform tools support like Phonegap, RhoMobile or Titanium  or Monotouch. Since for simply development of Mobile Web as hybrid or native (with Phonegap) keeping business logic perfect as desktop web are quite easy. Lets demonstrate a live Mobile Web 2.0 sample built in JQuery Mobile 1.0 RC, HTML5, CSS media queries, ASP.NET Nuget packages.

Used  simply databinding features from ASP.NET & bind the JQuery Mobile plugins. Check the following Code:

<html xmlns=”http://www.w3.org/1999/xhtml”&gt;

<head runat=”server”>

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

<meta name=”viewport”content=”width=device-width”/>

<link rel=”Stylesheet”media=”screen”href=”JQuery Mobile/jquery.mobile-1.0.1.min.css”/>

<link rel=”stylesheet”media=”screen”href=”styles/style.css”/>

<link rel=”stylesheet”media=”screen”href=”styles/jquery.datepick.css”/>

<script type=”text/javascript”src=”JQuery Mobile/jquery.js”></script>

<script type=”text/javascript”src=”JQuery Mobile/jquery.mobile-1.0.1.min.js”></script>

<script type=”text/javascript”src=”scripts/jquery.datepick.js”></script>

<script type=”text/javascript”>

$(

function () {

$(

‘#DateID’).datepick({ dateFormat: ‘yyyy/mm/dd’ });

});

</script>

</head>

<body>

<formid=”form1″runat=”server”>

<headerdata-role=”header”><h1>The Institute of Neuro Sciences</h1></header>

<divclass=”content”data-role=”content”>

<navdata-role=”navbar”>

<ul>

<li><ahref=”Default.aspx”data-role=”button”data-icon=”home”data-iconpos=”left”>Home</a></li>

<li><ahref=”IPD.aspx”data-role=”button”data-icon=”plus”data-iconpos=”left”>IPD Section</a></li>

<li><ahref=”contact.aspx”data-role=”button”data-icon=”search”data-iconpos=”left”>Contact</a></li>

</ul>

</nav>

<h3>The Outdoor Patients’ Department</h3>

</div>

Select the Department :

<asp:DropDownListID=”ddlDepartments”runat=”server”AutoPostBack=”true”

OnSelectedIndexChanged=”ddlDepartments_SelectionChanged”>

</asp:DropDownList>

Select Your Name:

<asp:DropDownListID=”ddlName”runat=”server”></asp:DropDownList>

Enter The Date :

<asp:TextBoxID=”DateID”runat=”server”/>

<asp:ButtonID=”DisplayDoctorsVisit”  runat=”server”Text=”Display Patients’ Details”OnClick=”cmdbutton_Click”/>

<div>

<center>

<asp:GridViewID=”GridView2″runat=”server”AutoGenerateColumns=”False”

CellPadding=”4″

ForeColor=”Black”GridLines=”None”>

<AlternatingRowStyleBackColor=”White”ForeColor=”#284775″/>

<Columns>

<asp:BoundFieldDataField=”docname”HeaderText=”Doctor Name”ReadOnly=”true”SortExpression=”docname”/>

<asp:BoundFieldDataField=”pname”HeaderText=”Patient Name”ReadOnly=”true”SortExpression=”pname”/>

<asp:BoundFieldDataField=”ONLINE100_QUEUE”HeaderText=”Queue”ReadOnly=”true”SortExpression=”ONLINE100_QUEUE”/>

<asp:BoundFieldDataField=”online100_shift”HeaderText=”shift”ReadOnly=”true”SortExpression=”online100_shift”/>

</Columns>

<EditRowStyleBackColor=”#999999″/>

<FooterStyleBackColor=”#5D7B9D”Font-Bold=”True”ForeColor=”White”/>

<HeaderStyleBackColor=”#000000″Font-Bold=”True”ForeColor=”White”/>

<PagerStyleBackColor=”#284775″ForeColor=”White”HorizontalAlign=”Center”/>

<RowStyleBackColor=”#F7F6F3″ForeColor=”#333333″/>

<SelectedRowStyleBackColor=”#E2DED6″Font-Bold=”True”ForeColor=”#333333″/>

<SortedAscendingCellStyleBackColor=”#E9E7E2″/>

<SortedAscendingHeaderStyleBackColor=”#506C8C”/>

<SortedDescendingCellStyleBackColor=”#FFFDF8″/>

<SortedDescendingHeaderStyleBackColor=”#6F8DAE”/>

</asp:GridView>

</center>

</div>

</form>

<footerdata-role=”footer”data-position=”fixed”><h3>All Rights Reserved</h3></footer>

</body>

</html>

  • JQuery Mobile DatePicker running in Windows Phone 7.5 Mango emulator.

Native UI controls support in Smartphones for Mobile Web.

Simply tested in iPad 2 .

  • JQuery Mobile , Sencha Touch , JQTouch, Dojo,Mobile Ajax CDN helps to update rich Mobile View with cross-browser & cross-platform support. 

 

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.

11 Responses to A Sample of Mobile Web 2.0 with HTML5 Boilerplate, CSS3 Media Query, JQuery Mobile,Mobile Ajax/Dojo.

  1. meera999 says:

    Hi Anindita,

    How are you doing?
    This is Meera. I have started creating Mobile Web Site with your help. I have got one more issue in my code. I have designed site with my dropdowns and buttons, whenever user selects options from dropdown and HIT button it has to show grid below to these.

    The code i have written its not calling button event handler in OnClick. I have tried every thing by debugging code….etc 😦 no luck.

    Please find my code added below. Please help me how to call btnGetDetail_Click.

    Accounts
    Account Name :

    Account Type : 

    Active : 

    <asp:Label ID="lblAcctName" runat="server" Text='’>

    <asp:Label ID="lblAcctType" runat="server" Text='’>

    <asp:Label ID="lblAccountingType" runat="server" Text='’>

    <asp:LinkButton ID="lnkAccountSummary" runat="server" Text="Summary" CommandName="AccountSummary"
    CommandArgument='’ >

    • meera999 says:

      Please find the code….

      Tas Accounts
      Account Name :

      Account Type : 

      Active : 

      <asp:Label ID="lblAcctName" runat="server" Text='’>

      <asp:Label ID="lblAcctType" runat="server" Text='’>

      <asp:Label ID="lblAccountingType" runat="server" Text='’>

      <asp:LinkButton ID="lnkAccountSummary" runat="server" Text="Summary" CommandName="AccountSummary"
      CommandArgument='’ >

  2. meera999 says:

    Anindita,

    Please help me how to call button event handler?

    Thanks
    Meera

    • imcuteani says:

      Hi Meera,

      For Button event click handler , you need to write code in C# on code-behind. Please put the following code in your code-behind: The SQL Code is modified for SQL connection . Please change it according to your system SQL Server settings in web.config.

      public partial class test : System.Web.UI.Page
      {
      protected void Page_Load(object sender, EventArgs e)
      {
      if (!IsPostBack)
      {
      ddlDepartments.AppendDataBoundItems = true;
      String strConnString = ConfigurationManager.ConnectionStrings[“HMSConnectionString”].ConnectionString;
      String strQuery = “SELECT SGRM000_SGRCD, SGRM000_LONGDESC FROM HMS_000SGRM ORDER BY SGRM000_SGRCD”;

      SqlConnection con = new SqlConnection(strConnString);
      SqlCommand cmd = new SqlCommand();
      cmd.CommandType = CommandType.Text;
      cmd.CommandText = strQuery;
      cmd.Connection = con;

      try
      {
      con.Open();
      ddlDepartments.DataSource = cmd.ExecuteReader();
      ddlDepartments.DataTextField = “SGRM000_LONGDESC”;
      ddlDepartments.DataValueField = “SGRM000_SGRCD”;
      ddlDepartments.DataBind();
      }
      catch (Exception ex)
      {
      throw ex;
      }
      finally
      {
      con.Close();
      con.Dispose();
      }
      }

      DisplayDoctorsVisit.Click += new EventHandler(this.cmdbutton_Click);
      }

      protected void ddlDepartments_SelectionChanged(object sender, EventArgs e)
      {
      string str = ConfigurationManager.ConnectionStrings[“HMSConnectionString”].ConnectionString;
      SqlConnection conn = new SqlConnection(str);
      DataTable dt = new DataTable(“tbl”);

      using (conn)
      {
      conn.Open();
      SqlCommand comm = new SqlCommand(“select item000_longdesc from hms_000item where item000_grcd=1 and item000_sgrcd=” + ddlDepartments.SelectedValue, conn);
      SqlDataAdapter da = new SqlDataAdapter(comm);
      da.Fill(dt);
      }

      ddlName.DataSource = dt;
      ddlName.DataTextField = “ITEM000_LONGDESC”;
      ddlName.DataValueField = “ITEM000_LONGDESC”;
      ddlName.DataBind();

      }

      protected void cmdbutton_Click(object sender, EventArgs e)
      {
      createDataView();
      GridView2.PageIndex = 0;
      }

      protected void createDataView()
      {
      try
      {
      string strConnection = ConfigurationManager.ConnectionStrings[“HMSConnectionString”].ConnectionString;

      SqlConnection sqlConnection = new SqlConnection(strConnection);

      sqlConnection.Open();

      string strSQL = “SELECT HMS_000ITEM.ITEM000_LONGDESC AS docname, hms_000pinf$.pinf000_FName + ‘ ‘ + hms_000pinf$.pinf000_LName AS pname, hms_100online$.online100_queue, hms_100online$.online100_shift FROM HMS_000ITEM INNER JOIN hms_100online$ ON HMS_000ITEM.ITEM000_SGRCD = hms_100online$.online100_docdept AND HMS_000ITEM.ITEM000_ITEMCD = hms_100online$.online100_docid INNER JOIN hms_000pinf$ ON hms_100online$.online100_regno = hms_000pinf$.pinf000_regno WHERE (HMS_000ITEM.ITEM000_GRCD = 1) AND (item000_longdesc=@item000_longdesc) AND (hms_100online$.online100_date = @online100_date ) AND (hms_100online$.online100_delmark = ‘N’) ORDER BY hms_100online$.online100_shift DESC, hms_100online$.online100_queue”;

      SqlCommand sqlcommand = new SqlCommand(strSQL, sqlConnection);
      sqlcommand.Parameters.AddWithValue(“@ITEM000_LONGDESC”,ddlName.SelectedValue);
      sqlcommand.Parameters.AddWithValue(“@online100_date”, DateID.Text);

      SqlDataAdapter sqldataadapter = new SqlDataAdapter();
      sqldataadapter.SelectCommand = sqlcommand;
      DataTable dtProducts = new DataTable();

      sqldataadapter.Fill(dtProducts);
      GridView2.DataSource = dtProducts.DefaultView;
      GridView2.DataBind();

      }
      catch (SqlException ex)
      {
      }

      }
      }

      Thanks,
      Anindita

  3. meera999 says:

    Thank you very much Anindita. Finally i made the POC Appreciate your help.

    Initially i am adding my webform.aspx to View folder and i am unable to add the codebehind file to this page. Then I have added this page outside of the View folder and i am able to do whatever i want.

    Appreciate your help, you made my DAY!!!

    Thanks
    Meera

  4. meera999 says:

    Anindita,

    How are you?
    This is Meera again.

    My client wants to build a Mobile App for .net site built on VS2010. This Mobile App has to be compatabile for iPhone, iPad, Android and Android Pads.

    So are there any tools which i can use my existing C# code to design Mobile App for my client.

    Are there any tools in VS2010 to design Mobile Apps.

    Please let me know your suggestion on this.

    Appreciate your help.

    Thanks
    Meera

    • imcuteani says:

      Hi Meera,

      The asp.net web build in VS 2010 already compatible for mobile platforms. Only you need to add the adaptive rendering by using CSS3 media queries.

      Next , you can add JQuery Mobile scripts/ JQTouch to optimize for Mobile devices.

      more details: https://anindita9.wordpress.com/2011/11/15/building-a-i-phonei-pad-specific-website-in-asp-net-with-oracle-using-jqtouch/

      Thanks,
      Anindita

      • meera999 says:

        Hi Anindita,

        Thank you very much for your reply.
        But I want to build a Mobile App not Mobile Website. We have created Mobile Web site using ASP.NET MVC4 mobile applications. Now he wants to create a Mobile App.

        Could you please let me know how to design Mobile App? or which tool i have to use.

        Appreciate your help.

        Thanks
        Meera

      • imcuteani says:

        Hi,

        If you want to create native apps , then according to your platform of smartphones, you need to choose code editors & download emulators.

        For Android : Download Eclipse for Java
        Emulator: Android ADT plugin for eclipse
        details: developer.android.com
        Platform: Java

        For Windows Phone: Microsoft Visual Studio 2010 ultimate or Visual Studio 2010 Express for Windows Phone.
        SDK & Emulator: Windows Phone 7.5 SDK
        Platform: XAML & C#

        iPhone /iPad: Xcode 4.2 for OS X lion
        iOS SDK 5
        Platform: Objective C/cocea
        C# for Monotouch iOS SDK

        details: http://developer.apple.com

        BlackBerry: Code Editor: BlackBerry Plugin for Eclipse
        SDK & Emulators: BlackBerry RIM Emulators 9810 etc.
        Platform: Java, J2ME

        Download those SDK s & Code editors & start developing apps. In my blog you will find a lots of references regarding native smartphone apps development.

        Thanks,
        Anindita

      • meera999 says:

        Thank you very much Anindita.

        Appreciate your help.

        Thanks
        Meera

  5. Pingback: smart pre paid mobile

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: