Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
Physical Address
304 North Cardinal St.
Dorchester Center, MA 02124
AJAX (Asynchronous JavaScript and XML) is a powerful technology that allows web applications to send and receive data from the server asynchronously, without requiring a full page reload. In the context of ASP.NET, AJAX plays a crucial role in enhancing the user experience by providing smoother and more responsive web applications. In this article, we will explore the basics of AJAX in ASP.NET and provide practical examples to illustrate its usage.
Before diving into AJAX examples, make sure you have an ASP.NET project ready. You can create a new ASP.NET Web Forms or MVC project in Visual Studio or use an existing one.
Example 1: Updating Content Without Page Reload
Let’s start with a simple example of using AJAX to update content on a page without a full page reload. Suppose you have a button and a label on your ASP.NET page, and you want to update the label’s text when the button is clicked without refreshing the entire page.
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="YourNamespace._Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>AJAX ASP.NET Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#updateButton").click(function () {
$.ajax({
type: "GET",
url: "Default.aspx/GetUpdatedText",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#resultLabel").text(data.d);
},
error: function () {
alert("An error occurred while processing your request.");
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<button id="updateButton">Update Content</button>
<br />
<label id="resultLabel">Original Text</label>
</div>
</form>
</body>
</html>
using System.Web.Services;
namespace YourNamespace
{
public partial class _Default : System.Web.UI.Page
{
[WebMethod]
public static string GetUpdatedText()
{
return "Updated Text!";
}
}
}
This example demonstrates how to use AJAX to call a server-side method (GetUpdatedText
) without reloading the entire page and update the label’s text dynamically.
Example 2: AutoComplete Feature
Now, let’s explore a more practical example by implementing an AutoComplete feature using AJAX in ASP.NET.
<!-- Similar head section as Example 1 -->
<body>
<form id="form1" runat="server">
<div>
<label for="txtSearch">Search:</label>
<input type="text" id="txtSearch" />
<div id="autoCompleteResults" style="display: none; border: 1px solid #ccc;"></div>
</div>
</form>
</body>
</html>
$(document).ready(function () {
$("#txtSearch").keyup(function () {
var searchText = $(this).val();
if (searchText.length >= 3) {
$.ajax({
type: "GET",
url: "Default.aspx/GetAutoCompleteResults",
data: { searchText: searchText },
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
displayAutoCompleteResults(data.d);
},
error: function () {
alert("An error occurred while processing your request.");
}
});
} else {
$("#autoCompleteResults").hide();
}
});
function displayAutoCompleteResults(results) {
var autoCompleteDiv = $("#autoCompleteResults");
autoCompleteDiv.empty();
if (results.length > 0) {
for (var i = 0; i < results.length; i++) {
autoCompleteDiv.append("<div>" + results[i] + "</div>");
}
autoCompleteDiv.show();
} else {
autoCompleteDiv.hide();
}
}
});
[WebMethod]
public static List<string> GetAutoCompleteResults(string searchText)
{
// Replace this with your data retrieval logic (e.g., querying a database)
List<string> results = new List<string>
{
"Result 1",
"Result 2",
"Result 3"
};
// Simulate a delay to showcase asynchronous behavior
System.Threading.Thread.Sleep(1000);
return results.Where(r => r.Contains(searchText)).ToList();
}
This example demonstrates how to implement an AutoComplete feature using AJAX in ASP.NET, providing real-time suggestions based on user input.
AJAX in ASP.NET empowers developers to create more interactive and responsive web applications. By sending and receiving data asynchronously, you can enhance the user experience and reduce the need for full page reloads. The examples provided here illustrate the fundamental concepts of AJAX in ASP.NET, showcasing its versatility in updating content and implementing dynamic features like AutoComplete. Experiment with these examples to deepen your understanding and apply AJAX to your own ASP.NET projects.