Async WebGrid[Answered] RSS

• • Reply
  ASPatel

  Member

  2 Points

  8 Posts

  Async WebGrid

  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

   

   

• • Reply
  mgebhard

  All-Star

  53081 Points

  23648 Posts

  Re: Async WebGrid

  Oct 13, 2020 02:43 PM|mgebhard|LINK

  ASPatel

  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. 

• • Reply
  ASPatel

  Member

  2 Points

  8 Posts

  Re: Async WebGrid

  Oct 13, 2020 02:47 PM|ASPatel|LINK

  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. 

• • Reply
  mgebhard

  All-Star

  53081 Points

  23648 Posts

  Re: Async WebGrid

  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.

  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

• • Reply
  Jerry Cai

  Participant

  990 Points

  327 Posts

  Re: Async WebGrid

  Oct 14, 2020 03:05 AM|Jerry Cai|LINK

  Hi,ASPatel

  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

  .NET forums are moving to a new home on Microsoft Q&A, we encourage you to go to Microsoft Q&A for .NET for posting new questions and get involved today.