How to use KnockoutJS to save data into SQL database?

Question

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();
   });
   }
  

• Amadan: $.ajax wants data, you're giving it Data. Those are not the same.
• Auck: Could you please explain the details? I am a beginner, just learn knockoutJs for 1 week. Thank you.
• Amadan: 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.
• Auck: 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.
• Bryan Dellinger: this might help you stackoverflow.com/questions/4120212/…. 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)

Answer 1

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.

• Auck: Yes, I see it, should be add a back end C# file to support the server side. Thank you for remind me.