保持Razor DropDownList在一條線上

Question

我試圖構建一個Kendo tabstrip，我可以添加包含數據庫的新選項卡populated從剃刀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(); 
      } 
     });