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