Razor DropDownListを1行に保存

Question

剣道タブストリップを作成しようとしています。剃刀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(); 
      } 
     }); 

それが動作するようにだから私の質問は、私は何とかすべて1行でこれを維持することができますか？私は、新しい行を追加したり、jQueryにすべてを1つの文字列として表示させる方法を見つける必要があります。

Answer 1

すべてのシングルクォートをバッククォート（ `）で置き換えてください。これはjavascriptですべてを1つの文字列として認識します。私はそれが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(); 
      } 
     });