knockoutjs_logoIn diesem Artikel möchte ich ein Beispiel zeigen wie man die Daten von einem MVC Controller mit Knockout.js an eine DropDown Liste binden kann.
Hört sich alles erst einmal relativ einfach an, aber ohne griffiges Beispiel wird der Einstieg schwierig.

Im Internet gibt es ziemlich viele Beispiele dazu, allerdings habe ich doch ziemlich lange gebraucht um mein Erstes Beispiel ans Laufen zu bekommen.

Problemstellung

Ich möchte eine Liste von Ländern (Countries) an eine DropDown Liste binden.

Implementierung

Starten wir zunächst einmal mit dem Model:

public class Country
{
    public int CountryId { get; set; }
    public string Abbreviation { get; set; }
    public string Name { get; set; }
}

Als nächstes kommt der Controller, der hier mit zwei Datensätzen gefüllt wird. In einer echten Anwendung würde der Controller die Daten über ein Repository beziehen.

public ActionResult GetAvailiableCountries()
{
    var data = new List<Country>();
    data.Add(new Country() { CountryId = 1, Abbreviation = "D", Name = "Deutschland" });
    data.Add(new Country() { CountryId = 2, Abbreviation = "F", Name = "Frankreich" });
            
    return this.Json(data, JsonRequestBehavior.AllowGet);
}

Bisher ist noch nichts spannendes passiert. Alles ist wie in einer “normalen” MVC Anwendung. Jetzt wird es jedoch spannend. Die Daten aus dem Controller wollen nun an eine DropDown Liste gebunden werden.

Damit das funktioniert braucht man bei Knockout.js ein “View-Model”. Im nachfolgenden View-Model definiere ich ein Property AvailiableCountries an das ich die Daten vom Controller über einen GET-Request binde.

<script type="text/javascript">
    // define your own namespace
    var DanielSirz = {};

    // define your ViewModel
    DanielSirz.CountryViewModel = function () {
        // for easier access
        var self = this;
        // define properties
        self.AvailiableCountries = ko.observableArray();
    }

    $(document).ready(function () {
        // create a new ViewModel Instance
        var countryViewModel = new DanielSirz.CountryViewModel();
        // query data from Controller: Home on Action: GetAvailiableCountries
        $.get("/Home/GetAvailiableCountries", function (data) {
            // bind result on AvailiableCountries observable
            countryViewModel.AvailiableCountries(data);
        });
        // has to be executed once, to apply bindings
        ko.applyBindings(countryViewModel);
    })
</script>

Zum Schluss müssen die Daten nur noch angezeigt werden. Dies geschieht in der HTML Seite mit nachfolgendem Snippet.

<h3>Country DropDown</h3>
<select data-bind="options: AvailiableCountries, optionsValue: 'CountryId', optionsText: 'Abbreviation'"></select>

<h3>All Countries</h3>
<ul data-bind="foreach: AvailiableCountries">
    <li data-bind="text: Abbreviation" />
</ul>

Fazit

Mit knockout.js kann man endlich seinen JavaScript Code aufräumen. Ein C# Entwickler freut sich darüber endlich ein Model auch auf der JavaScript Seite zu haben.
Nachdem man wie bei jedem Produkt die erste steile Lernkurve gemeistert hat lassen sich tolle Sachen damit entwickeln.

Demo

Wie das ganze zum Schluss aussehen soll habe ich als jsfiddle angelegt.