Grid Update Not Firing. Getting 400 Error

[Mark]

Not sure what I am doing wrong. When I click the update button nothing happens. I do an Inspect and I get a status code:400. Any way to get more details on that error code? I am following the demo and no matter what I do, I get that error.

   @(Html.Kendo().Grid(Model)
                   .Name("Users")
                   .Columns(columns =>
                   {
                       columns.Bound(p => p.LastName);
                       columns.Bound(p => p.FirstName);
                       columns.Bound(p => p.ProjectName);
                       columns.Bound(p => p.ProjectBarcode);
                       columns.Bound(p => p.DateCreated).ClientTemplate("#= DateCreated? kendo.toString(kendo.parseDate(DateCreated, 'yyyy-MM-ddTHH:mm:ssZ'), 'MM/dd/yyyy'): '' #"); ;
                       columns.Bound(p => p.Approved);
                       columns.Command(command => { command.Edit(); }).Width(172);


                   })
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                   .Pageable()
                   .Navigatable()
                   .Sortable()
                   .Filterable()
            .DataSource(dataSource => dataSource
    .Ajax()

                       .PageSize(20)
                       .Model(model => model.Id(p => p.Id))
                       .Events(events => events.Error("error_handler"))
                       .Update(update => update.Action("update", "Account"))


)

   )

[Viktor Tachev]

Hi Mark,

I examined the code snippet and noticed that the Model is passed directly to the Grid. At the same time the widget is configured to use Ajax binding. Note that such configuration can result in unexpected behavior. Please modify the Grid so it is data-bound like illustrated in the example below and see how the behavior changes.

• https://demos.telerik.com/aspnet-core/grid/remote-data-binding

Regards,
Viktor Tachev
Progress Telerik

[Mark]

I switched it around and it is still not hitting my Profile controller

 

   @(Html.Kendo().Grid<WebPortal.Models.ApplicationUser>()
                   .Name("Users")
                   .Columns(columns =>
                   {
                       columns.Bound(p => p.LastName);
                       columns.Bound(p => p.FirstName);
                       columns.Bound(p => p.ProjectName);
                       columns.Bound(p => p.ProjectBarcode);
                       columns.Bound(p => p.DateCreated).ClientTemplate("#= DateCreated? kendo.toString(kendo.parseDate(DateCreated, 'yyyy-MM-ddTHH:mm:ssZ'), 'MM/dd/yyyy'): '' #"); ;
                       columns.Bound(p => p.Approved);
                       columns.Command(command => { command.Edit(); }).Width(172);


                   })
                    .Editable(editable => editable.Mode(GridEditMode.InLine))
                   .Pageable()
                   .Navigatable()
                   .Sortable()
                   .Filterable()
            .DataSource(dataSource => dataSource
                       .Ajax()
                       .PageSize(20)
                       .Events(events => events.Error("error_handler"))
                       .Read(read => read.Action("Editing_Read", "Profile"))
                       .Update(update => update.Action("update", "Account"))


)

[Mark]

I was able to get it working by making a change to the read. But the update is still a 400 error

@(Html.Kendo().Grid<CoreLIMSWebPortal.Models.ApplicationUser>()
                     .Name("Users")
                     .Columns(columns =>
                     {
                         columns.Bound(p => p.LastName);
                         columns.Bound(p => p.FirstName);
                         columns.Bound(p => p.ProjectName);
                         columns.Bound(p => p.ProjectBarcode);
                         columns.Bound(p => p.DateCreated).ClientTemplate("#= DateCreated? kendo.toString(kendo.parseDate(DateCreated, 'yyyy-MM-ddTHH:mm:ssZ'), 'MM/dd/yyyy'): '' #"); ;
                         columns.Bound(p => p.Approved);
                         columns.Command(command => { command.Edit(); }).Width(172);


                     })
                      .Editable(editable => editable.Mode(GridEditMode.InLine))
                     .Pageable()
                     .Navigatable()
                     .Sortable()
                     .Filterable()
              .DataSource(dataSource => dataSource
                         .Ajax()
                         .PageSize(20)
                         .Model(model => model.Id(p => p.Id))
                         .Events(events => events.Error("error_handler"))
                         .Read(read => read.Action("Editing_Read", "Profile").Type(HttpVerbs.Get))
                         .Update(update => update.Action("Editing_Update", "Profile"))


  )

     )

[Viktor Tachev]

Hi Mark,

Would you send us a runnable sample where the behavior is replicated? This will enable us to examine the issue locally and look for its cause.

Regards,
Viktor Tachev
Progress Telerik

[Mark]

So I am following this exactly - https://demos.telerik.com/aspnet-core/grid/editing-popup

You can see it is doing a POST rather than a GET.

 

@(Html.Kendo().Grid<CoreLIMSWebPortal.Models.ApplicationUser>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.LastName);
            columns.Command(command => { command.Edit(); command.Destroy(); }).Width(160);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.PopUp))
        .Pageable()
        .Sortable()
        .Scrollable()
        .HtmlAttributes(new { style = "height:430px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Events(events => events.Error("error_handler"))
            .Model(model => model.Id(p => p.Id))
            .Create(update => update.Action("EditingPopup_Create", "AllAccounts"))
            .Read(read => read.Action("EditingPopup_Read", "AllAccounts"))
            .Update(update => update.Action("EditingPopup_Update", "AllAccounts"))
            .Destroy(update => update.Action("EditingPopup_Destroy", "AllAccounts"))
        )
)

 

public class AllAccountsController : Controller
  {
      private readonly ApplicationDbContext _appContext;
      private readonly CoreController _coreL;
      private readonly AccountController _accountController;
      private UserManager<ApplicationUser> _userManager;

      public AllAccountsController(ApplicationDbContext appcontext, CoreController coreL, AccountController accountController, UserManager<ApplicationUser> userManager)
      {
          _appContext = appcontext;
          _coreL = coreL;
          _accountController = accountController;
          _userManager = userManager;
      }

      public ActionResult Index()
      {
          return View();
      }

      public ActionResult EditingPopup_Read([DataSourceRequest] DataSourceRequest request)
      {
          var results = new List<ApplicationUser>();
          var accountList = _accountController.GetAll();
          if (accountList != null && ModelState.IsValid)
          {
              foreach (ApplicationUser user in accountList.Result)
              {
                  results.Add(user);
              }
          }

          DataSourceResult result = results.ToDataSourceResult(request);
          return Json(result);
      }

      //[AcceptVerbs("Post")]
      //public ActionResult EditingPopup_Create([DataSourceRequest] DataSourceRequest request, ApplicationUser appUser)
      //{
      //    if (appUser != null && ModelState.IsValid)
      //    {
      //        productService.Create(appUser);
      //    }

      //    return Json(new[] { appUser }.ToDataSourceResult(request, ModelState));
      //}

      [AcceptVerbs("Post")]
      public ActionResult EditingPopup_Update([DataSourceRequest] DataSourceRequest request, CoreLIMSWebPortal.Models.ApplicationUser appUser)
      {
          if (appUser != null && ModelState.IsValid)
          {
              //productService.Update(product);
          }

          return Json(new[] { appUser }.ToDataSourceResult(request, ModelState));
      }

      //[AcceptVerbs("Post")]
      //public ActionResult EditingPopup_Destroy([DataSourceRequest] DataSourceRequest request, ApplicationUser appUser)
      //{
      //    if (appUser != null)
      //    {
      //        productService.Destroy(appUser);
      //    }

      //    return Json(new[] { appUser }.ToDataSourceResult(request, ModelState));
      //}
  }

 

[Mark]

I actually think my issue relates to this

 

  token validation failed. The required request token was not provided in either form field "__RequestVerificationToken" or header value "X-XSRF-Token".
CoreLIMSWebPortal> Microsoft.AspNetCore.Antiforgery.AntiforgeryValidationException: The required antiforgery request token was not provided in either form field "__RequestVerificationToken" or header value "X-XSRF-Token".

[Viktor Tachev]

Hi Mark,

In order to send anti-forgery token with the request of the Grid I would suggest using the approach described in the post below:

• https://www.telerik.com/forums/anti-forgery-in-mvc-wrapper-for-ajax-binding-using-request-header#xSkoYyRK7UCJgSEo4FR_7Q

Give it a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Mark]

 Viktor, it did get me farther in the process.

   <script>
        function beforeSend(xhr) {
            var securityToken = $("[name=__RequestVerificationToken]").val();
            xhr.setRequestHeader("X-XSRF-Token", securityToken);
        };
    </script>

                                               .DataSource(dataSource => dataSource
              .Custom()
                .Type("aspnetmvc-ajax")
                .Transport(transport => transport
                    .Read(new
                    {
                        url = Url.Action("Editing_Read", "Profile"),
                        beforeSend = new Kendo.Mvc.ClientHandlerDescriptor
                        {
                            HandlerName = "beforeSend"
                        }
                    })

      .Update(new
                       {
                           url = Url.Action("EditingInline_Update", "Profile"),
                           beforeSend = new Kendo.Mvc.ClientHandlerDescriptor
                           {
                               HandlerName = "beforeSend"
                           }
                       })
                )
                .Schema(schema => schema
                    .Data("Data")
                    .Total("Total")
                    .Errors("Errors")
                )
                .ServerPaging(true)
                .ServerSorting(true)
                .ServerFiltering(true)
                .ServerGrouping(true)
                .ServerAggregates(true)

 

So this is now working on the initial load/read. However, how would an update work? I tried that and it went back to the 400 status when I clicked the update button in the grid.

 

[Viktor Tachev]

Hello Mark,

Additional values can be passed to the Action using the Data method. Check out the article below that illustrates the approach:

• https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-to-send-values-to-my-action-method-when-binding-the-grid

Regards,
Viktor Tachev
Progress Telerik

[Mark]

I still have the issue. My update action does not even fire. You can see from the screenshot. It goes to a POST but not to my update action Editing_Update however my Antiforgery token is in there.

 

 

[Viktor Tachev]

Hi Mark,

Would you send us a runnable sample where the behavior is replicated? This will enable us to examine the issue and look for its cause.


Regards,
Viktor Tachev
Progress Telerik