dynamically add 'add button' inside for loop

Question

I have foreach loop which contains some data. What I want is if user click on add button, save the details to the database as well as empty input values and go to the next iteration of the foreach loop. Following is my code that I tried so far.

@model ModelLib.Models.PaymentDetails
@{
    Layout = null;
    var fullCount = Model.listRoomDetails.Max(x => x.FullCount);
}

<div class="row">
    @Html.AntiForgeryToken()

    <div class="row">

        <div>You have to add <span id="passangerCount">@fullCount</span> Passanger details</div>
         @foreach (var item in Model.listRoomDetails) { 
            <span>@item.RoomType RoomType Passanger Count : </span ><div id="@item.RoomType">@item.Count</div>
         }

        @foreach (var item in Model.listRoomDetails) { 
         <div class="row">
            Room Type - <span id="existing_RoomType">@item.RoomType</span>
            Room Category - <span id="existing_RoomCategory">@item.RoomCategory</span>

<div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-info" style="background-color:#ffffff;">
                        <div class="panel-heading" id="payment_heading" style="border-style: double; text-align: center; background-color: #f59e6b; border-color: black; color: black; font-weight: bold;">Add Payment Details<i class="fa fa-chevron-circle-down" style="font-size: 24px; float: right; margin-right: -17px; margin-top: 6px;"></i></div>
                        <div class="panel-body" id="payment_body">
                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.TicketNumber, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            @Html.TextBoxFor(model => model.TicketNumber, new { type = "text", maxlength = "13", @id = "ticketNumber", @class = "form-control", data_toggle = "tooltip", title = "Enter Ticket Name" })
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.PassangerName, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.TextBoxFor(model => model.PassangerName, new { @id = "passangerName", @class = "form-control", data_toggle = "tooltip", title = "Enter passanger Name" })
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.PassportNumber, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.TextBoxFor(model => model.PassportNumber, new { @id = "passportNumber", @class = "form-control", data_toggle = "tooltip", title = "Enter passport number", maxlength = 8 })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.PkgVal, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            @Html.TextBoxFor(model => model.PkgVal, new { type = "number", @min = "0", @id = "pkgVal", data_toggle = "tooltip", title = "Enter valid pkg value", @class = "form-control" })
                                        </div>
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.AirFare, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.TextBoxFor(model => model.AirFare, new { type = "number", @min = "0", @id = "airFare", data_toggle = "tooltip", title = "Enter valid airfare", @class = "form-control" })
                                    </div>
                                </div>

                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.Tax, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.TextBoxFor(model => model.Tax, new { type = "number", @min = "0", @id = "tax", data_toggle = "tooltip", title = "Enter valid tax", @class = "form-control" })
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.DateChangeFee, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.TextBoxFor(model => model.DateChangeFee, new { type = "number", @min = "0", @id = "dateChangeFee", data_toggle = "tooltip", title = "Enter valid date change fee value", @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.CommissionToAgent, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        @Html.TextBoxFor(model => model.CommissionToAgent, new { type = "number", @min = "0", @id = "commissionToAgent", data_toggle = "tooltip", title = "Enter valid commission to agent value", @class = "form-control" })
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.VMPDNumber, new { @class = "label_class" })
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            @Html.TextBoxFor(model => model.VMPDNumber, new { type = "text", maxlength = "13", @id = "vmpdNumber", data_toggle = "tooltip", title = "Enter vmpd number", @class = "form-control" })
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="row">
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.EMDNumber, new { @class = "label_class", @style = "margin-top: -3px;" })
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            @Html.TextBoxFor(model => model.EMDNumber, new { type = "text", maxlength = "13", @id = "emdNumber", data_toggle = "tooltip", title = "Enter emd number", @class = "form-control" })
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.RoomType, new { @class = "label_class", @style = "margin-top: -3px;" })
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            @Html.TextBox(item.RoomType, new { type = "text", @id = "roomType", @class = "form-control" })
                                        </div>
                                    </div>
                                </div>
                                <div class="col-sm-4">
                                    <div class="col-sm-6">
                                        @Html.LabelFor(model => model.RoomCat, new { @class = "label_class", @style = "margin-top: -3px;" })
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="form-group">
                                            @Html.TextBox(item.RoomCategory, new { type = "text", @id = "roomCat", @class = "form-control" })
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
         </div>
  <div class="row">
            <p>
                <input type="button" class="btn btn-info btn-add" name="PaymentDetails" id="PaymentDetails_btn" value="Add" data-url="@Url.Action("PaymentDetails", "EVoucher")" />
            </p>
        </div>
        }

    </div>
</div>

I can save the value to database when the user clicks on add button by using Ajax call. But How can I change the foreach loop value according the relevant iteration?

Any help will really appreciate. Thanks

Update - @Liam, I want to change @item.RoomType, @item.RoomCategory according to the foreach loop value. But I dont want to display all the inputs at one time. For ex if I have count 20, I only want to display one at a time. not all 20.

You cannot use a `foreach` loop to bind form controls to a collection (refer [Post an HTML Table to ADO.NET DataTable](https://stackoverflow.com/questions/30094047/post-an-html-table-to-ado-net-datatable/30094943#30094943)). And your generating invalid html (duplicate `id` attributes) — , Oct 02 '17 at 09:55
You can't use `foreach` for dynamically generated form fields - it will result with duplicated `id` attribute value for subsequent fields (and only one will be passed during form submit). Using standard `for` loop with model array (e.g. `model => model[i].TicketNumber`) is more preferred. — Tetsuya Yamamoto, Oct 02 '17 at 09:57
thanks all of you. @StephenMuecke, I checked your provided solution. But Can I use editorfor option here?If yes, that means I have to add the 'add button' inside the editorfor view? please help me.I dont have any idea how I can make this work — Null_Exception, Oct 02 '17 at 10:07
I have absolutely no idea what your trying to do here - What do your mean by _I only want to display one at a time. not all 20_. Do you want 'Next' and 'Previous' buttons to step through one item at a time? And what does you 'Add' button have to do with your question? — , Oct 02 '17 at 10:12
Sorry for the bad explanation. I have a list that contain values such as roomtype, category and count. I want to create an input form according to the list count. If list contain 25 element, I want to show my input form 25 times. This form need to display one by one. All the input form contain add button. So when user clicks on add button in one input form, I want to display the other input form. And this foreach loop each item contain, roomtype and roomcategory. So these values must change according to the each item iteration — Null_Exception, Oct 02 '17 at 10:18

dynamically add 'add button' inside for loop

0 Answers0