3. Introduction
• Any website that is composed of more than
one web page needs some sort of navigation
user interface.
• The purpose of this type of navigation is to
show the end users where they are presently in
relation to the rest of the site.
• ASP.NET tackles this problem by providing a
navigation system that makes managing how
end users work through the applications.
4. • For example, a website like www.technoindiagroup.com is
arranged into various web pages, like
• Course Offer
• Admission
• Placement
• Faculty
• Syllabus of different courses
• Campuses
• Campus life and so on…
• Each of these sections may have sub-sections. Like Course
Offer have different page for individual courses like B.Tech,
M.Tech, MBA, BBA, BCA, MCA etc. Typically, these logical
structures form a hierarchy of sorts.
5. Diagram of Site Navigation
www.technoindiagroup.com
Homepage
www.technoindiagroup.com
Homepage
Course OfferCourse Offer AdmissionAdmission PlacementPlacement FacultyFaculty CampusesCampuses
B.TechB.Tech M.TechM.Tech MBAMBA MCAMCA
6. ASP.NET comes with a number of useful
navigation controls that allow you to set up a
navigation system. These controls include the,
SiteMapPath, TreeView and Menu.
• SiteMapPath: It shows the end user where he
is relative to the site's structure. For example,
when the user is visiting the Course Offer
section on www.technoindiagroup.com, a
breadcrumb would display something like:
Home > Course Offer > B.Tech.
7. • TreeView: A TreeView is capable of displaying a
hierarchical list of items, similar to how the tree in
Windows Explorer looks. Items can be expanded and
collapsed with the small plus and minus icons in front
of items that contain child elements. As such, it’s an
ideal tool to display the site map of the web site as a
means to navigate the site.
• Menu: Which displays either a horizontally- or
vertically-aligned menu. This control is ideal for
allowing the end user to navigate a larger hierarchy of
options.
8. SiteMapPath
• Using the .sitemap file you just created with the SiteMapPath
server control provided with ASP.NET is quite easy. You can
find this control in the Navigation section of the Visual Studio
IDE.
• You should first create an application that has the
Web.sitemap file. This file is defined in the Web.sitemap file
as being on the lowest tier of files in the application.
• The SiteMapPath control is so easy to work with that it
doesn’t even require a data source control to hook it up to the
Web.sitemap file where it infers all its information. All you do
is drag and drop a SiteMapPath control onto your page.
• Web.sitemap file contain
9.
10. TreeView
• The TreeView server control is a rich server control for
rendering a hierarchy of data, so it is quite ideal for displaying
what is contained in your .sitemap file.
• <p>
• <asp:TreeView ID="TreeView1" runat="server"
DataSourceID="SiteMapDataSource1">
• </asp:TreeView>
• <asp:SiteMapDataSource ID="SiteMapDataSource1"
runat="server" /></p>
• This TreeView control is very basic. The great thing about this
control is that it allows for a high degree of customization and
even gives you the capability to use some predefined styles
that come prepackaged with ASP.NET 4.
11. Menu Server Control
• One of the cooler navigation controls found in ASP.NET 4 is
the Menu server control. This control is ideal for allowing the
end user to navigate a larger hierarchy of options while
utilizing very little browser real estate in the process.
• From here, you can see that the first Menu control displayed
simply shows the Home link with a small arrow to the right of
the display. The arrow means that more options are available
that relate to this upmost link in the hierarchy. The second
Menu control displayed shows what the default control looks
like when the end user works down one of the branches
provided by the sitemap.
• The Menu control is an ideal control to use when you have lots
of options—whether these options are selections the end user
can make or navigation points provided by the application in
which they are working. The Menu control can provide a
multitude of options and consumes little space in the process.
12. • Using the Menu control in your ASP.NET applications is
rather simple. The Menu control works with a
SiteMapDataSource control. You can drag and drop the
SiteMapDataSource control and the Menu control onto the
Visual Studio 2010 design surface and connect the two by
using the Menu control’s DataSourceId property.
Alternatively, you can create and connect them directly in
code.
<form id="form1" runat="server">
<div>
<asp:SiteMapDataSource ID="aa" runat="server" />
<asp:Menu ID="Menu1" runat="server"
DataSourceID="aa">
</asp:Menu></div>
</form>
