در این مقاله قصد داریم نحوه ی اضافه کردن Accordions تو در تو به صورت پویا به صفحات وب را آموزش دهیم.

  مقدمه

Nested Accordion،یک کنترل ابزار Ajax برای اضافه کردن بخش های متعدد با مطالب جداگانه و  با قابلیت بزرگ و کوچک کردن هر بخش بسته به نیاز می باشد.
 

در ادامه نحوه اتصال Accordion به مقادیر پایگاه داده و اضافه کردن آن به صورت پویا روی صفحه راشرح می دهیم.برای این کار نیاز به ایجاد یک جدول در پایگاه داده خود داریم و برای عنوان هر قسمت اصلی و محتوای آن و همچنین عنوان و محتوای زیربخش های هر قسمت اصلی داده هایی را به آن اضافه می کنیم.  

مراحل انجام کار:

گام اول:

یک جدول با نام  "Students" با 5 فیلد، به ترتیب با نام های BranchName , StudentName , StudentFName، StudentDOB، StudentMobile ایجاد می کنیم.

BranchName، عنوان بخش اصلی خواهد بود و محتوای آن شامل نام دانشجویان می باشد که این اسامی به عنوان زیربخش های BranchName با جزییات دانشجویان نمایش داده خواهند شد.

گام دوم:

تعدادی داده را درون جدول درج کنید.در اینجا ما داده های زیر را در جدول درج کرده ایم.

 نام دانشجویان دانشکده شریعتی با اطلاعات آنها

نام دانشجویان دانشکده آی تی با اطلاعات آنها

نام دانشجویان دانشکده علوم با اطلاعات آنها

بعد از درج اطلاعات خود در جدول با Query زیر می توانید جدول خود را مشاهده کنید.

گام سوم:

برای استفاده از Accordion control. نرم افزار AjaxCOntrolToolKit را از این لینک دانلود کنید.

یک  website با نام "Test_Website" ایجاد می کنیم.

روی website راست کلیک کنید وگزینه ی "Add Reference"  را انتخاب کنید تا AjaxControlToolKit را به referenceها اضافه کنید.

یک پنجره برای اضافه کردن  reference باز خواهد شد مراحل زیر را انجام می دهیم تا AjaxControlToolKit را اضافه کنیم .

1.روی Browse کلیک می کنیم.

2.روی دکمه  Browse کلیک می کنیم، پنجره ی دیگری باز می شود.

3.مسیر ذخیره برنامه AjaxControlToolKit را از سیستم خود مشخص می کنیم.

4.روی دکمه Add کلیک می کنیم.

5.روی دکمه  OK کلیک کنید.

مطابق شکل زیر

درنهایت در پوشه bin دو فایل نشان داده در شکل زیر را مشاهده خواهید کرد.

گام چهارم:

1. در بالای صفحه پیش فرض ایجاد شده با نام  "Default.aspx" تگ  Register را برای اضافه کردن "AjaxControlToolKit"  اضافه می کنیم.

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit"   
    TagPrefix="asp" %>  

 
2. AjaxControlToolKit  را به body صفحه ی Default.aspx اضافه می کنیم.

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
</asp:ToolkitScriptManager> 

3. یک Panel را در داخل تگ body صفحه Default.aspx اضافه می کنیم.

<asp:Panel ID="MyContent" runat="server">  
</asp:Panel> 

4. styleهای زیر را برای  عنوان Accordion، اضافه می کنیم.

<style type="text/css">  
    .ParentAccordionContent  
    {  
        border-color: -moz-use-text-color #5078B3;  
        border-right: 1px dashed #2F4F4F;  
        border-style: none solid solid;  
        border-width: medium 1px 1px;  
        padding: 10px 5px 5px;  
        width: 50%;  
        text-align: center;  
        background-color: #c1e2f5;  
    }  
    .ParentAccordionHeader  
    {  
        cursor: pointer;  
        font-family: Arial,Sans-Serif;  
        font-weight: bold;  
        margin-top: 10px;  
        padding: 5px;  
        font-size: 14px;  
        border: 1px solid #2F4F4F;  
        width: 50%;  
        background: url(Images/img-collapse.png) no-repeat 750px 7px;  
        background-color: #425e89;  
        color: white;  
        text-align: left;  
    }  
    .ParentAccordionHeaderSelected  
    {  
        color: white;  
        cursor: pointer;  
        font-family: Arial,Sans-Serif;  
        font-weight: bold;  
        margin-top: 10px;  
        padding: 5px;  
        font-size: 14px;  
        border: 1px solid #2F4F4F;  
        width: 50%;  
        background: url(Images/img-expand.png) no-repeat 750px 7px;  
        background-color: #2fa4e7;  
        text-align: center;  
    }  
    .ChildAccordionContent  
    {  
        border-color: -moz-use-text-color #72b65a;  
        border-right: 1px dashed #2F4F4F;  
        border-style: none solid solid;  
        border-width: medium 1px 1px;  
        padding: 10px 5px 5px;  
        width: 98%;  
        text-align: left;  
        background-color: #cbebbf;  
    }  
    .ChildAccordionHeader  
    {  
        cursor: pointer;  
        font-family: Arial,Sans-Serif;  
        font-weight: bold;  
        margin-top: 10px;  
        padding: 5px;  
        font-size: 14px;  
        border: 1px solid #2F4F4F;  
        width: 98%;  
        background: url(Images/arrow_down.png) no-repeat 720px 7px;  
        background-color: #3e6331;  
        color: white;  
        text-align: left;  
    }  
    .ChildAccordionHeaderSelected  
    {  
        color: white;  
        cursor: pointer;  
        font-family: Arial,Sans-Serif;  
        font-weight: bold;  
        margin-top: 10px;  
        padding: 5px;  
        font-size: 14px;  
        border: 1px solid #2F4F4F;  
        width: 98%;  
        background: url(Images/arrown_up.png) no-repeat 720px 7px;  
        background-color: #6ca359;  
        text-align: center;  
    }  
</style>  

 توجه داشته باشید، به 4 تصویر برای باز و بسته کردن بخش اصلی و زیربخش های آن نیاز دارید که در stylesheet فراخوانی می شوند. همه تصاویر در فایل ضمیمه قرار داده شده است.

گام پنجم:

برای ایجاد  Accordion مراحل زیر را انجام می دهیم.

1.دریافت داده ها از پایگاه داده

2.ایجاد  Accordion

3. گرفتنBranch های غیرتکراری با استفاده از  LINQ

4.ایجاد Parent Pane با داده 

5.ایجاد Accordion فرزند

6.فیلتر داده ها با توجه به شاخه فعلی

7.ایجاد Child Pane و اضافه کردن آن به Child Accordion

8.اضافه کردن  Child Accordion به  Parent Pane و Parent Pane به  Parent Accordion.

9.اضافه کردن Parent Accordion به پنل صفحه

کد زیر را در رویداد Page Load صفحه ی Default.aspx می نویسیم و فضای نام های زیر را به این صفحه اضافه می کنیم.

using System.Data;  
using System.Configuration;  
using AjaxControlToolkit;  
using System.Data.SqlClient;  

1.داده ها را از جدول پایگاه داده  به نام  "Students" دریافت می کنیم. 

DataTable dt = new DataTable();  
 try  
 {  
  
     using (SqlConnection connection = new SqlConnection())  
     {  
         connection.ConnectionString = ConfigurationManager.ConnectionStrings["constr"].ToString();  
         connection.Open();  
         SqlCommand cmd = new SqlCommand();  
         cmd.Connection = connection;  
         cmd.CommandText = "Select * from Students";  
         cmd.CommandType = CommandType.Text;  
         SqlDataAdapter da = new SqlDataAdapter(cmd);  
  
         da.Fill(dt);  
         cmd.Dispose();  
         connection.Close();  
     }  
 }  
 catch (Exception ex) { }

2. به طور داینامیک، Parent accordion را می سازیم و property های آن را با تعدادی کلاس css تنظیم می کنیم.

Accordion ParentAccordion = new Accordion();  
ParentAccordion.ID = "MyParentAccordion";  
ParentAccordion.SelectedIndex = -1;//No default selection  
ParentAccordion.RequireOpenedPane = false;//no open pane  
ParentAccordion.HeaderCssClass = "ParentAccordionHeader";//Header class  
ParentAccordion.HeaderSelectedCssClass = "ParentAccordionHeaderSelected";//Selected herder class  
ParentAccordion.ContentCssClass = "ParentAccordionContent";//Content class  

3. Branch های غیرتکراری را با استفاده از LINQ query از جدول داده دریافت می کنیم.

var res = dt.AsEnumerable()  
.GroupBy(r => r.Field<String>("BranchName")).Select(g => new  
{  
  
   BranchName = g.First().Field<String>("BranchName")  
}); 

مانند کد زیر تعدادی متغیر تعریف میکنیم

Label lbParentTitle; Label lbParentContent; AccordionPane ParentPane;  
AccordionPane ChildPane; Label lbChildTitle; Label lbChildContent; Accordion ChildAccordion; int i = 0; 

بعد از گرفتن Branch های غیرتکراری ، از حلقه  foreach  برای دسترسی به Branchهای فیلترشده استفاده می کنیم.

4. Parent Pane را ایجاد و عنوان آن را انتخاب می کنیم.

ParentPane = new AccordionPane();  
lbParentTitle = new Label();  
lbParentContent = new Label();  
ParentPane.ID = "Pane_" + i.ToString();  
lbParentTitle.Text = r.BranchName;  
ParentPane.HeaderContainer.Controls.Add(lbParentTitle);  

5. Child Accordion را به طور داینامیک ایجاد کرده و property های آن را با استفاده از کلاس های CSS تنظیم می کنیم.

ChildAccordion = new Accordion();  
ChildAccordion.ID = "MyChildtAccordion_" + i.ToString();  
ChildAccordion.SelectedIndex = -1;//No default selection  
ChildAccordion.RequireOpenedPane = false;//no default open pane  
ChildAccordion.HeaderCssClass = "ChildAccordionHeader";//Header class  
ChildAccordion.HeaderSelectedCssClass = "ChildAccordionHeaderSelected";//Selected herder class  
ChildAccordion.ContentCssClass = "ChildAccordionContent";//Content class

6.اسامی همه ی دانشجویان و اطلاعاتشان را به ترتیب با استفاده از حلقه  foreach از هر Branch  دریافت میکنیم.

var result = from g in dt.AsEnumerable()  
where g.Field<string>("BranchName") == r.BranchName  
select new  
{  
    StudentName = g.Field<string>("StudentName"),  
    StudentFName = g.Field<string>("StudentFName"),  
    StudentDOB = g.Field<DateTime>("StudentDOB"),  
    StudentMobile = g.Field<string>("StudentMobile")  
};  

7. Child pane را ایجاد کرده و به Child Accordion اضافه می کنیم.

foreach (var data in result)  
{  
    ChildPane = new AccordionPane();  
    lbChildTitle = new Label();  
    lbChildContent = new Label();  
    ChildPane.ID = "ChildPane_" + data.StudentName + data.StudentDOB;  
    lbChildTitle.Text = data.StudentName;  
    lbChildContent.Text = "Father's Name :" + data.StudentFName + "<br/>" + "Date Of Birth :"  
         + data.StudentDOB.ToString() + "<br/>" + "Mobile No. :" + data.StudentMobile;  
    ChildPane.HeaderContainer.Controls.Add(lbChildTitle);  
    ChildPane.ContentContainer.Controls.Add(lbChildContent);  
    ChildAccordion.Panes.Add(ChildPane);  
}  

8.Child Accordion را به Parent Pane و Parent Pane را به  Parent Accordion اضافه می کنیم.

ParentPane.ContentContainer.Controls.Add(ChildAccordion);  
ParentAccordion.Panes.Add(ParentPane);i++; 

9.Parent Accordion  را به پنل صفحه خارج از حلقه اضافه می کنیم.

this.MyContent.Controls.Add(ParentAccordion);  

گام ششم

حال برنامه را اجرا می کنیم.

پس از انتخاب "دانشکده علوم"

وبعد پس از انتخاب "خاطره "

به همین ترتیب با انتخاب دانشکده شریعتی و اولین دانشجو، خروجی زیر را خواهیم داشت. 

به همین ترتیب با انتخاب دانشکده آی تی و دومین دانشجو، خروجی زیر را خواهیم داشت.