Introduction
In this post, I explain how to implement URL Routing in asp.net 4.0 Web Forms like MVC.One of the best new features of ASP.NET WebForms 4.0 is URL Routing.
Using this features we can transform complex URLs into simple, search engine friendly, easily understood by users and consistent Web addresses.
We can do this by following this below steps.
Here I create a project consisting 5 pages
| Pages |
After Rewrite URL
|
Used for
|
|---|---|---|
| 1. Default.aspx | /Default | home page |
| 2. About.aspx | /About | about us page |
| 3. Contact.aspx | /Contact | for show contact information |
| 4. OurProduct.aspx | /ProductList | for show product list |
| 5. ProductDetails.aspx | /Product/Details/{id} | for show selected product details |
Steps :
Just follow the steps and get result easily.Step-1 : Create New Project
Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.Step-2: Write code for URL Routing in Global.asax.cs page.
Write the followings code in Application_Start event of Global.asax.cs page.
void RegisterRoutes(RouteCollection routes)
{
routes.MapPageRoute("Home", "Home", "~/Default.aspx");
routes.MapPageRoute("About", "About", "~/About.aspx");
routes.MapPageRoute("Contact", "Contact", "~/Contact.aspx");
routes.MapPageRoute("OurProducts", "ProductList", "~/OurProducts.aspx");
routes.MapPageRoute("ProductDetails", "Product/Details/{id}", "~/ProductDetails.aspx");
}
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
AuthConfig.RegisterOpenAuth();
RegisterRoutes(RouteTable.Routes);
}
Modify Menu Link in site.master page.
Replace with this
<ul id="menu">
<li><a runat="server" href="Home">Home</a></li>
<li><a runat="server" href="About">About</a></li>
<li><a runat="server" href="Contact">Contact</a></li>
</ul>Step-3: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.Step-4: Create a table and insert data.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.Step-5: Add Entity Data Model.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Step-6: Create page for show list of product.
Go to Solution Explorer > Right Click on Project under solution explorer > Add > New item > Select Web Form under Web > Enter Name > Add.Gridview Design
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
CellPadding="10" CellSpacing="1" BackColor="Black"
RowStyle-BackColor="White"
HeaderStyle-BackColor="White">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<div><img src='ProductImage/<%#Eval("ImagePath")%>' width="50px" border="0"/></div>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField HeaderText="Product" DataField="ProductName" />
<asp:BoundField HeaderText="Price" DataField="Price" />
<asp:BoundField HeaderText="Category" DataField="Category" />
<asp:TemplateField>
<ItemTemplate>
<a href='Product/Details/<%#Eval("ProductID").ToString()%>'>View Details</a>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Write the followings code in your page load event for fetch Data from Database.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
PopulateProduct();
}
}
private void PopulateProduct()
{
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
var v = dc.ProductMasters.ToList();
GridView1.DataSource = v;
GridView1.DataBind();
}
}
Step-7: Create page for show product details.
Go to Solution Explorer > Right Click on Project under solution explorer > Add > New item > Select Web Form under Web > Enter Name > Add.Design for Product Details
<h2>Product Details</h2>
<table border="0" cellpadding="0" cellspacing="5">
<tr>
<td rowspan="6">
<asp:Image ID="Image1" runat="server" Width="120px" />
</td>
<td>Product Name :</td>
<td>
<asp:Label ID="lblProductName" runat="server" />
</td>
</tr>
<tr>
<td>Price : </td>
<td>
<asp:Label ID="lblPrice" runat="server" />
</td>
</tr>
<tr>
<td>Available Colors :</td>
<td>
<asp:Label ID="lblAvailableColors" runat="server" />
</td>
</tr>
<tr>
<td>Brand :</td>
<td>
<asp:Label ID="lblBrand" runat="server" />
</td>
</tr>
<tr>
<td>Category :</td>
<td>
<asp:Label ID="lblCategory" runat="server" />
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID="btnAddToCart" runat="server" Text="Add to cart" />
</td>
</tr>
</table>
Write the followings code in your page load event for fetch Data from Database.
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
int productID = 0;
string queryString = Page.RouteData.Values["id"] as string;
if (int.TryParse(queryString, out productID))
{
PopulateProductDetails(productID);
}
}
}
private void PopulateProductDetails(int productID)
{
using (MyDatabaseEntities dc = new MyDatabaseEntities())
{
var v = dc.ProductMasters.Where(a => a.ProductID.Equals(productID)).FirstOrDefault();
if (v != null)
{
Image1.ImageUrl = "~/ProductImage/" + v.ImagePath;
lblProductName.Text = v.ProductName;
lblPrice.Text = v.Price.ToString();
lblBrand.Text = v.Brand;
lblAvailableColors.Text = v.AvailableColors;
lblCategory.Text = v.Category;
}
}
}
This is for getting Query String value.
string queryString = Page.RouteData.Values["id"] as string;
Step-8: Run Application.
