Interview Question Answer: September 2013

Dear friends,

Today , I will be explain to you that how can we create dynamic menu bar with category and subcategory using C# asp.net ,XSLT and SQL Server. Now imaging to you explain all steps one by one.

Step 1: First of all we design our database.

Database:

create database menubar

Now i will be create tables.

[1]. CREATE TABLE [dbo].[categories](

[CatId] [int] IDENTITY(1,1) NOT NULL,

[Category] [nvarchar](50) NULL,

[createdate] [datetime] NULL,

[status] [bit] NULL,

CONSTRAINT [PK_categories] PRIMARY KEY CLUSTERED

(

[CatId] ASC

)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]

) ON [PRIMARY]

[2].

CREATE TABLE [dbo].[subcategory](

[subatid] [int] IDENTITY(1,1) NOT NULL,

[subcategoryname] [nvarchar](50) NULL,

[catid] [int] NULL,

[status] [bit] NULL,

[createdate] [datetime] NULL

) ON [PRIMARY]

Step 2: Now we create a new website using Visual studio, and add a page with the name of menu.aspx.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="menubar.aspx.cs" Inherits="menubar" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<div>

</div>

</form>

</body>

</html>

Step 3: Now add css file to header of menuaspx page, that will be define structure of header.

<!--

@import url("css/Style.css");

@import url("Styles/nav.css");

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

text-align: center;

background-color: #FFF;

}html {

scrollbar-face-color: #E7EBEE;

scrollbar-shadow-color: #999999;

scrollbar-highlight-color: #FFFFFF;

scrollbar-3dlight-color:#999999;

scrollbar-darkshadow-color: #F4F4F4;

scrollbar-track-color:#999;

scrollbar-arrow-color: #410539;

}

a:link {

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

color: #000;

text-decoration: none;

}

a:visited {

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

color: #000;

text-decoration: none;

}

a:hover {

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

color: #333;

text-decoration: none;

}

a:active {

font-family:Arial, Helvetica, sans-serif;

font-size:11px;

color: #000;

text-decoration: none;

}

-->

</style>

This is the snapshots

Step 4: now we will be use a Literl control on menu.aspx page. For bind the menu information to this literal control and we add all this code to our page menu.aspx.

<div>

<tr>

<![if gt IE 6]>

</a>

</li>

<li class="pureCssMenui0"><a class="pureCssMenui0" href="aboutus.aspx" title="About us" ><span>About Us</span>

<![if gt IE 6]>

</a>

</li>

<li class="pureCssMenui0"><a class="pureCssMenui0" title="Products" href="#"><span>Products</span>

<![if gt IE 6]>

</a>

<asp:literal runat="server" ID="Literal1"></asp:literal>

</li>

<li class="pureCssMenui0"><a class="pureCssMenui0" href="brand.aspx" title="Brnds"><span>Brands</span>

<![if gt IE 6]>

</a>

</li>

<li class="pureCssMenui0"><a class="pureCssMenui0" href="client.aspx" title="Brnds"><span>Clients</span>

<![if gt IE 6]>

</a>

</li>

</ul></div></td>

</tr>

</table>

</div>

Step 3: Now create a folder XsltFormatFolder name. Right click on this folder andd click on add new item. Add a xslt file and rename TransformXSLT.xsl. your xslt file will be look like this.

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"

xmlns:msxsl="urn:schemas-microsoft-com:xslt" exclude-result-prefixes="msxsl"

<xsl:output method="xml" indent="yes"/>

<xsl:template match="@* | node()">

<xsl:copy>

<xsl:apply-templates select="@* | node()"/>

</xsl:copy>

</xsl:template>

</xsl:stylesheet>

Step 4: Now go on codebehind menu.cs and write this code.

using System;

using System.Collections.Generic;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Collections;

using System.Xml;

using System.IO;

using System.Xml.Xsl;

using System.Xml.XPath;

using System.Text;

using System.Data.SqlClient;

public partial class menubar : System.Web.UI.Page

{

SqlConnection con = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString);

Hashtable hst = new Hashtable();

DataSet dst = new DataSet();

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

Literal1.Text = ExecuteXSLTransformation();

}

protected void clk_CushionCover_Click(object sender, EventArgs e)

{

//Redirect("Cushion Covers");

}

//........................this is the method for bind the prodecut menu bar....................by santoh kushwaha

public string ExecuteXSLTransformation()

{

string HtmlTags, XsltPath;

MemoryStream DataStream = default(MemoryStream);

StreamReader streamReader = default(StreamReader);

try

{

//Path of XSLT file

XsltPath = HttpContext.Current.Server.MapPath("XsltFormatFolder/TransformXSLT.xsl");

//Encode all Xml format string to bytes

byte[] bytes = Encoding.ASCII.GetBytes(GenerateXmlFormat());

DataStream = new MemoryStream(bytes);

//Create Xmlreader from memory stream

XmlReader reader = XmlReader.Create(DataStream);

// Load the XML

XPathDocument document = new XPathDocument(reader);

XslCompiledTransform XsltFormat = new XslCompiledTransform();

// Load the style sheet.

XsltFormat.Load(XsltPath);

DataStream = new MemoryStream();

XmlTextWriter writer = new XmlTextWriter(DataStream, Encoding.ASCII);

//Apply transformation from xml format to html format and save it in xmltextwriter

XsltFormat.Transform(document, writer);

streamReader = new StreamReader(DataStream);

DataStream.Position = 0;

HtmlTags = streamReader.ReadToEnd();

return HtmlTags;

}

catch (Exception ex)

{

string ErrorMsg = ex.Message;

return ErrorMsg;

}

finally

{

//Release the resources

// streamReader.Close();

//DataStream.Close();

}

public string GenerateXmlFormat()

{

string SqlCommand;

DataSet DbMenu;

DataRelation relation;

{

SqlCommand = "Select MenuID, Name,Url, ParentID from Menu";

DbMenu = new DataSet();

SqlDataAdapter Adapter = new SqlDataAdapter(SqlCommand, con);

Adapter.Fill(DbMenu);

Adapter.Dispose();

}

DbMenu.DataSetName = "Menus";

DbMenu.Tables[0].TableName = "Menu";

//create Relation Parent and Child

relation = new DataRelation("ParentChild", DbMenu.Tables["Menu"].Columns["MenuID"], DbMenu.Tables["Menu"].Columns["ParentID"], true);

relation.Nested = true;

DbMenu.Relations.Add(relation);

return DbMenu.GetXml();

}

protected void clk_BedSheet_Click(object sender, EventArgs e)

{

//Redirect("Bed Sheets");

}

protected void clk_Towels_Click(object sender, EventArgs e)

{

//Redirect("Towels");

}

protected void clk_Upholstry_Click(object sender, EventArgs e)

{

//Redirect("Upholstry");

}

protected void clk_Curtains_Click(object sender, EventArgs e)

{

//Redirect("Curtains");

}

protected void FirstNewArrival_Click(object sender, EventArgs e)

{

//Redirect("New Arrivals");

}

protected void SecondNewArrival_Click(object sender, EventArgs e)

{

// Redirect("New Arrivals");

}

protected void clk_BedSpreads_Click(object sender, EventArgs e)

{

//Redirect("Bed Spreads");

}

protected void clk_BathMats_Click(object sender, EventArgs e)

{

//Redirect("Bath Mats");

}

protected void clk_Accessories_Click(object sender, EventArgs e)

{

//Redirect("Accessories");

}

Step 5: now we need to map xslt file to our database table column name, which we wnat to display like this.

<?xml version="1.0" encoding="utf-8"?>

<xsl:stylesheet version="1.0"

xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- Find the root node called Menus then convert it to <UL> </UL> HTMLTags

and call MenuListing for its children -->

<xsl:template match="/Menus">

<ul>

<xsl:attribute name="class">

<xsl:text>sf-menu</xsl:text>

</xsl:attribute>

<xsl:attribute name="id">

<xsl:text>nav</xsl:text>

</xsl:attribute>

<xsl:call-template name="MenuListing" />

</ul>

</xsl:template>

<xsl:template name="MenuListing">

<xsl:apply-templates select="Menu" />

</xsl:template>

<xsl:template match="Menu">

<li>

<a>

<xsl:attribute name="href">

mainproduct.aspx?CatId=<xsl:value-of select="ParentID"/><![CDATA[&]]>CName=<xsl:value-of select="Name"/>

</xsl:attribute>

<xsl:value-of select="Name"/>

</a>

<xsl:if test="count(Menu) > 0">

<ul>

<xsl:call-template name="MenuListing" />

</ul>

</xsl:if>

</li>

</xsl:template>

</xsl:stylesheet>

This is the article about how can we bind a multi dropdown menubar using xslt and sql server. You can download full source code from here.

Interview Question Answer

Pages

Saturday, September 14, 2013

Dynamic Multi Drop down menu bar using XSLT, Sql Server and Asp.net

Facebook plugin