Ajax.ActionLink with PartialView opens new page MVC4

Question

I am building a ASP.NET MVC4(.5) web app. I went trough much topics about the problem, tried every one of them but the problem didn't disappear.

I have a controller which returns a 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);
}

I have this bundle, included in the bottom of my _Layout page.

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"));

But, when I create Ajax.ActionLink in one of my views and call it, the variable "request" in the controller has value "false", the cause of the request is DOCUMENT instead of XHR and returns the partial view in new tab of the browser.

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

Thanks for the help.I just can't see anything wrong.

Answer 1

So guys I don't think the problem is here but, see what happens when I return the view, which creates the 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>
}

In the _Categories view:

@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>

And the 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>

I think that it can still use the unobtrusive, included in the _Layout page...