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.Show more and less in HTML Table using jQuery AJAX in ASP.Net<p>Hi&nbsp;jochk12345,</p> <p>Check this example. Now please take its reference and correct your code.</p> <p><strong><span style="text-decoration: underline;">Database</span></strong></p> <p>For this example I have used of Northwind database that you can download using the link given below.</p> <p><a href="https://www.aspsnippets.com/Articles/Install-Microsoft-Northwind-and-Pubs-Sample-databases-in-SQL-Server-Management-Studio.aspx" target="_blank">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;script type=&#34;text/javascript&#34; src=&#34;https://code.jquery.com/jquery-2.2.3.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { getdata(); $(&#39;#tblgrid&#39;).each(function () { $(this).find(&#39;div[class=trclass]:gt(3)&#39;).hide(); }); $(&#39;#btnShowMoreLess&#39;).on(&#34;click&#34;, function () { if ($(this).val() == &#39;view more&#39;) { $(this).val(&#39;view less&#39;); $(&#39;#tblgrid&#39;).each(function () { $(this).find(&#39;div[class=trclass]:gt(3)&#39;).show(); }); } else { $(this).val(&#39;view more&#39;); $(&#39;#tblgrid&#39;).each(function () { $(this).find(&#39;div[class=trclass]:gt(3)&#39;).hide(); }); } }); }); function getdata() { $.ajax({ type: &#34;POST&#34;, url: &#34;WebService.asmx/Getdata&#34;, data: &#39;{}&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, async: false, success: function (data) { $(&#39;#tblgrid&#39;).empty(); var table = $(&#39;#tblgrid&#39;); var rows = &#34;&#34;; for (var i = 0; i &lt; data.d.length; i++) { rows += &#34;&lt;div class=trclass&gt;&#34; + &#34;&lt;tr&gt;&lt;td class=tdcolumn&gt;&#34; + &#34;&lt;div class=tablediv&gt;&#34; + &#34;&lt;div class=Productid&gt;&#34; + data.d[i].Productid + &#34;&lt;/div&gt;&#34; + &#34;&lt;div class=Productaddress&gt;&#34; + data.d[i].productaddress + &#34;&lt;/div&gt;&#34; + &#34;&lt;div class=sproductname&gt;&#34; + data.d[i].productname + &#34;&lt;/div&gt;&lt;br /&gt;&#34; } table.append(rows); }, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); } &lt;/script&gt; &lt;div id=&#34;tblgrid&#34;&gt; &lt;/div&gt; &lt;input type=&#34;button&#34; value=&#34;view more&#34; id=&#34;btnShowMoreLess&#34; /&gt;</pre> <p><strong><span style="text-decoration: underline;">WebService</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; using System.Data; using System.Data.SqlClient; using System.Web.Services; /// &lt;summary&gt; /// Summary description for WebService /// &lt;/summary&gt; [WebService(Namespace = &#34;http://tempuri.org/&#34;)] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] public class WebService : System.Web.Services.WebService { [System.Web.Services.WebMethod] public Products[] Getdata() { List&lt;Products&gt; details = new List&lt;Products&gt;(); using (var con = new SqlConnection(ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString)) { SqlCommand cmd = new SqlCommand(&#34;SELECT TOP 10 * FROM Products&#34;, con); using (var sda = new SqlDataAdapter()) { cmd.Connection = con; sda.SelectCommand = cmd; DataTable TableData = new DataTable(); TableData.Clear(); sda.Fill(TableData); foreach (DataRow dtrow in TableData.Rows) { Products user = new Products(); user.Productid = Convert.ToInt32(dtrow[&#34;ProductID&#34;].ToString()); user.productaddress = dtrow[&#34;QuantityPerUnit&#34;].ToString(); user.productname = dtrow[&#34;productName&#34;].ToString(); details.Add(user); } } } return details.ToArray(); } public class Products { public int Productid; public string productname; public string productaddress; } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System.Configuration Imports System.Data Imports System.Data.SqlClient Imports System.Web.Services &#39; To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. &lt;System.Web.Script.Services.ScriptService()&gt; _ &lt;WebService(Namespace:=&#34;http://tempuri.org/&#34;)&gt; _ &lt;WebServiceBinding(ConformsTo:=WsiProfiles.BasicProfile1_1)&gt; _ &lt;Global.Microsoft.VisualBasic.CompilerServices.DesignerGenerated()&gt; _ Public Class WebService Inherits System.Web.Services.WebService &lt;System.Web.Services.WebMethod()&gt; Public Function Getdata() As Products() Dim details As List(Of Products) = New List(Of Products)() Using con = New SqlConnection(ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString) Dim cmd As SqlCommand = New SqlCommand(&#34;SELECT TOP 10 * FROM Products&#34;, con) Using sda = New SqlDataAdapter() cmd.Connection = con sda.SelectCommand = cmd Dim TableData As DataTable = New DataTable() TableData.Clear() sda.Fill(TableData) For Each dtrow As DataRow In TableData.Rows Dim user As Products = New Products() user.Productid = Convert.ToInt32(dtrow(&#34;ProductID&#34;).ToString()) user.productaddress = dtrow(&#34;QuantityPerUnit&#34;).ToString() user.productname = dtrow(&#34;productName&#34;).ToString() details.Add(user) Next End Using End Using Return details.ToArray() End Function Public Class Products Public Productid As Integer Public productname As String Public productaddress As String End Class End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><img src="https://i.imgur.com/8PjlMbE.gif" alt="" width="248" height="609" />&nbsp;</p>https://www.aspforums.net:443/Threads/160383/Show-more-and-less-in-HTML-Table-using-jQuery-AJAX-in-ASPNet/https://www.aspforums.net:443/Threads/160383/Show-more-and-less-in-HTML-Table-using-jQuery-AJAX-in-ASPNet/Tue, 07 May 2019 07:48:54 GMT