1

Good day everybody. I have a question about how to use the right way to save data into SQL database through KnockoutJs. The record are display well in the table. It should be able to save the data via this pop-up Modal. But after I click the Create button in that modal, it only pop-up a failed Message. Can anybody please help me to solve this problem? Thank you very much.

  • Below is extract from main js file about Save function

            var data = ko.toJSON(self.Profiles());
        $.ajax({
            type: 'POST',
            url: '/ajaxCall/insertProAjax',
            data: "{ Customer:" + ko.utils.stringifyJson(self.Name) + ",customerRemove:" + ko.utils.stringifyJson(self.CustomerRemove) + "}",
            contentType: "application/json",
            success: function (data) {
                alert("Record has been saved Successfully");
                MarkCustomerAsSaved();
                $('#AddNewModel').modal('hide');
            },
            error: function () {
                alert("Failed");
            }
        }).fail(function (xhr, textStatus, err) { alert(err); });

  • Below is extract from the ViewModel about save function

        var Customer = {};
    Customer.Id = c.Id;
    Customer.Name = c.Name;
    Customer.Age = c.Age;
    Customer.Address = c.Address;
    if (isNewRecord === false) {
        $.ajax({
            type: "PUT",
            url: "/api/CustomerAPI/" + c.Id,
            data: Customer
        })
            .done(function (resp) {
                self.Message("Record Updated Successfully ");
                self.reset();
            })
            .fail(function (err) {
                self.Message("Error Occures, Please Reload the Page and Try Again " + err.status);
                self.reset();
            });
    }
    if (isNewRecord === true) {
        isNewRecord = false;
        $.ajax({
            type: "POST",
            url: "/api/CustomerAPI",
            data: Customer
        })
            .done(function (resp) {
                self.Message("Record Added Successfully ");
                self.reset();
                loadData();
            }).fail(function (err) {
                self.Message("Error Occures, Please Reload the Page and Try Again " + err.status);
                self.reset();
            });
    }
Auck
  • 49
  • 1
  • 6
  • `$.ajax` wants `data`, you're giving it `Data`. Those are not the same. – Amadan Jul 13 '17 at 23:14
  • Could you please explain the details? I am a beginner, just learn knockoutJs for 1 week. Thank you. – Auck Jul 13 '17 at 23:18
  • The comment was not knockout-related. JavaScript is case-sensitive, so are JavaScript object keys. `data` and `Data` are two different keys. jQuery's `ajax` function expects `data` to start with a lowercase letter, just as it expects `type`, `url`, `contentType` and `success` and not `Type`, `URL`, `ContentType` or `Success`. – Amadan Jul 13 '17 at 23:21
  • Thank you Amadan. I changed the key name from Data to data. I will be more carefully on named. But it doesn't effect the process, there is a console message ".../ajaxCall/insertProAjax 404 (Not Found)". I think the ajax can't call to anywhere. I'm still confuse about it. – Auck Jul 13 '17 at 23:31
  • this might help you https://stackoverflow.com/questions/4120212/mvc-ajax-json-post-to-controller-action-method. I am guessing you are attempting to post to a .net mvc controller? another option would be to include web api in your project and then post to the .net web api controller. (these controllers are meant for this kind of thing) – Bryan Dellinger Jul 14 '17 at 01:16
  • Thank you. HttpPost should be created it if I want to connect with back end. – Auck Jul 14 '17 at 02:21

1 Answers1

0

Knockout and Javascript (in this manner) are being processed client side. You will need to create something on the back end to accept your data payload and save it to the database. If you want to stay in the JavaScript family, I would recommend node.js. Alternatively this is where php, or C# would come into play.

John Pavek
  • 2,595
  • 3
  • 15
  • 33
  • Yes, I see it, should be add a back end C# file to support the server side. Thank you for remind me. – Auck Jul 14 '17 at 02:19