ASP.Net: Delete record from database using jQuery AJAX

trisetia302
 
on Mar 16, 2021 09:13 AM
2477 Views

I'm learn for CRUD using Jquery and Ajax in ASP.NET Webform but I'm stuck on delete and update function.

For the insert function working properly, but for delete and update function is not working.

l'll try hard find the error but I cannot find the error and cannot solve it.

This the crud_ajax.aspx

    <form id="form1" runat="server">
        <table border="0" cellpadding="0" cellspacing="0">
            <tr>
                <td>ID:
                </td>
                <td>
                    <asp:TextBox ID="txtID" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td>Username:
                </td>
                <td>
                    <asp:TextBox ID="txtUsername" runat="server" Text="" />
                </td>
            </tr>
            <tr>
                <td>Password:
                </td>
                <td>
                    <asp:TextBox ID="txtPassword" runat="server" TextMode="Password" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <asp:Button ID="btnSave" Text="Save" runat="server" />
                    <asp:Button ID="btnUpdate" Text="Update" runat="server" />
                    <asp:Button ID="btnDelete" Text="Delete" runat="server" />
                </td>
            </tr>
        </table>
        <hr />
        <asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
            HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2">
            <Columns>
                <asp:BoundField DataField="Username" HeaderText="Username" />
                <asp:BoundField DataField="Password" HeaderText="Password" />
            </Columns>
        </asp:GridView>
    </form>

    <script src="jquery.js"></script>
    <script src="json2.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "[id*=btnSave]",function () {
                
                var Username = $("[id*=txtUsername]");
                var Password = $("[id*=txtPassword]");
                $.ajax({
                    type: "POST",
                    url: "crud_ajax.aspx/SaveUser",
                    data: '{Username:"'+Username.val()+'",Password:"'+Password.val()+'"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("User has been added successfully.");
                        window.location.reload();
                    }
                });
                return false;
            });
        })
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click", "[id*=btnUpdate]",function () {
                var ID = $("[id*=txtID]");
                var Username = $("[id*=txtUsername]");
                var Password = $("[id*=txtPassword]");
                $.ajax({
                    type: "POST",
                    url: "crud_ajax.aspx/UpdateUser",
                    data: '{Username:"'+Username.val()+'",Password:"'+Password.val()+'",id:"'+ID.val()+'"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("User has been Update successfully.");
                        window.location.reload();
                    }
                });
                return false;
            });
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(document).on("click","[id*=btnDelete]",function () {
                var ID = $("[id*=txtID]");
                $.ajax({
                    type: "POST",
                    url: "crud_ajax.aspx/DeleteUser",
                    data: '{deleteUserID:"'+ID.val()+'"}',
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: function (response) {
                        alert("User has been Delete successfully.");
                        window.location.reload();
                    }
                });
                return false;
            });
        });
    </script>

This the code bihind crud_ajax.aspx.cs

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
            using (SqlConnection con = new SqlConnection(constr))
            {
                using (SqlCommand cmd = new SqlCommand("SELECT * FROM Users"))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter())
                    {
                        DataTable dt = new DataTable();
                        cmd.CommandType = CommandType.Text;
                        cmd.Connection = con;
                        sda.SelectCommand = cmd;
                        sda.Fill(dt);
                        gvUsers.DataSource = dt;
                        gvUsers.DataBind();
                    }
                }
            }
        }
    }

    [WebMethod]
    [ScriptMethod]
    public static void SaveUser(string Username, string Password)
    {
        string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("INSERT INTO Users(Username,Password) VALUES(@Username, @Password)"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@Username", Username);
                cmd.Parameters.AddWithValue("@Password", Password);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }

    [WebMethod]
    [ScriptMethod]
    public static void UpdateUser(string Username, string Password, int ID)
    {
        string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("Update Users SET Username=@Username,Password=@Password Where id=@id)"))
            {
                cmd.CommandType = CommandType.Text;
                cmd.Parameters.AddWithValue("@Username", Username);
                cmd.Parameters.AddWithValue("@Password", Password);
                cmd.Parameters.AddWithValue("@id", ID);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }

    [WebMethod]
    [ScriptMethod]
    public static void DeleteUser(int deleteUserID)
    {
        string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        using (SqlConnection con = new SqlConnection(constr))
        {
            using (SqlCommand cmd = new SqlCommand("DELETE FROM Users WHERE id = @id"))
            {
                cmd.Parameters.AddWithValue("@id", deleteUserID);
                cmd.Connection = con;
                con.Open();
                cmd.ExecuteNonQuery();
                con.Close();
            }
        }
    }

please help, any help I appreciate.

Download FREE API for Word, Excel and PDF in ASP.Net: Download
Andrea
 
on Mar 16, 2021 09:13 AM

Hi @trisetia302,

Please try the following

ASP.Net jQuery AJAX CRUD: Select Insert Edit Update and Delete in ASP.Net GridView using jQuery AJAX

It might help you.

Cheers Andrea.