ساخت یک لیست آکاردئونی به صورت داینامیک توسط jquery و با استفاده از Repeater در asp.net
سه شنبه 30 دی 1393در این مقاله میخواهیم با استفاده از 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(); } }
حالا میتونید برنامه رو اجرا کنید.
- ASP.net
- 3k بازدید
- 3 تشکر