带有 PartialView 的 Ajax.ActionLink 打开新页面 MVC4答案

【问题标题】：Ajax.ActionLink with PartialView opens new page MVC4带有 PartialView 的 Ajax.ActionLink 打开新页面 MVC4
【发布时间】：2017-05-27 21:20:02
【问题描述】：

我正在构建一个 ASP.NET MVC4(.5) Web 应用程序。我就这个问题讨论了很多话题，每一个都试过了，但问题并没有消失。

我有一个返回 PartialView 的控制器。

[HttpGet]
public ActionResult Subcategories(int id)
{
  IOrderedQueryable<Subcategory> subcategories = this.Data.Subcategories
                                                   .All()
                                                   .Where(sub => sub.Category.Id == id)
                                                   .OrderBy(cat => cat.Name);

  var request = this.Request.IsAjaxRequest();
  IEnumerable<ConciseSubcategoryViewModel> model = Mapper.Map<IEnumerable<ConciseSubcategoryViewModel>>(subcategories);
  return this.PartialView("_Subcategories", model);
}

我有这个捆绑包，包含在我的 _Layout 页面底部。

bundles.Add(new ScriptBundle("~/Content/jquery").Include(
              "~/Scripts/jquery-1.10.2.js",
              "~/Scripts/jquery.validate.js",
              "~/Scripts/jquery.unobtrusive-ajax.js",
              "~/Scripts/jquery.validate.unobtrusive.js"));

但是，当我在我的一个视图中创建 Ajax.ActionLink 并调用它时，控制器中的变量“request”的值为“false”，请求的原因是 DOCUMENT 而不是 XHR，并返回部分视图浏览器的新标签页。

@Ajax.ActionLink(
  Model.Name,
  "Subcategories",
  "Items",
  new { Id = Model.Id },
  new AjaxOptions() {
    HttpMethod = "GET",
    InsertionMode = InsertionMode.Replace,
    UpdateTargetId = "subcategories-wrapper"
})

感谢您的帮助。我只是看不出有什么问题。

【问题讨论】：

您的代码看起来不错。您的页面中是否有任何 js 错误？检查您的浏览器控制台
问题是它直接将我重定向到新标签，所以控制台刷新，我看不到任何错误...
启用“保留日志”，它将在重定向之间保留它。还要确保您的 ~/Scripts/jquery.unobtrusive-ajax.js 正确加载到浏览器
网站中使用的每个脚本都加载成功，我手动检查了jquery.unobtrusive-ajax.js文件的响应，没有问题
确保你在 web 配置中打开了不显眼的 js。在应用设置中。

标签： jquery ajax asp.net-mvc asp.net-mvc-4 unobtrusive

【解决方案1】：

所以伙计们，我认为问题不在这里，但是，看看当我返回创建 ajax 的视图时会发生什么：

@model AddItemViewModelBag
@section styles {
  <link href="~/Stylesheets/add-item.css" rel="stylesheet" />
}
@{
  ViewBag.Title = "Ново изделие";
}


@Html.Partial("_AddItemForm", Model.AddItemBindingModel)

@Html.Partial("_Categories", Model.Categories)

@section scripts{
  <script src="~/Scripts/add-item.js"></script>
}

在_Categories 视图中：

@model IEnumerable<ConciseCategoryViewModel>

<div class="category-manager hidden-manager">  
  <div class="categories-container">
    <div class="heading">Изберете категория</div>
    <div id="categories-wrapper">
      @Html.DisplayForModel()
    </div>
  </div>
  <div class="subcategories-container">
    <div id="subcategories-wrapper">
    </div>
  </div>
</div>

还有 ConciseCategoryViewModel

@model ConciseCategoryViewModel

<div class="category-option" data-category-id="@Model.Id">
  @Ajax.ActionLink(
    Model.Name,
    "Subcategories",
    "Items",
    new { Id = Model.Id },
    new AjaxOptions() {
       HttpMethod = "GET",
       InsertionMode = InsertionMode.Replace,
       UpdateTargetId = "subcategories-wrapper"
    })
 </div>

我认为它仍然可以使用不显眼的，包含在_Layout页面中......

【讨论】：