web-dev-qa-db-ja.com

asp.net mvc 5でレイザー構文でjqueryを使用する方法は？

JQueryを使用していくつかの要素を動的に追加する必要があります。それで私はインターネットで調べて、見つけました this。 一重引用符の中にプレーンなhtml要素があるときそれは素晴らしくて機能しています。 jQueryでかみそりの構文を使用する必要があります。

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))
    };
});

私の目的は、要素を動的に追加する tutorial -に似ています。ここでは、ボタンをクリックするだけでラベルとドロップダウンを追加しています。どうすればこれを達成できますか？

javascriptjqueryasp.netasp.net-mvcrazor
5
Gaurav Chauhan

すでに述べたように、JQueryはクライアント側のライブラリであり、Razor構文を使用するASP.NETはサーバー側のスクリプト言語であるため、JQueryを使用してRazor要素を追加することはできません。

Razor構文を使用して作成された要素を追加する場合は、非表示の要素をページに追加し、JQueryを使用してその クローン をDOMに追加します。

このようなものは、私が何を意味するのかをあなたに理解させるはずです：

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

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

部分的なページを作成できます_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>
4
devfric

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と複数のアイテムのインデックス作成です。私は通常、（Razorではなく）テンプレートで生のHTMLを使用し、名前の変更が必要なさまざまな属性にプレースホルダーを使用します。

例えば.

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