在 Ajax.BeginForm 中传递 UpdateTargetId 不替换目标

Posted 2023-03-05

【中文标题】在 Ajax.BeginForm 中传递 UpdateTargetId 不替换目标

【英文标题】：Passing UpdateTargetId in Ajax.BeginForm not replacing the target

【发布时间】：2017-01-05 20:39:50

【问题描述】：

在 Ajax.BeginForm 中，即使我指定了作为我的部分视图的 targetId，它也正在替换完整视图。我错过了什么吗？

ProductList.cshtml

<div class="form-style-1" style="float:left">
           @using (Ajax.BeginForm("SearchProducts", "Product", new AjaxOptions()
           
           HttpMethod="POST",
           InsertionMode = System.Web.Mvc.Ajax.InsertionMode.Replace,
           UpdateTargetId = "product-list-container"
           ))
           
           <form>
              <input name="SearchText" id="SearchText" class="field-divided" style="width: 300px;" type="text" />
              <input type="submit" value="Search" class="myButton" />
           </form>
           
        </div>@Html.Partial("ListPartialView", Model)


ListPartialView.cshtml - 

<div id="product-list-container">
    @foreach (var product in Model)
    
        <div class="product_box margin_r40">
            <div class="thumb_wrapper"><a><img src="@Url.Content(@product.ImagePath)"  /></a></div>
            <h3>@product.ProductName</h3>
            <p>@product.Description</p>
        </div>
    
    <div class="button_01"><a href="#">View All</a></div>
    <div class="cleaner"></div>
</div>

SearchProducts - 控制器操作

[HttpPost]
        public ActionResult SearchProducts()
        
            var searchTxt = Request.Form["SearchText"];                                                
            IEnumerable<Product> searchedProducts = (from p in dal.Products
                                                     where p.ProductName.Contains(searchTxt) ||
                                                     p.Description.Contains(searchTxt)
                                                     select p).ToList();

            return PartialView("ListPartialView", searchedProducts);
        

【参考方案1】：

确保您的页面/布局中包含jquery.unobtrusive-ajax.js。

<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

此文件使您的表单 ajaxified。

如果您没有包含此文件，您的表单将是普通表单。单击提交按钮将执行正常的表单提交，这可能是您看到整个页面的原因。

【讨论】：

我已经收录在首页了。这是我检查的第一件事

Jquery 脚本排序错误，从控制台发现。非常感谢。