Views/Home/TableAPI.cshtml

@{
  ViewBag.Title = "TableAPI";
}
<div class="container container-fluid">
  <div class="col-sm-12">
    <div class="row">
      <div class="col-sm-2">
      </div>
       <div class="col-sm-8">
        <div class="well">
          <div class="text-center">
            <h2>
              Building a dynamic Bootstrap table from an API call</h2>
          </div>
          @Html.ActionLink("TableAPI", "TableAPI_cshtml", new { controller = "Snippets" }) is an example of a Bootstrap table filled in with an API call within an MVC project. 
          The @Html.ActionLink("Home  Controller", "Home_controller", new { controller = "Snippets" })
          has an ActionResult function that returns a @Html.ActionLink("View", "TableAPI_cshtml", new { controller = "Snippets" }) 
          referencing this very page. This markup contains a $.getJSON(uri) call to the 
          @Html.ActionLink("ComicsAPIController", "ComicsAPI_controller", new { controller = "Snippets" }) which is actually
          just a seperate Controller in the MvcBootstrap project.
        </div>
        <div>
          <table id="myTable" class="table table-striped table-bordered table-hover">
            <thead>
              <tr>
                <th>ID</th>
                <th>Title</th>
                <th>Image URL</th>
                <th>Price</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="tableData">
            </tbody>
          </table>
        </div>
      </div>
    </div>
    <div class="col-sm-2">
    </div>
  </div>
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
  var uri = '@(ViewBag.comicsAPIUrl)';

  //  For Development
  //var uri = 'http://localhost:49685/api/comicsapi';
  //for GoDaddy
  //var uri = 'http://www.mvcbootstrap.com/mvcbootstrap/api/comicsapi';

  $(document).ready(function () {

    // Send an AJAX request
    $.getJSON(uri)
          .done(function (data) {
            // On success, 'data' contains a list of comics.
            $.each(data, function (key, item) {
              var titleIssue = formatItem(item);
              //fill in the table rows
              $('#tableData').append(
                '<tr onclick="rowClicked()" style="cursor: pointer" >' +
                  '<td>' + item.ID + '</td>' +
                  '<td>' + formatItem(item) + '</td>' +
                   '<td>' + item.ImageURL + '</td>' +
                  '<td>' + item.Price + '</td>' +
                  '<td>' + item.Status + '</td>' +
                '</tr>')
            });
          });
  });

  function formatItem(item) {
    return item.Title + ': #' + item.Issue;
  }

  function find() {
    var id = $('#comicId').val();

    $.getJSON(uri + '/' + id)
          .done(function (data) {
            $("#foundComics").html("");
            $.each(data, function (key, item) {
              // Add a list item for the comic.
              $('<li>', { text: formatItem(item) }).appendTo($('#foundComics'));
            });
          })
          .fail(function (jqXHR, textStatus, err) {
            $('#comic').text('Error: ' + err);
          });


  }

  //As of the enf of January 2016, this doesn"t work.
  //I want to respond to a row click event but can't get it to happen
  function rowClicked() {

    //this iterates over all rows in the table
    $('#myTable tbody tr ').map(function () {

      var $row = $(this);
      var iD = $row.find(':nth-child(1)').text();
      var titleIssue = $row.find(':nth-child(2)').text()
      var imageUrl = $row.find(':nth-child(3)').text()
      var price = $row.find(':nth-child(4)').text()
      var status = $row.find(':nth-child(5)').text()

      //alternate way to get cell data
      //var this_row = $(this);
      //var Id = $.trim(this_row.find('td:eq(0)').html());

    });
  }



 
</script>