Eric lippert - Amazon Web Services

$(document).ready(function ()
{
$.ajax({
url: “/api/TimeCard”,
method: “GET”,
contentType: “text/json”,
success: function (data)
{
viewModel.timecards.removeAll();
$.each(data, function (index)
{
viewModel.timecards.push(addNewTimeCard(
data[index]));
});
ko.applyBindings(viewModel);
}
});
Once the document loads, we call the server to get all the time
cards available. When the server returns the data, we add each
TimeCard to the view model. Since the ‘timecards’ property is a
KO Observable, Knockout will automatically update the view as
each timecard is added.
$(document).delegate(“#submitButton”, “click”, function
()
{
viewModel.commitAll();
var vm = viewModel.selectedTimeCard;
var current = ko.utils.unwrapObservable(vm);
var stringyF = JSON.stringify(ko.mapping.
toJS(current));
var action = “PUT”;
var vUrl = “/api/TimeCardId=” + current.Id();
if (current.Id()==0)
{
action = “POST”;
vUrl = “/api/TimeCard”;
}
$.ajax(
{
url: vUrl,
contentType: “application/json;charset=utf-8”,
type: action,
data: stringyF,
success: function (response)
{
alert(“Saved Successfully”);
viewModel.selectedTimeCard(null);
},
failure: function (response)
{
alert(“Save Failed”);
}
});
});
The Submit button click handler has the implementation for
sending the currently selected TimeCard’s information to be
saved in the Server.
To do this, the ‘selectedTimeCard’ object is converted into a JSON
string and put in the payload of the Ajax POST.
$(document).delegate(“#cancelButton”, “click”, function
()
{
viewModel.selectedTimeCard(null);
});
Cancelling the Edit process simply resets the selectedTimeCard
property to null. This hides the Edit Panel on the UI.
Running the App to Get and Put/
Post data to Web API
Now that we have our Web API Controller and Index.cshtml with
its client side dependencies setup, let’s run the app. On first run,
we are greeted with a near empty screen with only the ‘Add New
TimeCard’ button and the list headers for the TimeCards
Clicking on ‘Add New TimeCard’ adds a default time card
DNcmagazine www.dotnetcurry.com | 67