Removing 1st Index element causes a form not to post other indexes greater than 1st

Question

First of all I am trying to Post a list via form. It looks like this :

<div class="cnl-box-otr">
    <div class="form-group">
        <label>Name</label>
        @Html.TextBoxFor(m => m.list[0].name, new { @class = "form-control", placeholder = "Name" })
    </div>
    <div class="form-group">
        <label>Percentage</label>
        @Html.TextBoxFor(m => m.list[0].percentage, new { @class = "form-control", placeholder = "Percentage" })

    </div>
</div>

Now i create Other dynamic Same div with jquery like this on a click of button:

 $("#AddMorediv").on('click', function () {
    var index = parseInt($('#index').val());
    index = index + 1;
    var contentToBeInserted = '<div class="cnl-box-otr" id="row"><a href="#" class="cnl-box  DeleteRow"><i class="fa fa-times"></i></a><div class="form-group"><label>Details</label><input class="form-control" id="list_' + index + '_Name" name="list[' + index + '].Name" placeholder=" Name" type="text" value=""></div><div class="form-group"><label>%</label><input class="form-control" data-val="true" id="list' + index + '_Percentage" name="list[' + index + '].Percentage" placeholder="Percentage" type="text" value=""></div></div>'
    $('.writericondiv').append(contentToBeInserted);
    $('#indexwriters').val(index);
});

This Creates my list perfectly and Posted successfully as a list. But the problem is i have also given an option to remove these divs one by one. I f i try to remove the 1st index and then post the form. Only zero index value is posted successfully to the controller but greater than 1st index does not Post its value. The list looks like this while posting.

<div class="cnl-box-otr">
    <div class="form-group">
        <label>Name</label>
        @Html.TextBoxFor(m => m.list[0].name, new { @class = "form-control", placeholder = "Name" })
    </div>
    <div class="form-group">
        <label>Percentage</label>
        @Html.TextBoxFor(m => m.list[0].percentage, new { @class = "form-control", placeholder = "Percentage" })

    </div>
</div>
<div class="cnl-box-otr">
        <div class="form-group">
            <label>Name</label>
            @Html.TextBoxFor(m => m.list[2].name, new { @class = "form-control", placeholder = "Name" })
        </div>
        <div class="form-group">
            <label>Percentage</label>
            @Html.TextBoxFor(m => m.list[2].percentage, new { @class = "form-control", placeholder = "Percentage" })

        </div>
    </div>

Hope You understand what i am trying to ask. If not, Kindly Add a Comment i will definitely improve this Question.

Thanks for any help or suggestions.

I think your post function breaks because opf the missing element. Try to use jQuery each() for et the datas out of the added divs. If I make something like this, I always use each() at the time of the post, so it will not try to check for divs that doesn't exists. — Balázs Varga, Apr 20 '15 at 06:47
You need to generate a hidden input for with `name="list.Index" value="@i"` where `@i` is the indexer of the corresponding elements. That will allow you to post back non-consecutive indexers. Refer the answers [here](http://stackoverflow.com/questions/29161481/post-a-form-array-without-successful/29161796#29161796) and [here](http://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for some further details — , Apr 20 '15 at 06:50
how are you removing the divs, could you please post that code also? — Bhushan Kawadkar, Apr 20 '15 at 06:50
or http://stackoverflow.com/questions/8598214/mvc3-non-sequential-indices-and-defaultmodelbinder — CodeCaster, Apr 20 '15 at 08:17

score 1 · Accepted Answer · edited May 23 '17 at 11:58

1

Yes, this is what MVC framework do. Actually whenever a list is posted to the MVC Controller, it looks for the symmetry of indexs i.e 0,1,2,3,4,5 . MVC will stop the parsing of list where it finds discontinuation in the indexs.

So what you have to do is:

Delete the Row
Loop through the remaining rows
Update the index of each row input's staring from 0

Another Solution: Do Check comment from @StephenMuecke,that includes this and this solutions. Thanks to @StephenMuecke, I came to know about Index as the hidden input.

edited May 23 '17 at 11:58

Community

1
1

answered Apr 20 '15 at 06:53

Puneet

2,051
9
17

I tried looping it and changing its index in Name but facing an issue . How do i update number between a string like : "list_8_name" to "list_7_name". – Rohit Arora Apr 20 '15 at 07:45
@RohitArora you can use RegEx for this. – Puneet Apr 20 '15 at 07:49
1

Just add the input for the index property instead. – Apr 20 '15 at 07:50
@StephenMuecke I appreciate your answer but i tried looping and i am successfull. thanks anyways. i will try this input addition in my free time. – Rohit Arora Apr 20 '15 at 09:25

Removing 1st Index element causes a form not to post other indexes greater than 1st

1 Answers1