Delete row from GridView and Database using JQuery in asp.net

We are going to use css to recognize the

In this article we are not going to use Update panel but using JQuery it will give similar feel mean without page postback delete the records.

Other Articles on JQuery:

GridView and JQuery

you can find the other articles on JQuery to call server side function here

To Check the username availability live using JQuery you can visit this article

To Perform various validation in asp.net application using JQuery you can visit this post.

1st create user table with below columns in sql server database

Craete SQL Server Table

CREATE TABLE [dbo].[User_Table](
 [Id] [int] NOT NULL,
 [User_Name] [varchar](30) NOT NULL,
 [First_Name] [varchar](50) NOT NULL,
 [Last_Name] [varchar](50) NOT NULL,
 [Middle_Name] [varchar](50) NOT NULL,
 [Email_Id] [varchar](70) NOT NULL
) ON [PRIMARY]

You can add some records manually in the newly created table

Now lets create 2 stored procedure one to fetch records from database and display to GridView and other one is for deleting the records from database table.

This sp is for Fetching Records from User_Table

Craete Stored Proceure

CREATE PROCEDURE [dbo].[GetUserRecords]
AS 
BEGIN 

 SELECT * FROM dbo.User_Table

END

and this stored procedure one is for Deleting records

CREATE PROCEDURE [dbo].[DeleteUser](@id int)
AS 
BEGIN 

 DELETE FROM dbo.User_Table WHERE id = @id

END

Now Drag and Drop the GridView from the toolbox of the visual studio and place into the web form and depending upon the your requirement you can set the autogenerated column to false and Bound column or template column, Its totally up to you and your requirement.

In the below example I have taken 6 bound column and one template column for delete hyperlink and image button

GridView in .aspx page

In the above GridView code I have used to set the class to record and its important to delete row using JQuery

In the above declaration of GridView I also used anchor tag and set its class to delbutton and its id value to the  correspondent to the database id column so that we can get the record id in JQuery function.

Now assign the data to the gridView in the page load event

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LoadData();
        }
    }

 
 and here is the LoadData function which will get the data from SQL Server using Stored Procedure and bind to GridView
 
 

private void LoadData()
    {
        //Get the connection string from the web.config file
        string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;

        SqlConnection sqlConn = new SqlConnection(conString);

        try
        {

            SqlCommand sqlCmd = new SqlCommand("GetUserRecords", sqlConn);

            sqlCmd.CommandType = CommandType.StoredProcedure;

            sqlConn.Open();

            SqlDataReader rdr = sqlCmd.ExecuteReader();

            //assign datareader to GridView you can assign to any datasource for e.g DataTable or dataSet
            GridView1.DataSource = rdr;
            GridView1.DataBind();

            //Close DataReader
            rdr.Close();
        }
        catch
        {
            //Handle Error if any occurred
        }
        finally
        {
            //Close Database connection
            sqlConn.Close();
        }
    }

Once you bind the data into grridview you will see this

And Below is the code which is used to delete records from database and will be called using Jquery. Don't forget to add  [System.Web.Services.WebMethod] like this

    [System.Web.Services.WebMethod]
    public static void DeleteUser(string args)
    {

        string conString = ConfigurationManager.ConnectionStrings["MyConnection"].ConnectionString;

        SqlConnection sqlConn = new SqlConnection(conString);

        try
        {

            SqlCommand sqlCmd = new SqlCommand("DeleteUser", sqlConn);

            sqlCmd.CommandType = CommandType.StoredProcedure;

            sqlCmd.Parameters.AddWithValue("@id", Convert.ToInt32(args.Trim()));

            sqlConn.Open();

            sqlCmd.ExecuteNonQuery();

        }
        catch
        {
            //Handle Exception
        }
        finally
        {
            sqlConn.Close();
        }

    }

 
Now Here is the JQuery code sample

JQuery Delete function

If you wun the application and click on any delete image it will ask the confirmation like below image and if you say yes it will delete the omage from the UI and Database

Hope this will help all. You can also donwload the sample application by licking the below download link

Cheers
Pankaj!!!