TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Tri Setia
1.3k
464
24.7k
CRUD Using Ajax on ASP.NET Webform
Mar 13 2021 4:11 PM
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"
%>
<!DOCTYPE html>
<html xmlns=
"http://www.w3.org/1999/xhtml"
>
<head runat=
"server"
>
<title></title>
<style type=
"text/css"
>
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<form id=
"form1"
runat=
"server"
>
<div align=
"center"
>
<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"
/>
</td>
</tr>
<tr>
<td></td>
<td>
<asp:Button ID=
"btnSave"
OnClick=
"btnSave_Click"
Text=
"Save"
runat=
"server"
/>
<asp:Button ID=
"btnUpdate"
Text=
"Update"
OnClick=
"btnUpdate_Click"
runat=
"server"
/>
<asp:Button ID=
"btnHapus"
Text=
"Hapus"
OnClick=
"btnHapus_Click"
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=
"user_name"
HeaderText=
"Username"
/>
<asp:BoundField DataField=
"password"
HeaderText=
"Password"
/>
</Columns>
</asp:GridView>
</div>
</form>
<script type=
"text/javascript"
src=
"assets/jquery.js"
></script>
<script type=
"text/javascript"
src=
"assets/json2.js"
></script>
<script type=
"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
;
}
});
</script>
<script type=
"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
;
});
</script>
<script type=
"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
;
});
</script>
</body>
</html>
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
; }
}
Reply
Answers (
4
)
C# function example
C# function for below requirement.