Question

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

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

在javascript中使用Html.DropDownList

2 个答案: