使用 ajax 和路由 url 渲染部分

Question

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

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

问题是当我通过在浏览器中手动输入直接点击路线时 Profile/sections/skills 它 returns 只有部分 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");
}

Answer 1

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

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

为同一路线定义常规视图

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

修改控制器操作以检查 Ajax

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

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

是AjaxRequest()方法

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

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

ASP.NET缺少核心是AjaxRequest()方法

不幸的是，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() 方法的更正式和可重用的方法

使用 ajax 和路由 url 渲染部分

Render partial with ajax and route url

c#

ajax

asp.net-mvc

asp.net-ajax

asp.net-core

html

js

控制器