在 javascript 中使用 Html.DropDownList

Question

我有一个 Razor 页面，它允许用户将可变数量的与会者添加到会议对象中。在页面上，有一个“添加与会者”按钮，用于将文本框插入页面并增加下标，以便模型绑定器可以拾取它。

$('#addInternalAttendee').on('click', function () {
    $('#internalAttendees').append(
        '<div class=\'attendee\'>' +
            '<input type=\'text\' name=\'Attendees[' + x + ']\' class=\'form-control\' />' +
        '</div>'
    );

    ++x;
});

这件作品很好。我现在要做的是添加一个下拉框来选择与会者的角色。

    var ddb = '@Html.DropDownList("AttendeeRoleIds[*]", (SelectList)ViewBag.EventAttendeeRoleId, htmlAttributes: new { @class = "form-control", })';

我遇到的问题是 HTML 包含未正确转义的双引号，因此渲染页面上的函数主体如下所示：

$('#addInternalAttendee').on('click', function () {

    var ddb = '<select class="form-control" id="AttendeeRoleIds___" name="AttendeeRoleIds[*]"><option value="1">Host/Organizer</option>
<option value="2">Note Taker</option>
<option value="3">Supervising Manager</option>
<option value="4">Attendee (Participating)</option>
<option value="5">Attendee (Non-Participating)</option>
</select>';
    ddb = ddb.replace('\"', '\'');

    $('#internalAttendees').append(
        '<div class=\'attendee\'>' +
            '<input type=\'text\' name=\'Attendees[' + x + ']\' class=\'form-control\' />' +
            ddb +
        '</div>'
    );

    ++x;
});

有没有办法将此 HTML 正确转义到 jquery 函数的主体中以便可以呈现？

Answer 1

您可以使用 Json.NET 对字符串进行编码：

@Html.Raw(JsonConvert.ToString(@Html.DropDownList("AttendeeRoleIds[*]", (SelectList)ViewBag.EventAttendeeRoleId, htmlAttributes: new { @class = "form-control", })))

不要忘记在视图中添加 using 指令：

@using Newtonsoft.Json;

如果您还没有在您的项目中安装 Json.NET，请检查此http://www.newtonsoft.com/json

Answer 2

试试这个：

$('#addInternalAttendee').on('click', function () {

var ddb = '<select class="form-control" id="AttendeeRoleIds___" name="AttendeeRoleIds[*]"><option value="1">Host/Organizer</option>
<option value="2">Note Taker</option>
<option value="3">Supervising Manager</option>
<option value="4">Attendee (Participating)</option>
<option value="5">Attendee (Non-Participating)</option>
</select>';

var d = document.createElement('div');
d.innerHTML = ddb;    

$('#internalAttendees').append(
    '<div class=\'attendee\'>' +
        '<input type=\'text\' name=\'Attendees[' + x + ']\' class=\'form-control\' />' +
        d.firstChild +
    '</div>'
);

++x;
});