Knockout - Web Controls Extensions (MVC 4+)

Knockout - Web Controls Extensions for MVC 4 and above

MVC 4 Controls Extensions contains extension methods for standard html & Knockout controls like editable generic Grid, dropdown, textbox, radiobutton & checkbox controls.

To install MVC 4 Controls Extensions, run the following command in the Package Manager Console

PM>Install-Package MVCControlsExtensions

source code available at Github

Controls Extensions

@Html.KOTextBoxFor(model => model.Name)
@Html.KODisplayFor(model => model.Name)
@Html.KOCheckBoxFor(x=>x.IsActive)
@Html.KODateTextBoxFor(model => model.Date)
@Html.KODropDownListFor(model => model.Id, Model.SelectedList)
@Html.KOPasswordFor(model => model.Password)
@Html.KOForeEachBindingFor(model => model.Items)
@Html.KOPartialFor(model => model.Address,"_address")

Grid Example

Editable KO grid

<div class="editor-field">
@Html.KOGridFor(model => model.NewsList,
    col => col.AddKOTextColumnFor(item => item.Summary, options: new KOBindingOptions { Enable = "canEdit()" }),
    col => col.AddKOTextColumnFor(item => item.Description),
    col => col.AddKODateTextColumnFor(item => item.PublishedOn),
    col => col.AddKOTextColumnFor(item => item.Id),
    col => col.AddColumn("X", "<input type=\"button\" value=\"Add\" onclick=\"AddNewRow(this)\" />"),
    col => col.AddKODeleteButtonColumn("X", "Add",
        options: new KOBindingOptions { Click = "$parent.removeNews" },
        headerOptions: new KOBindingOptions { Click = "$data.addNews" }))
@Html.ValidationMessageFor(model => model.NewsList)
</div>

Vertical Editable Grid

<div>
    @Html.VerticalGridFor(x => x.NewsList,
        col => col.AddColumnFor(x => x.Description),
        col => col.AddColumnFor(x => x.PublishedOn),
        col => col.AddColumnFor(x => x.Summary))
</div>

Create view using Knockout Scaffold template