Oct 13, 2020 01:51 PM|ASPatel|LINK
Hi,
In WeGrid MVC control when I jump onto other page or sort it postback which is very annoying with WebGrid.
Do we have an option to make the WebGrid works asynchronously or is there any other solution to provide Grid functionality asynchronously apart from jqueryDataTable ?
Thanks
All-Star
51081 Points
Oct 13, 2020 02:43 PM|mgebhard|LINK
ASPatelDo we have an option to make the WebGrid works asynchronously or is there any other solution to provide Grid functionality asynchronously apart from jqueryDataTable ?
Write your own using AJAX or find a JavaScript/jQuery table library that has the features you're looking for.
All-Star
51081 Points
Oct 13, 2020 02:56 PM|mgebhard|LINK
ASPatel
This is surprising!
there is no such option available in ASP.NET MVC, I worked 12 years in ASP.NET WebForms where we have very good options for Grids.
MVC has unobtrusive ajax which is similar to using the UpdatePanel for partial page updates. I'm not a big fan of partial page refreshes but it works. It allows you to keep existing logic but you have to move to Partial Views.
Reference
Oct 14, 2020 03:05 AM|Jerry Cai|LINK
Hi,ASPatel
ASPatelDo we have an option to make the WebGrid works asynchronously
WebGrid supports asynchronously updating the grid content using AJAX, you can check my example:
Controller:
public ActionResult Index() { var model = new List<Student> { new Student {Id=1,name ="C" }, new Student {Id=3,name ="B" }, new Student {Id=2,name ="A" } }; return View(model); }
Model:
public class Student { public int Id { get; set; } public string name { get; set; } }
View:
@model IEnumerable<MyProject.Models.Student> <script src="~/Scripts/jquery-3.4.1.min.js"></script> @*You also need a reference to jQuery*@ <div id='grid'> @*ensure the div that contains the grid has an id*@ @if (Model != null) { var grid = new WebGrid(Model, null, defaultSort: "Id", rowsPerPage: 25, canPage: true, canSort: true, ajaxUpdateContainerId: "grid" ); @grid.GetHtml( columns: grid.Columns ( grid.Column(columnName: "Id", header: "ColumnA"), grid.Column(columnName: "name", header: "ColumnB") ) ) } </div> @section scripts { <script> $(document).ready(function () { function updateGrid(e) { e.preventDefault(); var url = $(this).attr('href'); var grid = $(this).parents('.ajaxGrid'); var id = grid.attr('id'); grid.load(url + ' #' + id); }; $('.ajaxGrid table thead tr a').on('click', updateGrid); $('.ajaxGrid table tfoot tr a').on('click', updateGrid); }); </script> }
And more details can refer to asynchronously updating the grid content using AJAX.
Notice that the .live() in the link should not be used in jquery 1.7 or more, so I changed it to 'on()' in my demo.
Result:
Best Regards,
Jerry Cai
4 replies
Last post Oct 14, 2020 03:05 AM by Jerry Cai