asp.net mvc - How to create multiple DropDownLists using Javascript

Question

I have a Javascript Array of strings and I am trying to create an HTML table to include these strings with dropdowns next to them.

    $.each(data, function (key, val) {
        var tr = $("<tr></tr>");

        $("<td>"+ val + "</td>").appendTo(tr);
        var tmp = '<td>'+'@(Html.DropDownList("SomeDropdown", (SelectList)ViewBag.SomeList))'+'</td>';
        //var tmp = "<td><select><option value="0">Other</option></select> </td>";
        $(tmp).appendTo(tr);
        tr.appendTo("#tableData");
    });

Using HTML works fine, but when I try the same thing using razor I get the exception: "Unterminated string constant". Even if this was to work, the new issue would be that all the DropDownlists would have the same name and id in the generated HTML. Is there a better way to accomplish this?

The main reason I wanted to use Razor for my DropDownList was to use my ViewBag.

The idea is to create a dropdown using HTML and my ViewBag and clone it wherever needed with a new id.

The Javascript:

        var i = 0;
    var prefix = 'pre';
    $.each(data, function (key, val) {
        var tr = $('<tr></tr>');

        var td = $('<td></td>');
        i++;
        var tmp = $("select:first").clone().attr("id", prefix+i);
        tmp.appendTo(td);
        td.appendTo(tr);
        $(td).appendTo(tr);

        tr.appendTo('#tableData');
    });

The HTML (I wrapped the "original" dropdown in a hidden div since it's only necessary to copy):

<div style="display:none">
<select class="selector">
    @foreach (var item in ViewBag.SomeList)
    {
        <option value="@item.Value">
           @item.Text
        </option>
    }
</select>
</div>

can you share some razor and javascript code?

111
– 111

2013-10-25 06:31:43 +00:00
Commented Oct 25, 2013 at 6:31 — 111
– 111, Commented Oct 25, 2013 at 6:31

Réda Mattar · Accepted Answer · 2013-10-25 08:07:18Z

2

You can't use Razor in that situation, because Razor is used server side to generate proper html before sending it to client side. @Html.DropDownList can't be executed like that, your browser doesn't understand it. You'd better stick with an html solution.

If you really want to use Razor for this, you can make an ajax request to your server, it will return you a partial view containing your DropDownList, you can insert it wherever you want. But this means communicating with your server, which may not be what you want to do.

answered Oct 25, 2013 at 8:07

Réda Mattar

4,3911 gold badge20 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

th1rdey3 · Accepted Answer · 2013-10-27 19:49:51Z

0

I would go for the solution you already have. but i think you can use the razor helper too. like this

<div id='hiddenDiv' style="display:none">
    @(Html.DropDownList("SomeDropdown", (SelectList)ViewBag.SomeList))
</div>

and your javascript

$.each(data, function (key, val) {
        var tr = $("<tr>");
        $("<td>"+ val + "</td>").appendTo(tr);
        $('<td>').append($("#hiddenDiv").find('select').first().clone().attr("id", prefix+(i++)).appendTo(tr);
        tr.appendTo("#tableData");
});

answered Oct 27, 2013 at 19:49

th1rdey3

4,4588 gold badges37 silver badges69 bronze badges

Collectives™ on Stack Overflow

asp.net mvc - How to create multiple DropDownLists using Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related