Developing Mobile Web Pages In ASP.Net
Introduction:
In this article we will learn how to create web pages for mobile.
Back Ground:
Developing mobile web pages is not as developing our simple desktop pages. For developing mobile web pages we have to use “System.Web.Mobile” dll which will provide the classes for developing our mobile web pages. This dll contains all about mobile web pages. How to add this dll and how to use we will see here step-by-step.
Step 1:
Start new Website give some name. It will create a website with web.confige and one Default.aspx and Default.aspx.cs files.
Step 2
Next Goto Website menu and add Reference to “System.Web.Mobile” namespace.
Step3
Now just open Default.aspx page in source code view and register our System.Web.Mobile assembly like this.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<%@ Register TagPrefix="mobile" Namespace="System.Web.UI.MobileControls" Assembly="System.Web.Mobile" %>
Step 4
Open the page in Design view and see how the page is looking now. Generally mobile pages are not editable. If we want to design this pages with controls we cannot use our toolbox controls. For creating controls we must have to write control code in source view.
Step 5
Now move to source code view and create controls like bellow. Here we will Create Label,TextBox And Button controls. For creating mobile web controls we must have to create mobile form for that just replace our Desktop form like and create the controls for our mobile web page.
<html xmlns="http://www.w3.org/1999/xhtml" >
<body>
<mobile:Form id="Form1" runat="server">
<mobile:Label ID="label1" Runat="server">Label1</mobile:Label>
<mobile:TextBox ID="TextBox1" Runat="server"></mobile:TextBox>
<mobile:Command ID="Command1" Runat="server" OnClick="Command1_Click">Command1</mobile:Command>
</mobile:Form>
</body>
</html>
Step 6
Now go code view mean in aspx.cs file and import the namespace of mobile pages and controls as well inherit the Default page with MobilePage.
using System.Web.Mobile;
using System.Web.UI.MobileControls;
public partial class Default : System.Web.UI.MobileControls.MobilePage
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Command1_Click(object sender, EventArgs e)
{
}
}
Step 7
Now run the application and see in the browser pages will look like something bellow screen. To test this mobile web pages in mobile screens we have to test in mobile emulators. But here we will see our pages in generally desktop browser.
Adding Mobile Web Pages Template To Visual Studio 2008:
Here we will see how to add Deafult template to visual studio 2008. This template actually I got from some website. This template are specially mobile page templates which will add mobile page to our project. This is will make your work easy for adding the mobile web page. Means here you need not to write the code every time just follow the steps given bellow.
Step 1
Download the attached zip file and extract it. Which will give two directory namely ASP.NET Web Application CS and ASP.NET Web Site CS respectivelly. Which contains some zip file.
Step 2
Now open this directory which contains 3 zip files and one text file just open that text file and copy that zip file to the given location in text file. Fallol same procedure for both directory.
Step 3
Now open Visual Studio and start new website again. Which will give same web.Confige Default.aspx and Default.aspx.cs files. Now delete this files and say Add new item which display visual studio template with our mobile web page templates as follows.
Conclusion:
Here we have seen that how to develop mobile web pages.
