title: Dynamic HTML via jQuery with Razor functionality
body: <p>Using jQuery, I am dynamically adding a group of <code>&lt;ul&gt;</code> elements to a <code>&lt;div&gt;</code> using <code>.append</code>. I loop through a table containing a value for each <code>&lt;ul&gt;</code> I want added. That part works fine. Where I am having an issue is trying to add Razor functionality to the <code>&lt;li&gt;</code> elements.</p>
  
  <p>Although the end result HTML produced looks to be syntax correct HTML, the Razor code does not function.</p>
  
  <p>End Result HTML:</p>
  
  <pre><code>&lt;div id="div_1"&gt;
      &lt;label&gt;Clients&lt;/label&gt;
      &lt;ul&gt;
          @if (Model.details != null)
          {
              foreach (var itm in Model.details.OrderBy(i =&gt; i.value))
          {
              &lt;li&gt;@itm.value&lt;/li&gt;}
          }
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The HTML above is what is produced by my <code>.append</code> code. It can be hard coded into my <code>cshtml</code> page and works perfectly. Adding it via <code>.append</code> at run time does not which I assume revolves around creation time or sequence?</p>
  
  <p>Scaled down version of my code below:</p>
  
  <p>Controller:</p>
  
  <pre><code>[HttpGet]
  public JsonResult ClientMap()
  {
      var db = new EDM_Client();
      List&lt;client_map&gt; map = new List&lt;client_map&gt;();
      map = db.client_map.ToList();
  
      return Json(map, JsonRequestBehavior.AllowGet);
  }
  </code></pre>
  
  <p>csHTML:</p>
  
  <pre><code>&lt;div id="divDetails" class="row"&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>//getClientMap temporarily called from a button click
  getClientMap(function (map) {
      $.each(map, function (idx, obj) {
          $('#divDetails').append('&lt;div id="div_' + obj.detail_id + '"&gt;' +
                                      '&lt;label&gt;' + obj.detail_hdr + '&lt;/label&gt;' +
                                      '&lt;ul&gt;' +
                                          '@if (Model.details != null)' +
                                          '{' +
                                              'foreach (var itm in Model.details.OrderBy(i =&gt; i.value))' +
                                              '{' +
                                                  '&lt;li&gt;' +
                                                      '@itm.value' +
                                                  '&lt;/li&gt;' +
                                               '}' +
                                           '}' +
                                       '&lt;/ul&gt;' +
                                   '&lt;/div&gt;');           
      });
  });
  
  function getClientMap(output) {
  $.ajax({
      url: './Client/ClientMap',
      type: "GET",
      dataType: "json",
      async: false,
      success: function (data) {            
          output(data);
      }
  });
  </code></pre>
  
  <p>I am trying to do this dynamically so <code>&lt;ul&gt;</code> can be easily added/deleted via table entries rather than coding changes.</p>
  
  <p>Any advice on how to make this work (or an alternative way) is appreciated.</p>