ドロップダウンリストをwebgridの新しい行にバインドする方法は？

Question

WebGridに追加された新しい行にドロップダウンリストを提供できますか？私はこの

'<td >@Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")</td>' 

を追加しようと、それは

Uncaught SyntaxError: Invalid or unexpected token at <td ><select id="Team" name="Team"><option value=""></option> .

はコード言う：

var row = '<tr class="webgrid-row-style">'+ 
      '<td class="col3Width"><input type="text" id="Date" value=""  class="edit-mode date-picker" /></td>' + 
      '<td >@Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")</td>' + 
      '<td ><span><input type="text" id="Name" value="" class="edit-mode /></span></td>' + 
      '<td ><span><input type="text" id="Category" value="" class="edit-mode/></span></td>' + 
      '<td ><span><input type="text" id="Received_Count" value="" class="edit-mode" /></span></td>' + 
      '<td ><span><input type="text" id="Done_Count" value="" class="edit-mode" /></span></td>' + 
      '<td ><button class="add-item edit-mode">Add</button>&nbsp;<button class="remove-item edit-mode">Cancel</button></td>' + 
      '</tr>'; 

$('table tbody:last').append(row); 

がエラー：

Answer 1

使用したがって、あなたがエラーを得

'<td >@Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "")</td>' 

のようなJavaScriptの文字列で、それが無効である

'<td ><select id="Team" name="Team"><option value=""></option> 
<option>Sukantha</option> 
<option>Shruti</option> 
<option>Shilpa</option> 
<option>Sachin</option> 
<option>Ramya</option> 
<option>Nishmitha</option> 
<option>Mahesh</option> 
</select></td>' 

以下のような複数行の文字列を生成し、。回避策として

、あなたのビューに隠されたdivのどこかの内側

<div id="divTeams" style="display: none;"> 
    @Html.DropDownList("Team", (IEnumerable<SelectListItem>)ViewBag.Teams, "") 
</div> 

を@Html.DropDownListを配置しようとし、その後こんにちは、あなたの答えは非常に動作しますが、中に$('#divTeams').html()

var row = '<tr class="webgrid-row-style">'+ 
      '<td class="col3Width"><input type="text" id="Date" value=""  class="edit-mode date-picker" /></td>' + 
      '<td >' + $('#divTeams').html() + '</td>' + 
      '<td ><span><input type="text" id="Name" value="" class="edit-mode /></span></td>' + 
      '<td ><span><input type="text" id="Category" value="" class="edit-mode/></span></td>' + 
      '<td ><span><input type="text" id="Received_Count" value="" class="edit-mode" /></span></td>' + 
      '<td ><span><input type="text" id="Done_Count" value="" class="edit-mode" /></span></td>' + 
      '<td ><button class="add-item edit-mode">Add</button>&nbsp;<button class="remove-item edit-mode">Cancel</button></td>' + 
      '</tr>'; 

$('table tbody:last').append(row);