Updating sql table via webservice from JAvascript

Hello,

I have a gridview and I am using a modalpop extender with a webservice to do the updates.
The webservice work great to grab the data and show it in the  modal popup. I cam calling the webservice from the javascript so it is very fast.

But how can I use the webservice to  do the update of the data, I have about 30 columns.

Regards
arnololo123Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
So if I understood correctly you're already doing the ajax calls to fill the grid and fill the popup.
These are all GET requests right?

So basically now you need to create a new method to handle the update passing the form data.
Ioannis ParaskevopoulosCommented:
Hi,

In addition to what Alexandre has said, if you would need more specific help (for instance how to write a method to update the table), you should also provide us with info on what kind of technologies do you use in what you already have.

If you are fetching data with Entity Framework, it would be meaningful to also update data using Entity Framework. If you are using SqlCommand in order to fetch your data, it would also be meaningful to use this in order to update it.

In the same manner, what is your webservice? Is it WCF, is it WebAPI? is it something else?

Giannis
arnololo123Author Commented:
HEllo, I am filling the grid with  a regular sqldatasource. I am currently only using the webservice to  fill the modalpopup extender for editing the data.
The popup is open via javascript and the webserivce is called via javascript which makes the popup very fast even with hundred's of row.
CompTIA Network+

Prepare for the CompTIA Network+ exam by learning how to troubleshoot, configure, and manage both wired and wireless networks.

Ioannis ParaskevopoulosCommented:
Could you pls share the code of your service?
arnololo123Author Commented:
Hello, here is the code for the webservice.
I am using C#, asp.net, the webservice was created from Visual studio by just selecting the option "Webservice"
using System;
using System.Collections;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Security;
using System.Web.UI;
using System.Drawing;
using System.IO;


/// <summary>
/// Summary description for BOPCSVData
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. 
 [System.Web.Script.Services.ScriptService]
public class BOPCSVData : System.Web.Services.WebService {

    public BOPCSVData () {

        //Uncomment the following line if using designed components 
        //InitializeComponent(); 
    }

    [WebMethod]
   

    public string GrabData(int idrow)
    {
        string query = "SELECT     idBOPCSV, FKidprogram, FKidversion, typepart, segment, BOMNumb, FaurPartnumb, partdesc, CustPartNumb, FKIDSupplier, AcquiSupplier, SupplierProfile, SupplierLocation, DateNominated, breakdown, QtyperCar, TakeRate, FCA, Freight, Packaging, ImportDuty, Warehousing, FAUPlant, PPA1, FReC, target, PurchCommit,  IncoTerm, PaymentTerm, Currency, Comment, LTA1, LTA2, LTA3, LTA4, LTA5, BTcurrency, BTSales, BTtarget, BTSourcedCost, BTterms, BTcomments, BTSupplier,    BTSupplierLocation, BTPO, BTPODate, BTNewModOth, LTAScope, Sourced, SNCForecast, PPA2, PPA3, PPA4, PPA5, PPA6, IncoLocation, LTADate1, LTADate2,  LTADate3, LTADate4, LTADate5, LTASour1, LTASour2, LTASour3, LTASour4, LTASour5, LTASourDate1, LTASourDate2, LTASourDate3, LTASourDate4, LTASourDate5,    LTAScopePurch, LTAScopeTarget, DrawingIndex, CommentsTransfert FROM    TPTData1 WHERE iddata = " + idrow;
        SqlDataAdapter da = new SqlDataAdapter(query, new SqlConnection(ConfigurationManager.ConnectionStrings["DBConnString"].ConnectionString));
        DataSet ds = new DataSet();
        
        da.Fill(ds);
        return ds.GetXml();
    } 

}

Open in new window

Athar SyedCommented:
You need to create a webservice that either accepts xml or values as the parameters and save that to the database. You might want to check out Insert Update Data using JQuery, AJAX & WebMethod
arnololo123Author Commented:
Hello Thanks, but this sample  uses Jquery, I  would like to stay with the javascript to call the webservice for update.
Also I have over 30 fields, and I was hoping to find a solution where I Would not have to pass 30 parameters.
Alexandre SimõesManager / Technology SpecialistCommented:
You don't need to pass 30 parameters.
What you do is serialize the form and send one JSON object with multiple properties.
On the server-side you need to have a method that expects an object that has the same properties.
I see from the tags that you're using .Net so you can use WebAPI which will make your life much easier. It will have much less configuration, a REST service endpoint out-of-the-box and, as also with WCF, the serialization will be automatic.

To serialize the form, the easiest way is to use jquery: https://api.jquery.com/serialize/
The object property names are taken from the name attribute of each form control. So make sure all controls on the form have a name attribute.
Something like:
$("form").on("submit", function (event) {
    event.preventDefault();
    
    $.ajax({
    	type: 'GET',
        url: 'url to your service method here',
        data: { item: $(this).serialize() },
        success: function(){
    		// code to run on success
    	},
        error: function(){
        	// code to run on error
        }
    });
    
    return false;
});

Open in new window

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Athar SyedCommented:
There is no possible way to simplify Alexandre's solution. To try out check out W3Schools example.  

JQuery Seralization

You will see you get what you want.
arnololo123Author Commented:
I would like  not to use Jquery, just javascript and webservice.
RobOwner (Aidellio)Commented:
jquery IS only javascript.  It's just a whole lot of JavaScript functions that make life easier for you. See my article of JavaScript Frameworks and how they work.

you don't want to have to code that by hand using pure javascript.  Too much to go wrong.
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
C#

From novice to tech pro — start learning today.