Binding observableArray to C# list

Question

I have the following simpified ViewModel in C#

public class SearchViewModel
{
    public IList<IdAndNameModel> AvailableTags { get; set; }
    public IList<IdAndNameModel> SearchTags { get; set; }
}

and this in JavaScript:

function ViewModel() {
    var self = this;
    self.allTags = ko.observableArray();
    self.searchTags = ko.observableArray();

    // stuff to fill the searchTags
}

var viewModel = new ViewModel();
ko.applyBindings(viewModel);
viewModel.allTags(@Html.Raw(Json.Encode(@Model.AvailableTags)));

Now I want to bind the JavaScript property to the SearchModel:

@Html.HiddenFor(m => m.SearchTags, new { data_bind = "value: searchTags" })

Here is the snippet how the data is submitted to the controller:

$('#submitButton').click(function () {
    var form = $('#criteriaForm');
    $.ajax({
        url: form.attr('action'),
        type: form.attr('method'),
        data: form.serialize(),
        success: function (result) {
            // unimportant binding stuff
        }
    });
});

Unfortunately the length of the list is always 0. I bet the reason is the initialisation of the availabaleTags array (@Html.Raw(Json.Encode(@Model.AvailableTags))). I am right? If I change the type from list to string then I can see that the binding is generally working.

Is there a way to bind lists in that way?

When and how do you check the length of the list? So how do you know that the length of the list is always 0? — nemesv
– nemesv, Commented Sep 21, 2013 at 10:54
ok, and how do you submit your data? With using a regular form tag and a submit button or with AJAX? — nemesv
– nemesv, Commented Sep 21, 2013 at 10:57
I submit the data via an JavaScript-AJAX-call (not with the .Net functionality!). The data comes from here: data: form.serialize() — core
– core, Commented Sep 21, 2013 at 11:41
Then the form.serialize() is your problem because it is not correctly serializes your array in the form how ASP.NET would accept it. Please post your ajax code! By the way if you have your viewmodel bacause of KO why don't you send the data from that directly in your ajax call? — nemesv
– nemesv, Commented Sep 21, 2013 at 11:50

tleef · Accepted Answer · 2013-09-24 21:42:12Z

1

If I were you I would change the $.ajax call to look more like this:

$.ajax(form.attr('action'), {
    type: form.attr('method'),
    data: JSON.stringify({
        'AvailableTags': viewModel.allTags(),
        'SearchTags': viewModel.searchTags()
    }),
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (response) {
        //Do your thang
    }
});

Then you controller will have a method that looks something like this:

public ActionResult Test(SearchViewModel searchViewModel) {
    //Stuffy stuff, best stuff on earth
}

Last suggestion would be to put the

viewModel.allTags(@Html.Raw(Json.Encode(@Model.AvailableTags)));

before the

ko.applyBindings(viewModel);

answered Sep 24, 2013 at 21:42

tleef

3,6241 gold badge27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user1938419 · Accepted Answer · 2013-11-20 12:20:41Z

0

In case you dont want to send them separately you might want to try the following.knockout has this problem with the C# list, so while interacting with C# side you'd need to convert it back.

data: JSON.stringify(ko.mapping.toJS(yourobject))

answered Nov 20, 2013 at 12:20

user1938419

33 bronze badges

Collectives™ on Stack Overflow

Binding observableArray to C# list

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related