1

I'm trying to add and remove form fields in MVC Asp.Net. I've followed this tutorial of dynamic adding and removing form fields.

I'm having a problem only this part of code. In below code it only adds a textbox.

if(x < max_fields){ //max input box allowed
        x++; //text box increment
        $(wrapper).append('<div><input type="text" name="mytext[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
    }
});

but I want to add 2 dropdownlists and 1 textbox by using MVC helpers not html codes.

I've 2 dropdownlist, Sizes and Colors and 1 textbox for Quantity. Dropdownlists are populating values from DB.

<div class="form-group">
    <div class="row">
        <div class="input_fields_wrap">
            <button class="add_field_button">Add More Fields</button>
            <div class="col-md-2">
                @Html.DropDownList("ProductSizeVariantId", null, "Size", new { @class = "control-label" })
            </div>
            <div class="col-md-2">
                @Html.DropDownList("ProductSizeVariantValueId", null, "Select Size", new { @class = "control-label" })
            </div>
            <div class="col-md-2">
                @Html.DropDownList("ProductColorVariantId", null, "Select Color", new { @class = "control-label" })
            </div>
            <div class="col-md-2">
                @Html.TextBoxFor(x => x.Stock, new { @placeholder = "Quantity", @class = "form-control" })
            </div>
         </div>
    </div>
</div>

here is what i've tried

$(wrapper).append('<div><div class="col-md-2">@Html.DropDownList("ProductSizeVariantId", null, "Size", new { @class = "control-label" })</div><div class="col-md-2">@Html.DropDownList("ProductSizeVariantValueId", null, "Select Size", new { @class = "control-label" })</div><div class="col-md-2">@Html.DropDownList("ProductColorVariantId", null, "Select Color", new { @class = "control-label" })</div><div class="col-md-2">@Html.TextBoxFor(x => x.Stock, new { @placeholder = "Quantity", @class = "form-control" })</div><a href="#" class="remove_field">Remove</a></div>'); //add input box

after adding above code, when I click AddMore button, it reloads the page.

user3223395667
  • 239
  • 1
  • 6
  • 16
  • Whatever you are trying is to do on client side i.e. adding dynamic form fields using `jquery`.. `Html helpers` are used on server side which actually converts your helpers to required html elements before sending response to client browser... So its quite not possible using `jquery`. I would suggest rather to use a `partialview` which contains the above controls, passing the list of`model` and generating as much as control you want and load it using `$.load` – Guruprasad J Rao Jan 20 '16 at 06:41
  • 1
    Doing so would make no sense because your just creating multiple elements with the same `name` attribute which could never bind to your model when you submit (and duplicate `id` attributes which is invalid html). 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 options for dynamically adding and removing collection items. –  Jan 20 '16 at 06:42
  • 1
    Actually I'm trying to store data in DB. User can add 10 field rows by click "AddMore" button and then when hi click "Save button" all the data will be stored in DB. – user3223395667 Jan 20 '16 at 06:51
  • I know what your trying to do (and it won't work). Read the links I gave you. –  Jan 20 '16 at 06:55
  • @StephenMuecke yeah i read that, i guess I need to explain the whole scenario. Sorry for this incomplete question. I'm going to post another question with complete details – user3223395667 Jan 20 '16 at 07:20
  • @StephenMuecke here is the detailed question http://stackoverflow.com/questions/34894464/inserting-multiple-rows-in-database-using-mvc-asp-net – user3223395667 Jan 20 '16 at 08:04

0 Answers0