如何在ASP.NET MVC 5中使用Razor语法和jQuery？

Question

我需要使用jQuery来动态添加一些元素。所以我在互联网上查找，找到了这个。当单引号内有普通的html元素时，它很好用并且有效。我需要在jQuery中使用razor语法。

我知道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))
    };
});

我的目标类似于教程 - 动态添加元素。在这里，我将在单击按钮时添加标签和下拉菜单。我该如何实现？

- Gaurav Chauhan

---

@Zaki，这是Chrome开发者工具中的“未识别符号”。 - Gaurav Chauhan

@TrueBlueAussie 看起来很有前途。我该怎么做？有文档/教程/链接吗...谢谢... - Gaurav Chauhan

@GauravChauhan，你正在跟随的教程只是向你展示如何使用jQuery完成这个操作，请按照这个教程，它会向你展示正确的方法 - 使用模板：http://www.itorian.com/2013/04/nested-collection-models-in-mvc-to-add.html - Zaki

创建一个部分视图，并使用Jquery的load方法将上述数据附加到HTML中，这种情况下比较适合。 - Suprabhat Biswal

下面添加了我所说的一个例子。 - iCollect.it Ltd

Answer 1

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

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

类似这样的代码应该可以让您了解我的意思：

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

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

- AGB

---

有没有相关文档、示例或链接可以提供？我是 ASP.NET 的新手。 - Gaurav Chauhan

对我来说，这个方法可行。使用部分视图的想法也很吸引人。 - Gaurav Chauhan

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>

- devfric

Answer 3

最好避免使用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}"/>

- Gone Coding

---

那么，如何应对这个问题呢？我在想，使用哪种客户端代码与我的剃刀网站配合使用，原生JS、jQuery、Angular、React、Knockout？我有点喜欢前两者的简单性。 - Vitaliy Terziev

@ВиталийТерзиев：这取决于您想使用哪个堆栈。如果您使用Angular，则不需要将任何东西注入到托管页面中，因为它完全是通过服务调用驱动的客户端脚本。您能提供一下您想要注入的示例吗？ - iCollect.it Ltd

其实我在想，是否可以跳过Angular，只使用Razor和足够的JS，例如knockout或jquery，因为这是一个简单的公司网站，我只想让它看起来漂亮，而且我想知道这是否是一种不好的做法。 - Vitaliy Terziev

@ВиталийТерзиев：许多公司都在推动使用客户端框架，例如Angular，但是不可见的开销（适当的测试）很大。我自己在MVC的基础上添加了JS插件层，使其像Angular一样运行（但却只有一半的开销） :) - iCollect.it Ltd

是的，谢谢你的回答，我想我会尝试一下，看看效果如何 :) 希望我可以通过几个js函数来实现（网站将非常简单，我的目标是流畅、快速的体验，毕竟该网站将销售Web应用程序、网站和电子商务（这可能有点困难，但nppcommerce似乎非常好:)） - Vitaliy Terziev