Generate code for knockout binding for ASP.Net MVC

Question

I have worked with knockout a little bit. It is a good client side data binding js library. A template is bound and populated on the client side as follows:

<h3>Are you sure you want to delete this?</h3>
<fieldset>
    <legend>Delete</legend>
    <div class="display-label">
        Student Id
    </div>
    <div class="display-field">
        <input data-bind="value: StudentId" />

    </div>
    <div class="display-label">
        First Name
    </div>
    <div class="display-field">
        <input data-bind="value: FirstName" />
    </div>

    <div class="display-label">
        Last Name
    </div>
    <div class="display-field">
        <input data-bind="value: LastName" />

    </div>

    <div class="display-label">
        Age
    </div>
    <div class="display-field">
        <input data-bind="value: Age" />

    </div>
</fieldset>

the above way we write html to bind data

this way populate template by js code

$(function () {
    ko.applyBindings(StudentListVM);
    StudentListVM.getStudents();
});

//View Model
var StudentListVM = {
    Students: ko.observableArray([]),
    getStudents: function () {
        var self = this;
        $.ajax({
            type: "GET",
            url: '/Student/FetchStudents',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                self.Students(data); //Put the response in ObservableArray
            },
            error: function (err) {
                alert(err.status + " : " + err.statusText);
            }
        });
    },
};

self.editStudent = function (student) {
    window.location.href =  '/Student/Edit/' + student.StudentId;
};
self.deleteStudent = function (student) {
    window.location.href = '/Student/Delete/' + student.StudentId;
};

//Model
function Students(data) {
    this.StudentId = ko.observable(data.StudentId);
    this.FirstName = ko.observable(data.FirstName);
    this.LastName = ko.observable(data.LastName);
}

The above code works and generates the UI on the client side.

I would like to know if there is any scaffolding option in MVC which generates the above html with binding expression and also generates the required js view model.

If this does not exist then I would appreciate suggestions on how to achieve it.

i found one such http://visualstudiogallery.msdn.microsoft.com/32c15a80-1c54-4e96-a83f-7cd57573a5d2 but still looking for more way out. thanks — Thomas, May 21 '14 at 08:58
If you found one, why are you looking for more ways? Also, it's very hard to "give" someone the knowledge to do something easily. If you want to learn more about scaffolding in ASP.NET MVC I suggest you look into T4 templates. There is a question regarding custom view templates on SO, which received accepted answers, at http://stackoverflow.com/questions/1009067/asp-net-mvc-custom-t4-templates-for-views. You can read more about T4 at http://msdn.microsoft.com/en-us/library/bb126445.aspx and the subpages in that section in the list on the left side, loads of content. — Robert Westerlund, May 21 '14 at 10:01

score 0 · Accepted Answer · answered May 21 '14 at 14:53

0

Take a look on Knockout mvc
You can write appropriate @helper method
Don't forget about T4
you can write your own extension for HtmlHelper

answered May 21 '14 at 14:53

GSerjo

4,725
1
36
55

i have same interest so i like to ask that Knockout mvc causes postback....is it true? u did not specify why one need to use helper method? Knockout mvc require extra helper method? – Mou May 22 '14 at 13:50
1

You can use custom `@helper` method to generate html code based on your own model – GSerjo May 22 '14 at 14:39

Generate code for knockout binding for ASP.Net MVC

1 Answers1