Передача синтаксиса Razor в переменную javascript

Question

Это объявление, которое я пытаюсь поместить в переменную

var levelDropdown = "@Html.DropDownListFor(m => m.Level, Model.Levels, null, null)";
var level = "<div class='col-sm-3 search-spacing'><label for='Level'>Level</label>" + levelDropdown +"</select></div>";

Однако, когда я запускаю его, я получаю ошибку неверного идентификатора. Когда я удаляю эти 2 строки, страница снова загружается. Есть ли способ поместить синтаксис бритвы в переменную javascript или как вместо этого преобразовать его в обычный синтаксис html?

Answer 1

Ваше определение DropDownListFor для levelDropdown не работает, поскольку оно создает разрывы строк между тегами <select> и <option>, как показано в результате ниже:

var levelDropdown = "<select id="Level" name="Level"><option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
</select>";

Код выше не является допустимым JS, следовательно, произошла ошибка Unexpected identifier.

Чтобы решить эту проблему, используйте метод Ajax.JavaScriptStringEncode() вместе с ToHtmlString() для создания правильного HTML:

var levelDropdown = '@Ajax.JavaScriptStringEncode(Html.DropDownListFor(m => m.Level, Model.Levels, null, null).ToHtmlString())';

Затем удалите все разрывы строк внутри levelDropdown, используя String.replace() на JS:

var level = "<div class='col-sm-3 search-spacing'><label for='Level'>Level</label>" + 
             levelDropdown.replace(/(\r\n\t|\n|\r\t)/gm,"") +"</div>";

Наконец, используйте append(), чтобы добавить выпадающий список в целевой элемент:

$('#targetElement').append(level);

Примечание: Приведенное выше решение применимо только к MVC 5 (см. fiddle ). Если используется Core MVC, нет методов Ajax.JavaScriptStringEncode() и ToHtmlString() для преобразования строк в DropDownListFor, поэтому создайте свой собственный метод ToHtmlString() с вспомогательным классом и System.Text.Encodings.Web.JavaScriptEncoder для кодирования вывода:

класс помощников

public static string ToHtmlString(this IHtmlContent htmlContent)
{
    using (var writer = new StringWriter())
    {
        htmlContent.WriteTo(writer, System.Text.Encodings.Web.HtmlEncoder.Default);
        return writer.ToString();
    }
}

View

@{
    // include the helper class 
    var ddlf = System.Text.Encodings.Web.JavaScriptEncoder.Default.Encode(Html.DropDownListFor(m => m.Level, Model.Levels, null, null).ToHtmlString());
}

<script>
    var levelDropdown = '@ddlf';
    var level = "<div class='col-sm-3 search-spacing'><label for='Level'>Level</label>" + 
                levelDropdown.replace(/(\r\n\t|\n|\r\t)/gm,"") +"</div>";
    $('#targetElement').append(level);
</script>

Похожие проблемы:

Использование Html.dropdownList () в коде Javascript