Javascript 如何在asp.net mvc 5中使用jquery和razor语法？

我需要使用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))
    };
});

$（文档）.ready（函数（）{
$（document）.on（“click”，“.btnPlus”，函数（）{
var html=''+
'@Html.LabelFor（model=>model.transaction_项，“transaction_项”，htmlAttributes:new{@class=“control label col-md-2”}）+
''+
“@Html.DropDownList（“transaction_item”，null，htmlAttributes:new{@class=“form control”}）”+
“@Html.ValidationMessageFor（model=>model.transaction_项，”，新的{@class=“text danger”}”+
''+
''+
''
$（“#trItem”）。附加（$（html））
};
});

---

我的目标类似于-动态添加元素。在这里，我添加了一个标签并单击按钮下拉。如何实现这一点？

您不能使用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());

---

您可以在视图共享文件夹中创建部分页面

\u MyPartial.cshtml

然后在视图引用中，将引用添加到脚本部分

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

部分页面：

\u 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>

@model MyViewModel
$（文档）.ready（函数（）{
$（document）.on（“click”，“.btnPlus”，函数（）{
var html=''+
“@（Html.LabelFor（model=>model.transaction_项，“transaction_项”，htmlAttributes:new{@class=“control label col-md-2”}））”
''+
“@（Html.DropDownList（“transaction_item”，null，htmlAttributes:new{@class=“form control”}”）”+
“@（Html.ValidationMessageFor（model=>model.transaction_项，”，新的{@class=“text danger”}）”+
''+
''+
''
$（“#trItem”）。附加（$（html））
};

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

相反，将模板化的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>

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

e、 g

您的浏览器的开发人员工具中是否有任何错误？请参考答案和动态添加集合项的一些选项出于多种原因，这是一个非常糟糕的主意。使用Razor生成HTML模板片段（隐藏在DOM中），然后使用jQuery复制。@Zaki它是“未识别的符号”在chrome的开发者工具中…@TrueBlueAussie看起来很有希望。我该怎么做？有没有文档/tut/链接…谢谢…有没有文档/示例/链接可以用于此？我是asp.net新手。对我来说，这很有效。使用局部视图的想法也很有吸引力。因此，最近人们应该如何解决这个问题，我想知道客户端的是什么e与我的razor网站vanilla js、jquery angular、react、knockout一起使用时，我有点喜欢前两个@Баззззззззззззззззззззe一个你想注入什么的例子？实际上，我想知道我是否可以跳过angular，使用Razor和足够的JS，例如knockout或jquery，这是一个简单的公司网站，我只想看起来不错，我想知道这是否是一个不好的做法@аазззззз很多公司，但无形的开销（适当的测试）很大。我自己，我在MVC上添加了JS的插件层，这样它就可以像Angular一样运行（但热量只有一半）：）是的，谢谢你的回答，我想我会尝试一下，看看它是如何运行的：）希望我能使用几个JS功能（该网站将非常简单，我的目标是平稳、快速的体验，毕竟该网站将销售web应用程序、网站和电子商务（这将有点困难，但nppcommerce似乎非常好：））

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

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