1

Most of the questions asked regarding this are just to append a plain dropdown Html. But I was trying to dynamically adds (append) the Html.DropDownListFor helper as I need to get the list of selection from the server. The objective for this code is to submit list of Judge.JudgeBoothMark to the controller. Here is my DropDownListFor Html helper:

<div id="BoothList">
    @Html.LabelFor(b => b.Booths)
    @Html.DropDownListFor(m => m.Judge.JudgeBoothMark[0].BoothId, new SelectList(Model.Booths, "Id", "BoothId"), "--Select Booth--", new { @class = "form-control" })
    @Html.ValidationMessageFor(b => b.Judge.JudgeBoothMark)
</div>

I used this button to add the dropdownlistfor:

<button type="button" id="addBooth">Add Booth</button>

I want to add this kind of dropdownlistfor Html helper through javascript dynamically as the number 0 from m.Judge.JudgeBoothMark[0] count will add up as I click on the button. Here is my Javascript code:

@section scripts{
<script>
    $(document).ready(function () {
        var count = 0;
        $("#addBooth").click(function() {
            count++;
            @{
                string dropdown = Html.DropDownListFor(m => m.Judge.JudgeBoothMark[1].BoothId,
                    new SelectList(Model.Booths, "Id", "BoothId"),
                    "--Select Booth--",
                    new {@class = "form-control"}).ToString();
            }

            var newBooth = '<br/>@Html.Raw(Ajax.JavaScriptStringEncode(dropdown))';
            $("#BoothList").append(newBooth);
        });
    });
</script>  }

Notice that the dropdownlistfor that I am using here has index 1. I can run this code fine, but the index number will be only 1, unchanged. The data that will be submitted/saved to my controller is the first and second added dropdownlist [0,1].

I cannot increase the number as I don't know how to do it. I've tried so many ways (eg; tried using the count variable, but cannot find proper way), but cannot seems to solve this problem.

Is there any way to resolve this? or is there any better way to approach my objective here?

Thanks in advance.

StudyProgramming
  • 45
  • 9
  • 1
    The easiest way for you to do it would be to return a partial view back to the screen. So, when you want to add something send data in via ajax to your action with an object or view model, and then return a partial view containing your SelectListItem and that should give you what you need. – Simon Price Oct 02 '17 at 10:15
  • 1
    Use javascript to update the `name` and `id` attributes (refer option 2 in [this answer](https://stackoverflow.com/questions/28019793/submit-same-partial-view-called-multiple-times-data-to-controller/28081308#28081308) for an example). But its unclear just what your trying to do here - your `LabelFor()`, DropDownListFor()` and `ValidationMessageFor()` are all completely unrelated and none will work correctly –  Oct 02 '17 at 10:15
  • @CodeWarrior, is there any example of the implementation that you suggested? Thank you very much! – StudyProgramming Oct 02 '17 at 12:02
  • 1
    I can code you one up but it wont be until later at the moment if thats ok – Simon Price Oct 02 '17 at 12:04
  • @StephenMuecke, yes i'll try out the suggestion. But does the .clone works with @Html.Raw(Ajax.JavaScriptStringEncode()? since to append a dropdownlistfor, i need this (@Html.Raw(Ajax.JavaScriptStringEncode()) to do it. WIthout that, the .append funciton will not work. – StudyProgramming Oct 02 '17 at 12:04
  • @CodeWarrior I'll be glad if you are willing! Thank you very much! I'll be waiting. =) – StudyProgramming Oct 02 '17 at 12:05
  • 1
    You do not (and should not) use `@Html.Raw()`. You `.clone()` your html elements, update them and then append the clone –  Oct 02 '17 at 12:05
  • 1
    And if you want to now how to do it with a partial view, read option 1 of the link, and also [this answer](https://stackoverflow.com/questions/40539321/a-partial-view-passing-a-collection-using-the-html-begincollectionitem-helper/40541892#40541892) for a more complete solution –  Oct 02 '17 at 12:12
  • 1
    And your label makes no sense (it has no relationship to your form control and clicking on it does not set focus). You validation message placeholder has no relationship to your form control and will never display anything. And to generate a dropdownlist for collection, refer [this answer](https://stackoverflow.com/questions/37407811/mvc5-razor-html-dropdownlistfor-set-selected-when-value-is-in-array/37411482#37411482) –  Oct 02 '17 at 12:15

0 Answers0