How to use jquery with razor syntax in asp.net mvc 5?

Question

I need to use jQuery to dynamically add some elements. So I looked on the Internet and I found it. This is nice and works when there are simple html elements in single quotes. I need to use razor syntax with jQuery.

I understand that jQuery is the user side and the razor is the server side. They cannot be combined together. I ask here because I need to know how I can achieve this.

My broken jQuery looks like this:

<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 goal is like a tutorial - for adding items dynamically. Here I add a shortcut and a drop-down list with the click of a button. How do I achieve this?

Answer 1

Razor JQuery, , , JQuery , ASP.NET Razor .

, Razor, JQuery clone 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

jQuery/Javascript Razor. Javascript/jQuery ( VS/ script ..)

HTML . dummy script , script:

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

The only problem you need to solve is any duplicate identifiers and indexing for multiple elements. I usually use raw HTML in the template (not Razor) and use placeholders for various attributes that require renaming.

eg.

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