It is assumed that the main logic of the model processing is hosted on the server. Every action that we perform on the model should correspond to a method in the controller:
public class FooController : KnockoutController {
public ActionResult FooAction(FooModel model)
{
model.FooAction();
return Json(model);
}
}As you can see from the preceding example, the method takes the model parameter that the main model sent from the client side. ASP.NET maps it to a C# object. In other words, the model parameter contains the status of the client model at the time of sending. It is possible to perform the necessary manipulations on the model and send the updated model in the JSON format with help of return Json(model);. You should pay attention to the fact that the base class for the controller is KnockoutController. This base class contains the extended logic to work with the JSON format.
For example, you can create a special control to send requests to the server:
Razor: @ko.Html.Button("Display", "FooAction", "Foo")
Html: <button data-bind="click : function() {executeOnServer(viewModel, '/FooController/FooAction');}">Display</button>
Razor: @ko.Html.HyperlinkButton("Display", "FooAction", "Foo")
Html: <a href="#" data-bind="click : function() {executeOnServer(viewModel, '/FooController/FooAction');}">Display</a>
Razor: @using (ko.Html.Form("FooAction", "Foo"))
{
Display
}
Html: <form data-bind="submit : function() {executeOnServer(viewModel, '/FooController/FooAction');}">
Display
</form>It is possible to insert the request code directly into the page:
<script type="text/javascript">
function foo() {
@ko.ServerAction("FooAction", "Foo");
}
</script>All these constructions can be extended with some parameters:
public class FooController : KnockoutController {
public ActionResult FooParametersAction(FooModel model, int value, string name)
{
model.FooParametersAction(value, name);
return Json(model);
}
}
Razor: @ko.Html.Button("Display", "FooParametersAction", "Foo", new { value = 0, name = "Sanderson"})
Html: <button data-bind="click : function() {executeOnServer(viewModel, '/FooController/FooParametersAction?value=0&name=Sanderson');}">Display</button>
Razor: @ko.Html.HyperlinkButton("Display", "FooParametersAction", "Foo", new { value = 0, name = "Sanderson"})
Html: <a href="#" data-bind="click : function() {executeOnServer(viewModel, '/FooController/FooParametersAction?value=0&name=Sanderson');}">Display</a>
Razor: @using (ko.Html.Form("FooParametersAction", "Foo", new { value = 0, name = "Sanderson"}))
{
Display
}
Html: <form data-bind="submit : function() {executeOnServer(viewModel, '/FooController/FooParametersAction?value=0&name=Sanderson');}">
Display
</form>
<script type="text/javascript">
function foo() {
@ko.ServerAction("FooParametersAction", "Foo", new { value = 0, name = "Sanderson"});
}
</script>