ListView Not Calling Update Controller Action

5 posts, 1 answers
  1. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2014

    Posted 13 Jun Link to this post

    Below is my view containing my ListView as well as my controller.  I can successfully edit and save my data client side, but it never calls the update action on my controller and I can't figure out why.  I've copied the example from the Editing demo, but can't figure out what I'm missing.  Any ideas?

     

    @model IEnumerable<Announcement>
    @{
        Layout = "~/Views/Shared/_Kendo.cshtml";
    }
    <link rel="stylesheet" href="~/lib/kendo-ui-core/css/web/kendo.common.min.css" />
    <link rel="stylesheet" href="~/lib/kendo-ui-core/css/web/kendo.default.min.css" />
    <script src="~/lib/kendo-ui-core/js/jquery.min.js"></script>
    <script src="~/lib/kendo-ui-core/js/kendo.all.min.js"></script>
    <script src="~/lib/kendo-ui-core/js/kendo.aspnetmvc.min.js"></script>

     

    @(Html.Kendo().ListView<Announcement>(Model)
        .Name("listView")
        .TagName("div")
        .ClientTemplateId("template")
        .DataSource(dataSource => dataSource
            .Ajax()
            .Model(model => model.Id("Id"))
            .Read(read => read.Action("Index_Read", "ListView"))
            .Update(update => update.Action("Index_Update", "ListView"))
        )
        .Editable()
    )
    <script type="text/x-kendo-tmpl" id="template">
        <div class="form-group">
            <h4>#:Category#</h4>
            #:Description#
            <div class="text-right">
                <a class="btn btn-xs btn-primary k-edit-button" href="\\#">Edit</a>
                <a class="btn btn-xs btn-primary k-delete-button" href="\\#">Delete</a>
            </div>
        </div>
    </script>
    using System.Collections.Generic;
    using Microsoft.AspNetCore.Mvc;
    using My.BO;
    using Kendo.Mvc.UI;
    using Kendo.Mvc.Extensions;
     
    namespace Web.Controllers
    {
        public class KendoController : Controller
        {
            // GET: /<controller>/
            public IActionResult Index()
            {
                var model = GetAnnouncements();
                return View(model);
            }
     
            public ActionResult Index_Read([DataSourceRequest] DataSourceRequest request)
            {
                return Json(GetAnnouncements().ToDataSourceResult(request));
            }
     
            [AcceptVerbs("Post")]
            public ActionResult Index_Update([DataSourceRequest] DataSourceRequest request, Announcement announcement)
            {
                if (announcement != null && ModelState.IsValid)
                {
                    //_service.UpdateHotTopic(topic);
                }
     
                return Json(ModelState.ToDataSourceResult());
            }
     
            private List<Announcement> GetAnnouncements()
            {
                return new List<Announcement>() {
                    new Announcement()
                    {
                        Id = 1,
                        Category = "Test 1",
                        Description = "Test 1"
     
                    },
                    new Announcement()
                    {
                        Id = 2,
                        Category = "Test 2",
                        Description = "Test 2"
                    }
                };
            }
        }
    }

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 15 Jun Link to this post

    Hello Michael,

    The first thing I noticed is the Ajax() method used. This is not valid method for the DataSource extensions of the ListView. 

    Additionally, exact details and steps to follow for editing in ListView is available here—http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/listview/editing.

    What might happen is that the EditTemplate for the ListView to be missing and thus, only client-side the DataSource to be updated, but request never to be made. Following the link above should lead you to creating a template for editing which possible will resolve the problem. 

    If you have further difficulties I suggest you to provide a simple, locally runnable sample which I could use to debug locally and examine the situation. 

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2014

    Posted 15 Jun in reply to Ianko Link to this post

    Forgot to note that this is a .NET core/MVC6 project.  The downloadable demos for MVC6 use the .Ajax() method, so that's where I got it from.  If I remove this method, I get errors about DataSourceBuilder not containing a definition for 'Model'.  I also do have an EditTemplate in my Shared views EditorTemplates directory that is defined as below.  I've also attached a sample project where I am able to reproduce the issue.  You will need to copy the kendo-ui-core directory to wwwroot/lib, deleted it to reduce the size.

     

    @model Announcement
    <div class="form-group">
        <div class="form-group">
            <label for="Category" class="sr-only"></label>
            <input asp-for="Category" class="form-control" />
        </div>
        <div>
            <label for="Description" class="sr-only"></label>
            <input asp-for="Description" class="form-control" />
        </div>
        <div class="text-right">
            <a class="btn btn-xs btn-primary k-update-button" href="\\#">Save</a>
            <a class="btn btn-xs btn-primary k-cancel-button" href="\\#">Cancel</a>
        </div>
    </div>

  5. Answer
    Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 16 Jun Link to this post

    Hi Michael,

    Thank you for the additional details and the project to test with. 

    What I see from the sent project is that the requests to the read and update methods fail. They are configured to be called from a ListView Controller, but the methods are implemented in the Home Controller. So, basically, Kendo DataSource property updates the client-side data, but when trying to update the server-side one via the request URL it fails because such is not available. 

    Resolving that will properly call the Index_Update method. 

    You can examine this debug session and see how I am able to resolve that locally—http://screencast.com/t/qZEm101hcFKq

    Additionally, having a read URL can prevent you from loading the model in the view. As you can see from the screencast linked, I am able to remove the model binding and leave only the DataSource binding. In my opinion, it is a much better approach when it comes to AJAX techniques.  

    Regards,
    Ianko
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Michael
    Michael avatar
    13 posts
    Member since:
    Sep 2014

    Posted 16 Jun in reply to Ianko Link to this post

    Thanks, that did it. Don't know how I missed that the controller name was the 2nd parameter in the Action method.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready