BeginCollectionItem() gives only lastly appended item for PostBack

Question

InquiryOrderViewModel

public class InquiryOrderViewModel
{
    public InquiryOrder InquiryOrder { get; set; }
    public List<InquiryOrderDetail> InquiryOrderDetails { get; set; }
}

InquiryOrderIndex View and the Script to add items

@model eKnittingData.InquiryOrderViewModel
@using (Html.BeginForm("Save", "InquiryOrder"))
{
    <div id="editorRows">
        @foreach (var item in Model.InquiryOrderDetails)
        {
            Html.RenderPartial("_DetailEditorRow", item);
        }
    </div>
    @Html.ActionLink("Add another...", null, null, new { id = "addItem" })
    <div class="col-md-6">   <input type="submit" value="Save" class="btn btn-success" /> </div>
}

<script>
$('#addItem').click(function (e) {
    e.preventDefault();
    var isExist = false;
    $('.editorRow').each(function () {
        if ($(this).children('.class01').val() == 0 || $(this).children('.class02').find("option:selected").text() == "Select") {
            isExist = true;
            return false;
        }
    });
    if (isExist == false) {
        $('.editorRow').each(function () {
            $(".editorRow").children().attr("disabled", "disabled");
        });
        $.ajax({
            url: '@Url.Action("BlankEditorRow", "InquiryOrder")',
            cache: false,
            success: function (data) {
                $("#editorRows").append(data);
            }
        });
    }
});
</script>

DetailEditorRow PartialView

@model eKnittingData.InquiryOrderDetail
@using eKnitting.Helpers

@using (Html.BeginCollectionItem("InquiryOrderDetails"))
{
<div class="editorRow">
    @Html.DropDownListFor(a => a.ComponentId, (SelectList)ViewBag.CompList, "Select", new { Class = "class02" })
    @Html.DropDownListFor(a => a.DesignCodeId, (SelectList)ViewBag.DCodeList, "Select", new { Class = "class03" })
    @Html.TextBoxFor(a => a.NoOfParts, new { Class = "class01" })
    <a href="#" class="deleteRow">delete</a>        
</div>
}

ActionResult which returns PartialView

public ActionResult BlankEditorRow()
{
        var objContext = new KnittingdbContext();
        ViewBag.CompList = new SelectList(objContext.Components, "ComponentId", "ComponentName");
        ViewBag.DCodeList = new SelectList(objContext.DesignCodes, "DesignCodeId", "DesignCodeCode");

        return PartialView("_DetailEditorRow", new InquiryOrderDetail());
 }

ActionResult for 'GET'

        var objContext = new KnittingdbContext();

        var newIovm = new InquiryOrderViewModel();
        var newIo = new InquiryOrder();
        //initial item
        var newIoD = new List<InquiryOrderDetail>
        {
            new InquiryOrderDetail()
        };

        newIovm.InquiryOrder = newIo;
        newIovm.InquiryOrderDetails = newIoD;

        ViewBag.CompList = new SelectList(objContext.Components, "ComponentId", "ComponentName");
        ViewBag.DCodeList = new SelectList(objContext.DesignCodes, "DesignCodeId", "DesignCodeCode");

        return View(newIovm);

ActionResult for 'POST'

public ActionResult Save(InquiryOrderViewModel inquiryOrderViewModel)
{
     .................
}

When i click the add button im able to add items dynamically. But for PostBack it gives me only the lastly appended item. I checked it by putting a break point on post ActionResult. How can i get the whole collection for PostBack? Where did i go wrong? All help appreciated. Thanks!

score 1 · Accepted Answer · 2015-11-14T07:26:35.587

1

Your scripts sets a variable var isExist = false;. When you add a new item, you check if the value is false (which it is if you got that far) and then disable all existing inputs.

Disabled form controls do not post back, hence you only get the values for the last row you have added.

Its unclear why you would want to disable them, but if you want to prevent editing of existing rows, the make them readonly

$(".editorRow").children().prop("readonly", true);

edited Nov 14 '15 at 07:26

answered Nov 14 '15 at 06:55

You helped me as always :) Yes that was the reason. Could you pls tell me how to make it readonly? I did it like this. But not working. `$(".editorRow").children().prop("readonly", true);` – Isuru Nov 14 '15 at 07:23
1

`prop("readonly", true)` should work, or you could use `.attr("readonly", "readonly")` – Nov 14 '15 at 07:27
Yes that works for textboxes. But what about dropdownlists? How can i make them `readonly`? Can i make all the textboxes and ddls `readonly` using one line like above statement? – Isuru Nov 14 '15 at 07:34
1

Didn't notice you had a dropdownlist. Unfortunately you cant make a ` – Nov 14 '15 at 07:38

BeginCollectionItem() gives only lastly appended item for PostBack

1 Answers1