ASPForums.Net RSS Feedhttp://www.aspforums.net/Handlers/RSS.ashxLatest additions to the content that appears on ASPForums.Net(c) 2019 www.aspforums.com. All rights reserved.Bind ListView on Bootstrap DorpDown menu click using jQuery AJAX in ASP.Net<p>Hi<a class="username" rel="nauna">nauna</a>,</p> <p>Use jQuery Ajax to bind the ListView on ul click.</p> <p>Create WebMethod that will be called using jQuery Ajax and bind the ListView on ul click on client side.</p> <p>For bind listview using jquery ajax refer below link.</p> <h1 class="header"><a class="title f16" href="https://www.aspforums.net:443/Threads/165063/Bind-ASPNet-ListView-using-jQuery-AJAX/">Bind ASP.Net ListView using jQuery AJAX</a></h1> <p>In this link ListView is binded on page load, you just need to bind it on ul click.</p>https://www.aspforums.net:443/Threads/149662/Bind-ListView-on-Bootstrap-DorpDown-menu-click-using-jQuery-AJAX-in-ASPNet/https://www.aspforums.net:443/Threads/149662/Bind-ListView-on-Bootstrap-DorpDown-menu-click-using-jQuery-AJAX-in-ASPNet/Thu, 23 Aug 2018 00:08:07 GMTBind ListView on Bootstrap DorpDown menu click using jQuery AJAX in ASP.Net<p>Hi nauna,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;li&gt;&lt;a class=&#34; dropdown-toggle top-display&#34; id=&#34;dropdownMenu4&#34; href=&#34;#&#34; data-toggle=&#34;dropdown&#34; aria-haspopup=&#34;true&#34; aria-expanded=&#34;true&#34;&gt;Messages &lt;span class=&#34;caret&#34;&gt;&lt;/span&gt;&lt;/a&gt; &lt;ul class=&#34;dropdown-menu notifications&#34; aria-labelledby=&#34;dropdownMenu4&#34;&gt; &lt;div class=&#34;notification-heading&#34;&gt; &lt;h4&gt; Notifications &lt;small class=&#34;pull-right&#34;&gt; &lt;asp:ListView ID=&#34;lvCustomers&#34; runat=&#34;server&#34; GroupPlaceholderID=&#34;groupPlaceHolder1&#34; ItemPlaceholderID=&#34;itemPlaceHolder1&#34;&gt; &lt;LayoutTemplate&gt; &lt;table cellpadding=&#34;0&#34; id=&#34;tblCustomers&#34; cellspacing=&#34;0&#34;&gt; &lt;tr&gt; &lt;th&gt; CustomerId &lt;/th&gt; &lt;th&gt; ContactName &lt;/th&gt; &lt;th&gt; Country &lt;/th&gt; &lt;/tr&gt; &lt;asp:PlaceHolder runat=&#34;server&#34; ID=&#34;groupPlaceHolder1&#34;&gt;&lt;/asp:PlaceHolder&gt; &lt;/table&gt; &lt;/LayoutTemplate&gt; &lt;GroupTemplate&gt; &lt;tr&gt; &lt;asp:PlaceHolder runat=&#34;server&#34; ID=&#34;itemPlaceHolder1&#34;&gt;&lt;/asp:PlaceHolder&gt; &lt;/tr&gt; &lt;/GroupTemplate&gt; &lt;ItemTemplate&gt; &lt;td class=&#34;CustomerId&#34;&gt; &lt;%# Eval(&#34;CustomerId&#34;) %&gt; &lt;/td&gt; &lt;td class=&#34;ContactName&#34;&gt; &lt;%# Eval(&#34;ContactName&#34;) %&gt; &lt;/td&gt; &lt;td class=&#34;Country&#34;&gt; &lt;%# Eval(&#34;Country&#34;) %&gt; &lt;/td&gt; &lt;/ItemTemplate&gt; &lt;/asp:ListView&gt; &lt;/small&gt; &lt;/h4&gt; &lt;/div&gt; &lt;/ul&gt; &lt;/li&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js&#34;&gt;&lt;/script&gt; &lt;link rel=&#34;stylesheet&#34; href=&#34;http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css&#34; /&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { $(&#39;li #dropdownMenu4&#39;).click(function () { $.ajax({ type: &#34;POST&#34;, url: &#34;CS.aspx/GetCustomers&#34;, data: {}, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: OnSuccess, failuer: function (response) { alert(resposnse.d); }, error: function (response) { alert(resposnse.responseText); } }); }); }); function OnSuccess(response) { var customers = response.d; var row = $(&#34;[id*=tblCustomers] tr:last-child&#34;).clone(true); $(&#34;[id*=tblCustomers] tr&#34;).not($(&#34;[id*=tblCustomers] tr:first-child&#34;)).remove(); $(customers).each(function () { var customer = $(this)[0]; $(&#34;.CustomerId&#34;, row).html(customer.ContactName); $(&#34;.ContactName&#34;, row).html(customer.ContactName); $(&#34;.Country&#34;, row).html(customer.Country); $(&#34;[id*=tblCustomers]&#34;).append(row); $(&#34;td&#34;, row).eq(0).find(&#34;[id*=Label1]&#34;).html(customer.ContactName); $(&#34;[id*=tblCustomers]&#34;).append(row); row = $(&#34;[id*=tblCustomers] tr:last-child&#34;).clone(true); row1 = $(&#34;[id*=tbl1Customers] tr:last-child&#34;).clone(true); }); } &lt;/script&gt;</pre> <p><strong><span style="text-decoration: underline;">C#</span></strong></p> <pre class="brush: csharp">protected void Page_Load(object sender, EventArgs e) { if (!this.IsPostBack) { this.BindDummyRow(); } } private void BindDummyRow() { DataTable dummy = new DataTable(); dummy.Columns.Add(&#34;CustomerId&#34;); dummy.Columns.Add(&#34;ContactName&#34;); dummy.Columns.Add(&#34;Country&#34;); dummy.Rows.Add(); lvCustomers.DataSource = dummy; lvCustomers.DataBind(); } [WebMethod] public static List&lt;Customer&gt; GetCustomers() { string constr = ConfigurationManager.ConnectionStrings[&#34;ConStr1&#34;].ConnectionString; SqlConnection con = new SqlConnection(constr); SqlCommand cmd = new SqlCommand(&#34;GetCustomerDetailss&#34;); cmd.CommandType = CommandType.StoredProcedure; cmd.Connection = con; List&lt;Customer&gt; customers = new List&lt;Customer&gt;(); con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { customers.Add(new Customer { CustomerId = sdr[&#34;CustomerId&#34;].ToString(), ContactName = sdr[&#34;ContactName&#34;].ToString(), Country = sdr[&#34;Country&#34;].ToString() }); } con.Close(); return customers; } public class Customer { public string CustomerId { get; set; } public string ContactName { get; set; } public string Country { get; set; } }</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/TXaWq4d.gif" alt="" width="409" height="270" /></p>https://www.aspforums.net:443/Threads/149662/Bind-ListView-on-Bootstrap-DorpDown-menu-click-using-jQuery-AJAX-in-ASPNet/https://www.aspforums.net:443/Threads/149662/Bind-ListView-on-Bootstrap-DorpDown-menu-click-using-jQuery-AJAX-in-ASPNet/Thu, 23 Aug 2018 05:31:11 GMT