如何绑定一个下拉列表到webgrid的新行？

问题描述

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

Is it possible to provide dropdownlist in the new row added to WebGrid? I tried adding this

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

它说

代码：

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

错误：

推荐答案

当您使用

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

它会生成如下所示的多行字符串

it generates a string in multiple lines like below

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

无效，因此您得到错误。

which is invalid, hence you got the error.

作为解决方法，尝试将隐藏的div中的 @ Html.DropDownList 您的视图

As a workaround, try to place the @Html.DropDownList inside a hidden div somewhere in your view

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

然后使用 $（'＃divTeams'）获取生成的字符串。 （）

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

这篇关于如何绑定一个下拉列表到webgrid的新行？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！