World is going mobile everyday and so are web applications. This article will provide you some basic information on how to get started with writing a simple ASP.Net mobile application using Visual Studio(2005 or 2008). We will build a more sophisticated search application based on the project we will create in this article. For most part you can refer to

Lets get started. There is no seprate project type for mobile web applications. You will start by creating a regular ASP.Net web project. We use Web Application Project model for all our applications so for this example we are sticking to that. But feel free to create your project as Web Site Project if you are comfortable with that.

Difference between regular and mobile ASP.Net pages

Now you must be asking this question, what is the difference between two types of the pages. The thing that distinguishes between two types is the mobile pages are derived from System.Web.UI.MobileControls.MobilePage where as regular browser pages are derived from System.Web.UI.Page namespace. So add a new page in your project and change its inheritance to System.Web.UI.MobileControls.MobilePage. In my caee, i added Search.aspx page to may project. The code behind definition of the page looks like as below.

public partial class Search : System.Web.UI.MobileControls.MobilePage
{
}
							

What controls to add on mobile pages?

You should use controls defined in System.Web.UI.MobileControls namespace on mobile pages. These controls use appropriate device adapter to return correct mark up for device type that is requesting the page. This will ensure that your controls render correctly on all devices. Microsoft provides adapters for most of the devices. Following snippets shows few controls defined on Search.aspx page in the project.

<mobile:form id="ctlSearchForm" runat="server" 
	OnActivate="SearchForm_Activate" 
	OnDeactivate="SearchForm_Deactivate">
 <p>
  <mobile:Label Runat="server" Font-Bold="True" Font-Size="Large">Fashions Search</mobile:Label>
 </p>
 <mobile:TextBox id="SearchQuery_TextBox" runat="server"></mobile:TextBox>
 <mobile:Command id="SearchSubmit_Button" Format="Button" Text="Go" 
	CommandName="Search_Command" Runat="server" 
	OnItemCommand="OnSearch"></mobile:Command>
 <mobile:Panel ID="Results_Panel" Runat="server">
 <mobile:Label ID="ResultsMessage_Label" Runat="server" 
	Visible="False"></mobile:Label>
 </mobile:Panel>
</mobile:form>
							

Code behind

Code behind implementation of your page remains the same as your regualr ASP.Net web application.

Detecting access by mobile device

The browsers on the mobile devices send their client information request. Fom that you can easily detect if the request is coming from a mobile device or not. Following code snipper shows how the sample project detects mobile applicaiton access and then redirects the request to mobile pages.

private void CheckForMobileDevice() { if (Request.Browser.IsMobileDevice) { Response.Redirect("~/Mobile/Search.aspx"); } }