ساخت یک لیست آکاردئونی به صورت داینامیک توسط jquery و با استفاده از Repeater در asp.net

در این مقاله میخواهیم با استفاده از repeater در asp.net به صورت داینامیک یک لیست آکاردئونی بسازیم

ساخت یک لیست آکاردئونی به صورت داینامیک توسط   jquery و با استفاده از Repeater در asp.net

برای واضح شدن موضوع ابتدا خروجی را نشون  میدهم:

خوب همانطور که مشاهده میکنید jQuery Accordion خیلی کاربردی است و با کلیک رو هدر محتویات مربوط به آن نمایش داده می شود:

خوب ابتدا فایل css و script ها رو به صفحه خود رفرنس میدیم:

<title>Dynamic Jquery Accordion using Repeater in ASP.NET</title>  
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/sunny/jquery-ui.css" />  
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>  
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>  
    <script type="text/javascript">  
        $(function () {  
            var icons = {  
                header: "ui-icon-circle-arrow-e",  
                activeHeader: "ui-icon-circle-arrow-s"  
            };  
            $("#accordion").accordion({  
                icons: icons  
            });  
            $("#toggle").button().click(function () {  
                if ($("#accordion").accordion("option", "icons")) {  
                    $("#accordion").accordion("option", "icons", null);  
                } else {  
                    $("#accordion").accordion("option", "icons", icons);  
                }  
            });  
        });  
    </script>

در اینجا برای بایند کردن اطلاعات به jQuery Accordion از یک data table استفاده کردیم شما میتونید از پایگاه داده استفاده کنید:

  public DataTable createDataTable()  
    {  
        DataTable dt = new DataTable();  
        DataColumn dc = new DataColumn();  
        dc.ColumnName = "Name";  
        dc.DataType = typeof(string);  
        dt.Columns.Add(dc);  
  
        dc = new DataColumn();  
        dc.ColumnName = "Description";  
        dc.DataType = typeof(string);  
        dt.Columns.Add(dc);  
  
        dc = new DataColumn();  
        dc.ColumnName = "Email";  
        dc.DataType = typeof(string);  
        dt.Columns.Add(dc);  
  
        dc = new DataColumn();  
        dc.ColumnName = "Phone";  
        dc.DataType = typeof(string);  
  
        dt.Columns.Add(dc);  
  
        dt.Rows.Add(new object[] { "Jitendra Gangwar", "Hello my name is Jitendra Gangwar and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });  
        dt.Rows.Add(new object[] { "Sateesh", "Hello my name is Sateesh and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });  
        dt.Rows.Add(new object[] { "Dhirendra", "Hello my name is Dhirendra and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });  
        dt.Rows.Add(new object[] { "Anu", "Hello my name is Anu and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });  
        dt.Rows.Add(new object[] { "Aarti", "Hello my name is Aarti and I am software engineer.", "Demo@Gmail.com", "My Phone is 123456789" });  
  
  
        return dt;  
  
    } 

یک  repeater به شکل زیر به صفحه خود اضافه کنید :

<div id="accordion" style="width: 500px;">  
        <asp:Repeater ID="repAccordian" runat="server">  
            <ItemTemplate>  
                <h3>  
                    <%#Eval("Name") %></br></h3>  
                <div>  
                    <table>  
                        <tr>  
                            <td>  
                                <b>Description</b>  
                            </td>  
                            <td>  
                                <%#Eval("Description") %>  
                            </td>  
                        </tr>  
                        <tr>  
                            <td>  
                                <b>Email</b>  
                            </td>  
                            <td>  
                                <%#Eval("Email") %>  
                            </td>  
                        </tr>  
                        <tr>  
                            <td>  
                                <b>Phone</b>  
                            </td>  
                            <td>  
                                <%#Eval("Phone") %>  
                            </td>  
                        </tr>  
                    </table>  
                </div>  
            </ItemTemplate>  
        </asp:Repeater>  
    </div>  

از متد زیر برای گرفتن اطلاعات از data table و بایند کردنش به repeater استفاده میکنیم:

public void createAccordianUsingRepeater()  
    {  
        repAccordian.DataSource = createDataTable();  
        repAccordian.DataBind();  
    }  
  
protected void Page_Load(object sender, EventArgs e)  
    {  
        if (!Page.IsPostBack)  
        {  
            createAccordianUsingRepeater();  
        }  
    } 

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

فایل های ضمیمه