CODEWITHSUNDEEP
javascriptjqueryasp.net-mvcjsonknockout.js
andrey.shedko
andrey.shedko

Reputation: 3238

Knockout.js Adding data by using push method not updating view

I'm getting data from WebApi on JSON format and then adding received data to MVC View by using .push() method of KnockoutJS. The JSON data I received on POST response is correct, so I believe it's something wrong on client side - instead of data I'm geting undefined and [Object]. Although after page refresh all data showing correctly. Here my knockout code:

<script>
    var viewModel = {
        prepp: ko.observableArray(),
        currentPage: ko.observable(-1)
    };
    $(function () {
        getData(viewModel.currentPage() + 1);
        ko.applyBindings(viewModel, document.getElementById("prepps"));      
        });
        //This function used for paging, not concern to question directly
        function getData(pageNumber) {
            if (viewModel.currentPage() != pageNumber) {
                $.ajax({
                    url: "/api/index",
                    type: "get",
                    contentType: "application/json",
                    data: { id: pageNumber }
                }).done(function (data) {
                    if (data.length > 0) {
                        viewModel.currentPage(viewModel.currentPage() + 1);
                        for (var i = 0; i < data.length; i++) {
                            viewModel.prepp.push(data[i]);
                        }
                    }
                });
            };
            //Here we call POST action of WebApi.
            $(".send-feed").click(function () {
                var guid = getguid();
                var styles;
                var req = { RequestName: $("#request").val(), RequestDescription: $("#request-review").val(), RequestOwner: $("#username").val(), RequestGuid: guid, RequestStyles: [] }
                $("div.click").each(function () {
                    styles = { RequestGuid: guid, StyleId: $(this).text() };
                    req.RequestStyles.push(styles);
                });
                var model = JSON.stringify(req);
                $.ajax({
                    url: "/api/index",
                    type: "POST",
                    contentType: "application/json, charset: utf-8",
                    data: model
                }).done(function (data) {
                    viewModel.prepp.push(data);
                });

            });
        }
    });
</script>

And here is the MVC View markup:

div class="prepp-blocks-container" data-bind="foreach: prepp" id="prepps">
    <div class="prepp-block">
        <div class="star" data-bind="if: $data.IsStylistOffer == true">
            <img src="../../img/star-yellow.png" alt="added by stylist">
        </div>
        <a data-bind="attr: {href: 'Request/' + $data.RequestGuid}"><h3 data-bind="text: $data.RequestName"></h3></a>
        <span  data-bind="foreach: {data: RequestStyles, as: 'style'}">
            <div data-bind="text: style" class="taste-prepp"></div>
        </span>
        <p class="text-small-grey" data-bind="text: $data.PreppsNumber + ' prepps'"></p>
    </div>
</div>

Upvotes: 0

Views: 349

Answers (1)

super cool
super cool

Reputation: 6045

I believe your return type from controller should be adjusted so it will match the view model structure like

public model Get() 
{ 
//build your list .
return model ; 
}

Try to use ko.mapping.toJS() so knockout advantages are not lost .

Refer knockout doc's you can find more relevant info how we can better use it Here

Upvotes: 1

Related Questions