Contents of ListView is null at controller

3 posts, 1 answers
  1. Marc
    Marc avatar
    6 posts
    Member since:
    Sep 2013

    Posted 27 Sep 2018 Link to this post

    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. Answer
    Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    2466 posts

    Posted 01 Oct 2018 Link to this post

    Hi Marc,

    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
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Marc
    Marc avatar
    6 posts
    Member since:
    Sep 2013

    Posted 03 Oct 2018 in reply to Konstantin Dikov Link to this post

    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

Back to Top