ListView Not Calling Update Controller Action

[Michael]

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"
                }
            };
        }
    }
}

[Ianko]

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

[Michael]

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>

[Ianko]

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

[Michael]

Thanks, that did it. Don't know how I missed that the controller name was the 2nd parameter in the Action method.

[Mike]

Hi,

i have a very similar issue.
My Update Controller Method wont be recognized.
it is on the correct controller - but still - the Update Method is not called, with a Parameter of the Object.
Without it, it gets called - but to update an object i need this through the POST Update.

Please see here for my code: https://www.telerik.com/account/support-tickets/view-ticket?threadid=1111863

Thanks for any advice - i'm going crazy about that issue :)

best regards

M

[Ianko]

Hello Alain,

I looked at the code in the ticket mentioned, but the case there is not related to the one discussed here and it would be better to continue the conversation with Tsvetina. 

On a side note, she properly navigated you to this demo: http://demos.telerik.com/aspnet-mvc/grid/editing-custom. Check it out in provided offline examples (in the Telerik UI for ASP.NET MVC suite installed) and compare any differences that might be related to the case. For example, how the control is configured and how the BindTo method is used to fetch data. It is important to note that client templates are handled only on the client and therefore the typically model-to-view binding is not exactly the same. If you are to use model-to-view binding, you should rather consider using server editor templates. 

If you have further questions or difficulties, I suggest you to address them in the original ticket sent so to not scatter information across different threads.

Regards,
Ianko
Progress Telerik