Wednesday, May 16, 2012

A Sample of Mobile Web Site with HTML5, ASP.NET MVC4.0, CSS3 Media Query, JQuery Mobile


ASP.NET MVC 4 is a framework for building scalable, standards-based web applications using well-established design patterns and the power of ASP.NET and the .NET Framework. 

Usually there shouldn't be a problem adding a our own Custom Web Forms page to an MVC project. You should start by adding a new Web Form from the "Add New Item..." menu in the solution explorer. Make sure you don't add it inside a View Folder.
If this Web Forms page doesn't work, you could start by checking your routing setup in Global.asax.cs. Make sure that routes.RouteExistingFiles isn't set to true.

And for Button Event Handlers add the EventHandler method in the Page_Load().
DisplayDoctorsVisit.Click += new EventHandler(this.cmdbutton_Click);




<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Accounts.aspx.cs" Inherits="MvcApplication1.Accounts" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
<meta name="apple-mobile-web-app-capable" content="yes"/>

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

<link rel="Stylesheet"media="screen"href="../../Content/jquery.mobile-1.0.min.css"/>
<link rel="Stylesheet"media="screen"href="Content/TestCss.css"/>

<script type="text/javascript" src="../../Scripts/jquery-1.6.4.js"></script>

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


</head>
<body>
  <form id="form1" runat="server">
   <header data-role="header"><h1>Application</h1></header>

    <div data-role="content" Class="Mobilelabel_style1">
      Accounts
    </div> 
   <asp:Label ID="lblAcctName" CssClass="Mobilelabel_style1" runat="server" Text="Account Name :&nbsp;"></asp:Label>
    <asp:TextBox ID="txtAcctName" runat="server" Width="237px" MaxLength="50"></asp:TextBox>
   
    <br />
   
    <asp:Label ID="lblAcctType" runat="server" Text="Account Type :&nbsp;" CssClass="Mobilelabel_style1"></asp:Label>
        <asp:DropDownList ID="ddlAccountType" runat="server" CssClass="Mobilelabel_style1">
        <asp:ListItem Text="-Select-" Value="0"></asp:ListItem>
        </asp:DropDownList>                                                
     <asp:Label ID="lblActive" runat="server" Text="Active :&nbsp;" CssClass="Mobilelabel_style1"></asp:Label>
         <asp:DropDownList ID="ddlActive" runat="server"  CssClass="Mobilelabel_style1">
        <asp:ListItem Text="-All-" Value="2"></asp:ListItem>
        <asp:ListItem Text="Active" Selected="true" Value="1"></asp:ListItem>
        <asp:ListItem Text="InActive" Value="0"></asp:ListItem>
    </asp:DropDownList>
            <asp:Button ID="btnAccounts" runat="server" Text="Get Details"/>
      <br />
      <asp:GridView ID="grdAccounts" CaptionAlign="Left" runat="server"
          GridLines="Vertical" HorizontalAlign="Justify" BorderStyle="Solid" CellPadding="3"
          AllowPaging="True" DataKeyNames="AcctID" AutoGenerateColumns="False"
          OnPageIndexChanging="grdAccounts_PageIndexChanging" OnRowDataBound="grdAccounts_DataBound"
      BackColor="White" BorderColor="#999999"
       BorderWidth="1px" ForeColor="Black">
          <EditRowStyle BorderColor="Black" Font-Names="Franklin Gothic Medium" Font-Size="9pt" />
        <SelectedRowStyle BackColor="#000099" Width="10px" Font-Bold="True"
              ForeColor="White" />
        <PagerSettings FirstPageText="<<" LastPageText=">>" PageButtonCount="10" />
        <PagerStyle CssClass="Mobiletable_footer_style" HorizontalAlign="Center"
              BackColor="#999999" ForeColor="Black" />
        <HeaderStyle CssClass="table_Mobileheader_style" HorizontalAlign="Center"
              BackColor="Black" Font-Bold="True" ForeColor="White" />
        <AlternatingRowStyle CssClass="table_Mobilealternaterow_style" BackColor="#CCCCCC" />
        <RowStyle CssClass="table_Mobilerow_style" />
        <FooterStyle Width="9px" BackColor="#CCCCCC"/>
           <Columns>
            <asp:TemplateField SortExpression="AcctName" ItemStyle-HorizontalAlign="left" ItemStyle-Width="200px" ItemStyle-CssClass="Mobilegrid_row_border">
                <HeaderTemplate>
                    <asp:Label ID="lnkbtnAcctName" Font-Bold="true" runat="server"
                        CommandName="Sort" CommandArgument="AcctName" Text="Account Name"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblAcctName" CssClass="Mobilelist_style3" runat="server" Text='<%# Bind("AcctName") %>'></asp:Label>
                </ItemTemplate>

<ItemStyle HorizontalAlign="Left" CssClass="Mobilegrid_row_border" Width="200px"></ItemStyle>
            </asp:TemplateField>
            <asp:TemplateField SortExpression="AcctType" ItemStyle-HorizontalAlign="center" ItemStyle-Width="120px" ItemStyle-CssClass="Mobilegrid_row_border">
                <HeaderTemplate>
                    <asp:Label ID="lnkbtnAcctType" Font-Bold="true" runat="server"
                        CommandName="Sort" CommandArgument="AcctType" Text="Account Type"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblAcctType" CssClass="Mobilelist_style3" runat="server" Text='<%# Bind("AcctType") %>'></asp:Label>
                </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" CssClass="Mobilegrid_row_border" Width="120px"></ItemStyle>
            </asp:TemplateField>
            <asp:TemplateField SortExpression="AccountingType" ItemStyle-HorizontalAlign="left"
                ItemStyle-Width="100px" ItemStyle-CssClass="Mobilegrid_row_border">
                <HeaderTemplate>
                    <asp:Label ID="lnkbtnAccountingType" Font-Bold="true"
                        runat="server" CommandName="Sort" CommandArgument="AccountingType" Text="Oracle Type"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>
                    <asp:Label ID="lblAccountingType" CssClass="Mobilelist_style3" runat="server" Text='<%# Bind("AccountingType") %>'></asp:Label>
                </ItemTemplate>
            <ItemStyle HorizontalAlign="Left" CssClass="Mobilegrid_row_border" Width="100px"></ItemStyle>
            </asp:TemplateField>                                 
            <asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"
                ItemStyle-Width="50px" HeaderStyle-Width="50px" ItemStyle-CssClass="Mobilegrid_row_border">
                <HeaderTemplate>
                    <asp:Label ID="lblUpdate" runat="server" Text="Action" Font-Bold="true"></asp:Label>
                </HeaderTemplate>
                <ItemTemplate>                                    
                    <asp:HyperLink ID="lnkAccountSummary" runat="server" Text="Summary" ForeColor="Black"></asp:HyperLink>
                </ItemTemplate>
                <HeaderStyle HorizontalAlign="Center" Font-Bold="True" />
                <ItemStyle CssClass="Mobilegrid_row_border" HorizontalAlign="Center" />
            </asp:TemplateField>
        </Columns>
        <EmptyDataTemplate>
            <asp:Label ID="lblEmptyData" runat="server" Text="No records found!" CssClass="Mobileerrmessage_text"></asp:Label>
        </EmptyDataTemplate>
          <SortedAscendingCellStyle BackColor="#F1F1F1" />
          <SortedAscendingHeaderStyle BackColor="#808080" />
          <SortedDescendingCellStyle BackColor="#CAC9C9" />
          <SortedDescendingHeaderStyle BackColor="#383838" />
      </asp:GridView>


<nav data-role="navbar">
<ul>
<li><a href="/Home/Index" data-role="button" data-icon="home" data-iconpos="left">Home</a></li>

<li><a href="/Home/Contact" data-role="button" data-icon="search" data-iconpos="left">Contact</a></li>

<li><a href="/Home/About" data-role="button" data-icon="plus" data-iconpos="left">About</a></li>

</ul>

</nav>

</form>
<footer data-role="footer" data-position="fixed"><h3>All Rights Reserved</h3></footer>

</body>
</html>












Thanks
Meera


No comments:

Post a Comment