在现代网络应用开发中，AJAX（Asynchronous JavaScript and XML）技术被广泛用于实现无刷新页面数据交互，结合ASP.NET框架，开发者可以便捷地从数据库获取数据并动态更新网页内容，而无需重新加载整个页面，本文将详细介绍如何使用ASP.NET和AJAX来获取数据库数据。
准备工作
1.1 创建ASP.NET Web项目
我们需要创建一个ASP.NET Web项目，打开Visual Studio，选择“新建项目”，然后选择“ASP.NET Web应用程序（.NET Framework）”，在模板选择界面，可以选择“空”模板，以便从头开始构建我们的应用程序。
1.2 配置数据库连接
需要配置数据库连接，在Web.config文件中添加数据库连接字符串：
<connectionStrings>
<add name="MyDBConnectionString" connectionString="Data Source=服务器地址;Initial Catalog=数据库名;User ID=用户名;Password=密码" providerName="System.Data.SqlClient" />
</connectionStrings> 确保使用正确的数据库连接信息替换示例中的占位符。
创建数据库表和数据
假设我们有一个名为Products的表，包含以下字段：ID,Name,Price，可以使用SQL语句创建这个表并插入一些初始数据：
CREATE TABLE Products (
ID INT PRIMARY KEY,
Name NVARCHAR(50),
Price DECIMAL(18, 2)
);
INSERT INTO Products (ID, Name, Price) VALUES (1, 'Product A', 10.00);
INSERT INTO Products (ID, Name, Price) VALUES (2, 'Product B', 20.00);
INSERT INTO Products (ID, Name, Price) VALUES (3, 'Product C', 30.00); 创建ASP.NET后台代码
3.1 创建数据访问层
在项目中创建一个类文件，命名为ProductService.cs，用于处理数据库操作：
using System;
using System.Collections.Generic;
using System.Data.SqlClient;
using System.Configuration;
public class ProductService
{
public List<Product> GetAllProducts()
{
List<Product> products = new List<Product>();
string connectionString = ConfigurationManager.ConnectionStrings["MyDBConnectionString"].ConnectionString;
using (SqlConnection connection = new SqlConnection(connectionString))
{
connection.Open();
string query = "SELECT * FROM Products";
SqlCommand command = new SqlCommand(query, connection);
SqlDataReader reader = command.ExecuteReader();
while (reader.Read())
{
products.Add(new Product
{
ID = reader.GetInt32(0),
Name = reader.GetString(1),
Price = reader.GetDecimal(2)
});
}
}
return products;
}
}
public class Product
{
public int ID { get; set; }
public string Name { get; set; }
public decimal Price { get; set; }
} 3.2 创建控制器方法
在Controllers文件夹下创建一个新的控制器文件，命名为ProductController.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Script.Serialization;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
public class ProductController : Controller
{
[HttpPost]
public ActionResult GetProducts(string term)
{
ProductService productService = new ProductService();
List<Product> products = productService.GetAllProducts();
var json = new JavaScriptSerializer().Serialize(products);
return Content(json, "application/json");
}
} 这个方法将从数据库中获取所有产品数据，并将其序列化为JSON格式返回给客户端。
创建前端页面和AJAX请求
4.1 创建视图页面
在Views文件夹下创建一个新的视图页面，命名为Index.cshtml：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>产品列表</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>产品列表</h1>
<table id="productTable">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "POST",
url: "/Product/GetProducts",
success: function (data) {
for (var i = 0; i < data.length; i++) {
$('#productTable tbody').append('<tr><td>' + data[i].ID + '</td><td>' + data[i].Name + '</td><td>' + data[i].Price + '</td></tr>');
}
},
error: function () {
alert("Error loading data!");
}
});
});
</script>
</body>
</html> 在这个视图页面中，我们使用jQuery发起一个AJAX请求到/Product/GetProducts，并在成功获取数据后将其动态添加到表格中。
运行和测试
启动项目，访问http://localhost:端口号/Product/Index，应该能够看到产品列表被正确显示在页面上，如果有任何错误，请检查控制台输出以进行调试。
相关问答FAQs
问题1：如何更改数据库连接字符串？
答：要更改数据库连接字符串，请打开项目的Web.config文件，找到<connectionStrings>部分，修改或添加新的连接字符串项。
<connectionStrings>
<add name="MyDBConnectionString" connectionString="Data Source=新的服务器地址;Initial Catalog=新的数据库名;User ID=新的用户名;Password=新密码" providerName="System.Data.SqlClient" />
</connectionStrings> 确保使用正确的数据库连接信息替换示例中的占位符。
问题2：如何处理AJAX请求失败的情况？
答：可以在AJAX请求的error回调函数中处理失败情况，可以在error回调函数中显示一个错误消息或执行其他错误处理逻辑：
$.ajax({
type: "POST",
url: "/Product/GetProducts",
success: function (data) {
for (var i = 0; i < data.length; i++) {
$('#productTable tbody').append('<tr><td>' + data[i].ID + '</td><td>' + data[i].Name + '</td><td>' + data[i].Price + '</td></tr>');
}
},
error: function () {
alert("Error loading data!");
}
}); 到此，以上就是小编对于“asp.net ajax获取数据库数据”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。
原创文章，作者：未希，如若转载，请注明出处：https://www.kdun.com/ask/1362632.html
本网站发布或转载的文章及图片均来自网络，其原创性以及文中表达的观点和判断不代表本网站。如有问题，请联系客服处理。
发表回复