Hi guys,
I think I'm lacking some sort of fundamental knowledge of either Kendo UI or MVC itself. I have a fairly simple example which hopefully you can recreate and explain where I'm going wrong. Before I get to the code I'll explain what I'm trying to accomplish:
I have a form which will be used to capture details as you would normally expect. Inside this form I have a list view, the purpose of which is to allow the user to create and display information about an unspecified number of people. When it comes to saving these details I need the "Base" information to be saved first so that it is given an appropriate Id, after which I can then save the party details which would would of course reference this newly created id.
I'm trying to implement this as follows:
Classes
public class DemoPartyDetails { public int id { get; set; } public string firstName { get; set; } public string surname { get; set; } public DemoPartyDetails() { } }
public class DemoClass { public int id { get; set; } public string randomData { get; set; } public List<DemoPartyDetails> partyDetails { get; set; } public DemoClass() { partyDetails = new List<DemoPartyDetails>(); } }
Controller
public class DemoController : Controller { // GET: Demo public ActionResult Index() { DemoClass demo = new DemoClass(); DemoPartyDetails party = new DemoPartyDetails(); party.firstName = "Test Name"; party.surname = "Test Surname"; demo.partyDetails.Add(party); return View(demo); }[HttpPost] public ActionResult Create(DemoClass model) { try { if (model.partyDetails != null) Console.WriteLine("Party details populated"); else Console.WriteLine("Something went wrong..."); return RedirectToAction("Index"); } catch { return View(); } }}
View
@model DemoPortal.Models.DemoClass<html><head> <meta name="viewport" content="width=device-width" /> <title></title></head><body>@using (Html.BeginForm("Create", "Demo", FormMethod.Post)){ <div> @Html.EditorFor(model => model.randomData) </div> <div> <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-i-add"></span>Add Party</a> @(Html.Kendo().ListView(Model.partyDetails) .Name("demoListView") .TagName("div") .ClientTemplateId("demoTemplate") .DataSource(dataSource => dataSource .Model(model => model.Id(x => x.id)) ) .Editable(editable => editable.TemplateName("DemoPartyDetails")) ) </div> <input type="submit" value="Submit" />}</body></html><script type="text/x-kendo-tmpl" id="demoTemplate"> <div class="demoParty"> <h3>#:firstName#</h3> <span>#:surname#</span> </div></script><script>$(function() { var listView = $("#demoListView").data("kendoListView"); $(".k-add-button").click(function(e) { listView.add(); e.preventDefault(); });});</script>
Editor Template
@model DemoPortal.Models.DemoPartyDetails@using (Html.BeginForm()){ <div> @(Html.HiddenFor(model => model.id)) @(Html.EditorFor(model => model.firstName)) @(Html.EditorFor(model => model.surname)) <div class="btnArea"> <a class="k-button k-update-button" href="\\#"><span class="k-icon k-update"></span></a> <a class="k-button k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a> </div> </div>}
The view displays the pre-populated party data correctly which I guess implies that it has bound to the model correctly. However upon submitting the form the partyDetails list is null. The randomData string is populated correctly with whatever I entered, but I cannot figure out how to pass the partyDetails back to the controller.
I've done a bit of googling and found people sometimes struggle to pass IEnumerables to the controller, but all examples of the solutions do not involve the KendoUI and as such I struggle to implement them.
Any assistance would be greatly appreciated.
Many thanks
Marc
2 Answers, 1 is accepted
The ListView and the other Data Management helpers from the suite does not provide built-in functionality for posting their data within a form. Such functionality is provided only by the editors from our suite (like NumericTextBox, DatePickers, etc.).
In order for the data of the ListView to be posted within a Form you will have to render hidden input elements in each element for all of the properties you want to post, because this is how the form posts its data. For your convenience, you could take a look at the following example for posting Grid data with a Form, which demonstrates how the client templates are configured:
Hope this helps.
Regards,
Konstantin Dikov
Progress Telerik
Rank 1
Thanks Konstantin,
Having read your explanation and looked at the example it now makes perfect sense and I have managed to get the desired behaviour. Thanks for your response.
Marc