javascript - 将 Razor DropDownList 保持在一行上

Question

我正在尝试构建一个 Kendo 选项卡，我可以在其中添加新选项卡，其中包含从 Razor DropDownList 获取的数据库填充的电子邮件选择列表。当页面加载选择列表和选项时，所有选项都加载正常，但选项都在新行上，这会弄乱格式并引发错误。

在 Visual Studio

$('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
this is the troublemaker-->content:'<div id = ' + lastIndex + '><div class="col-md-10">@Html.DropDownList("VendorEmails", null, htmlAttributes: new { @class = "form-control", @style = "width: 280px" })</div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>'
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

生成的代码

jQuery('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
                    content: '<div id = ' + lastIndex + '><div class="col-md-10"><select class="form-control" id="VendorEmails" name="VendorEmails" style="width: 280px"><option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
</select></div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>'
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });

所以我的问题是，我能以某种方式将这一切都放在一行上以便它可以工作吗？我只需要它不添加新行或找到一种方法让 jQuery 将其全部视为一个字符串。

Answer 1

事实证明，我所需要做的就是用反引号 (`) 替换所有单引号。这使得 javascript 将其全部识别为一个字符串。我猜这是 ES6 中新增的一种名为“模板文字”的新型变量。我在另一个问题上找到了这个问题的答案。 Better explanation

现在效果很好!

$('#add-button').kendoButton({
            click: function () {
                var lastIndex = tabstrip.items().length;
                tabstrip.insertBefore([{
                    text: '<i class="fa fa-envelope" aria-hidden="true"/><span class="tab">Email ' + lastIndex + '</span><i id="tab-close-' + lastIndex + '" class="fa fa-close"></i>',
                    encoded: false,
                    content:`<div id = ` + lastIndex + `><div class="col-md-10"><select class="form-control" id="VendorEmails" name="VendorEmails" style="width: 280px"><option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
<option value="email@email.com">email@email.com</option>
</select></div><div class="col-md-10"><textarea style="width: 300px; height: 200px;" placeholder="Type email for vendor here"></textarea></div></div>`
                }], tabstrip.items()[lastIndex - 1]);
                addCloseClickHandlers();
            }
        });