在javascript中使用Html.DropDownList

Using Html.DropDownList in javascript

本文关键字：Html DropDownList javascript      更新时间：2023-09-26

>我有一个 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 函数的主体中，以便它可以呈现？

您可以使用

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

试试这个：

$('#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;
});
相关文章：