使用 ajax 和路由 url 渲染部分答案

【问题标题】：Render partial with ajax and route url使用 ajax 和路由 url 渲染部分
【发布时间】：2019-12-05 13:54:45
【问题描述】：

我正在创建一个动态用户配置文件。我想使用 ajax 渲染部分（以避免页面重新加载）。

当我通过 ajax 渲染部分时，例如 Profile/sections/skills，我得到部分（我的控制器返回部分视图）并渲染 #partials div。

问题是当我通过在浏览器中手动输入 Profile/sections/skills 直接点击路由时，它只返回部分 html。

我希望两者都能正常工作：通过 ajax 调用渲染部分内容，当我输入 url 时可以找到它。

html

<div class="profile-navbar">
            <ul class="ul-menu">
                <li class="space"></li>
                <li class="active"> <a href="#"> <i class="fa fa-user"></i> About</a> </li>

                <li>
                    <a href="#" id="skills"> <i class="fa fa-robot"></i> Skills/a>
                </li>

                <li> <a href="#"> <i class="fa fa-images"></i> Portfolio</a></li>
                <li> <a href="#"> <i class="fa fa-address-card"></i> CV</a></li>
                <li> <a href="#"> <i class="fa fa-briefcase"></i> Experience </a></li>

            </ul>
    </div>


<div id="partials"> </div>

js

 $('.profile-navbar ul li a').click(function (e) {
    e.preventDefault();

    $.ajax({
        url: '@Url.Action("Skills", "Profile")',
        type: "POST",
        success: function (response, status) {

            $("#partials").html(response);
        }
    });
});

控制器

[Route("Profile/Skills")]
public IActionResult Skills()
{
    return PartialView("Skills");
}

【问题讨论】：

标签： c# ajax asp.net-mvc asp.net-core asp.net-ajax

【解决方案1】：

您已经为您的[Route("Profile/Skills")] 定义了一个局部视图。

要完成您想要的，您需要执行以下操作：

为同一条路线定义常规视图

此视图将包含对您的局部视图的引用，因此局部视图会在完整视图的较大 HTML 中呈现（当直接调用路由时）。

修改控制器动作以检查 Ajax

一旦有了常规视图和局部视图，您就可以修改控制器操作以有条件地决定是否：

renderpartial（如果调用者是 Ajax）
或渲染完整视图（如果不是 ajax 调用）

IsAjaxRequest() 方法

在过去的 ASP.NET MVC 版本中，Request 对象上有一个名为 IsAjaxRequest() 的方法。当此方法可用时，您的控制器操作代码可能很简单：

[Route("Profile/Skills")]
public IActionResult Skills()
{
    if (Request.IsAjaxRequest())
        return PartialView("Skills");
    else
        return View();
}

ASP.NET Core 缺少 IsAjaxRequest() 方法

不幸的是，这种方法似乎在 ASP.NET Core 中被忽略了（正如我目前所说的那样）。但是，底层代码似乎也很简单，以至于许多人已经成功地复制了它的行为而没有太多麻烦。

如果 Request.IsAjaxRequest() 由于 ASP.NET 核心对您不可用，您应该能够在控制器操作中复制其行为，如下所示：

[Route("Profile/Skills")]
public IActionResult Skills()
{
    bool isAjaxCall = Context.Request.Headers["x-requested-with"]=="XMLHttpRequest";
    if (isAjaxCall)
        return PartialView("Skills");
    else
        return View();
}

post 中描述了一种更正式且可重用的方法来处理缺少的IsAjaxRequest() 方法

【讨论】：