locked
Async WebGrid RRS feed

  • Question

  • User1851820814 posted

    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

     

     

    Tuesday, October 13, 2020 1:51 PM

Answers

  • User475983607 posted

    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.

    https://www.c-sharpcorner.com/article/unobtrusive-ajax-and-jquery-for-partial-updates-in-asp-net-mvc/

    https://www.aspsnippets.com/Articles/ASPNet-MVC-AjaxBeginForm-Tutorial-with-example.aspx

    Reference

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.ajax.ajaxextensions.beginform?view=aspnet-mvc-5.2

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 13, 2020 2:56 PM
  • User1312693872 posted

    Hi,ASPatel

    Do 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 14, 2020 3:05 AM

All replies

  • User475983607 posted

    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 ?

    Write your own using AJAX or find a JavaScript/jQuery table library that has the features you're looking for. 

    Tuesday, October 13, 2020 2:43 PM
  • User1851820814 posted

    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. 

    Tuesday, October 13, 2020 2:47 PM
  • User475983607 posted

    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.

    https://www.c-sharpcorner.com/article/unobtrusive-ajax-and-jquery-for-partial-updates-in-asp-net-mvc/

    https://www.aspsnippets.com/Articles/ASPNet-MVC-AjaxBeginForm-Tutorial-with-example.aspx

    Reference

    https://docs.microsoft.com/en-us/dotnet/api/system.web.mvc.ajax.ajaxextensions.beginform?view=aspnet-mvc-5.2

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, October 13, 2020 2:56 PM
  • User1312693872 posted

    Hi,ASPatel

    Do 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

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, October 14, 2020 3:05 AM