CRUD Using JQuery and Ajax in ASP.NET Webform

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 can not find the error and can not solve it.

this the crud_ajax.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="crud_ajax.aspx.cs" Inherits="crud_ajax" %>
"http://www.w3.org/1999/xhtml">
"server">
Crud Ajax
"text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
"form1" runat="server">
"0" cellpadding="0" cellspacing="0">
ID:
"txtID" runat="server" Text="" />
Username:
"txtUsername" runat="server" Text="" />
Password:
"txtPassword" runat="server" TextMode="Password" />
"btnSave" Text="Save" runat="server" />
"btnUpdate" Text="Update" runat="server" />
"btnDelete" Text="Delete" runat="server" />
"gvUsers" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2">
"Username" HeaderText="Username" />
"Password" HeaderText="Password" />
"jquery.js">
"json2.js">
"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;
});
})
"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;
});
});
"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;
});
});

This the code bihind crud_ajax.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
using System.Web.Services;
using System.Web.Script.Services;
public partial class crud_ajax : System.Web.UI.Page
{
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.

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Tri Setia5y ago
@Rijwan Ansari ok l will try it. thanks for the answer.
0
Rijwan Ansari5y ago
For update I have observed ID.
data: '{Username:"'+Username.val()+'",Password:"'+Password.val()+'",ID:'+ID.val()+'}',
Parameter with ID instead of id and also remove "".
same in delete
data: '{deleteUserID:'+ID.val()+'}',
remove ""
Try and let me know
0
Rijwan Ansari5y ago
check this link with sample:

https://www.aspsnippets.com/Articles/ASPNet-jQuery-AJAX-CRUD-Select-Insert-Edit-Update-and-Delete-in-ASPNet-GridView-using-jQuery-AJAX.aspx
+1