如何将Dropdownlist绑定到webgrid中的新行？

Question

是否可以在添加到WebGrid的新行中提供下拉列表？我尝试添加这个

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

它说

  

未捕获的SyntaxError：<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

在像

这样的javascript字符串中使用@Html.DropDownList时

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

它会在多行中生成一个字符串，如下所示

'<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>'

无效，因此您收到错误。

作为解决方法，请尝试将@Html.DropDownList置于视图中某个隐藏的div中

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

然后使用$('#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);