Javascript 如何在asp.net mvc 5中使用带有剃刀语法的jquery？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34064254/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to use jquery with razor syntax in asp.net mvc 5?
提问by Gaurav Chauhan
I need to use jQuery to add some elements dynamically. So I looked up in the internet and I found this.It is nice and working when there is plain html elements inside single quotes. I need to use razor syntax with jQuery.
我需要使用 jQuery 来动态添加一些元素。所以我在网上查了一下，我找到了这个。当单引号内有纯 html 元素时，它很好并且工作。我需要在 jQuery 中使用 razor 语法。
I understand that jQuery is user side and razor is server side. They cannot be combined together. I am asking here because I need to know how do i achieve this.
我知道 jQuery 是用户端，而 razor 是服务器端。它们不能组合在一起。我在这里问是因为我需要知道如何实现这一点。
My not working jQuery is as follows:
我不工作的 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))
};
});
My aim is similar to the tutorial- to add elements dynamically. Here I am adding a label and dropdown on the click of button. How do I achieve this?
我的目标类似于教程- 动态添加元素。在这里，我通过单击按钮添加标签和下拉列表。我如何实现这一目标？
采纳答案by AGB
You cannot add Razor elements using JQuery because, as you have stated, JQuery is a client side library and ASP.NET using Razor syntax is a server side scripting language.
您不能使用 JQuery 添加 Razor 元素，因为正如您所说，JQuery 是一个客户端库，而使用 Razor 语法的 ASP.NET 是一种服务器端脚本语言。
If you want to add elements created using Razor syntax then add a hidden element to the page and use JQuery to add a cloneof it to the DOM.
如果要添加使用 Razor 语法创建的元素，请向页面添加隐藏元素并使用 JQuery 将其副本添加到 DOM。
Something like this should give you an idea of what I mean:
像这样的事情应该让你明白我的意思：
@Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control", @id = 'template-ddl' })
$("#trItem").append($('#template-ddl').clone());
回答by devfric
You can create a partial page _MyPartial.cshtmlin your Views Shared folder.
您可以_MyPartial.cshtml在 Views Shared 文件夹中创建部分页面。
Then in your view reference add the reference to your scripts section
然后在您的视图参考中添加对您的脚本部分的参考
@section Scripts {
@Html.Partial("~/Views/Shared/_MyPartial.cshtml",Model);
}
Partial page: _MyPartial.cshtml
部分页面： _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>
回答by Gone Coding
It is best to avoid generating jQuery/Javascript code with Razor. For many reasons your Javascript/jQuery code is better off in separate files (VS debugging/script bundling etc)
最好避免使用 Razor 生成 jQuery/Javascript 代码。出于多种原因，您的 Javascript/jQuery 代码最好放在单独的文件中（VS 调试/脚本捆绑等）
Instead inject the templated HTML into a hidden part of the page. A dummy script block works great for this as the browser will just ignore an unknown script type:
而是将模板化的 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>
You can see what is generated with your DOM inspector to ensure the correct attributes are present.
您可以查看 DOM 检查器生成的内容，以确保存在正确的属性。
Then simply use that HTML from the template to add new buttons:
然后简单地使用模板中的 HTML 来添加新按钮：
$("#trItem").append($('#template').html());
The only issue you need to resolve is any duplicate IDs and indexing for multiple items. I usually use raw HTML in the template (not Razor) and use placeholders for the various attributes that need renaming.
您需要解决的唯一问题是多个项目的任何重复 ID 和索引。我通常在模板中使用原始 HTML（而不是 Razor），并为需要重命名的各种属性使用占位符。
e.g.
例如
<script id="template" type="text/template">
<div class="form-group">
<label for="{id}"/>
