为啥我的 ajax 部分视图呈现在新页面上？

Posted 2023-02-26

【中文标题】为啥我的 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>

【参考方案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 中默认没有添加它。