Question

我正在编写一个名为“社交网络”的项目。它是ASP.NET Core Web应用程序+模板Web应用程序（模型-视图-控制器）。

我添加了功能，如果用户得到了授权，那么他将有一个“注销”字段，如果未登录-"_Layout.cshtml"页面上的“登录”。为此，我使用了ViewComponent。

但是路由无法正常工作。当我单击“登录”时，将重定向到".../Account/~/Account/Login"，而不是".../~/Account/Login"，如下面的屏幕快照所示。

截屏：

文件"_Layout.cshtml"的一部分：

<ul class="nav navbar-nav">
    <li><a href="~/Home/Index" class="navbar-brand">My page</a></li>
    <li><a href="~/Home/Users" class="navbar-brand">Users</a></li>
    @await Component.InvokeAsync("MenuParts")
    <li><a href="~/Account/Register" class="navbar-brand">Register</a></li>
</ul>

在文件“ Startup.cs”中路由：

app.UseMvc(routes =>
{
    routes.MapRoute(
        name: "default",
        template: "{controller=Home}/{action=Index}/{login?}");
});

MenuPartsViewComponent.cs：

using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;

namespace SocialNetwork.Components
{
    public class MenuPartsViewComponent : ViewComponent
    {
        public IViewComponentResult Invoke()
        {
            if (HttpContext.User.Identity.Name == null)
            {
                return new HtmlContentViewComponentResult(
                    new HtmlString(@"<li><a href=""~/Account/Login"" class=""navbar-brand"">Login</a></li>"));
            }
            else
            {
                return new HtmlContentViewComponentResult(
                    new HtmlString(@"<li><a href=""~/Account/Logout"" class=""navbar-brand"">Logout</a></li>"));
            }
        }
    }
}

Answer 1

问题出在您的href属性值中。从~的所有href标记中删除<a>，并编写如下：

return new HtmlContentViewComponentResult(
                new HtmlString(@"<li><a href=""/Account/Login"" class=""navbar-brand"">Login</a></li>"));

Answer 2

问题在于，在渲染视图时，在波浪cshtml中，波浪号~会发生转换。但是，在ViewComponent中，情况并非如此，因为您负责生成与视图相关的信息。

使用ViewComponent.Url Property生成所需的Urls，而不是对其进行硬编码

public class MenuPartsViewComponent : ViewComponent {
    public IViewComponentResult Invoke() {
        if (HttpContext.User.Identity.Name == null) {
            var login = Url.Action("Login", "Account");
            var html = @"<li><a href=""{0}"" class=""navbar-brand"">Login</a></li>";
            return new HtmlContentViewComponentResult(
                new HtmlString(string.Format(html, login))
            );
        } else {
            var logout = Url.Action("Logout", "Account");
            var html = @"<li><a href=""{0}"" class=""navbar-brand"">Logout</a></li>";
            return new HtmlContentViewComponentResult(
                new HtmlString(string.Format(html, logout))
            );
        }
    }
}

使用ViewComponent类进行路由的问题

2 个答案: