i Mean always when you made Update o new actions

{"$id":"1","ExceptionType":"System.InvalidOperationException","Message":"No MediaTypeFormatter is available to read an object of type 'Produc' from content with media type ''undefined''.","StackTrace":" at System.Net.Http.HttpContentExtensions.ReadAsAsync[T](HttpContent content, Type type, IEnumerable`1 formatters, IFormatterLogger formatterLogger)\r\n at System.Web.Http.Mod

1- Regarding the jQuery post:

$.post(baseUri, $(formElement).serialize(), "json") <==

.done(function (o) { self.products.push(o); });

the method expects a callback function, for success, in the place of "json". So, the post will not work, the correct is to put null in the 3rd parameter as we are using ".done"

$.post(baseUri, $(formElement).serialize(), null, "json") <==

.done(function (o) { self.products.push(o); });

2- regarding KnockoutJS

the create method bound to Knockout ( data-bind="submit: create") will be called with the ViewModel as a first parameter and the Event object as the second parameter, Not the form element.

so to get the form element we shoud use:

self.create(model, event)

and we get the serialized data by:

$(event.target).serialize();

the full Create Method will be:

self.create = function (model, event) {

// If valid, post the serialized form data to the web api

$(formElement).validate();

if ($(formElement).valid()) {

$.post(baseUri, $(event.target).serialize(), null, "json")

.done(function (o) { self.products.push(o); });

}

1- Manually create a fieldset element and put the input fields in it :

<fieldset>

<legend>Contact</legend>

<ul style="list-style-type: none;">

<li>

<span>Name:</span><br />

<input type="text" name="Name" />

</li>

<li>

<span>Price:</span><br />

<input type="text" name="Price" />

</li>

<li>

<span>Actual Cost:</span><br />

<input type="text" name="ActualCost" />

</li>

<li>

<span>Category:</span><br />

<input type="text" name="Category" />

</li>

</ul>

<input type="button" value="Add Product" data-bind="click: create" />

</fieldset>

Note: a) the name of the input elements === the Data Model Names

b) the create method is bound to the click event of the button

2- Then in the create Method:

self.create = function (model, event) {

// Get the parent fieldset

var fs = $(event.target).closest("fieldset");

var ser = $("*", fs).serialize();

$.post(baseUri, ser, null, "json")

.done(function (o) { self.products.push(o); });

}

$(function () {

ko.applyBindings(new ProductsViewModel());

});

I follow the tutorial but come accross a problem unfortunately. Admin view isn't get refreshed after get data from backend. I modified the code as following and the problem is resolved. I am not sure if this is a problem. Could anyone please confirm it?

Original:

ko.applyBindings(new ProductsViewModel());

After Modified:

$(document).ready(function () {

ko.applyBindings(new ProductsViewModel());

});

1. jQuery post: Thanks, yes, the third parameter should be 'null' - I'll fix this.

2. "submit" binding: Actually, KO passes the form element to the submit handler. The submit binding behaves differently from the click binding. See knockoutjs.com/

3. The script section in the MVC view is rendered after the HTML body, so you shouldn't need a ready method.

How do I have the New Product fields cleaned after submitting the new product, must be something inside:

.done(function (o) { self.products.push(o); });

Where do I learn these things?

_How url can be map with the acction GetProducts() in admincontroller because this action doesn't take a list of product as parameter.

_And how the products array in ProductsViewModel object can take the json response from server.

Thank!