CRUD Using JQuery and Ajax in ASP.NET Webform

Mar 16 2021 3:29 PM

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" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Crud Ajax</title>
<style type="text/css">
body
{
font-family: Arial;
font-size: 10pt;
}
</style>
</head>
<body>
<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>
</body>
</html>

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.

Answers (3)

Jquery return value undefine

WebApi- The remote server returned an error: (405) Method Not Allowed.