SharePoint Bee: 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">

</head>

<body>

<header data-role="header"><h1>Application</h1></header>

Accounts

</div>

<asp:Label ID="lblAcctName" CssClass="Mobilelabel_style1" runat="server" Text="Account Name : "></asp:Label>

<asp:TextBox ID="txtAcctName" runat="server" Width="237px" MaxLength="50"></asp:TextBox>

<br />

<asp:Label ID="lblAcctType" runat="server" Text="Account Type : " 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 : " 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">

<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" />

<asp:TemplateField SortExpression="AcctName" ItemStyle-HorizontalAlign="left" ItemStyle-Width="200px" ItemStyle-CssClass="Mobilegrid_row_border">

<asp:Label ID="lnkbtnAcctName" Font-Bold="true" runat="server"

CommandName="Sort" CommandArgument="AcctName" Text="Account Name"></asp:Label>

</HeaderTemplate>

<asp:Label ID="lblAcctName" CssClass="Mobilelist_style3" runat="server" Text='<%# Bind("AcctName") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField SortExpression="AcctType" ItemStyle-HorizontalAlign="center" ItemStyle-Width="120px" ItemStyle-CssClass="Mobilegrid_row_border">

<asp:Label ID="lnkbtnAcctType" Font-Bold="true" runat="server"

CommandName="Sort" CommandArgument="AcctType" Text="Account Type"></asp:Label>

</HeaderTemplate>

<asp:Label ID="lblAcctType" CssClass="Mobilelist_style3" runat="server" Text='<%# Bind("AcctType") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField SortExpression="AccountingType" ItemStyle-HorizontalAlign="left"

ItemStyle-Width="100px" ItemStyle-CssClass="Mobilegrid_row_border">

<asp:Label ID="lnkbtnAccountingType" Font-Bold="true"

runat="server" CommandName="Sort" CommandArgument="AccountingType" Text="Oracle Type"></asp:Label>

</HeaderTemplate>

<asp:Label ID="lblAccountingType" CssClass="Mobilelist_style3" runat="server" Text='<%# Bind("AccountingType") %>'></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center"

ItemStyle-Width="50px" HeaderStyle-Width="50px" ItemStyle-CssClass="Mobilegrid_row_border">

<asp:Label ID="lblUpdate" runat="server" Text="Action" Font-Bold="true"></asp:Label>

</HeaderTemplate>

<asp:HyperLink ID="lnkAccountSummary" runat="server" Text="Summary" ForeColor="Black"></asp:HyperLink>

</ItemTemplate>

</asp:TemplateField>

</Columns>

<asp:Label ID="lblEmptyData" runat="server" Text="No records found!" CssClass="Mobileerrmessage_text"></asp:Label>

</EmptyDataTemplate>

</asp:GridView>

<ul>

<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>

</body>

</html>

Thanks
Meera

SharePoint Bee

Wednesday, May 16, 2012

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

No comments:

Post a Comment