title: Ajax Response: Map JSON to HTML
body: <p>I'm working on a project with C# MVC and Razor views.
  The following ajax request retrieves a pricelist and injects the html to the div <strong>priceLists</strong>:</p>
  
  <pre><code>$.ajax({
              url: '/priceList/GetPriceList',
              contentType: "application/json; charset=utf-8",
              dataType: "json",
              data: { deliveryDate: deliverydate },
              success: function (data) {
                  $.each(data.Lines, function (index) {       
                      // ugly code to generate html!
                      $("#priceLists").append(html);
                  });
              },
              error: function () {
                  $("#priceLists").empty(html);
              }
          });
  </code></pre>
  
  <p><em>This approach works.</em> However, it is quite messy because I'm concatenating the html string in the ajax response.</p>
  
  <p><strong>Is there a neat way to map my json object to a html template?</strong></p>
  
  <p>Using AngularJS solely for this problem seems to be an overkill to me.
  Another approach which comes into my mind is using partial views combined with json results, but I'm not sure how this works. Any help is much appreciated.</p>
  
  <p><strong>EDIT:</strong>
  I wanted to spare you, but my 'ugly' html code looks like this at the moment:</p>
  
  <pre><code>var line = data.Lines[index];
  var html = '&lt;div class="col-lg-12" id="' + line.HashCode + '"&gt;';
      html += '&lt;h3&gt; Article No.' + line.ArticleNo + '&lt;/h3&gt;';
      html += '&lt;div class="input-group"&gt;';
      html += '&lt;input type="number" class="form-control" name="amount" min="0" value="0" /&gt;';
      html += '&lt;span class="input-group-btn"&gt;';
      html += '&lt;button onclick="AddLineToBasket(\'' + line.HashCode + '\')" class="btn btn-default" type="button"&gt;&lt;span class="glyphicon glyphicon-shopping-cart"&gt;&lt;/span&gt;&lt;/button&gt;';
      html += '&lt;/span&gt;';
      html += '&lt;/div&gt;';
      html += '&lt;/div&gt;';
  </code></pre>