CRUD Using Ajax on ASP.NET Webform

hi everyone i'm learn crud using jquery ajax in asp.net webform. i'm get problem with the update and delete function, the insert function working properly. why the update and delete not working.

any help would be appriciate.

this webform the crud_ajax.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="crud_ajax.aspx.cs" Inherits="api" Debug="true" %>
"http://www.w3.org/1999/xhtml">
"server">
"text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
"form1" runat="server">
"center">
"0" cellpadding="0" cellspacing="0">
ID:
"txtID" runat="server" Text="" />
Username:
"txtUsername" runat="server" Text="" />
Password:
"txtPassword" runat="server" />
"btnSave" OnClick="btnSave_Click" Text="Save" runat="server" />
"btnUpdate" Text="Update" OnClick="btnUpdate_Click" runat="server" />
"btnHapus" Text="Hapus" OnClick="btnHapus_Click" runat="server" />
"gvUsers" runat="server" AutoGenerateColumns="false" HeaderStyle-BackColor="#3AC0F2"
HeaderStyle-ForeColor="White" RowStyle-BackColor="#A1DCF2">
"user_name" HeaderText="Username" />
"password" HeaderText="Password" />

"text/javascript" src="assets/jquery.js">

"text/javascript" src="assets/json2.js">

"text/javascript">

$("[id*=btnSave]").click(function () {

{

var user = {};

user.Username = $("[id*=txtUsername]").val();

user.Password = $("[id*=txtPassword]").val();

$.ajax({

type: "POST",

url: "crud_ajax.aspx/SaveUser",

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

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

alert("User has been Update successfully.")

window.location.reload();

}

})

return false;

}

});

"text/javascript">

$("[id*=btnUpdate]").click(function () {

var _UpdateUser = {};

_UpdateUser.ID = $("[id*=txtID]").val();

_UpdateUser.Username = $("[id*=txtUsername]").val();

_UpdateUser.Password = $("[id*=txtPassword]").val();

$.ajax({

type: "POST",

url: "crud_ajax.aspx/UpdateUser",

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

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

alert("User has been Update successfully.")

window.location.reload();

});

return false;

});

"text/javascript">

$("[id*=btnHapus]").click(function (id) {

var _HapusUser = _HapusUser.id;

$.ajax({

type: "POST",

url: "crud_ajax.aspx/HapusUser",

data: "{'id':'" + idd + "'}",

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

alert("User has been Delete successfully.")

window.location.reload();

}

});

return false;

});

this is code bihind

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 api : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
showData();
}
}
public void showData()
{
string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("SELECT * FROM tbl_user"))
{
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(User user)
{
string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("INSERT INTO tbl_user VALUES(@Username, @Password)"))
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@Username", user.Username);
cmd.Parameters.AddWithValue("@Password", user.Password);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
[WebMethod]
[ScriptMethod]
public void UpdateUser(User _UpdateUser)
{
string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("Update tbl_user Set user_name=@Username, password=@Password where id=@id)"))
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@id", _UpdateUser.ID);
cmd.Parameters.AddWithValue("@Username", _UpdateUser.Username);
cmd.Parameters.AddWithValue("@Password", _UpdateUser.Password);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
[WebMethod]
[ScriptMethod]
public static void HapusUser(User _HapusUser)
{
string constr = ConfigurationManager.ConnectionStrings["db_tes"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("Delete From tbl_user where id=@id)"))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
cmd.Parameters.AddWithValue("@Password", _HapusUser.ID);
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
public class User
{
public Int32 ID { get; set; }
public string Username { get; set; }
public string Password { get; set; }
}

4 Replies

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

Kiran Mohanty5y ago
Accepted answer
Try updating "UpdateUser" method as static and then update should work.

For delete, try this
$("[id*=btnHapus]").click(function (id) {

var  hapusUser ={};

hapusUser.id = _HapusUser.id;



$.ajax({

type: "POST",

url: "crud_ajax.aspx/HapusUser",

data: JSON.Stringfy({_HapusUser: hapusUser}),

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (response) {

alert("User has been Delete successfully.")

window.location.reload();
+2
Tri Setia5y ago
@Jignesh Kumar
ok thanks for the link refrence sir..
+2
Tri Setia5y ago
@Kiran Mohanty
ok thanks for the answer,,
l'll try to learn again.
+1
Jignesh Kumar5y ago
Hi,

Please use this link which will help you,
https://www.c-sharpcorner.com/UploadFile/145c93/crud-operation-using-ajax-part-1/
https://www.c-sharpcorner.com/article/crud-operations-using/
+2