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

Question

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.

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.

My not working jQuery is as follows:

<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?

Solution 1

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.

If you want to add elements created using Razor syntax then add a hidden element to the page and use JQuery to add a clone of it to the 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());

Solution 2

You can create a partial page _MyPartial.cshtml in your Views Shared folder.

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

@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>

Solution 3

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)

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:

<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.

Then simply use that HTML from the template to add new buttons:

$("#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.

e.g.

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

Comments

[Gaurav Chauhan]

is there any docs/example/link available for this? i am new in asp.net.

[Gaurav Chauhan]

For me, this worked. The idea of using partial view is also attractive.

[Vitaliy Terziev]

so, how one should approach this problem these days, I was wondering what client side code to use with my razor website, vanilla js, jquery angular, react, knockout I kinda like the simplicity of the first two

[Gone Coding]

@ВиталийТерзиев: It depend of which stack you wish to use. If you use Angular, you won't be inject much of anything into the hosting page as it is all client-script driven with data via service calls. Can you provide an example of what you want to inject?

[Vitaliy Terziev]

Actually I was wondering if i can skip angular, use Razor with just enough JS, for example knockout or jquery, it is a simple company site and I just want to look good and was wondering if this is a bad practice

[Gone Coding]

@ВиталийТерзиев: There is a push towards client-side frameworks, like Angular, in a lot of companies, but the invisible overheads (proper testing) are large. Myself, I added plugin layers of JS on top of MVC so that it operates like Angular (but with half the calories) :)

[Vitaliy Terziev]

Yes, thank you for your answers, I guess I will give it a try and see how it goes :) hopefully I will get by with several js functions (the site will be really simple and my goal is smooth, fast experience, after all the site is going to sell web apps, sites and e-commerce (this will be little bit harder but nppcommerce seems very good :) )