使用JQuery操作ASP.NET MVC实现数据更新与删除

本文主要探讨如何使用JQuery在ASP.NET MVC框架下实现数据的更新和删除功能。通过创建实体并与数据库交互，结合JQuery的Ajax方法，可以实现无刷新的前端操作，提高用户体验。 在ASP.NET MVC项目中，数据操作通常涉及到与数据库的交互。这里展示了两个关键的方法，`GetAllToolLocations`用于获取所有工具位置数据，`Update`和`Delete`则分别用于更新和删除特定的数据。 `GetAllToolLocations`方法使用了一个存储过程（usp_ToolLocation_GetAll）来获取所有`ToolLocation`实例。它设置连接字符串、清除参数列表，并执行存储过程，将返回的数据集转换为`ToolLocation`对象的列表。 ```csharp public IEnumerable<ToolLocation> GetAllToolLocations() { sp.ConnectionString = DB.ConnectionString; sp.Parameters = null; sp.ProcedureName = "usp_ToolLocation_GetAll"; DataTable dt = sp.ExecuteDataSet().Tables[0]; return dt.ToList<ToolLocation>(); } ``` 对于更新操作，`Update`方法接收一个`ToolLocation`对象作为参数，创建一个参数列表，然后调用存储过程（usp_ToolLocation_Update）来更新对应的数据。每个参数对应数据库表中的字段，例如`@ToolLocation_nbr`, `@LocationName`, `@Description`, 和 `@IsActive`。 ```csharp public void Update(ToolLocation tl) { List<Parameter> param = new List<Parameter>() { new Parameter("@ToolLocation_nbr", SqlDbType.SmallInt, 2, tl.ToolLocation_nbr), new Parameter("@LocationName", SqlDbType.NVarChar, -1, tl.LocationName), new Parameter("@Description", SqlDbType.NVarChar, -1, tl.Description), new Parameter("@IsActive", SqlDbType.Bit, 1, tl.IsActive) }; sp.ConnectionString = DB.ConnectionString; sp.Parameters = param; sp.ProcedureName = "usp_ToolLocation_Update"; sp.Execute(); } ``` 同样，`Delete`方法接收一个`ToolLocation`对象，构建参数列表，调用存储过程（usp_ToolLocation_Delete）来删除对应的记录。 ```csharp public void Delete(ToolLocation tl) { List<Parameter> param = new List<Parameter>() { new Parameter("@ToolLocation_nbr", SqlDbType.SmallInt, 2, tl.ToolLocation_nbr) }; sp.ConnectionString = DB.ConnectionString; sp.Parameters = param; sp.ProcedureName = "usp_ToolLocation_Delete"; sp.Execute(); } ``` 在前端，JQuery的Ajax方法可以被用来无刷新地发送HTTP请求到服务器执行这些操作。例如，使用`$.ajax`或`$.post`，传递必要的数据（如ID或其他标识符），并处理服务器返回的结果。这通常涉及监听表格中的编辑或删除按钮的点击事件，获取选中行的数据，然后调用Ajax方法。 ```javascript $("#tableId").on("click", ".editButton", function () { var toolLocationId = $(this).data('id'); // 发送更新请求 $.ajax({ url: "/Controller/Update", type: "POST", data: { id: toolLocationId, ... }, success: function (response) { // 更新成功后的处理，如刷新表格 }, error: function (xhr, status, error) { // 错误处理 } }); }); $("#tableId").on("click", ".deleteButton", function () { var toolLocationId = $(this).data('id'); // 发送删除请求 if (confirm("确定要删除吗？")) { $.ajax({ url: "/Controller/Delete", type: "POST", data: { id: toolLocationId }, success: function (response) { // 删除成功后的处理，如刷新表格 }, error: function (xhr, status, error) { // 错误处理 } }); } }); ``` 这样的实现方式使得用户能够在不离开当前页面的情况下，轻松地更新或删除数据，提高了Web应用的交互性和用户体验。同时，通过存储过程进行数据操作，可以更好地控制事务和安全性，降低代码维护的复杂性。