0

文字列の 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 を使用すると問題なく動作しますが、かみそりを使用して同じことを試みると、「Unterminated string constant」という例外が発生します。これが機能したとしても、生成された HTML ですべての DropDownlist が同じ名前と ID を持つという新しい問題が発生します。これを達成するためのより良い方法はありますか？

DropDownList に Razor を使用する主な理由は、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 (コピーするだけでよいので、「元の」ドロップダウンを非表示の div でラップしました):

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

2 に答える 2

2

Razor はクライアント側に送信する前に適切な html を生成するためにサーバー側で使用されるため、そのような状況では Razor を使用できません。@Html.DropDownListそのように実行することはできません。あなたのブラウザはそれを理解していません。HTMLソリューションに固執することをお勧めします。

これに本当に Razor を使用したい場合は、サーバーに ajax リクエストを送信すると、DropDownList を含む部分ビューが返され、必要な場所に挿入できます。しかし、これはサーバーと通信することを意味し、これはあなたがやりたいことではないかもしれません.

于 2013-10-25T08:07:18.520 に答える
0

私はあなたがすでに持っている解決策に行きます。しかし、かみそりヘルパーも使用できると思います。このような

<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");
});
于 2013-10-27T19:49:51.953 に答える