title: how to use jquery with razor syntax in asp.net mvc 5?
body: <p>I need to use jQuery to add some elements dynamically. So I looked up in the internet and I found <a href="http://www.codeproject.com/Articles/781851/Add-Delete-Rows-Dynamically-using-jQuery-in-ASP-NE" rel="nofollow noreferrer">this.</a> It is nice and working when there is plain html elements inside single quotes. I need to use razor syntax with jQuery. </p>
  
  <p>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.</p>
  
  <p>My not working jQuery is as follows:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;  
      $(document).ready(function () {  
          $(document).on("click", ".btnPlus", function () { 
          var html = '&lt;div class="form-group"&gt;'+
                  '@Html.LabelFor(model =&gt; model.transaction_item, "transaction_item", htmlAttributes: new { @class = "control-label col-md-2" })'+ 
  
                  '&lt;div class="col-md-4"&gt;'+
                      '@Html.DropDownList("transaction_item", null, htmlAttributes: new { @class = "form-control" })'+
                      '@Html.ValidationMessageFor(model =&gt; model.transaction_item, "", new { @class = "text-danger" })'+
                  '&lt;/div&gt;'+
  
                  '&lt;div class="col-md-6"&gt;&lt;input type="button" class="BtnPlus" value="+" /&gt;&lt;/div&gt;'+
  
              '&lt;/div&gt;'
          $("#trItem").append($(html))
      };
  });
  </code></pre>
  
  <p>My aim is similar to the <a href="http://www.codeproject.com/Articles/781851/Add-Delete-Rows-Dynamically-using-jQuery-in-ASP-NE" rel="nofollow noreferrer">tutorial</a> - to add elements dynamically. Here I am adding a label and dropdown on the click of button. How do I achieve this? </p>