In this tutorial, we will set up our ASP.NET web page to execute an AJAX call. We will also see how to set the default AJAX properties.
First Create New ASP.NET Website and add an HTML file Content.html in the project and add the following contents:
<!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>
<title></title>
</head>
<body>
<table cellpadding="3" border="1" cellspacing="3" id="box-table-a">
<tr>
<td>
Name
</td>
<td>
City
</td>
<td>
Roll No
</td>
</tr>
<tr>
<td>
Kisan
</td>
<td>
Ahmedabad
</td>
<td>
54
</td>
</tr>
<tr>
<td>
Devang
</td>
<td>
Gandhinagar
</td>
<td>
74
</td>
</tr>
<tr>
<td>
Ravi
</td>
<td>
Ladol
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Ujas
</td>
<td>
Vijapur
</td>
<td>
72
</td>
</tr>
</table>
</body>
</html>
Now add a New Asp.Net Page called Default.aspx and add below code. In below code we have add one button to call ajax request.
<form id="form1" runat="server">
<div id="contentArea">
<asp:Button ID="btnSubmit" runat="server" Text="Click Here" />
</div>
</form>
In this demo, When the button is clicked, we will retrieve the contents of the HTML file using AJAX and display it on the page.
Now add below script into Default.aspx
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$.ajaxSetup({
cache: false,
dataType: "html",
error: function (xhr, status, error) {
alert('An error occurred: ' + error);
},
timeout: 30000,
type: "GET",
beforeSend: function () {
console.log('In Ajax beforeSend function');
},
complete: function () {
console.log('In Ajax complete function');
}
});
$("#btnSubmit").click(function (e) {
e.preventDefault();
$.ajax({
url: "Content.htm",
success: function (data) {
$("#contentArea").html("").append(data);
}
});
});
});
</script>
Demo
0 comments:
Post a Comment