title: how to load the bootstrap modal with the ajax called data
body: <p>my razor syntax  is  </p>
  
  <pre><code> @foreach(var item in Model) 
   {
                        &lt;td&gt;@item.email&lt;/td&gt;
                        &lt;td&gt;&lt;a href ="javascript:void(0);"onclick="Getinfo(this)"  data-assigned-id="@item.email" &gt;&lt;/a&gt;@item.lastaccessdate&lt;/td&gt;
  
   }
  </code></pre>
  
  <p>this is the javascript i am using to get data from controller and then binding that data as a table in tab</p>
  
  <pre><code>  function Getinfo(elem)
  {
      var email = $(elem).data('assigned-id');
      $.get('/Home/GetDetails', { email: email }, function (data) { grid(data); });
  
  }
  function grid(abc)
  {
      var tab = "&lt;table class='table'&gt;";
      tab += "&lt;thead&gt;";
      tab += "&lt;tr&gt;";
      tab += "&lt;th&gt;Name&lt;/th&gt;";
      tab += "&lt;th&gt;Login&lt;/th&gt;";
      tab += "&lt;th&gt;Username&lt;/th&gt;";
      tab += "&lt;/tr&gt;";
      tab += "&lt;/thead&gt;";
      tab += "&lt;tbody&gt;";
      for (var it in abc)
      {
          tab += "&lt;tr&gt;";
          tab += "&lt;td&gt;" + abc[it].Name + "&lt;/td&gt;";
          tab += "&lt;td&gt;" + abc[it].login + "&lt;/td&gt;";
          tab += "&lt;td&gt;" + abc[it].username + "&lt;/td&gt;";
          tab += "&lt;/tr&gt;";
      }
      tab += "&lt;/tbody&gt;";
      tab += "&lt;/table&gt;";
  }
  </code></pre>
  
  <p>Now how do i bind this data in 'tab' to a twitter bootstrap modal pop up ? 
    thanks in advance.</p>