如何在 asp.net mvc 5 中使用带有剃刀语法的 jquery？

Question

我需要使用 jQuery 来动态添加一些元素。所以我在互联网上查找，我发现this. 当单引号内有纯 html 元素时，它很好并且工作。我需要在 jQuery 中使用剃刀语法。

我知道 jQuery 是用户端，而 razor 是服务器端。它们不能结合在一起。我在这里问是因为我需要知道如何实现这一目标。

我不工作的jQuery如下：

<script type="text/javascript">  
    $(document).ready(function () {  
        $(document).on("click", ".btnPlus", function () { 
        var html = '<div class="form-group">'+
                '@Html.LabelFor(model => model.transaction_item, "transaction_item", htmlAttributes: new { @class = "control-label col-md-2" })'+ 

                '<div class="col-md-4">'+
                    '@Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control" })'+
                    '@Html.ValidationMessageFor(model => model.transaction_item, "", new { @class = "text-danger" })'+
                '</div>'+

                '<div class="col-md-6"><input type="button" class="BtnPlus" value="+" /></div>'+

            '</div>'
        $("#trItem").append($(html))
    };
});

我的目标类似于tutorial - 动态添加元素。在这里，我在单击按钮时添加标签和下拉列表。我如何实现这一目标？

Answer 1

最好避免使用 Razor 生成 jQuery/Javascript 代码。由于许多原因，您的 Javascript/jQuery 代码最好放在单独的文件中（VS 调试/脚本捆绑等）

而是将模板化的 HTML 注入页面的隐藏部分。一个虚拟脚本块非常适合这个，因为浏览器会忽略一个未知的脚本类型：

<script id="template" type="text/template">  
    <div class="form-group">
        @Html.LabelFor(model => model.transaction_item, "transaction_item", htmlAttributes: new { @class = "control-label col-md-2" })    
        <div class="col-md-4">
            @Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control" })
            @Html.ValidationMessageFor(model => model.transaction_item, "", new { @class = "text-danger" })
        </div>
        <div class="col-md-6"><input type="button" class="BtnPlus" value="+" /></div>
    </div>
</script>

您可以查看 DOM 检查器生成的内容，以确保存在正确的属性。

然后只需使用模板中的 HTML 来添加新按钮：

$("#trItem").append($('#template').html());

您需要解决的唯一问题是任何重复的 ID 和多个项目的索引。我通常在模板中使用原始 HTML（不是 Razor），并为需要重命名的各种属性使用占位符。

例如

<script id="template" type="text/template">  
    <div class="form-group">
        <label for="{id}"/>

Answer 2

您可以在 Views Shared 文件夹中创建部分页面 _MyPartial.cshtml。

然后在您的视图参考中添加对您的脚本部分的参考

@section Scripts {
    @Html.Partial("~/Views/Shared/_MyPartial.cshtml",Model);
}

部分页面：_MyPartial.cshtml

@model MyViewModel

<script type="text/javascript">  
$(document).ready(function () {  
    $(document).on("click", ".btnPlus", function () { 
    var html = '<div class="form-group">'+
            '@(Html.LabelFor(model => model.transaction_item, "transaction_item", htmlAttributes: new { @class = "control-label col-md-2" }))'+ 

            '<div class="col-md-4">'+
                '@(Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control" }))'+
                '@(Html.ValidationMessageFor(model => model.transaction_item, "", new { @class = "text-danger" }))'+
            '</div>'+

            '<div class="col-md-6"><input type="button" class="BtnPlus" value="+" /></div>'+

        '</div>'
    $("#trItem").append($(html))
};
</script>

Answer 3

您不能使用 JQuery 添加 Razor 元素，因为正如您所说，JQuery 是客户端库，而使用 Razor 语法的 ASP.NET 是服务器端脚本语言。

如果您想添加使用 Razor 语法创建的元素，则将隐藏元素添加到页面并使用 JQuery 将其clone 添加到 DOM。

这样的事情应该会让你明白我的意思：

@Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control", @id = 'template-ddl' })

$("#trItem").append($('#template-ddl').clone());