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; }
}

Answers (4)

C# function example

C# function for below requirement.