This is a migrated thread and some comments may be shown as answers.

Contents of ListView is null at controller

2 Answers 294 Views
ListView
This is a migrated thread and some comments may be shown as answers.
Marc
Top achievements
Rank 1
Marc asked on 27 Sep 2018, 02:39 PM

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

Sort by
0
Accepted
Konstantin Dikov
Telerik team
answered on 01 Oct 2018, 10:24 AM
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.
0
Marc
Top achievements
Rank 1
answered on 03 Oct 2018, 09:10 AM

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

Tags
ListView
Asked by
Marc
Top achievements
Rank 1
Answers by
Konstantin Dikov
Telerik team
Marc
Top achievements
Rank 1
Share this question
or