jQuery AJAX in ASP.NET
Ajax (Asynchronous JavaScript and XML) is a technique that makes a web page highly responsive because it allows asynchronous requests to be made back to the server without the need to reload pages. By using jQuery we can get the response from server through AJAX without page refresh easily.
To use the AJAX through jQuery we have to use jquery framework file. For example we are providing the addition of two numbers form which calls the backend server page through AJAX without page refresh as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery AJAX Example</title>
<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#btn').click(function ()
{
var num1 = $('#txt1').val();
var num2 = $('#txt2').val();
var data = 'num1=' + num1 + '&num2=' + num2;
$.ajax({
type:"POST",
url:"Addition.aspx",
data: data,
success: function (html) {
$('#txt3').val(html);
}
});
return false;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Addition of two numbers</h1>
Enter First Number<asp:TextBox ID="txt1" runat="server"></asp:TextBox><br />
Enter Second Number<asp:TextBox ID="txt2" runat="server"></asp:TextBox><br />
<asp:Button ID="btn" Text="Add" runat="server" /><br />
Addition of two numbers<asp:TextBox ID="txt3" runat="server"></asp:TextBox><br />
</div>
</form>
</body>
</html>
Here the backend page is Addition.aspx which calls the addition of two numbers. We are providing the two numbers through POST method. The Addition.aspx page is as shown below.
<%@ Page Language="C#" %>
<script runat="server">
protected void Page_Load(object sender, EventArgs e)
{
int num1 = 0, num2 = 0;
if(!string.IsNullOrEmpty(Request.Form["num1"]) && !string.IsNullOrEmpty(Request.Form["num2"]))
{
num1 = Convert.ToInt32(Request.Form["num1"]);
num2 = Convert.ToInt32(Request.Form["num2"]);
}
Response.Write((num1 + num2).ToString());
}
</script>
The output of the addition of two numbers through jQuery AJAX is as shown below.
