.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
Sign In
Win Surprise Gifts!!!

Top 5 Contributors of the Month

Home >> Articles >> ASP.NET >> Post New Resource Bookmark and Share   

 Subscribe to Articles

Create Navigation in asp.net website

Posted By:Dhananjay Kumar       Posted Date: February 14, 2010    Points: 25    Category: ASP.NET    URL: http://www.dotnetspark.com  

Create Navigation for asp.net website. In this article we will see how to create Navigation for user to navigate to another page. We are also using Master Page also.

Navigation Web Site

1.  Create a website project. Make it a file system based web site.

2.  In the File menu , choose either WebSite. Select ASP.Net Web Site in the Templates pane.

3.  Change the Name to NavigationSite and click OK.

4.  Delete Default page from the application. Why we are deleting Default page because it would be easier to implement master page.

To remove the page, select it from Solution Explorer and press the DELETE key. Visual studio will ask for confirmation, press YES.

5.  Create a Master page for the Web Site. Click the right mouse button on the Project node to solution and select Add New Item. Choose Master Page from the template. Keep default name. Click ADD.

6.  Add Several Pages Based on the Master Page.  I am going to add four pages here.
To add a page, click right mouse button on Project and select Add New Item. Choose Web Page from template. Make sure one thing the Select Master Page check box in checked as you select in the template. By doing this Master page will get apply automatically on each page.
After clicking add button, new dialog box will appear, select Master Page and click Ok there.
While adding page give name as Center.aspx, Right.aspx, Left.aspx and Home.aspx.

7.  Add a New Site Map to the Project. Click the right mouse button on the project in solution explorer . Select Site Map from the template. Keep the name Web.sitemap as it is. This is default  name for Site map.

8.  Write  code for Site Map. To write code for Site Map click on Web.sitemap in solution explorer. Code window will open for Web.sitemap.  By default  below code will appear



Modify above code accordingly , like below.


In above code  all pages are being added to siteMapNode.

9.  Click on Home.Aspx  in Solution explorer. Sleect design view . Drag menu from ToolBox and drop it on the Home.aspx page.

10.  Click on arrow button of menu or select its property . Click on Choose Data source then select New Data Source. After new Data source select SiteMap and press ok.


11.   Now add few images in site. Right click on Project . click add existing item. Then browse to add four images in the project.

Drag a Image Control on Left.aspx , Right.aspx, center.aspx and Home.aspx.

Select  property of Image Control. Click on Image Url then select any image .

14.  After adding image run the Project or browse the website in browser. Output will come like below.

 Subscribe to Articles


Further Readings:


No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend