如何在ASP.NET MVC 5中使用帶有razor語法的jquery？

Question

我需要使用jQuery動態添加一些元素。 因此，我在互聯網上查找后發現了這一點。 當單引號內包含簡單的html元素時，它很好並且可以工作。 我需要在jQuery中使用剃刀語法。

我知道jQuery是用戶端，而剃須刀是服務器端。 它們不能組合在一起。 我在這里問是因為我需要知道如何實現這一目標。

我無法使用的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))
    };
});

我的目標類似於本教程 -動態添加元素。 在這里，我在單擊按鈕時添加了標簽和下拉菜單。 我該如何實現？

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

您可以在“視圖共享”文件夾中創建部分頁面_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

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