Post ViewModel through Ajax using Knockout

Question

Here name,abbre,description,weight,sequence are coming from textboxes.I am putting those values in LanguagesVM and while posting it through ajax it is not posting this. I have to find the values of all textboxes in one viewmodel which I have done below but its not posting that viewmodel to the controller.

  $(function () {
        function Languages(data) {
            var self = this;
            self.name = ko.observable(data.name);
            self.abbrev = ko.observable(data.abbrev);
            self.description = ko.observable(data.description);
            self.sequence = ko.observable(data.sequence);
            self.weight = ko.observable(data.weight);
            self.isActive = ko.observable(data.isActive);
        }
        function LanguagesVM() {
            var self = this;
            self.Languages = new Languages();           
            ko.applyBindings(LanguagesVM, document.getElementById("CreateLanguage"));

            self.saveLanguage = function () {
                alert("Save---");
                $.ajax({
                    type: "Put",
                    url: rootUrl + 'api/my/Language',
                    data: ko.toJSON(self.Languages),
                    contentType: "application/json; charset=utf-8",
                    success: function (result) {
                        console.log(result.d);
                    },
                    error: function (err) {
                        console.log(err.status + " - " + err.statusText);
                    }
                });
            };
        };

    });

Here is my html code:--

@using (Html.BeginForm(htmlAttributes: new { @class = "form single-col",@id="CreateLanguage" }))
{
    <div>
        <div class="form-group">
            <label for="Name">Name</label>
            <input class="text-box single-line" data-bind="value:name" data-val="true" id="Name" name="Name" placeholder="Name" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Abbrev">Abbrev</label>
            <input class="text-box single-line" data-bind="value:abbrev" data-val="true" id="Abbrev" name="Abbrev" placeholder="Abbrev" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Description">Description</label>
            <input class="text-box single-line" data-bind="value:description" data-val="true" id="Description" name="Description" placeholder="Description" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Sequence">Sequence</label>
            <input class="text-box single-line" data-bind="value:sequence" data-val="true" id="Sequence" name="Sequence" placeholder="1" type="text" value="">
        </div>

        <div class="form-group">
            <label for="Weight">Weight</label>
            <input class="text-box single-line" data-bind="value:weight" data-val="true" id="Weight" name="Weight" placeholder="0" type="text" value="">
        </div>
        <div class="form-group">
            <label class="checkbox">
                <input type="checkbox" value="true" name="IsActive" id="IsActive" data-bind="checked:isActive"> Active
            </label>
            <span class="field-validation-valid" data-valmsg-for="IsActive" data-valmsg-replace="true"></span>
        </div>

        <div class="form-group">
            <div class="controls">
                <div class="btn-group">

                    <button type="submit" class="btn btn-primary" data-bind="click:saveLanguage"><i class="fa fa-plus"></i> Create</button>
                    <a class="btn btn-info" href="@Url.Action("Index")"><i class="fa fa-arrow-left"></i> Back to List</a>
                </div>
            </div>
        </div>
    </div>
}

Answer 1

Your LanguagesVM function is defined, but looks like it's never executed.

Adding the following code after the function definition:

vm = new LanguagesVM();

should be sufficient to trigger the binding here. The use of new may not be necessary, but the use of the this keyword inside LanguagesVM suggests that it should be used to prevent incorrect scoping.