Javascript 内联下拉列表

Question

我正在 MVC 5 中创建内联 CRUD 操作，其中为了添加新记录，用户将单击某个按钮，它将创建一个新的动态表行。这是我的 JavaScript 代码:

        function tblnewrow() {

            var newrow = '<tr>' +
             '<td><span class="edit-mode"><input type="text" class="form-control edit-mode" id="particular" placeholder="Enter Particular"/></span></td>' +
             '<td><span class="edit-mode"><input type="text" class="form-control edit-mode" id="acctcode" placeholder="Enter Account Code" /></span></td>' +
             '<td><span class="edit-mode"><input type="text" class="form-control edit-mode" id="ppmpcode" placeholder="Enter PPMP Code" /></span></td>' +
             '<td><span class="edit-mode">@Html.DropDownList("Account Code", (SelectList)ViewBag.listValues, "---Select Account Code---", new { @class = "form-control edit-mode", id = "acctcode" })</span></td>' +
             '<td align="center"><button class="btn btn-success edit-mode" id="saveParticular" type="submit">Save</button><button class="btn btn-danger cancel-add edit-mode">Cancel</button></td>'

            $('#particularTbl tr:last').after(newrow);
        };

我可以成功添加新行，但是当我添加下拉列表时它不起作用。我在这里做错了什么？提前致谢!

Answer 1

您无法在 JQ 中使用服务器助手并期望在客户端正确呈现它。您需要更换

'<td><span class="edit-mode">@Html.DropDownList("Account Code", (SelectList)ViewBag.listValues, "---Select Account Code---", new { @class = "form-control edit-mode", id = "acctcode" })</span></td>'

使用纯 html 代码，例如

'<td><span class="edit-mode"><select class="form-control edit-mode" id="acctcode"><option value='1'>---Select Account Code---</option></select></span></td>'

对于选项列表，您可以将值从 ViewBag 传递到 JQ，如下所示:

var bag = "<%= ViewBag.listValues%>"

然后您需要从中构建您的选项列表。