ایجاد منو (یا درخت واره) با زیر منوهای تو در تو و نا محدود

[hoora]

ایجاد منو (یا درخت واره) با زیر منوهای تو در تو و نا محدود

در بسیاری از وب سایت ها به منوهایی برخورد می کنیم که دارای زیر منوهای متعدد است ، شاهد درختواره هایی هستیم که تا چندین مرحله باز شده و اطلاعات را در اختیار بازدیدکنندگان قرار می دهند .

در این مقاله به نحوه ساخت این منو ها یا درختواره ها می پردازیم .

برای شروع کار ابتدا یک جدول داخل بانک اطلاعاتی SQL Server به نام TBLMenu با فیلد های زیر ایجاد نمایید :

http://www.uc-njavan.ir/images/e9q077laicl9xsqv3j8.jpg

اکنون اطلاعاتی مشابه اطلاعات زیر وارد نمایید :

http://www.uc-njavan.ir/images/2c3lo3v8517krgf1mibx.jpg

همانطور که ملاحظه می کنید ParentID در برخی از رکورد ها برابر 0 و در برخی دیگر عددی اختیار کرده اند ، اگر کمی دقت نمایید متوجه می شوید که عدد به این معنی است که این منو منوی اصلی است و زیر منو نمی باشد ، منوهایی که ParentID آن ها عددی غیر از 0 اختیار کرده اند زیر منو هستند و ParentID مشخص می کند که این منو زیر منوی کدام منو می باشد .

به عنوان مثال منوی "آموزش ریاضی" با کد 4 زیر منوی "آموزش" می باشد چرا که ParentID آن 3 است ، و همچنین "ریاضی عمومی 1 " زیر منوی "آموزش ریاضی" است و....

کار ما با بانک اطلاعاتی تمام شده است ، اکنون میخواهیم یک فایل XML ایجاد کنیم که اطلاعات فوق به صورت شاخه ای در آن ایجاد شوند و در نهایت این فایل XML به یک منو بایند خواهد شد .

برای خواندن و نوشتن در فایل XML فضا نام زیر را اضافه نمایید :
using System.Xml;

همچنین برای دریافت اطلاعات از بانک اطلاعاتی نیز به دو فضا نام زیر نیاز داریم :
using System.Data;
using System.Data.SqlClient;

اکنون یک تابع که خروجی آن یک DataTable است ایجاد می نمایید ، این تابع وظیفه دریافت اطلاعات از بانک اطلاعاتی را به عهده دارد :
public DataTable GetMenuByParentID(int parentId)
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection("data source=(local);initial catalog=menu;integrated security=true"))
{
con.Open();
SqlCommand cmd = new SqlCommand("select * from TBLMenu where ParentID=@ParentID", con);
cmd.Parameters.AddWithValue("@ParentID", parentId);

SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);

con.Close();

return dt;
}
}

همانطور که ملاحظه می کنید این تابع اطلاعات را با شرط بر روی ParentID درخواست می نماید ، اگر عدد 0 به این تابع پاس شود منوهای اصلی و اگر کد یک منو پاس شود تمام زیر منوهای آن دریافت می شود .

اکنون یک شی از کلاس XmlWriter به صورت Global ایجاد می کنیم و یک متد جهت ایجاد فایل Xml و نوشتن در آن می نویسیم :
XmlWriter writer;
public void CreateMenu()
{
using (writer = XmlWriter.Create(Server.MapPath("Temp\\Menu.XML")))
{
writer.WriteStartDocument();
writer.WriteStartElement("Menu");

CreateNodes(0);

writer.WriteEndDocument();
}

}

این متد پس از ایجاد فایل XML ، یک تگ به نام Menu باز می کند سپس متد CreateNodes که در ادامه به آن می پردازیم را با ورودی 0 که همان منوهای اصلی می باشند فراخوانی می نماید و در انتها تگ باز شده را می بندد.

اکنون به سراغ تابع بازگشتی CreateNodes می رویم که مهمترین جزء این مقاله است (همانطور که می دانید تابع بازگشتی تابعی است که خود را داخل خود فراخوانی می کند) :
public void CreateNodes(int parentId)
{
DataTable dt = GetMenuByParentID(parentId);
foreach (DataRow dr in dt.Rows)
{

writer.WriteStartElement("Node");

writer.WriteStartAttribute("ID");
writer.WriteValue(dr["MenuID"].ToString());
writer.WriteEndAttribute();


writer.WriteStartAttribute("Name");
writer.WriteValue(dr["MenuName"].ToString());
writer.WriteEndAttribute();

CreateNodes(Convert.ToInt32(dr["MenuID"]));

writer.WriteEndElement();
}
}

این تابع با دریافت ParentID تمام زیر منو ها را به صورت تگ داخل فایل XML توسط XmlWriter می نویسد .

ابتدا تابع GetMenuByParentID فراخوانی شده و اطلاعات از دیتابیس دریافت می شود سپس داخل یک حلقه سطر به سطر رکوردها خوانده شده و اطلاعات هر رکورد به صورت تگ نوشته می شود ، قبل بسته شدن تگ Node تابع خودش را با ParentID جاری فراخوانی می کند ، این کار باعث می شود اگر این منو دارای زیر منو هست ، زیر منو ها هم نوشته شوند .

اکنون کافیست در رویداد دلخواه متد CreateMenu را فراخوانی کنیم :
protected void Button1_Click(object sender, EventArgs e)
{
CreateMenu();
Response.Redirect("~/");

}

فایل Xml شما آمادست ، اکنون خیلی ساده این فایل را توسط XmlDataSource به یک Menu یا TreeView بایند می کنیم :

<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="/Menu/Node" DataFile="~/Temp/Menu.xml">
</asp:XmlDataSource>
<div style="direction: rtl">
<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" LineImagesFolder="~/TreeLineImages"
ShowLines="True">
<DataBindings>
<asp:TreeNodeBinding DataMember="Node" TextField="Name" ValueField="ID" />
</DataBindings>
</asp:TreeView>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Bind" />
</div>

همانطور که ملاحظه می کنید از یک XMLDataSource استفاده کردیم و آن را به فایل Menu.Xml که در پوشه Temp قرار دارد بایند کردیم ، خاصیت Xpath به دیتاسورس می گوید که اطلاعات را از تگ Node به بعد به نمایش بگذارد .

سپس از یک کنترل TreeView برای نمایش اطلاعات استفاده کردیم (میتوانیم از منو استفاده کنیم) ، نکته مهم تگ TreeNodeBinding است ، در این تگ خاصیت DataMember برابر Node قرار داده شده است چرا که اطلاعات تگ Node قرار است نمایش داده شود سپس خاصیت TextField و ValueField نیز برابر خواص مورد نیاز ما ست شده است .

دقت نمایید که پوشه Temp باید مجوز Write داشته باشد .

شما میتوانید فایل پروژه را از اینجا دانلود نمایید (http://how2learnasp.net/projects/Menu.rar).


http://how2learnasp.net