ASP.NET MVC如何不刷新页面修改GridView数据并获取WebGrid值到文本框

1. WebGrid数据填充到文本框实现思路 #

• 给WebGrid的行绑定点击事件，或为每行添加独立编辑按钮，触发操作时读取当前行的字段值
• 两种数据读取方式可选：
  1. 直接读取单元格文本：点击行时按列索引读取对应<td>的内容，再赋值给对应文本框
  2. 绑定自定义数据属性：渲染WebGrid时把整行数据序列化后存在行的data-*属性中，点击时直接读取属性值，避免逐列读取的索引错位问题
• 前端示例代码：

// 绑定WebGrid行点击事件
$("#yourWebgridId tbody tr").on("click", function() {
  // 先移除其他行的选中标识，给当前行加选中类
  $("#yourWebgridId tbody tr").removeClass("selected");
  $(this).addClass("selected");
  // 逐列读取数据填充文本框，列索引按你实际的WebGrid列顺序调整
  $("#txtId").val($(this).find("td:eq(0)").text());
  $("#txtName").val($(this).find("td:eq(1)").text());
  $("#txtDesc").val($(this).find("td:eq(2)").text());
});

2. 无页面刷新提交修改实现思路 #

• 采用AJAX异步提交数据，避免表单同步提交的页面重载
• 前端流程：修改完文本框内容后点击保存按钮，阻止默认表单提交行为，组装所有文本框数据为请求参数，发送POST请求到后端更新接口
• 更新成功后直接修改WebGrid选中行的对应单元格内容，无需重新加载整个页面或重新请求WebGrid全量数据
• 前端示例代码：

$("#btnSave").on("click", function(e) {
  e.preventDefault();
  // 组装提交参数
  let reqData = {
    Id: $("#txtId").val(),
    Name: $("#txtName").val(),
    Desc: $("#txtDesc").val()
  };
  // 发送AJAX请求
  $.post("@Url.Action("UpdateData", "YourControllerName")", reqData, function(res) {
    if (res.success) {
      // 直接更新WebGrid选中行的内容
      $("tr.selected td:eq(1)").text(reqData.Name);
      $("tr.selected td:eq(2)").text(reqData.Desc);
      alert("修改成功");
    } else {
      alert("修改失败：" + res.message);
    }
  });
}

• 后端对应Action示例：

[HttpPost]
public ActionResult UpdateData(YourModel model)
{
    // 此处替换为你的实际业务更新逻辑
    bool updateResult = YourDbOperationMethod(model);
    return Json(new { success = updateResult, message = updateResult ? "" : "数据更新失败" });
}

内容的提问来源于stack exchange，提问作者Bhavesh pandey