当前位置：首页 > 行业动态 > 正文

如何利用ASP.NET AJAX技术显示数据库中的数据？

admin
行业动态
2024-11-27
4

asp.net ajax可以通过updatepanel和scriptmanager实现无刷新显示数据库中的数据。

在现代Web开发中，通过ASP.NET结合Ajax来动态显示数据库中的数据是一种非常常见的做法，这种方式不仅能够提升用户体验，还可以使网页更加互动和响应迅速，下面将详细介绍如何使用ASP.NET和Ajax来实现这一功能。

一、准备工作

1、创建ASP.NET项目：需要创建一个ASP.NET Web应用程序项目，可以使用Visual Studio或者任何其他支持ASP.NET的开发工具。

2、添加数据库连接字符串：在项目的配置文件（如Web.config）中添加数据库连接字符串，使用SQL Server数据库的连接字符串如下：

   <connectionStrings>
     <add name="ConnStringDb1" connectionString="Data Source=(localdb)MSSQLLocalDB;Initial Catalog=DatabaseName;Integrated Security=True" providerName="System.Data.SqlClient" />
   </connectionStrings>

3、创建数据表：在数据库中创建一个示例数据表，创建一个名为Employee的表，包含以下字段：EmpId、EmpName、Age、Salary。

二、后端代码实现

1、定义模型类：在项目中定义一个与数据库表对应的模型类。

   public class EmployeeModel
   {
       public int EmpId { get; set; }
       public string EmpName { get; set; }
       public int Age { get; set; }
       public int Salary { get; set; }
   }

2、控制器方法：在控制器中编写一个方法，用于从数据库中获取数据并返回JSON格式的数据。

   using System.Collections.Generic;
   using System.Web.Mvc;
   using System.Configuration;
   using System.Data.SqlClient;
   public class HomeController : Controller
   {
       private static readonly string connectionString = ConfigurationManager.ConnectionStrings["ConnStringDb1"].ConnectionString;
       public ActionResult GetUser()
       {
           return View();
       }
       public JsonResult GetAllUser(int EmpId)
       {
           List<EmployeeModel> employee = new List<EmployeeModel>();
           string query = "Select * From Employee";
           using (SqlConnection connection = new SqlConnection(connectionString))
           {
               using (SqlCommand cmd = new SqlCommand(query, connection))
               {
                   connection.Open();
                   SqlDataReader reader = cmd.ExecuteReader();
                   while (reader.Read())
                   {
                       employee.Add(new EmployeeModel
                            {
                                EmpId = int.Parse(reader["EmpId"].ToString()),
                                EmpName = reader.GetValue(0).ToString(),
                                Age = int.Parse(reader["Age"].ToString()),
                                Salary = int.Parse(reader["Salary"].ToString())
                            });
                   }
               }
           }
           return Json(employee, JsonRequestBehavior.AllowGet);
       }
   }

三、前端代码实现

1、HTML页面：创建一个HTML页面，其中包含一个按钮用于触发Ajax请求，以及一个表格用于显示数据。

   <!DOCTYPE html>
   <html lang="en">
   <head runat="server">
       <meta charset="UTF-8">
       <title>通过AJAX获取数据列表</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   </head>
   <body>
       <button id="btnLoad">加载数据</button>
       <table >
           <thead>
               <tr  >
                   <th>EmpId</th>
                   <th>EmpName</th>
                   <th>Age</th>
                   <th>Salary</th>
               </tr>
           </thead>
           <tbody></tbody>
       </table>
       <script type="text/javascript">
           $(document).ready(function () {
               $("#btnLoad").click(function () {
                   GetEmployeeUsingAjax();
               });
           });
           function GetEmployeeUsingAjax() {
               var EmpId = 2; // 可以根据需要修改或动态获取
               $.ajax({
                   type: 'GET',
                   url: '@Url.Action("GetAllUser")',
                   data: { "EmpId": EmpId },
                   dataType: 'json',
                   success: function (data) {
                       $.each(data, function (i, item) {
                           var rows = "<tr>"
                                   + "<td>" + item.EmpId + "</td>"
                                   + "<td>" + item.EmpName + "</td>"
                                   + "<td>" + item.Age + "</td>"
                                   + "<td>" + item.Salary + "</td>"
                                   + "</tr>";
                           $('#tblProducts tbody').append(rows);
                       });
                   },
                   error: function (emp) {
                       alert('error');
                   }
               });
           }
       </script>
   </body>
   </html>