Skip to content

@LoganBarnett /maincontent.html
Created

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Example of page that consumes an OData service
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.