public
Created

Example of page that consumes an OData service

  • Download Gist
maincontent.html
HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103
<asp:content contentplaceholderid="MainContent" id="Content2" runat="server">
 
<script id="user-table-template" type="text/html">
 
<tr id="user-row-${Id}">
<td>
<span id="user-first-name-span-${Id}">${FirstName}</span>
<input id="user-first-name-text-${Id}" type="text" style="display:none;" value="${FirstName}"/>
</td>
<td>
<span id="user-last-name-span-${Id}">${LastName}</span>
<input id="user-last-name-text-${Id}" type="text" style="display:none;" value="${LastName}"/>
</td>
<td>
<a id="user-edit-${Id}" href="#" onclick="editUser(${Id}); return false;">Edit</a>
<span id="user-apply-cancel-${Id}" style="display:none;">
<a href="#" onclick="editUser(${Id}); updateUser(${Id}); return false;">Apply</a>
<a href="#" onclick="editUser(${Id}); return false;">Cancel</a>
</span>
<a href="#" onclick="deleteUser(${Id}); return false;">Delete</a>
</td>
</tr>
</script>
 
<strong>Users:</strong>
<table id="users-table"> <thead>
<tr> <th>First Name</th> <th>Last Name</th> <th>Actions</th> </tr>
</thead> <tbody id="user-table-body"> </tbody> <tfoot>
<tr> <td><input id="user-new-first-name" type="text" /></td> <td><input id="user-new-last-name" type="text" /></td> <td><a href="http://www.blogger.com/blogger.g?blogID=1799433464682869513#">Create User</a></td> </tr>
</tfoot> </table>
<script type="text/javascript">
 
$(document).ready(function () {
getUsers();
});
 
function getUsers() {
$("#user-table-body").empty();
$.getJSON("ODataPrototype/PrototypeDataService.svc/Users", function (response) {
$("#user-table-template").tmpl(response.d).appendTo("#user-table-body");
});
}
 
function editUser(id) {
$('#user-edit-' + id).toggle();
$('#user-first-name-span-' + id).toggle();
$('#user-first-name-text-' + id).toggle();
$('#user-last-name-span-' + id).toggle();
$('#user-last-name-text-' + id).toggle();
$('#user-apply-cancel-' + id).toggle();
}
 
function updateUser(id) {
var user = { Id: id, FirstName: $('#user-first-name-text-' + id).val(), LastName: $('#user-last-name-text-' + id).val() };
 
var json = JSON.stringify(user);
 
$.ajax({
type: "PUT",
contentType: "application/json",
url: "ODataPrototype/PrototypeDataService.svc/Users(" + id + ")",
data: json,
dataType: "json",
success: function () {
$('#user-row-' + id).replaceWith($("#user-table-template").tmpl(user));
}
});
}
 
function insertUser() {
var user = { FirstName: $('#user-new-first-name').val(), LastName: $('#user-new-last-name').val() };
 
var json = JSON.stringify(user);
 
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "ODataPrototype/PrototypeDataService.svc/Users",
data: json,
dataType: "json",
success: function (response) {
$("#user-table-template").tmpl(response.d).appendTo("#user-table-body");
$('#user-new-first-name').val('');
$('#user-new-last-name').val('');
}
});
}
 
function deleteUser(id) {
$.ajax({
type: "DELETE",
contentType: "application/json; charset=utf-8",
url: "ODataPrototype/PrototypeDataService.svc/Users(" + id + ")",
dataType: "json",
success: function () {
$('#user-row-' + id).fadeOut(function () {
$('#user-row-' + id).remove();
});
}
});
}
</script></asp:content>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.