Pass multiple GridView Row data to WebMethod and save to database using jQuery AJAX

Last Reply on Mar 05, 2015 05:44 AM By Mudassar

Posted on Mar 05, 2015 04:38 AM

I want to add  gridview row data into to data base I am doing it perfectly.

My problem is that want all gridview row data save and then web method should be called but in my cause one  gridview  data save in array then call webmethod,then other row data save in array then call webmethod called this process should be so on.

But I want it webmethod should be called when all gridview row save in array .. please help me..   or give me some suggestion.

Follwing code

Jquery 
<script type="text/javascript">
        $(function () {
            $("[id*=btnSubmit]").bind("click", function () {
                var Customer = {};
                $('[id*=GridView1]').find('tr:has(td)').each(function () {
//                    var Customer = {};
                    Customer.Id = $(this).find("td:nth-child(2)").html();
                    Customer.Name = $(this).find("td:nth-child(3)").html();
                    Customer.Country = $(this).find("td:nth-child(4)").html();
                      $.ajax({
                        type: 'POST',
                        url: "WebForm1.aspx/SaveGridViewRowData",
                     
                        data: '{Customer: ' + JSON.stringify(Customer) + '}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {

                           
                            //window.location.reload();
                        }
                    });
                });
       alert("User has been added successfully.");
                return false;
            });
        });
    </script>
Web method
public class customers
        {
            public string Id { get; set; }
            public string Name { get; set; }
            public string Country { get; set; }

        }
 
 
 
        [System.Web.Services.WebMethod]
         public static string SaveGridViewRowData(customers Customer)
        {
         string str1 = "Data Source=.\\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|Database1.mdf;User Instance=true";
         SqlConnection conn = new SqlConnection(str1);
            try
            {
               
                SqlCommand cmd1 = new SqlCommand("spinsertcustomer", conn);
                cmd1.CommandType = CommandType.StoredProcedure;
                cmd1.Parameters.AddWithValue("@id", Customer.Id);
                cmd1.Parameters.AddWithValue("@name", Customer.Name);
                cmd1.Parameters.AddWithValue("@country", Customer.Country);
                ////com.CommandType = CommandType.StoredProcedure;
                ////SqlCommand cmd1 = new SqlCommand()", conn);
                conn.Open();
                cmd1.ExecuteNonQuery();
  


                    conn.Close();
                    return "Data Inserted";
                }
            //}

            catch (Exception ex)
            {
                return "Data Insert Failed";
            }
        }
   

 

Posted on Mar 05, 2015 05:44 AM

1. Remove the AJAX call from the each loop and place it outside below he loop.

2. Create a new array above the loop.

var Customers = new Array();

3. Add the Customer Object to the Array.

Customer.Id = $(this).find("td:nth-child(2)").html();
Customer.Name = $(this).find("td:nth-child(3)").html();
Customer.Country = $(this).find("td:nth-child(4)").html();
Customers.push(Customer);

4. In the AJAX call use the following for data parameter

 data: '{Customers: ' + JSON.stringify(Customers) + '}',

5. Finally in WebMethod change as follows

public static string SaveGridViewRowData(List<customers> Customers)

6. Now Loop and insert each Customer

foreach(customers Customer in Customers)
{
	SqlCommand cmd1 = new SqlCommand("spinsertcustomer", conn);
	cmd1.CommandType = CommandType.StoredProcedure;
	cmd1.Parameters.AddWithValue("@id", Customer.Id);
	cmd1.Parameters.AddWithValue("@name", Customer.Name);
        cmd1.Parameters.AddWithValue("@country", Customer.Country);
        conn.Open();
        cmd1.ExecuteNonQuery();
	conn.Close();
}