Getting Started with Knockout.js for .NET Developers

In this section, we will discuss some useful elements that will help you create HTML forms. You can create various form objects by using ko.Html, as shown in the preceding code. This approach is similar to the standard ASP MVC HTML helpers:

Razor: @ko.Html.TextBox(m => m.StringValue)
Html:  <input data-bind="value: StringValue" />

Every method has an optional parameter that defines a set of HTML attributes:

Razor: @ko.Html.RadioButton(m => m.RadioSelectedOptionValue, new { value = "Alpha" })
Html:  <input data-bind="checked : RadioSelectedOptionValue" type="radio" value="Alpha" />

In addition, you can apply additional data bindings to the created objects:

Razor: @ko.Html.TextBox(m => m.StringValue).ValueUpdate(KnockoutValueUpdateKind.AfterKeyDown)
Html:  <input data-bind="value : StringValue,valueUpdate : 'afterkeydown'" />

You can create the following HTML objects:

TextBox: For this object, the example is as follows:

Razor: @ko.Html.TextBox(m => m.StringValue)
Html:  <input data-bind="value: StringValue" />

Password: For this object, the example is as follows:

Razor: @ko.Html.Password(m => m.PasswordValue)
Html:  <input data-bind="value: StringValue" type="password"/>

Hidden: For this object, the example is as follows:

Razor: @ko.Html.Hidden()
Html:  <input type="hidden"/>

RadioButton: For this object, the example is as follows:

Razor: @ko.Html.RadioButton(m => m.RadioSelectedOptionValue) 
Html:  <input data-bind="value: StringValue" type="radio"/>

CheckBox: For this object, the example is as follows:

Razor: @ko.Html.CheckBox(m => m.BooleanValue)
Html:  <input data-bind="value: StringValue" type="checkbox"/>

TextArea: For this object, the example is as follows:

Razor: @ko.Html.TextArea(m => m.StringValue)
Html:  <textarea data-bind="value : StringValue"></textarea>

DropDownList: For this object, the example is as follows:

Razor: @ko.Html.DropDownList(m => m.OptionValue)
Html:  <select data-bind="options : OptionValue"></select>
Razor: @ko.Html.DropDownList(m => m.OptionValue, null, item => item.Key)
Html:  <select data-bind="options : OptionValue, optionsText : function(item) { return item.Key; }"></select>
Razor: @ko.Html.DropDownList(m => m.OptionValue, null, (m, item) => m.Prefix + item.Key)
Html:  <select data-bind="options : OptionValue, optionsText : function(item) { return Prefix + item.Key; }"></select>

ListBox: For this object, the example is as follows:

Razor: @ko.Html.ListBox(m => m.OptionValue)
Html:  <select data-bind="options : OptionValue" multiple="multiple"></select>
Razor: @ko.Html.ListBox(m => m.OptionValue, null, item => item.Key)
Html:  <select data-bind="options : OptionValue, optionsText : function(item) { return item.Key; }" multiple="multiple"></select>
Razor: @ko.Html.ListBox(m => m.OptionValue, null, (m, item) => m.Prefix + item.Key)
Html:  <select data-bind="options : OptionValue, optionsText : function(item) { return Prefix + item.Key; }" multiple="multiple"></select>

Span: For this object, the example is as follows:

Razor: @ko.Html.Span(m => m.StringValue)
Html:  <span data-bind="text: StringValue"></span>
Razor: @ko.Html.Span("text")
Html:  <span>text</span>

SpanInline: For this object, the example is as follows:
```
Razor: @ko.Html.SpanInline("new Date().getSeconds()")
Html:  <span data-bind="text : new Date().getSeconds()"></span>
```
Note
The SpanInline method takes a string and pastes it in the text binding of span elements. You can use it for an explicit JavaScript code. The Span method can take a lambda expression (and process it in the usual Knockout MVC way) or string (and paste it inside the span element instead of a binding value).

Button: For this object, the example is as follows:

Razor: @ko.Html.Button("Caption", "ActionName", "ControllerName", new { parameter = "Key"})
Html:  <button data-bind="click : function() {executeOnServer(viewModel, '/ControllerName/ActionName?parameter=Key');}">Caption</button>

HyperlinkButton: For this object, the example is as follows:

Razor: @ko.Html.HyperlinkButton("Caption", "ActionName", "ControllerName", new { parameter = "Key"})
Html:  <a href="#" data-bind="click : function() {executeOnServer(viewModel, '/ControllerName/ActionName?parameter=Key');}">Caption</a>

Form: For this object, the example is as follows:

Razor: @using (ko.Html.Form("ActionName", "ControllerName", new { parameter = "Key"}))
       {
         Text
       }
Html:  <form data-bind="submit : function() {executeOnServer(viewModel, '/ControllerName/ActionName?parameter=Key');}">
         Text
       </form>

Getting Started with Knockout.js for .NET Developers

By : Andrey Ankshin

Getting Started with Knockout.js for .NET Developers

By: Andrey Ankshin

Overview of this book

Related Content you might be interested in

Current Title:

Getting Started with Knockout.js for .NET Developers

Form objects

Note