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>";

但是，当我运行它时，出现一个无效的标识符错误。当我删除这两行时，页面将再次加载。有没有办法将razor语法放入javascript变量中，或者如何将其转换为普通的html语法？

Answer 1

您对DropDownListFor的{{1}}的定义不起作用，因为它在levelDropdown和<select>标签之间创建了换行符，如下所示：

<option>

上面的代码不是有效的JS，因此发生了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>";错误。

要解决此问题，请将Unexpected identifier方法与Ajax.JavaScriptStringEncode()一起使用以生成正确的HTML：

ToHtmlString()

然后通过在JS上使用var levelDropdown = '@Ajax.JavaScriptStringEncode(Html.DropDownListFor(m => m.Level, Model.Levels, null, null).ToHtmlString())';去除levelDropdown内的所有换行符：

String.replace()

最后使用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()

注意：以上解决方案仅适用于MVC 5（请参见fiddle）。如果使用Core MVC，则没有Ajax.JavaScriptStringEncode()和$('#targetElement').append(level);方法用于针对ToHtmlString()的字符串转换，因此创建了自己的带有帮助器类的DropDownListFor方法，并且使用System.Text.Encodings.Web.JavaScriptEncoder编码输出：

助手类

ToHtmlString()

查看

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

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

将Razor语法传递给javascript变量

1 个答案: