1: <!DOCTYPE html>
2: <style>
3: .imgstl
4: {
5:
6: }
7: .imgstl2
8: {
9: margin:2px;
10: border:1px solid #0000ff;
11: height:50px;
12: width:50px;
13: float:left;
14: text-align:center;
15: }
16: div.img img
17: {
18: display:inline;
19: margin:3px;
20: border:1px solid #ffffff;
21: }
22: div.img a:hover img
23: {
24: border:1px solid #0000ff;
25: }
26: div.desc
27: {
28: text-align:center;
29: font-weight:normal;
30: width:120px;
31: margin:2px;
32: }
33: </style>
34: <html lang="en">
35: <head>
36: <title>Routes Web API</title>
37: <link href="../../Content/Site.css" rel="stylesheet" />
38:
39: </head>
40:
41: <body id="body" >
42: <div class="main-content">
43: <div>
44: <h1>All Operators</h1>
45: <ul id="OperatorsList"/>
46: </div>
47: <div>
48: <input type="button" id="CallWebApi" value="Call web api" />
49: <p id="product" />
50: </div>
51: </div>
52:
53: <div id="dynamicTable">
54: </div>
55:
56: <script src="../../Scripts/jquery-1.8.2.js"></script>
57: <script>
58: $(document).ready(function () {
59:
60: $("#CallWebApi").on("click", function (event) {
61:
62: // create table
63: var $table = $('<table>'); 64: // caption
65: $table.append('<caption>Operators List</caption>') 66: // thead
67: .append('<thead>').children('thead') 68: .append('<tr />').children('tr').append('<th>Photo</th><th>Name</th>'); 69:
70: //tbody
71: var $tbody = $table.append('<tbody />').children('tbody'); 72:
73: var theOperatorTable = $("#OperatorTable");
74:
75: // Send an AJAX request
76:
77: $.getJSON("api/OperatorData/",
78: function (data) {
79: // On success, 'data' contains a list of products.
80: $.each(data, function (key, val) {
81:
82: var theOperatorName = val.Name ;
83:
84: var theOperatorImage = val.OperatorImage;
85:
86: var theNewRow = $tbody.append('<tr />').children('tr:last'); 87:
88: var theNewTD = theNewRow.append("<td></td>").children('td:last'); 89:
90: $('<img />', { src: "http://localhost:20385/api/Images/" + theOperatorImage }).
91: appendTo(theNewTD);
92:
93: // $('#table_header td:nth-child(3)').html('the content'); 94:
95: theNewRow.append("<td>" + theOperatorName + "</td>") 96:
97: });
98:
99: // add table to dom
100: $table.appendTo('#dynamicTable');101:
102: });
103: });
104: });
105:
106: </script>
107: </body>
108: </html>