Dynamic Model list not binding on post back

Question

I'm new to MVC and I'm trying to figure out how to bind a dynamic list.

I followed instructions from this example and other examples in order to create my table. New items are successfully added to the table. However, on post back only the default item that was added to the list initially is available, none of the new ones.

These are my Models:

 public class ItemModel {
    public int ID { get; set; }

    [Display(Name = "Name")]
    public string Name { get; set; }

    [Display(Name = "Description")]
    public string Description { get; set; }

 }

public class MainModel{
     public List<ItemModel> Items { get; set; }
     
    public MainModel(){
        Items   = new List<ItemModel>()
    }
 }

My view:

<table id="list">
            <thead>
                <tr>
                    <th style="width: 150px;">
                        @Html.DisplayNameFor(model => model.Items[0].Name)
                    </th>
                    <th>
                        @Html.DisplayNameFor(model => model.Items[0].Description)
                    </th>
                    <th>
                        Delete
                    </th>
                </tr>
            </thead>
            <tbody>
                @Html.Partial("Item", Model)
            </tbody>
        </table>

Partial View:

@for (var i = 0; i < Model.Items.Count; i++) {
<tr>
    <td>
         @Html.TextBoxFor(model => model.Items[i].Name)
    </td>
    <td>
        @Html.TextBoxFor(model => model.Items[i].Description)
    </td>
    <td>
        <button class="btn" type="button" data-id="@Model.Items[i].ID" value="Delete"/>
    </td>
</tr>
}

I'm using Ajax Post to add new items to the table:

$('.add').click(function () {
        var action = "/Project/Add";
        $.ajax({
            url: action,
            cache: false,
            success: function (result) {
                $("#list").find("tbody").empty().append($(result));
            }
        });
    });

Controller Action:

public ActionResult Add() {
        ItemModel item = new ItemModel();
        try {
            item.ID =       ((MainModel)Session["MainModel"]).Items.LastOrDefault().ID + 1;
            ((MainModel)Session["MainModel"]).Items.Add(item);
        } catch (Exception) {
            return Json(null);
        }
        return PartialView("Item", Session["MainModel"]);
    }

Can some please tell me what I'm doing wrong?

Thanks.

What is the method your posting to? And since your `Add()` method is rendering the whole table all over again, you not really getting much benefit from using ajax. [This answer](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) shows some options you should consider to improve performance (and get rid the unnecessary use of `Session`) — , Mar 07 '15 at 22:59
Where is the controller action method that is executed on postback? — Jason Evans, Mar 07 '15 at 23:24
I don't see you are using binding in your Add() action method!, and I don't see you are posting data in your ajax call either! Am not sure if I am missing something, but I don't understand how your code will work. I would suggest you checking other examples on the net. — A Khudairy, Mar 09 '15 at 10:21

score 0 · Answer 1 · answered Mar 07 '15 at 23:14

It may be that you are creating a new empty item each time public ActionResult Add() is called. Then setting its Id, then adding it to the Model in Session. The Name and Description properties are not getting set.

To add an item added in the page, you must post back the data to a parameter in the Add() method - otherwise there is no data to add into your item.

Also, the final piece to passing back the data:

return PartialView("Item", Session["MainModel"]);

It might be better to cast this as MainModel:

(MainModel)Session["MainModel"]

Dynamic Model list not binding on post back

1 Answers1