Javascript Inline Dropdownlist

本文关键字：Dropdownlist Inline Javascript | 更新日期: 2023-09-27 18:35:55

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

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

Javascript Inline Dropdownlist

您不能在 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%>"

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

你可以

尝试使用.ToHtmlString() 

@Html.DropDownList("Account Code", (SelectList)ViewBag.listValues, "---Select Account Code---", new { @class = "form-control edit-mode", id = "acctcode" }).ToHtmlString()

我尝试了类似你的东西。我的代码 -

<div id="div"></div>
<script>
    window.onload = function(){
        var sel = '@Html.DropDownList("List")';
        document.getElementById("div").innerHTML = sel;
    };
</script>

当我使用查看页面源代码时，我得到 -

<div id="div"></div>
<script>
    window.onload = function(){
        var sel = '<select id="List" name="List"><option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>';
        document.getElementById("div").innerHTML = sel;
    };
</script>

如您所见，已生成选择列表，但问题是存在换行符，这使它成为无效的JavaScript字符串。 并抛出错误 -

Uncaught SyntaxError: Unexpected token ILLEGAL

我假设你的问题也是一样的。

但是如果你的浏览器支持 ECMASCript6（如最新的 chrome），你可以使用反引号，它应该可以工作。我的做到了。

var sel = `@Html.DropDownList("List")`;
相关文章：