jquery+ajax+C#实现无刷新操作数据库数据的简单实例

下面我将为你详细讲解“jquery+ajax+C#实现无刷新操作数据库数据的简单实例”的完整攻略。

1. 准备工作

在开始前，你需要先准备好以下工作：

• 一台装有IIS、SQL Server等环境的Windows服务器。
• 一份C#项目，其中包含与数据库交互的代码。
• 一个HTML页面，用于调用Ajax和展示数据。

2. 实现步骤

2.1 配置Web.config文件

将下面的代码添加到Web.config文件中，配置数据库连接字符串。

<connectionStrings>
  <add name="ConnectionString" connectionString="Data Source=数据库服务器名称;Initial Catalog=数据库名称;User ID=用户名;Password=密码" providerName="System.Data.SqlClient" />
</connectionStrings>

2.2 编写C#代码实现数据操作

使用ADO.NET或其他ORM框架，编写C#代码实现对数据库数据的增删改查操作，并且通过Web API或其他方式，将这些操作暴露给外部调用。

举个例子，在下面的C#代码中，我们实现了一个用于获取用户信息的Web API接口。

[HttpGet]
public List<User> GetUsers()
{
    List<User> userList = new List<User>();
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("SELECT * FROM [User]", con);
        SqlDataReader dr = cmd.ExecuteReader();
        while (dr.Read())
        {
            User user = new User();
            user.ID = Convert.ToInt32(dr["ID"]);
            user.Name = dr["Name"].ToString();
            user.Age = Convert.ToInt32(dr["Age"]);
            user.Sex = dr["Sex"].ToString();
            userList.Add(user);
        }
    }
    return userList;
}

2.3 编写HTML页面

在HTML页面中，使用jQuery的Ajax方法调用步骤2.2中的Web API接口，实现无刷新操作数据库数据的效果。

2.3.1 引入jQuery库文件

在HTML文件中，引入jQuery库文件：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2.3.2 编写Ajax代码

使用下面的代码进行Ajax调用。

$.ajax({
  type: 'get',
  url: '/api/User/GetUsers',
  dataType: 'json',
  success: function (data) {
    // 在页面中展示数据
  },
  error: function (xhr, textStatus, errorThrown) {
    alert('数据获取失败');
  }
});

注：/api/User/GetUsers 是调用步骤2.2中Web API的URL。

2.3.3 在页面中展示数据

使用下面的代码将获取到的数据展示在页面中。

for (var i = 0; i < data.length; i++) {
  var user = data[i];
  var $row = $('<tr></tr>');
  $row.append($('<td></td>').text(user.ID));
  $row.append($('<td></td>').text(user.Name));
  $row.append($('<td></td>').text(user.Age));
  $row.append($('<td></td>').text(user.Sex));
  $('tbody').append($row);
}

注：以上代码为一个简单的示例，根据实际情况进行修改。

2.4 示例：实现删除数据的无刷新操作

以下是一个示例，演示了如何使用jQuery的Ajax方法实现对数据库数据的删除操作，且页面能够无刷新刷新展示最新数据。

2.4.1 HTML页面

在HTML页面中添加如下代码，实现删除按钮。

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
      <th>Sex</th>
      <th>Operation</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  $(function () {
    loadData();
  });

  function loadData() {
    $.ajax({
      type: 'get',
      url: '/api/User/GetUsers',
      dataType: 'json',
      success: function (data) {
        $('tbody').empty();
        for (var i = 0; i < data.length; i++) {
          var user = data[i];
          var $row = $('<tr></tr>');
          $row.append($('<td></td>').text(user.ID));
          $row.append($('<td></td>').text(user.Name));
          $row.append($('<td></td>').text(user.Age));
          $row.append($('<td></td>').text(user.Sex));
          $row.append($('<td></td>').html("<button onclick='deleteUser(" + user.ID + ")'>Delete</button>"));
          $('tbody').append($row);
        }
      },
      error: function (xhr, textStatus, errorThrown) {
        alert('数据获取失败');
      }
    });
  }

  function deleteUser(id) {
    if (confirm("你确定要删除吗？")) {
      $.ajax({
        type: "POST",
        url: "/api/User/DeleteUser",
        data: { id: id },
        success: function () {
          alert("删除成功");
          loadData();
        },
        error: function () {
          alert("删除失败");
        }
      });
    }
  }
</script>

注：以上代码中，给删除按钮添加了一个onclick事件，当用户点击删除按钮时，就会执行deleteUser函数。

2.4.2 C#代码

在C#代码中，添加如下代码实现删除用户的操作。

[HttpPost]
public IHttpActionResult DeleteUser(int id)
{
    using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ToString()))
    {
        con.Open();
        SqlCommand cmd = new SqlCommand("DELETE FROM [User] WHERE ID=@ID", con);
        cmd.Parameters.AddWithValue("@ID", id);
        cmd.ExecuteNonQuery();
    }
    return Ok();
}

注：以上代码中，我们通过HTTP POST的方式删除指定ID的用户。

3. 总结

以上就是完整的“jquery+ajax+C#实现无刷新操作数据库数据的简单实例”的攻略。总结一下，实现这种功能的关键在于Ajax的使用，可以实现无刷新操作数据库数据的效果。