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.Search and Filter dynamic HTML Table on TextBox KeyPress using jQuery AJAX, C# and VB.Net in ASP.Net<p>Hi&nbsp;<a class="username" rel="jovceka">jovceka,</a></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">Download Northwind Database</a></p> <p><strong><span style="text-decoration: underline;">HTML</span></strong></p> <pre class="brush: html">&lt;input type=&#34;text&#34; name=&#34;txtSearch&#34; /&gt; &lt;br /&gt; &lt;table id=&#34;example&#34;&gt; &lt;tr&gt; &lt;th&gt;Id&lt;/th&gt; &lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Details&lt;/th&gt; &lt;/tr&gt; &lt;/table&gt; &lt;script type=&#34;text/javascript&#34; src=&#34;https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { GetCategory(&#34;&#34;); $(&#39;input[name=txtSearch]&#39;).on(&#39;keyup&#39;, function () { var searchText = $(this).val(); GetCategory(searchText); }); }); function GetCategory(text) { $.ajax({ type: &#34;POST&#34;, contentType: &#34;application/json; charset=utf-8&#34;, url: &#34;WebService.asmx/GetCategories&#34;, data: &#34;{searchText: &#39;&#34; + text + &#34;&#39;}&#34;, dataType: &#34;json&#34;, success: function (data) { var table = $(&#39;#example&#39;); $(table).find(&#34;tr:gt(0)&#34;).remove(); var rows = &#34;&#34;; for (var i = 0; i &lt; data.d.length; i++) { var id = data.d[i].Id; var name = data.d[i].Name; var details = data.d[i].Description; rows += &#34;&lt;tr&gt;&lt;td&gt;&#34; + id + &#34;&lt;/td&gt;&lt;td&gt;&#34; + name + &#34;&lt;/td&gt;&lt;td&gt;&#34; + details + &#34;&lt;/td&gt;&lt;/tr&gt;&#34;; } table.append(rows); }, error: function (response) { alert(&#34;Error while Showing update data&#34;); } }); } &lt;/script&gt;</pre> <p><strong><span style="text-decoration: underline;">Web Service</span></strong></p> <p><strong>C#</strong></p> <pre class="brush: csharp">using System; using System.Collections.Generic; using System.Configuration; 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 { [WebMethod] public List&lt;Category&gt; GetCategories(string searchText) { List&lt;Category&gt; categories = new List&lt;Category&gt;(); string conString = ConfigurationManager.ConnectionStrings[&#34;constr&#34;].ConnectionString; string query = &#34;SELECT CategoryID,CategoryName,Description FROM Categories WHERE (CategoryName LIKE @Name + &#39;%&#39; OR Description LIKE @Name + &#39;%&#39;) OR @Name IS NULL&#34;; using (SqlConnection con = new SqlConnection(conString)) { SqlCommand cmd = new SqlCommand(query, con); if (!string.IsNullOrEmpty(searchText)) { cmd.Parameters.AddWithValue(&#34;@Name&#34;, searchText); } else { cmd.Parameters.AddWithValue(&#34;@Name&#34;, (object)DBNull.Value); } con.Open(); SqlDataReader sdr = cmd.ExecuteReader(); while (sdr.Read()) { categories.Add(new Category { Id = Convert.ToInt32(sdr[&#34;CategoryID&#34;]), Name = sdr[&#34;CategoryName&#34;].ToString(), Description = sdr[&#34;Description&#34;].ToString() }); } con.Close(); } return categories; } public class Category { public int Id { get; set; } public string Name { get; set; } public string Description { get; set; } } } </pre> <p><strong>VB.Net</strong></p> <pre class="brush: vb">Imports System Imports System.Collections.Generic Imports System.Configuration 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;WebMethod()&gt; Public Function GetCategories(ByVal searchText As String) As List(Of Category) Dim categories As List(Of Category) = New List(Of Category)() Dim conString As String = ConfigurationManager.ConnectionStrings(&#34;constr&#34;).ConnectionString Dim query As String = &#34;SELECT CategoryID,CategoryName,Description FROM Categories WHERE (CategoryName LIKE @Name + &#39;%&#39; OR Description LIKE @Name + &#39;%&#39;) OR @Name IS NULL&#34; Using con As SqlConnection = New SqlConnection(conString) Dim cmd As SqlCommand = New SqlCommand(query, con) If Not String.IsNullOrEmpty(searchText) Then cmd.Parameters.AddWithValue(&#34;@Name&#34;, searchText) Else cmd.Parameters.AddWithValue(&#34;@Name&#34;, CObj(DBNull.Value)) End If con.Open() Dim sdr As SqlDataReader = cmd.ExecuteReader() While sdr.Read() categories.Add(New Category With { .Id = Convert.ToInt32(sdr(&#34;CategoryID&#34;)), .Name = sdr(&#34;CategoryName&#34;).ToString(), .Description = sdr(&#34;Description&#34;).ToString() }) End While con.Close() End Using Return categories End Function Public Class Category Public Property Id As Integer Public Property Name As String Public Property Description As String End Class End Class</pre> <p><strong><span style="text-decoration: underline;">Screenshot</span></strong></p> <p><strong><span style="text-decoration: underline;"><img src="https://i.imgur.com/s8mXB0h.gif" alt="" width="472" height="308" /></span></strong></p>https://www.aspforums.net:443/Threads/167700/Search-and-Filter-dynamic-HTML-Table-on-TextBox-KeyPress-using-jQuery-AJAX-C-and-VBNet-in-ASPNet/https://www.aspforums.net:443/Threads/167700/Search-and-Filter-dynamic-HTML-Table-on-TextBox-KeyPress-using-jQuery-AJAX-C-and-VBNet-in-ASPNet/Fri, 07 Dec 2018 01:04:57 GMT