ASP.NET MVC中如何更新表格并刷新局部视图？

核心问题分析 #

• 尝试1的问题：点击submit按钮触发了form的默认提交行为，导致页面整体刷新，需阻止该默认行为。
• 尝试2的问题：Url.Action参数顺序错误（应为ActionName, ControllerName），未绑定点击事件，也未传递搜索参数。
• 尝试3的问题：缺少System.Web.Mvc命名空间引用，且未添加jquery.unobtrusive-ajax.js脚本引用。

修正方案（推荐jQuery Ajax方式） #

1. 调整HomeController方法（支持搜索筛选） #

给OnGetMyPartial添加搜索参数，用于数据筛选：

public HomeController() 
{
    Debug.WriteLine("HomeController - HomeController()");
    listHomeData = new List<HomeTableData>();
}

public IActionResult Index()
{
    Debug.WriteLine("HomeController - IActionResult Index()");
    return View("Home", listHomeData);
}

// 新增搜索参数，实现数据筛选逻辑
public PartialViewResult OnGetMyPartial(string searchText = "")
{
    Debug.WriteLine("HomeController - PartialViewResult OnGetMyPartial()");
    // 根据搜索文本筛选数据（替换成你的实际筛选逻辑）
    var filteredData = string.IsNullOrEmpty(searchText) 
        ? listHomeData 
        : listHomeData.Where(x => x.YourTargetProperty.Contains(searchText)).ToList();
    
    return PartialView("_HomeTablePartial", filteredData);
}

2. 修正主页视图（阻止默认提交+完善Ajax脚本） #

修改form标签阻止默认提交行为，同时编写正确的Ajax请求：

@using DCTS.Models
@model List<HomeTableData>
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Welcome Home</h2>
<p>The current time is: @DateTime.Now</p>
<!-- 添加onsubmit阻止form默认提交 -->
<form onsubmit="return false;">
    <input type="text" id="searchText" name="searchText">
    <input type="submit" id="btnSubmit" value="Search">
</form>
<div id="divHomeTable">
    <partial name="~/Views/Shared/_HomeTablePartial.cshtml" model="@Model" />
</div>

@section Scripts {
<script>
    $(function () {
        $('#btnSubmit').on('click', function () {
            var searchText = $('#searchText').val();
            var url = '@Url.Action("OnGetMyPartial", "Home")';
            
            // 发起Ajax请求加载筛选后的局部视图
            $.ajax({
                type: "GET", // 获取数据用GET更合适
                url: url,
                data: { searchText: searchText }, // 传递搜索参数
                dataType: "html",
                success: function (result) {
                    // 用返回的局部视图HTML替换目标div内容
                    $('#divHomeTable').html(result);
                },
                error: function (xhr, status, error) {
                    // 控制台输出错误信息，方便调试
                    console.log("请求错误：" + error);
                    console.log("服务器返回内容：" + xhr.responseText);
                }
            });
        });
    });
</script>
}

3. Unobtrusive Ajax方案（可选） #

如果想用Unobtrusive Ajax方式，需做以下调整：

• 在视图顶部添加命名空间引用：

  @using System.Web.Mvc
  

• 在_Layout中添加jquery.unobtrusive-ajax.js引用（安装NuGet包后，文件路径为~/lib/jquery-ajax-unobtrusive/dist/）：

  <script src="~/lib/jquery/dist/jquery.min.js"></script>
  <script src="~/lib/jquery-ajax-unobtrusive/dist/jquery.unobtrusive-ajax.min.js"></script>
  <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
  <script src="~/js/site.js" asp-append-version="true"></script>
  @await RenderSectionAsync("Scripts", required: false)
  

• 改用Ajax表单：

  @using System.Web.Mvc
  @model List<HomeTableData>
  @{
      Layout = "~/Views/Shared/_Layout.cshtml";
      AjaxOptions ajaxOptions = new AjaxOptions
      {
          HttpMethod = "GET",
          InsertionMode = InsertionMode.Replace,
          UpdateTargetId = "divHomeTable", // 注意ID大小写要和目标div一致
          LoadingElementId = "loading" // 可选：添加加载提示
      };
  }
  <h2>Welcome Home</h2>
  <p>The current time is: @DateTime.Now</p>
  
  @using (Ajax.BeginForm("OnGetMyPartial", "Home", ajaxOptions))
  {
      <input type="text" id="searchText" name="searchText">
      <input type="submit" id="btnSubmit" value="Search">
  }
  <div id="divHomeTable">
      <partial name="~/Views/Shared/_HomeTablePartial.cshtml" model="@Model" />
  </div>
  <!-- 可选加载提示 -->
  <div id="loading" style="display:none;">加载中...</div>
  

关键注意事项 #

• 必须阻止form的默认提交行为，否则会触发页面整体刷新。
• Url.Action参数顺序为ActionName, ControllerName，不可写反。
• 调试Ajax错误时，优先查看控制台的错误详情，比alert更直观。
• 确保局部视图_HomeTablePartial.cshtml的模型类型与控制器返回的一致（List<HomeTableData>）。

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