Parameters to server

Description

Live example

Model

public class ParametersToServerModel
{
    public int Number { get; set; }
    public string String { get; set; }

    public void Increment(int value)
    {
        Number += value;
    }

    public void AddToString(string s, int count)
    {
        for (int i = 0; i < count; i++)
            String += s;
    }
}

Razor

@using PerpetuumSoft.Knockout
@model KnockoutMvcDemo.Models.ParametersToServerModel
@{
  var ko = Html.CreateKnockoutContext();
}
Number : @ko.Html.Span(m => m.Number)<br />
@ko.Html.Button("Inc 1", "Increment", "ParametersToServer", new { value = 1 })
@ko.Html.Button("Inc 2", "Increment", "ParametersToServer", new { value = 2 })
@ko.Html.Button("Inc 3", "Increment", "ParametersToServer", new { value = 3 })
<br />
<br />
String: @ko.Html.Span(m => m.String)<br />
@ko.Html.HyperlinkButton("Add 1 'a'", "AddToString", "ParametersToServer", new { letter = 'a', count = 1 })<br />
@ko.Html.HyperlinkButton("Add 2 'b'", "AddToString", "ParametersToServer", new { letter = 'b', count = 2 })<br />
@ko.Html.HyperlinkButton("Add 3 'c'", "AddToString", "ParametersToServer", new { letter = 'c', count = 3 })

@ko.Apply(Model)

Controller

public class ParametersToServerController : BaseController
{
    public ActionResult Index()
    {
        InitializeViewBag("Parameters to server");
        return View(new ParametersToServerModel());
    }

    public ActionResult Increment(ParametersToServerModel model, int value)
    {
        model.Increment(value);
        return Json(model);
    }

    public ActionResult AddToString(ParametersToServerModel model, char letter, int count)
    {
        model.AddToString(letter + "", count);
        return Json(model);
    }
}

Html (autogenerated)

Number : <span data-bind="text : Number"></span><br />
<button data-bind="click : function() {executeOnServer(viewModel, &#39;/ParametersToServer/Increment?value=1&#39;);}">Inc 1</button>
<button data-bind="click : function() {executeOnServer(viewModel, &#39;/ParametersToServer/Increment?value=2&#39;);}">Inc 2</button>
<button data-bind="click : function() {executeOnServer(viewModel, &#39;/ParametersToServer/Increment?value=3&#39;);}">Inc 3</button>
<br />
<br />
String: <span data-bind="text : String"></span><br />
<a data-bind="click : function() {executeOnServer(viewModel, &#39;/ParametersToServer/AddToString?letter=a&amp;count=1&#39;);}" href="#">Add 1 &#39;a&#39;</a><br />
<a data-bind="click : function() {executeOnServer(viewModel, &#39;/ParametersToServer/AddToString?letter=b&amp;count=2&#39;);}" href="#">Add 2 &#39;b&#39;</a><br />
<a data-bind="click : function() {executeOnServer(viewModel, &#39;/ParametersToServer/AddToString?letter=c&amp;count=3&#39;);}" href="#">Add 3 &#39;c&#39;</a>

<script type="text/javascript"> 
var viewModelJs = {"Number":0,"String":""};
var viewModel = ko.mapping.fromJS(viewModelJs); 
ko.applyBindings(viewModel);
</script>