ASP.NET Web Form中JavaScript表单提交至控制器失效求助

我试过各种方法、查了不少资料，还是解决不了ASP.NET Web Form里用JavaScript提交表单向控制器传搜索数据的问题。浏览器调试时JS没报错，求有经验的开发者针对我的代码给优化方案。另外，我已经自己解决了部分问题，现在想知道怎么把控制器返回的列表传递给PartialView。

控制器代码 #

public IActionResult FindProduct(string keyword)
{
    List<Product> ls = new List<Product>();
    if (string.IsNullOrEmpty(keyword) || keyword.Length < 1)
    {
        return PartialView("ListProductSearchPartial", null);
    }
    ls = _context.Products
        .AsNoTracking()
        .Include(a => a.Cat)
        .Where(x => x.ProductName.Contains(keyword))
        .OrderByDescending(x => x.ProductName)
        .Take(10)
        .ToList();
    if (ls == null)
    {
        return PartialView("ListProductSearchPartial", null);
    }
    else
    {
        return PartialView("ListProductSearchPartial", ls);
    }
}

视图中的搜索表单 #

<form id="formSearch" class="header-searchbox">
    <select class="nice-select select-search-category wide">
        <option value="all">All Category</option>
        <option value="product-item">Product Item</option>
        <option value="product-item-2">Product Item 02</option>
        <option value="product-item-3">Product Item 03</option>
        <option value="product-item-4">Product Item 04</option>
        <option value="product-item-5">Product Item 05</option>
    </select>
    <input id="keyword" class="input-field" type="text" placeholder="Enter Products">
    <button id="btnSearch" class="btn btn-outline-whisper btn-primary-hover" type="submit"><i class="pe-7s-search"></i></button>
</form>

视图中的JavaScript代码 #

@section Scripts {
    <script>
        $(document).ready(function () {
            var formSP = document.getElementById("formSearch");
            formSP.addEventListener("submit", (e) => {
                $.ajax({
                    url: '@Url.Action("FindProduct", "Search")',
                    datatype: "json",
                    type: "POST",
                    data: { keyword: $('#keyword').val() },
                    async: true,
                    success: function (results) {
                        $('#records_table').html("");
                        $('#records_table').html(results);
                    },
                    error: function (xhr) {
                        alert('error');
                    }
                });
            });
        });
    </script>
}

问题排查与代码优化 #

1. 阻止表单默认提交行为
   当前JS未阻止表单默认提交，会导致页面刷新中断AJAX请求，必须添加e.preventDefault()：

   formSP.addEventListener("submit", (e) => {
       e.preventDefault(); // 新增此行阻止默认跳转
       // 后续AJAX代码
   });
   

2. 修正AJAX数据类型配置
   控制器返回的是PartialView（HTML内容），但配置了datatype: "json"会导致解析错误，删除该配置或改为datatype: "html"：

   $.ajax({
       url: '@Url.Action("FindProduct", "Search")',
       type: "POST",
       data: { keyword: $('#keyword').val() },
       // 移除datatype: "json"或改为datatype: "html"
       success: function (results) {
           $('#records_table').html(results); // 无需先清空，直接覆盖即可
       },
       error: function (xhr) {
           console.log(xhr.responseText); // 替换alert，打印具体错误信息便于排查
       }
   });
   

3. 控制器代码简化
   LINQ的ToList()不会返回null，最多是空列表，可简化判断逻辑：

   public IActionResult FindProduct(string keyword)
   {
       if (string.IsNullOrWhiteSpace(keyword))
       {
           return PartialView("ListProductSearchPartial", Enumerable.Empty<Product>());
       }
       var productList = _context.Products
           .AsNoTracking()
           .Include(a => a.Cat)
           .Where(x => x.ProductName.Contains(keyword))
           .OrderByDescending(x => x.ProductName)
           .Take(10)
           .ToList();
       return PartialView("ListProductSearchPartial", productList);
   }
   

控制器返回列表到PartialView的实现要点 #

1. PartialView声明强类型模型
   在ListProductSearchPartial.cshtml顶部指定模型类型：

   @model IEnumerable<Product>
   

2. 处理空数据场景
   在PartialView中添加空数据提示，提升用户体验：

   @if (!Model.Any())
   {
       <div class="no-result">未找到匹配的产品</div>
   }
   else
   {
       <div class="product-list">
           @foreach (var product in Model)
           {
               <div class="product-item">
                   <h4>@product.ProductName</h4>
                   <p>分类：@product.Cat.CategoryName</p>
               </div>
           }
       </div>
   }
   

3. 确保目标容器存在
   主视图中必须包含接收PartialView内容的容器：

   <div id="records_table"></div>
   

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