Question

我有一个Javascript数组字符串，我正在尝试创建一个HTML表格，将这些字符串包含在它们旁边的下拉列表中。

    $.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");
    });

使用HTML工作正常，但是当我使用剃刀尝试同样的事情时，我得到了异常：＆＃34;未终止的字符串常量＆＃34;。即使这是有效的，新的问题是所有DropDownlists在生成的HTML中都具有相同的名称和id。有没有更好的方法来实现这一目标？

我想将Razor用于DropDownList的主要原因是使用我的ViewBag。

我们的想法是使用HTML和我的ViewBag创建一个下拉列表，并在需要的地方使用新ID进行克隆。

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');
    });

HTML（我将＆＃34;原始＆＃34;下拉列入隐藏的div中，因为它只需要复制）：

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

Answer 1

在这种情况下你不能使用Razor，因为Razor在发送到客户端之前使用服务器端生成正确的html。 @Html.DropDownList无法像这样执行，您的浏览器无法理解它。你最好坚持使用HTML解决方案。

如果您真的想使用Razor，可以向服务器发出ajax请求，它将返回包含DropDownList的部分视图，您可以将其插入到任何您想要的位置。但这意味着与您的服务器通信，这可能不是您想要做的。

Answer 2

我会选择你已有的解决方案。但我认为你也可以使用剃刀助手。像这样

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

和你的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");
});

asp.net mvc - 如何使用Javascript创建多个DropDownLists

2 个答案: