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

我需要使用jQuery动态添加一些元素。 所以我在互联网上抬头看到了这个。 当单引号内有简单的html元素时，它很好用。 我需要在jQuery中使用razor语法。

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

我不工作的jQuery如下：

 $(document).ready(function () { $(document).on("click", ".btnPlus", function () { var html = '
'+ '@Html.LabelFor(model => model.transaction_item, "transaction_item", htmlAttributes: new { @class = "control-label col-md-2" })'+ '
'+ '@Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control" })'+ '@Html.ValidationMessageFor(model => model.transaction_item, "", new { @class = "text-danger" })'+ '
'+ '
'+ '
' $("#trItem").append($(html)) }; }); 

我的目标与教程类似 – 动态添加元素。 在这里，我在点击按钮上添加标签和下拉列表。 我该如何实现这一目标？

Answer 1

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

如果要添加使用Razor语法创建的元素，则向页面添加隐藏元素，并使用JQuery将其克隆添加到DOM。

这样的事情会让你知道我的意思：

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

Answer 2

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

然后在您的视图引用中添加对脚本部分的引用

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

部分页面： _MyPartial.cshtml

 @model MyViewModel  

Answer 3

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

而是将模板化的HTML注入页面的隐藏部分。 虚拟脚本块对此非常有用，因为浏览器将忽略未知的脚本类型：

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

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

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

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

例如