Thursday, 31 March 2011

Navigation in ASP.NET using XML


 Inroduction: In this article i will explain , how we can create navigation using xml file in ASP.NET. We can use this type of navigation in the admin area , there is no need of the design in the admin area, because this part is used by the admin only or used by the some peoples only. This area is not used by the common user. Suppose you have a CMS website, i mean content management system. The admin area of this site is used only by use, i  mean  the content like related news of your website and album or gallery of your website is uploaded  only by you. So you can you navigation in the admin area. Here i will explain that how we can create navigation in ASP.Net.

Implementation: Create a website in asp.net, after this create a folder inside the root directory named “Admin”. inside the Admin folder create a masterpage and after this add four content  pages inside the master page named news.aspx, album.aspx, staff.aspx, about_us.aspx    respectively. You can do the coding inside these pages according to your requirement. After this create a xml file inside the root directory. Below i will explain the code that you will write inside the xml file.



Code of xml file:

<?xml version="1.0" encoding="utf-8" ?>
<mydata>
<!--here  inside the <pg></pg>  i am giving the name thst will be displayed at the every page like news,album etc,-->
  <td>
    <pg> News Admin</pg>
<!--here  inside the  <url></url>  i am giving the url of the page  so after clicking at the name of page you can go to at this page ,-->
    <url>news.aspx</url>
  </td>

  <td>
    <pg>Album Admin</pg>
    <url>album.aspx</url>
  </td>
  <td>
    <pg>Staff Admin</pg>
    <url>staff.aspx</url>
  </td>
  <td>
    <pg>About us Admin</pg>
    <url>about_us.aspx</url>
  </td>
  </mydata>

After  this add a webuser control insde the root directiory. Drag and drop datalist control at the webuser control from the data toolbox. Below i am giving complete html code for the webuser control.

Code for WebUserControl.ascx file:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>

<p>
    <br />
</p>
<table >
    <tr>
        <td >
            <asp:DataList ID="DataList1" runat="server" BackColor="#DEBA84"
                BorderColor="#DEBA84" BorderStyle="None" BorderWidth="1px" CellPadding="3"
                CellSpacing="2" GridLines="Both"
                 RepeatDirection="Horizontal" Height="19px" Width="610px">
                <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
                <ItemStyle BackColor="#FFF7E7" ForeColor="#8C4510" />
                <SelectedItemStyle BackColor="#738A9C" Font-Bold="True" ForeColor="White" />
                <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
                <ItemTemplate>

<%--here inside the item template i am binding the hyperlink with the navigationurl
                and write its test that i am storing in the xml file(tagname) <pg></pg>and <url></url>--%> 

                <asp:HyperLink ID="h2" runat="server" NavigateUrl='<%#Eval("url") %>' Text='<%#Eval("pg") %>'></asp:HyperLink>
                </ItemTemplate>
             
            </asp:DataList>
        </td>
     </tr>
</table>

Code for WebUserControl.ascx.cs file:

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class WebUserControl : System.Web.UI.UserControl
{
    string st;
    DataSet ds = new DataSet();
    protected void Page_Load(object sender, EventArgs e)
    {
        // In the st string type variable am giving the path of the xml 
        st = Server.MapPath("XMLFile.xml");
      // here i am binding the datalist  control with the xml file using  dataset
        ds.ReadXml(st);

        DataList1.RepeatDirection = RepeatDirection.Horizontal;
        DataList1.DataSource = ds;
        DataList1.DataBind();

    }
}

At the last drag and drop the web usercontrol at the code master page from the server explorer.
Code of the master page.aspx page.

<body>
    <form id="form1" runat="server">
    <div>
     
        <uc1:WebUserControl ID="WebUserControl1" runat="server" />
     
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
       
      </asp:ContentPlaceHolder>
    </div>
    </form>
</body>


Conclusion:Through this article, you have learned, how we can create navigation  in ASP.NET .


1 comment: