AJAX Method Of jQuery AJAX In ASP.NET Web Forms | Learn ASP.NET Web Forms
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Threading;
using System.Data.SqlClient;
using System.Configuration;
using System.Data;
namespace ajax_method
{
public partial class WebForm1 : System.Web.UI.Page
{
static string cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static string Getdata(string uname,string surname)
{
//Thread.Sleep(2000); //Here, 2000 milliseconds = 2 seconds will delay
////Above Web service(OR Attribute) "[WebMethod]" is used to handle(OR serve) ajax request
//return "Your name is : " + uname + " and Your surname is : " + surname;
SqlConnection con = new SqlConnection(cs);
string query = "insert into person values(@uname,@surname)";
SqlCommand cmd = new SqlCommand(query,con);
cmd.Parameters.AddWithValue("@uname",uname);
cmd.Parameters.AddWithValue("@surname",surname);
con.Open();
int a = cmd.ExecuteNonQuery();
con.Close();
if (a > 0)
{
Thread.Sleep(3000);
return "Data has been Inserted Successfully.";
}
else
{
return "Data Insertion Failed.";
}
}
}
}
Above File is ajax_method\WebForm1.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="ajax_method.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
#loader {
display:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="text" placeholder="Enter your name" id="uname" value=""/>
<br/><br/>
<input type="text" placeholder="Enter your surname" id="surname"/>
<br/><br/>
<input type="button" value="Submit" id="btn"/>
<br/>
<h2 id="result"></h2>
<div id="loader">
<img src="images/loading.gif" height="100" width="100" alt="Alternate Text"/>
</div>
</div>
</form>
<script src="scripts/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
$("#btn").click(function () {
var uname = $("#uname").val();
var surname = $("#surname").val();
if (uname == "" || surname == "")
{
alert("All fields are required..");
}
else
{
$.ajax({
url: "WebForm1.aspx/Getdata",
type: "post",
contentType: "application/json",
data: JSON.stringify({ uname: uname, surname: surname }),
dataType: "json",
beforeSend: function () {
//$("#loader").show();
$("#result").text("Loading..");
},
success: function (result, status, xhr) {
$("#result").text(result.d);
//$("#loader").hide();
//alert(status);
//alert(xhr);
},
error: function (xhr, status, result) {
alert(xhr);
alert(status);
$("#result").text(result.d);
},
complete: function (xhr, status) {
//alert(status);
},
//if request is success then first "success" will run then after "complete" will run
//and if request is fail then first "error" will run then after "complete" will run
});
}
});
});
</script>
</body>
</html>
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Comments
Post a Comment