How to create Home page with Menu Bar and List View with help of JQuery Mobile

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="Default" %>

<!DOCTYPE html>

<html>

<head runat="server">

    <title>Home Page</title>

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css" />

    <script src="JScritpt/jquery-1.7.2.js" type="text/javascript"></script>

    <script src="JScritpt/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

    <link href="new.css" rel="stylesheet" type="text/css" />

</head>

<body>

    <form id="form1" runat="server" class="ui-mobile-viewport ui-overlay-c">

        <div>

            <div data-role="page" id="page1">

                <div data-role="header" data-theme="a">

                    <img src="Jquery-mobile-logo.png" alt="Sunset" height="100px" width="100%" />

                    <div data-role="navbar" data-iconpos="top">

                        <ul>

                            <li><a href="Default2.aspx" data-transition="pop" data-theme="" data-icon="home">Home

                            </a></li>

                            <li><a href="Home.aspx" data-transition="pop" data-theme="" data-icon="info">About </a>

                            </li>

                            <li><a href="Key.aspx" data-transition="pop" data-theme="" data-icon="star">Features

                            </a></li>

                            <li><a href="Contactus.aspx" data-transition="pop" data-theme="" data-icon="check">Contact

                                Us </a></li>

                        </ul>

                    </div>

                </div>

                <div data-role="content">

                    <ul data-role="listview" data-divider-theme="b" data-inset="true">

                        <li data-theme="a"><a href="regis.aspx" data-transition="fade">Register Now </a></li>

                        <li data-theme="a"><a href="Login.aspx" data-transition="slide">Sign In </a></li>

                        <li data-theme="a"><a href="GPS.aspx" data-transition="slide">GPS </a></li>

                        <li data-theme="a"><a href="Demo.aspx" data-transition="slide">Display map </a></li>

                        <li data-theme="a"><a href="Test.aspx" data-transition="slide">Feedback </a></li>

                    </ul>

                </div>

                <div data-role="footer">

                    <h1>

                       AMBROSIA</h1>

                </div>

            </div>

        </div>

    </form>

</body>

</html>

How to create Login page in JQuery mobile in .Net

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Login.aspx.vb" Inherits="Login" %>

<!DOCTYPE html>

<html>

<head runat="server">

    <title>Sign In</title>

    <style>

        #login-button {

            margin-top: 30px;

        }       

    </style>

    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0" />

    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css" />

    <script src="JScritpt/jquery-1.7.2.js" type="text/javascript"></script>

    <script src="JScritpt/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

    <link href="home_standard.css" rel="stylesheet" type="text/css" />

    <link href="new.css" rel="stylesheet" type="text/css" />

    <script src="JScritpt/Login.js" type="text/javascript"></script>

    <script src="JScritpt/jquery-1.8.2.js" type="text/javascript"></script>

</head>

<body>

    <div data-role="page" id="login">

        <div data-role="header">

            <a href="Default2.aspx" data-icon="home">Home</a><h1>

                Login Here</h1>

        </div>

        <div data-role="content">

            <form id="check-user" class="ui-mobile-viewport ui-overlay-c" data-ajax="false">

                <fieldset>

                    

                                <label for="username">

                                    Username:</label>

                                <input type="text" value="" name="username" id="username" data-role="text" /></td>

                        <

                                <label for="password">

                                    Password:</label>

                                <input type="password" value="" name="password" id="password" data-role="password" />

                           

                                <input type="button" data-theme="a" name="submit" id="submit" value="Submit">

                </fieldset>

            </form>

        </div>

        <div data-role="footer">

            <h1>

                AMBROSIA</h1>

        </div>

    </div>

</body>

</html>

How to create list view in jQuery mobile with help of ASP.Net

Here we will discuss about List View.

<div data-role="content">

                    <ul data-role="listview" data-divider-theme="b" data-inset="true">

                        <li data-theme="a"><a href="regis.aspx" data-transition="fade">Register Now </a></li>

                        <li data-theme="a"><a href="Login.aspx" data-transition="slide">Sign In </a></li>

                        <li data-theme="a"><a href="GPS.aspx" data-transition="slide">GPS </a></li>

                        <li data-theme="a"><a href="Demo.aspx" data-transition="slide">Display map </a></li>

                        <li data-theme="a"><a href="Test.aspx" data-transition="slide">Feedback </a></li>

                    </ul>

                </div>

How to create menu bar in JQuery mobile with help of ASP.net

Here we will discuss about Menu Bar.

<div data-role="header" data-theme="a">

                <img src="Jquery-mobile-logo.png" alt="Sunset" height="100px" width="100%" />

                    <div data-role="navbar" data-iconpos="top">

                        <ul> <li><a href="Default2.aspx" data-transition="pop" data-theme="" data-icon="home">Home   </a></li>

                            <li><a href="Home.aspx" data-transition="pop" data-theme="" data-icon="info">About

                            </a></li>

                            <li><a href="Key.aspx" data-transition="pop" data-theme="" data-icon="star">Features

                            </a></li>

                            <li><a href="Contactus.aspx" data-transition="pop" data-theme="" data-icon="check">Contact Us

                            </a></li>

                        </ul>

                    </div>

                </div>

Basic introduction of jQuery Mobile with help of .Net

Here we will discuss about basic knowledge of jquery mobile application which are compatible for all

All device.

The jQuery Mobile is a framework that built on top of the jQuery and jQuery UI foundation. The framework  allow us to develop a single mobile web applications that work across smartphones, platforms and tablets. In addition, one for the great features that jQuery Mobile is “Progressive enhancement and graceful degradation“, which means that jQuery Mobile will fully leverages the latest  technologies HTML5, CSS3, and JavaScript on the supported modern devices and will still provide the best possible experience, basic functionality and basic content for less capable devices as well.

<div data-role=”header”>

//This is use for header content.

</div>

<div data-role=”content”>

//This is use for body content.

</div>

<div data-role=”footer”>

//This is use for footer content.

</div>

Before using  above tag  use following JavaScript and CSS.

<meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css" />

    <script src="JScritpt/jquery-1.7.2.js" type="text/javascript"></script>

    <script src="JScritpt/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

  

  

Here is complete program as exmple

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Index.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html>

<html>

<head runat="server">

    <title>Home Page</title>

<meta name="viewport" content="width=device-width, initial-scale=1" />

    <link rel="stylesheet" href="JScritpt/demos/css/themes/default/jquery.mobile-1.2.0.css" />

    <script src="JScritpt/jquery-1.7.2.js" type="text/javascript"></script>

    <script src="JScritpt/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>

</head>

<body>

<div data-role=”header”>

//This is use for header content.

</div>

<div data-role=”content”>

//This is use for body content.

</div>

<div data-role=”footer”>

//This is use for footer content.

</div>

</body>

</html>

What is CSS.

What is CSS?
CSS means Cascading Style Sheets.
it define how to display HTML elements.
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS files

 A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly brackets:

p {color:red;text-align:center;}

How to use store procedure in asp.net with example

Default2.aspx=>

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<asp:Label ID="Label1" runat="server" Text="ID"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label2" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label3" runat="server" Text="Confirm Password"></asp:Label>
<asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br /><br />
<asp:Label ID="Label4" runat="server" Text="Email ID"></asp:Label>
<asp:TextBox ID="TextBox4" runat="server"></asp:TextBox><br /><br /><br />
<asp:Label ID="l1" runat="server"></asp:Label>
<asp:Button ID="Button1" runat="server" Text="Submit Record" OnClick="Button1_Click" />
<asp:Button ID="show" runat="server" Text="Show" onclick="show_Click" /><br />
<div id="d1" runat="server">
<asp:GridView ID="DetailsView1" runat="server" Height="16px">
</asp:GridView></div>
</asp:Content>
 Default2.aspx.cs=>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Data;
using System.Configuration;
public partial class Default2 : System.Web.UI.Page
{string s = ConfigurationManager.ConnectionStrings["conn"].ToString();
SqlConnection con;
//DataSet ds = new DataSet();
////Here we declare the parameter which we have to use in our application
SqlCommand cmd = new SqlCommand();
//SqlParameter sp1 = new SqlParameter();
//SqlParameter sp2 = new SqlParameter();
//SqlParameter sp3 = new SqlParameter();
//SqlParameter sp4 = new SqlParameter();
protected void Page_Load(object sender, EventArgs e)
{
d1.Visible = false;if (!IsPostBack)
{
Bindlogin();
}
 }private void Bindlogin()
{
con =new SqlConnection(s);
con.Open();SqlCommand cmd = new SqlCommand("select * from login", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();if (ds.Tables[0].Rows.Count > 0)
{
DetailsView1.DataSource = ds;
DetailsView1.DataBind();
}else
{
ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
DetailsView1.DataSource = ds;
DetailsView1.DataBind();int columncount = DetailsView1.Rows[0].Cells.Count;
DetailsView1.Rows[0].Cells.Clear();
DetailsView1.Rows[0].Cells.Add(
new TableCell());
DetailsView1.Rows[0].Cells[0].ColumnSpan = columncount;
DetailsView1.Rows[0].Cells[0].Text = 
"No Records Found";
}
}protected void Button1_Click(object sender, EventArgs e)
{
con =new SqlConnection(s);
cmd =new SqlCommand("submitrecord", con);
cmd.CommandType =CommandType.StoredProcedure;
cmd.Parameters.Add("@ID", SqlDbType.VarChar).Value = TextBox1.Text;
cmd.Parameters.Add("@Password", SqlDbType.VarChar).Value = TextBox2.Text;
cmd.Parameters.Add("@ConfirmPassword", SqlDbType.VarChar).Value = TextBox3.Text;
cmd.Parameters.Add("@email", SqlDbType.VarChar).Value = TextBox4.Text;
con.Open();
 cmd.ExecuteNonQuery();
l1.Text = 
"Insert Successfully";
con.Close();
 }protected void show_Click(object sender, EventArgs e)
{
d1.Visible = true;
}
}