How can I post a list of items in MVC

Question

I have a simple form with a list of items in it and I'd like to post them to the controller but funny thing is I just cant. Everything else goes through properly except the list. I checked the ajax call in firebug and the post values are there like this:

Answers[0].IsMissing    False
Answers[0].Text Ja
Answers[0].Value    0
Answers[1].IsMissing    False
Answers[1].Text Nein
Answers[1].Value    1
Id  1cd14b08-ce3b-4671-8cf8-1bcf69f12b2d
Name    Ja/Nein

I have an AnwserScheme class with the following properties:

public string Name { get; set; }
public bool IsMissing { get; set; }
public List<AnswerDisplayItem> Answers { get; set; }

public AnswerScheme()
{
    Answers = new List<AnswerDisplayItem>();
}

I have this view code:

@for (int i = 0; i < Model.Answers.Count; i++) {
    <tr>
        <td>
            @Html.HiddenFor(model => Model.Answers[i].IsMissing)
            @Html.TextBoxFor(model => Model.Answers[i].Value, 
                             new { @class = "inputValue" })
        </td>
        <td>
            @Html.TextBoxFor(model => Model.Answers[i].Text, 
                             new { @class = "inputAnswer" })
        </td>
        <td>
            <span class="span-delete" 
                  data-answer-scheme-id="@Model.Id" 
                  data-answer-id="@Model.Answers[i].Id" >x</span>
        </td>
    </tr>
}

I have this piece of ajax code that is responsible for posting:

$.ajax({
    url: "/AnswerScheme/AddAnswer",
    type: "post",
    data: $("#formAnswerScheme").serialize(),
    success: function (data) {
                 console.log(data);
                 $("#divAnswerSchemeContainer").html(data);
             }
});

I have an add answer action in my controller:

[HttpPost]
public PartialViewResult AddAnswer(AnswerScheme answerScheme)
{
    ...some logic comes here
}

So in the end the controller recieves the model, but only the simple properties, not the list. Any help would be greatly appreciated! cheers.

You can check this article for a tutorial on how to do model binding to collections: http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx — Kenneth, May 01 '13 at 16:19
Are you using MVC3 or MVC4? Because your code works fine in a newly created MVC4 project... Can you post for full `#formAnswerScheme` form code? — nemesv, May 01 '13 at 16:25
Please post your entire AnswerScheme model and your entire form from the the BeginForm down (and include your @model statement) — Erik Funkenbusch, May 01 '13 at 18:02
I can see in the code you posted that the view iterates the list items to display them, but it is not clear to me how are you adding the list items to the view. Those list items are in a grid?, hidden markup?. The container of the items is inside a form?, if not, that could be a reason. Can you please provide more details of your view so we can help you better? — Charles, May 01 '13 at 20:27
nemesv: I use MVC4 project. Charles: Its an experiment really, I want to add a new row, without using any javascript logic besides that ajax call. So all I do, is post the form, recreate it, remove empty lines, and add a new line to the end. And put it back to the #divAnswerSchemeContainer. (I know its maybe not the best approach but and maybe too much use of the server, just to create a new line, but reindexing is also a pain in the ass with javascript.) — JahManCan, May 02 '13 at 08:02
Can you add a sample of the rendered HTML fields please, I suspect your indexing isn't in a format that the controller can handle — Rob, May 02 '13 at 12:29

score 34 · Accepted Answer · edited Oct 03 '18 at 16:26

I wish I could see more of your classes and code, because you don't have something set up right.

I recreated something from what you did provide, which works. I created an MVC 3 project for this sample.

Views/Shared/_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <title>@ViewBag.Title</title>
    <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
</head>

    <body>
        @RenderBody()
    </body>
</html>

Views/Shared/_Partial.cshtml

@model RazorListTest.Models.AnswerScheme 

<table>
@for (int i = 0; i < Model.Answers.Count; i++) {
    <tr>
        <td>
            @Html.HiddenFor(model => Model.Answers[i].IsMissing)
            @Html.TextBoxFor(model => Model.Answers[i].Value, new { @class = "inputValue" })
        </td>
        <td>
            @Html.TextBoxFor(model => Model.Answers[i].Text, new { @class = "inputAnswer" })
        </td>
        <td><span class="span-delete" data-answer-scheme-id="@Model.Id" data-answer-id="@Model.Answers[i].Id" >x</span></td>
    </tr>
}
</table>

Models/AnswerDisplayItem.cs

using System.Collections.Generic;

namespace RazorListTest.Models
{
    public class AnswerDisplayItem
    {
        public bool IsMissing { get; set; }
        public string Text { get; set; }
        public string Value { get; set; }
        public string Id { get; set; }
    }

    public class AnswerScheme
    {
        public List<AnswerDisplayItem> Answers { get; set; }
        public string Id { get; set; }

        public AnswerScheme()
        {
            Answers = new List<AnswerDisplayItem>();
        }
    }
}

Home/Index.cshtml

@model RazorListTest.Models.AnswerScheme

    @using (Html.BeginForm(null, null, FormMethod.Get, new { name="formAnswerScheme", id = "formAnswerScheme"}))
    {
        {Html.RenderPartial("_Partial");}

        <div>
            <input type="button" value="Click me" id="btnClick"/>
        </div>

        <div id="divAnswerSchemeContainer">

        </div>
    }

<script type="text/javascript">
    $("#btnClick").click(function () {

        $.ajax({
            url: 'Home/AddAnswer',
            type: 'POST',
            dataType: 'json',
            data: $("#formAnswerScheme").serialize(),
            success: function (data) {
                console.log(data);
                $("#divAnswerSchemeContainer").html(data);
            },
            error: function (xhr, textStatus, exceptionThrown) { alert(JSON.parse(xhr.responseText)); }
        });
    });
</script>

Controllers/HomeController.cs

using System.Collections.Generic;
using System.Web.Mvc;
using RazorListTest.Models;

namespace RazorListTest.Controllers
{
    public class HomeController : Controller
    {

        public ActionResult Index()
        {
            AnswerScheme a = new AnswerScheme();

            a.Id = "1cd14b08-ce3b-4671-8cf8-1bcf69f12b2d";

            List<AnswerDisplayItem> adi = new List<AnswerDisplayItem>();
            AnswerDisplayItem a1 = new AnswerDisplayItem();
            a1.IsMissing = false;
            a1.Text = "Ja";
            a1.Value = "0";
            a1.Id = "1234";
            AnswerDisplayItem a2 = new AnswerDisplayItem();
            a2.IsMissing = false;
            a2.Text = "Nein";
            a2.Value = "1";
            a2.Id = "5678";
            adi.Add(a1);
            adi.Add(a2);
            a.Answers = adi;
            return View(a);
        }

        [HttpPost]
        public JsonResult AddAnswer(AnswerScheme answerScheme)
        {
            return Json("the list is in the Model.");
        }
    }
}

Thanks all your effort man, its really thorough. btw I basically did everything just like you did and still it just simply doesnt wanna work. Annoying. Im gonna post all my codes, maybe there is a setting somewhere that Im missing or I dunno. — JahManCan, May 02 '13 at 08:38
In a fresh MVC4 project your code just works perfectly. But what do I do wrong then?! — JahManCan, May 03 '13 at 09:24
I have no idea. I put yours into a new project and it works, too. I created a Code, CodeList, and Category class so I could stick with your exact code. I am perplexed. — TheGeekYouNeed, May 03 '13 at 17:20
Quick question, so this means that when serializing, mvc will recognize all hiddensFor and textBoxFor, and Add() it into model.List? I know you are replying using data: $("#formAnswerScheme").serialize() because question says so, but what is going to happen if I do the same with the performing a regular post? Will it have the same result? — Yogurtu, Jan 19 '18 at 23:58

score 1 · Answer 2 · answered May 02 '13 at 08:46

Its almost identical what TheGeekYouNeed posted, but i guess something is just missing. I have no clue what that could be.

AnswerScheme view:

@using System.Web.Mvc.Html
@using MetaDataPortal.Models
@model AnswerScheme

 @{
ViewBag.Title =  @Model.IsMissing ? "Missing" : "AnswerScheme";
Layout = "~/Views/Shared/_Layout.cshtml";
}

@section CssContent{
<link href="../../Content/CSS/AnswerScheme.css" rel="stylesheet" />
}


 @using (Html.BeginForm("Save", "AnswerScheme", FormMethod.Post, new { id = "formAnswerScheme" })) {

<div id="divAnswerSchemeContainer">
    @{Html.RenderPartial("_AnswerScheme", Model);}
</div>
<input type="button" class="clear inputButton" id="buttonAddCode" value="Add @(Model.IsMissing ? "Missing" : "Answer")" />

<input type="submit" value="Save" />
}

 @section Javascript{
<script type="text/javascript">
    $(function () {
        $("#buttonAddCode").click(function () {
            $.ajax({
                url: "/AnswerScheme/AddAnswer",
                type: "post",
                async: false,
                data: $("#formAnswerScheme").serialize(),
                success: function (data) {
                    console.log(data);
                    $("#divAnswerSchemeContainer").html(data);
                }
            });
            return false;
        });
    });

</script>
<script type="text/javascript" src="~/Content/JavaScript/AnswerScheme.js"></script>
 }

_AnswerScheme partialview

        @model MetaDataPortal.Models.AnswerScheme

        @Html.HiddenFor(model => model.Id, new { Id = "AnswerSchemeId" })
            <ul class="ulGeneralForm">
                <li>
                    @Html.LabelFor(model => model.Name, "Name", new { @class = "labelGeneral" })
                    @Html.TextBoxFor(model => model.Name, Model.Name, new { @class = "textBoxGeneral" })
                </li>
                <li>
                    @Html.Label(@Model.IsMissing ? "Missings" : "Answers", new { @class = "labelGeneral" })
                    <table class="textualData links downloadList">
                        <thead>
                            <tr>
                                <th>Value</th>
                                <th> @(Model.IsMissing ? "Missing" : "Answer")</th>
                                <th></th>
                            </tr>
                        </thead>
                        <tbody id="tbodyCodeContainer">
                            @for (int i = 0; i < Model.Answers.Count; i++) {
                                <tr>
                                    <td>
                                        @Html.HiddenFor(model => Model.Answers[i].IsMissing)
                                        @Html.TextBoxFor(model => Model.Answers[i].Value, new { @class = "inputValue" })
                                    </td>
                                    <td>
                                        @Html.TextBoxFor(model => Model.Answers[i].Text, new { @class = "inputAnswer" })
                                    </td>
                                    <td><span class="span-delete" data-answer-scheme-id="@Model.Id" data-answer-id="@Model.Answers[i].Id" >x</span></td>
                                </tr>
                            }
                        </tbody>
                    </table>
                </li>
            </ul>

AnswerScheme.cs:

 using System;
 using System.Collections.Generic;
 using System.Linq;

 using Opit.Rogatus.DomainObjects;


 namespace MetaDataPortal.Models
 {
public class AnswerScheme : BaseModel
{
    public string Name { get; set; }
    public bool IsMissing { get; set; }

    public List<AnswerDisplayItem> Answers { get; set; }

    public AnswerScheme()
    {
        Answers = new List<AnswerDisplayItem>();
    }

    public AnswerScheme(CodeList codeList, bool isMissing) : this()
    {
        Id = codeList.Id;
        Name = codeList.Name;
        IsMissing = isMissing;
        foreach (Code code in codeList.Codes.Where(code => code.Category.IsMissing == isMissing))
        {
            Answers.Add(new AnswerDisplayItem(code));
        }
    }
      }
    }

AnswerDisplayItem.cs:

    using System;

    using Opit.Rogatus.DomainObjects;


    namespace MetaDataPortal.Models
    {
        public class AnswerDisplayItem
        {
            public Guid Id { get; private set; }
            public short Value { get; private set; }
            public string Text { get; private set; }
            public Guid AnswerSchemeId { get; set; }
            public bool IsMissing { get; private set; }

            public AnswerDisplayItem()
            {
            }

            public AnswerDisplayItem(Code code)
            {
                Id = code.Id;
                Value = code.Value;
                Text = code.Category.Name;
                IsMissing = code.Category.IsMissing;
                if (code.CodeList == null) return;

                AnswerSchemeId = code.CodeList.Id;
            }
        }
    }

And controller is pretty much the same.

Can you post your Code, CodeList and Category classes? – TheGeekYouNeed May 02 '13 at 21:39 — TheGeekYouNeed, May 02 '13 at 21:39

score 1 · Answer 3 · answered Jun 25 '15 at 10:49

You can do like this create model

 public class ApplicationInfo
{
        public List<ApplicationAccessRoles> ApplAccessRoleInfo { get; set; }
    }

 public class ApplicationAccessRoles
{
    public int app_access_role_key { get; set; }
    public int app_key { get; set; }
    public string access_role { get; set; }
    public bool inactive { get; set; }
}

put it in view

       <div class="step-pane" id="step3">
                    <div class="form-horizontal" style="vertical-align:central;margin-left:150px">
                        <table id="RolesDetails" cellpadding="0" cellspacing="0" class="data_table">
                            <tr class="dataheader">
                                <td class="width5">
                                    &nbsp;
                                    @Html.HiddenFor(m => m.app_access_role_key)
                                </td>
                                <td class="width200">
                                    Access Roles Name
                                </td>
                                <td class="width10">
                                    Inactive
                                </td>

                            </tr>
                            @if (Model.ApplAccessRoleInfo.Count!= 0)
                            {
                                var chk = Model.ApplAccessRoleInfo.Count;
                                for (int a = 0; a < Model.ApplAccessRoleInfo.Count; a++)
                                {
                                    <tr class="exp_col_header top_border_nil">
                                       @if ((chk - 1) == a)
                                        { 
                                        <td><a href="#" class="gridexpand" rel="1"></a></td>
                                        }
                                        else
                                        {
                                            <td></td>
                                        }
                                        <td>
                                            @Html.HiddenFor(m => m.ApplAccessRoleInfo[a].app_access_role_key)
                                            @Html.EditorFor(m => m.ApplAccessRoleInfo[a].access_role)
                                        </td>
                                        <td>
                                            @Html.CheckBox("ApplTeamAccessInfo[" + a.ToString() + "].inactive", false, new { @class = "check-box"})
                                        </td>
                                    </tr>
                                }
                            }
                            else
                                {
                                    <tr class="exp_col_header top_border_nil">
                                    <td>
                                        <a href="#" class="gridexpand" rel="1"></a>
                                    </td>
                                    <td>
                                        @*@Html.EditorFor(model => model.access_role)*@
                                        @*@Html.EditorFor(m => m.ApplAccessRoleInfo[0].access_role)*@
                                        @Html.EditorFor(model=>model.access_role)
                                    </td>
                                    <td>
                                        @Html.CheckBoxFor(model => model.inactive)
                                    </td>
                                    </tr>

                            }
                        </table>

                    </div>
                </div>

In Controller

  var main = (from a in db.mas_app_access_roles
                    where a.app_key == AppInfo.app_key
                    select new  ApplicationAccessRoles
                    {
                        app_access_role_key = a.app_access_role_key,
                        access_role = a.access_role,
                        inactive = a.inactive,
                    }).ToList();
        access = main;
        AppInfo.ApplAccessRoleInfo = access;
        ViewBag.check = access;

        return View(AppInfo);

score 0 · Answer 4 · edited May 23 '17 at 12:02

0

The problem is with the name/id attribute of your text boxes and other input controls. You can use editor templates to make things seamless and reusable.. Another example here.

But if you still want to loop through things, your loop has to look something in these examples here or here.

edited May 23 '17 at 12:02

Community

1
1

answered May 01 '13 at 16:42

Varun

307
3
16

No, there is no problem with his naming. Yes, he should use editor templates, but his naming is fine the way he's doing it. – Erik Funkenbusch May 01 '13 at 18:01

score 0 · Answer 5 · answered May 02 '13 at 12:31

0

Try changing either the controller parameter name to "answers" or the property name to AnswerScheme and if the partial controller in your post is supposed to be recieving the list then change the type to:

List<AnswerScheme> answers

answered May 02 '13 at 12:31

Rob

10,004
5
61
91

How can I post a list of items in MVC

5 Answers5

Linked