为什么我的 ajax 部分视图呈现在新页面上？答案

【问题标题】：Why is my ajax partial view rendering on a new page?为什么我的 ajax 部分视图呈现在新页面上？
【发布时间】：2014-01-14 05:12:56
【问题描述】：

花了很长时间试图解决这个问题，但一无所获。基本上，当单击操作链接时，我希望使用新页面上显示的值更新 div，但似乎无法解决问题。这是我的代码：

@*@model PagedList.IPagedList<S00117372CA3.Product>*@
@*@model Tuple<PagedList.IPagedList<S00117372CA3.Product>, IEnumerable<S00117372CA3.Order>>*@
@model S00117372CA3.Controllers.ProductViewModel
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="searchResult">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().ProductName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().Supplier.CompanyName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().Category.CategoryName)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().QuantityPerUnit)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().UnitPrice)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().UnitsInStock)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().UnitsOnOrder)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().ReorderLevel)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Products.First().Discontinued)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model.Products) {
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.ProductName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Supplier.CompanyName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Category.CategoryName)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.QuantityPerUnit)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UnitPrice)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UnitsInStock)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.UnitsOnOrder)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ReorderLevel)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Discontinued)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.ProductID }) |
            @Ajax.ActionLink("Details", "Details", new { id=item.ProductID }, new AjaxOptions { UpdateTargetId = "searchResult", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.ProductID })
        </td>
    </tr>
}

</table>

<div>
    Page @(Model.Products.PageCount < Model.Products.PageNumber ? 0 : Model.Products.PageNumber) of @Model.Products.PageCount
    @if (Model.Products.HasPreviousPage)
    {
        @Html.ActionLink("<<", "Index", new { page = 1})
        @Html.Raw(" ");
        @Html.ActionLink("< Prev", "Index", new {page = Model.Products.PageNumber - 1})
    }
    else{
     @:<<
     @Html.Raw(" ");
        @:< Prev   
    }

    @if (Model.Products.HasNextPage)
    {
        @Html.ActionLink("Next >", "Index", new {page = Model.Products.PageNumber + 1})
        @Html.Raw(" "); 
        @Html.ActionLink(">>", "Index", new {page = Model.Products.PageCount})
    }
    else{
     @:Next >
     @Html.Raw(" ")
@:>>   
    }
</div>

<div id="searchResult">

</div>

@Scripts.Render("~/bundles/jquery")
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script>

【问题讨论】：

标签： c# asp.net ajax views partial-views

【解决方案1】：

在您的文件夹结构中的某处.. 有一个名为_ViewStart.cshtml 的文件。此文件为您在给定区域内的视图提供初始设置。

这个文件可能有：

@{
    Layout = "path/to/layout/here.cshtml";
}

在这种情况下..您使用return View() 渲染的所有视图都将使用它。

你有两个选择......要么：

一）

return PartialView();

.. 来自您的操作方法。或者..

b) 在您的部分观点中：

@{
    Layout = null;
}

我猜你的问题..你的问题不是特别容易理解。

【讨论】：

我的操作方法完成如下： return PartialView("_Orders", model);所以我假设这就是你的意思
然后尝试选项 b。这是其中之一:)
那里也试过选项 b。还在翻开新的一页。这真的让我头疼：/还有其他想法吗？
等等.. ajax actionlink 不是 ajaxy？

【解决方案2】：

要解决这个问题，你只需要通过 Nuget 安装 jquery.unobtrusive-ajax 并将引用添加到视图中，如下所示：

@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")

（或者你可以这样做捆绑）

这是必需的，因为微软在 MVC 5 中默认没有添加它。

【讨论】：