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.Custom Paging and Searching in WebGrid using jQuery AJAX in ASP.Net MVC<p>Hi&nbsp;abhi619,</p> <p>Using the below two article i have created the example.</p> <h1 class="header"><a title="Populate (Bind) WebGrid from database using jQuery AJAX and JSON in ASP.Net MVC'a" href="https://www.aspsnippets.com/Articles/Populate-Bind-WebGrid-from-database-using-jQuery-AJAX-and-JSON-in-ASPNet-MVC.aspx">Populate (Bind) WebGrid from database using jQuery AJAX and JSON in ASP.Net MVC</a></h1> <h1 class="header"><a title="Search and Filter GridView as you type in TextBox using jQuery AJAX in ASP.Net'a" href="https://www.aspsnippets.com/Articles/Search-and-Filter-GridView-as-you-type-in-TextBox-using-jQuery-AJAX-in-ASPNet.aspx">Search and Filter GridView as you type in TextBox using jQuery AJAX in ASP.Net</a></h1> <p><span style="text-decoration: underline;"><strong>SQL</strong></span></p> <pre class="brush: sql">CREATE PROCEDURE [dbo].[GetCustomersPageWise] @SearchTerm VARCHAR(100) = &#39;&#39; ,@PageIndex INT = 1 ,@PageSize INT = 10 ,@RecordCount INT OUTPUT AS BEGIN SET NOCOUNT ON; SELECT ROW_NUMBER() OVER ( ORDER BY [CustomerID] ASC )AS RowNumber ,[CustomerID] ,[CompanyName] ,[ContactName] ,[ContactTitle] ,[Address] ,[City] ,[Region] ,[PostalCode] ,[Country] ,[Phone] ,[Fax] INTO #Results FROM [Customers] WHERE [ContactName] LIKE @SearchTerm + &#39;%&#39; OR @SearchTerm = &#39;&#39; SELECT @RecordCount = COUNT(*) FROM #Results SELECT * FROM #Results WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1 DROP TABLE #Results END</pre> <p><strong><span style="text-decoration: underline;">Model</span></strong></p> <pre class="brush: csharp">public class CustomerModel { public List&lt;Customer&gt; Customers { get; set; } public string SearchTerm { get; set; } public int PageIndex { get; set; } public int PageSize { get; set; } public int RecordCount { get; set; } }</pre> <p><strong><span style="text-decoration: underline;">Controller</span></strong></p> <pre class="brush: csharp">public class HomeController : Controller { // GET: Home public ActionResult Index() { List&lt;Customer&gt; dummy = new List&lt;Customer&gt;(); dummy.Add(new Customer()); return View(dummy); } [HttpPost] public JsonResult AjaxMethod(int pageIndex, string searchTerm) { NorthwindEntities entities = new NorthwindEntities(); CustomerModel model = new CustomerModel(); model.SearchTerm = searchTerm; model.PageIndex = pageIndex; model.PageSize = 10; ObjectParameter recordCount = new ObjectParameter(&#34;RecordCount&#34;, typeof(int)); model.Customers = entities.GetCustomers(model.SearchTerm, model.PageIndex, model.PageSize, recordCount).ToList(); model.RecordCount = Convert.ToInt32(recordCount.Value); return Json(model); } }</pre> <p><strong><span style="text-decoration: underline;">View</span></strong></p> <pre class="brush: html">@model List&lt;Customer&gt; @{ Layout = null; WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: false); } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta name=&#34;viewport&#34; content=&#34;width=device-width&#34; /&gt; &lt;title&gt;Index&lt;/title&gt; &lt;style type=&#34;text/css&#34;&gt; body { font-family: Arial; font-size: 10pt; } table { border: 1px solid #ccc; border-collapse: collapse; background-color: #fff; } table th { background-color: #B8DBFD; color: #333; font-weight: bold; } table th, table td { padding: 5px; border: 1px solid #ccc; } table, table table td { border: 0px solid #ccc; } .Pager span { text-align: center; color: #333; display: inline-block; width: 20px; background-color: #B8DBFD; margin-right: 3px; line-height: 150%; border: 1px solid #B8DBFD; } .Pager a { text-align: center; display: inline-block; width: 20px; background-color: #ccc; color: #333; border: 1px solid #ccc; margin-right: 3px; line-height: 150%; text-decoration: none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;h4&gt;Customers&lt;/h4&gt; &lt;hr /&gt; &lt;input type=&#34;text&#34; id=&#34;txtSearch&#34; /&gt; &lt;br /&gt;&lt;br /&gt; @webGrid.GetHtml( htmlAttributes: new { @id = &#34;WebGrid&#34;, @class = &#34;Grid&#34; }, columns: webGrid.Columns( webGrid.Column(&#34;CustomerID&#34;, &#34;CustomerID&#34;), webGrid.Column(&#34;ContactName&#34;, &#34;ContactName&#34;), webGrid.Column(&#34;City&#34;, &#34;City&#34;), webGrid.Column(&#34;Country&#34;, &#34;Country&#34;))) &lt;br /&gt; &lt;div class=&#34;Pager&#34;&gt;&lt;/div&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 src=&#34;~/Scripts/ASPSnippets_Pager.min.js&#34;&gt;&lt;/script&gt; &lt;script type=&#34;text/javascript&#34;&gt; $(function () { GetCustomers(1, $(&#39;#txtSearch&#39;).val().trim()); }); $(&#34;body&#34;).on(&#34;click&#34;, &#34;.Pager .page&#34;, function () { GetCustomers(parseInt($(this).attr(&#39;page&#39;)), $(&#39;#txtSearch&#39;).val().trim()); }); $(&#34;[id*=txtSearch]&#34;).live(&#34;keyup&#34;, function () { GetCustomers(parseInt(1), $(&#39;#txtSearch&#39;).val().trim()); }); function GetCustomers(pageIndex, searchTerm) { $.ajax({ type: &#34;POST&#34;, url: &#34;/Home/AjaxMethod&#34;, data: &#39;{pageIndex: &#39; + pageIndex + &#39;, searchTerm: &#34;&#39; + searchTerm + &#39;&#34;}&#39;, contentType: &#34;application/json; charset=utf-8&#34;, dataType: &#34;json&#34;, success: OnSuccess, failure: function (response) { alert(response.d); }, error: function (response) { alert(response.d); } }); }; function OnSuccess(response) { var model = response; var row = $(&#34;#WebGrid tbody tr:last-child&#34;).clone(true); $(&#34;#WebGrid tbody tr&#34;).remove(); $.each(model.Customers, function () { var customer = this; $(&#34;td&#34;, row).eq(0).html(customer.CustomerID); $(&#34;td&#34;, row).eq(1).html(customer.ContactName); $(&#34;td&#34;, row).eq(2).html(customer.City); $(&#34;td&#34;, row).eq(3).html(customer.Country); $(&#34;#WebGrid&#34;).append(row); row = $(&#34;#WebGrid tbody tr:last-child&#34;).clone(true); }); $(&#34;.Pager&#34;).ASPSnippets_Pager({ ActiveCssClass: &#34;current&#34;, PagerCssClass: &#34;pager&#34;, PageIndex: model.PageIndex, PageSize: model.PageSize, RecordCount: model.RecordCount }); }; &lt;/script&gt; &lt;/body&gt; &lt;/html&gt;</pre> <p>&nbsp;</p>https://www.aspforums.net:443/Threads/182926/Custom-Paging-and-Searching-in-WebGrid-using-jQuery-AJAX-in-ASPNet-MVC/https://www.aspforums.net:443/Threads/182926/Custom-Paging-and-Searching-in-WebGrid-using-jQuery-AJAX-in-ASPNet-MVC/Tue, 16 Jul 2019 12:09:38 GMT