在開發(fā)Web應用程序時，經(jīng)常會涉及到與數(shù)據(jù)庫進行交互的操作，如數(shù)據(jù)的查詢、插入、更新和刪除。ASP.NET是一種常見的Web開發(fā)技術，而Ajax是一種實現(xiàn)異步通信的技術，可以在不刷新整個頁面的情況下更新局部內容。結合ASP.NET和Ajax，我們可以實現(xiàn)強大的數(shù)據(jù)庫查詢功能，提升用戶體驗。
以一個在線圖書館系統(tǒng)為例，我們需要實現(xiàn)一個功能，即根據(jù)用戶輸入的關鍵詞查詢圖書的相關信息，并動態(tài)顯示在頁面上。用戶在搜索框中輸入關鍵詞后，系統(tǒng)將通過Ajax發(fā)起異步請求，將關鍵詞傳遞給后臺處理。后臺通過查詢數(shù)據(jù)庫，獲取相關圖書信息，并將結果以JSON格式返回給前端。前端利用接收到的數(shù)據(jù)動態(tài)更新頁面內容，顯示圖書的相關信息。
首先，我們需要在ASP.NET頁面中引入相關的命名空間和引用庫。在頁面的頭部添加以下代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="SearchBooks.aspx.cs" Inherits="SearchBooks" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>圖書搜索</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script src="https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js"></script>
</head>
<body>接下來，我們需要在頁面中創(chuàng)建一個輸入框和一個按鈕，用于用戶輸入關鍵詞并提交查詢請求。在頁面的body部分添加以下代碼：
<input type="text" id="txtKeyword" />
<input type="button" value="搜索" onclick="searchBooks()" />然后，我們在頁面的JavaScript部分實現(xiàn)searchBooks函數(shù)，用于發(fā)起Ajax請求并處理返回結果。在頁面的body末尾添加以下代碼：
<script>
function searchBooks() {
var keyword = $("#txtKeyword").val();
axios.get("SearchBooks.aspx?keyword=" + keyword)
.then(function (response) {
var data = response.data;
if (data.length >0) {
// 遍歷返回的數(shù)據(jù)，動態(tài)添加到頁面中
for (var i = 0; i < data.length; i++) {
var book = data[i];
$("#results").append("<div>" + book.Title + " - " + book.Author + "</div>");
}
} else {
Swal.fire("未找到相關圖書");
}
})
.catch(function (error) {
console.error(error);
});
}
</script>在上述代碼中，我們使用了jQuery和Axios庫進行Ajax操作。在搜索按鈕點擊事件中，我們使用Axios的get方法發(fā)送一個GET請求，請求的URL為SearchBooks.aspx，同時將用戶輸入的關鍵詞作為參數(shù)傳遞給后臺。后臺會根據(jù)關鍵詞查詢數(shù)據(jù)庫，并將結果以JSON格式返回給前端。前端通過response.data獲取到返回的數(shù)據(jù)，如果數(shù)據(jù)長度大于0，則遍歷數(shù)據(jù)并動態(tài)添加到頁面指定的容器中。如果數(shù)據(jù)長度為0，則彈出提示框提示用戶未找到相關圖書。
最后，我們需要在SearchBooks.aspx.cs文件中編寫后臺代碼，實現(xiàn)根據(jù)關鍵詞查詢數(shù)據(jù)庫的功能。在SearchBooks.aspx.cs文件的Page_Load方法中添加以下代碼：
protected void Page_Load(object sender, EventArgs e)
{
string keyword = Request.QueryString["keyword"];
if (!string.IsNullOrEmpty(keyword))
{
// 連接數(shù)據(jù)庫，查詢相關圖書信息
string connectionString = "Data Source=localhost;Initial Catalog=Library;Integrated Security=True";
using (SqlConnection connection = new SqlConnection(connectionString))
{
connection.Open();
string query = "SELECT * FROM Books WHERE Title LIKE @keyword OR Author LIKE @keyword";
SqlCommand command = new SqlCommand(query, connection);
command.Parameters.AddWithValue("@keyword", "%" + keyword + "%");
using (SqlDataReader reader = command.ExecuteReader())
{
List<Book> books = new List<Book>();
while (reader.Read())
{
Book book = new Book();
book.Title = reader["Title"].ToString();
book.Author = reader["Author"].ToString();
books.Add(book);
}
Response.Write(JsonConvert.SerializeObject(books));
}
}
}
}在上述代碼中，我們首先通過Request.QueryString獲取到前端傳遞的關鍵詞。然后，我們連接數(shù)據(jù)庫并使用參數(shù)化查詢的方式，根據(jù)關鍵詞查詢相關圖書信息。查詢到的結果以List<Book>的形式保存，在使用JsonConvert.SerializeObject方法將結果轉換為JSON字符串后，使用Response.Write方法將結果返回給前端。
綜上所述，通過ASP.NET結合Ajax的方式，我們可以實現(xiàn)異步查詢數(shù)據(jù)庫并動態(tài)更新頁面內容的功能。用戶在輸入關鍵詞后，系統(tǒng)將查詢數(shù)據(jù)庫，并將結果以JSON格式返回給前端。前端利用接收到的數(shù)據(jù)動態(tài)更新頁面內容，實現(xiàn)了一個簡單的圖書搜索功能。