Control types

Description

The sample shows how to create various form elements.

The original example: http://knockoutjs.com/examples/controlTypes.html

Live example

HTML controls

Text value (updates on change):
Text value (updates on keystroke):
Text value (multi-line):
Password:
Checkbox:
Drop-down list:
Multi-select drop-down list:
Radio buttons:	Alpha Beta Gamma

What's in the model?

Text value:
Password:
Bool value:
Selected option:
Multi-selected options:
Radio button selection:

Model

public class ControlTypesModel
{
    public string StringValue { get; set; }
    public string PasswordValue { get; set; }
    public bool BooleanValue { get; set; }
    public List<string> OptionValue { get; set; }
    public string SelectedOptionValue { get; set; }
    public List<string> MultipleSelectedOptionValues { get; set; }
    public string RadioSelectedOptionValue { get; set; }
}

Razor

@using PerpetuumSoft.Knockout
@model KnockoutMvcDemo.Models.ControlTypesModel
@{
  var ko = Html.CreateKnockoutContext();
}
<table id="maintable">
  <tr>
    <td>
      <h3>HTML controls</h3>
      <table>
        <tr>
          <td>Text value (updates on change):</td>
          <td>@ko.Html.TextBox(m => m.StringValue)</td>
        </tr>
        <tr>
          <td>Text value (updates on keystroke):</td>
          <td>@ko.Html.TextBox(m => m.StringValue).ValueUpdate(KnockoutValueUpdateKind.AfterKeyDown)</td>
        </tr>
        <tr>
          <td>Text value (multi-line):</td>
          <td>@ko.Html.TextArea(m => m.StringValue)</td>
        </tr>
        <tr>
          <td>Password:</td>
          <td>@ko.Html.Password(m => m.PasswordValue)</td>
        </tr>
        <tr>
          <td>Checkbox:</td>
          <td>@ko.Html.CheckBox(m => m.BooleanValue)</td>
        </tr>
        <tr>
          <td>Drop-down list:</td>
          <td>
            <select @ko.Bind.Options(m => m.OptionValue).Value(m => m.SelectedOptionValue)></select></td>
        </tr>
        <tr>
          <td>Multi-select drop-down list:</td>
          <td>@ko.Html.ListBox(m => m.OptionValue).SelectedOptions(m => m.MultipleSelectedOptionValues)</td>
        </tr>
        <tr>
          <td>Radio buttons:</td>
          <td>
            @ko.Html.RadioButton(m => m.RadioSelectedOptionValue, new { value = "Alpha" }) Alpha
            @ko.Html.RadioButton(m => m.RadioSelectedOptionValue, new { value = "Beta" }) Beta
            @ko.Html.RadioButton(m => m.RadioSelectedOptionValue, new { value = "Gamma" }) Gamma
          </td>
        </tr>
      </table>
    </td>
    <td>
      <h3>What's in the model?</h3>
      <table>
        <tr>
          <td>Text value:</td>
          <td @ko.Bind.Text(m => m.StringValue)></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td @ko.Bind.Text(m => m.PasswordValue)></td>
        </tr>
        <tr>
          <td>Bool value:</td>
          <td @ko.Bind.Text(m => m.BooleanValue ? "True" : "False")></td>
        </tr>
        <tr>
          <td>Selected option:</td>
          <td @ko.Bind.Text(m => m.SelectedOptionValue)></td>
        </tr>
        <tr>
          <td>Multi-selected options:</td>
          <td @ko.Bind.Text(m => m.MultipleSelectedOptionValues)></td>
        </tr>
        <tr>
          <td>Radio button selection:</td>
          <td @ko.Bind.Text(m => m.RadioSelectedOptionValue)></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<style scoped="scoped">
  #maintable {
    border-collapse: separate;
    border-spacing: 15px;
  }

    #maintable td {
      vertical-align: top;
    }
</style>

@ko.Apply(Model)

Controller

public class ControlTypesController : BaseController
{
    public ActionResult Index()
    {
        InitializeViewBag("Control types");
        var model = new ControlTypesModel
        {
            StringValue = "Hello",
            PasswordValue = "mypass",
            BooleanValue = true,
            OptionValue = new List<string> { "Alpha", "Beta", "Gamma" },
            SelectedOptionValue = "Gamma",
            MultipleSelectedOptionValues = new List<string> { "Alpha" },
            RadioSelectedOptionValue = "Beta"
        };
        return View(model);
    }
}

Html (autogenerated)

<table id="maintable">
  <tr>
    <td>
      <h3>HTML controls</h3>
      <table>
        <tr>
          <td>Text value (updates on change):</td>
          <td><input data-bind="value : StringValue" name="StringValue" type="text" /></td>
        </tr>
        <tr>
          <td>Text value (updates on keystroke):</td>
          <td><input data-bind="value : StringValue,valueUpdate : &#39;afterkeydown&#39;" name="StringValue" type="text" /></td>
        </tr>
        <tr>
          <td>Text value (multi-line):</td>
          <td><textarea data-bind="value : StringValue"></textarea></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td><input data-bind="value : PasswordValue" name="PasswordValue" type="password" /></td>
        </tr>
        <tr>
          <td>Checkbox:</td>
          <td><input data-bind="checked : BooleanValue" type="checkbox" /></td>
        </tr>
        <tr>
          <td>Drop-down list:</td>
          <td>
            <select data-bind="options : OptionValue,value : SelectedOptionValue"></select></td>
        </tr>
        <tr>
          <td>Multi-select drop-down list:</td>
          <td><select data-bind="options : OptionValue,selectedOptions : MultipleSelectedOptionValues" multiple="multiple"></select></td>
        </tr>
        <tr>
          <td>Radio buttons:</td>
          <td>
            <input data-bind="checked : RadioSelectedOptionValue" type="radio" value="Alpha" /> Alpha
            <input data-bind="checked : RadioSelectedOptionValue" type="radio" value="Beta" /> Beta
            <input data-bind="checked : RadioSelectedOptionValue" type="radio" value="Gamma" /> Gamma
          </td>
        </tr>
      </table>
    </td>
    <td>
      <h3>What's in the model?</h3>
      <table>
        <tr>
          <td>Text value:</td>
          <td data-bind="text : StringValue"></td>
        </tr>
        <tr>
          <td>Password:</td>
          <td data-bind="text : PasswordValue"></td>
        </tr>
        <tr>
          <td>Bool value:</td>
          <td data-bind="text : BooleanValue() ? 'True' : 'False'"></td>
        </tr>
        <tr>
          <td>Selected option:</td>
          <td data-bind="text : SelectedOptionValue"></td>
        </tr>
        <tr>
          <td>Multi-selected options:</td>
          <td data-bind="text : MultipleSelectedOptionValues"></td>
        </tr>
        <tr>
          <td>Radio button selection:</td>
          <td data-bind="text : RadioSelectedOptionValue"></td>
        </tr>
      </table>
    </td>
  </tr>
</table>
<style scoped="scoped">
  #maintable {
    border-collapse: separate;
    border-spacing: 15px;
  }

    #maintable td {
      vertical-align: top;
    }
</style>

<script type="text/javascript"> 
var viewModelJs = {"StringValue":"Hello","PasswordValue":"mypass","BooleanValue":true,"OptionValue":["Alpha","Beta","Gamma"],"SelectedOptionValue":"Gamma","MultipleSelectedOptionValues":["Alpha"],"RadioSelectedOptionValue":"Beta"};
var viewModel = ko.mapping.fromJS(viewModelJs); 
ko.applyBindings(viewModel);
</script>