在 ASP.NET MVC 中使用路由 URL 构建导航

Question

我在 asp.net mvc 和 URL 中导航时遇到了困难。

当您在 Facebook 访问您的个人资料时，网址是 facebook.com/yourusername。在您的个人资料中有一个包含以下链接的菜单：时间轴、关于、朋友等。

当您单击其中一个链接时，例如Photos，URL 将更改为 facebook.com/yourusername/Photos，并呈现照片。上面描述的菜单仍然存在，个人资料图片和封面图片也是如此。它就像一个局部视图已经渲染了查看照片。

我想在我的项目中实现这个效果，但是不知道怎么做。我试过用Partial view 来做，但问题是在渲染部分视图时URL没有改变。

我应该如何构建它？

我的属于Home-controller 的Index.cshtml 如下所示：

div class="centering col-lg-7 logged_in_mainboxes" style="padding: 0; position: relative">

    <div class="col-lg-12 coverPicture" style="background-image: url('/Content/Images/@Model.CoverPicture');">
       <div id="image-cropper">
            <div class="cropit-preview"></div>         
            <h3 class="coverPicTextStyle">
                @Model.Name
            </h3>
            <button type="submit" id="uploadCoverpicture" class="btn_style_2 btn" style="position: absolute; bottom: 10px; right: 10px;">Upload</button>
            <button type="submit" id="crop" class="btn_style_2 btn" style="position: absolute; bottom: 50px; right: 10px; display: none;">Done</button>
            <input type="file" class="cropit-image-input" id="coverUpl" style="display: none;" />
        </div>
        <div class='progress' id="progress_div">
            <div class='bar' id='bar1'></div>
            <div class='percent' id='percent1'></div>
        </div>
        <input type="hidden" id="progress_width" value="0">
    </div>
    <div class="col-lg-12 pull-left">
        <div class="user_menu">
            <ul>
                <li>@Html.ActionLink("Wall","Wall","Home")</li>
                <li>@Html.ActionLink("Music", "Music", "Home")</li>
                <li>@Html.ActionLink("Photos", "Photos", "Home")</li>
                <li>@Html.ActionLink("Videos", "Videos", "Home")></li>
                <li>@Html.ActionLink("About", "About", "Home")</li>
            </ul>
        </div>
    </div>
    <div class="col-lg-7 pull-left" style="margin-top: 15px;">

    </div>
    <div class="col-lg-3 pull-right" style="border-left: 1px solid #ddd; margin-top: 15px; ">
        asdasd
    </div>
</div>

Answer 1

我首先将与用户关联的所有方法分组到 UserController 方法中，该方法将包括诸如

public ActionResult Index(string username)
public ActionResult Photos(string username)
public ActionResult Music(string username)

等，以及根据您的subsequent question 的路由配置。并创建一个单独的布局页面帽子将用于这些方法中的每一个（比如）_UserLayout.cshtml，然后这些方法的每个视图都将包含

@{ Layout = "~/Views/Shared/_UserLayout.cshtml"; }

为了将用户名传递给布局，然后通过ActionLink() 方法传递给方法，创建一个基类（比如说）

public class UserBaseVM
{
    public string UserName { get; set; }
}

并且这些方法中使用的所有模型都将派生自该基类（比如说）

public class UserPhotosVM : UserBaseVM
{ 
    public List<YourPhotoModel> Photos { get; set; }
    ....

然后在_UserLayout.cshtml 中，使用UserBaseVM 的UserName 属性生成您的链接

@model yourAssembly.UserBaseVM
... //add common menu/navigation elements
<div class="col-lg-12 pull-left">
    <div class="user_menu">
        <ul>
            <li>@Html.ActionLink("Photos", "Photos", new { userName = Model.UserName })</li>
            ....

那么你的方法是

public ActionResult Photos(string userName)
{
    UserPhotosVM model = new UserPhotosVM()
    {
        UserName = userName,
        Photos = .....
    }
    return View(model);
}

一个更简洁、更灵活的解决方案是创建一个[ChildActionOnly] 方法，例如返回菜单的部分视图

[ChildActionOnly]
public ActionResult Menu(string userName)
{
    UserBaseVM model = new UserBaseVM(){ UserName = userName });
    ....
    return PartialView(model);
}

在_UserLayout.cshtml 文件中，使用

@{ Html.RenderAction("Menu", new { userName = Model.UserName });

Answer 2

解决方案是你应该在你的应用程序中实现路由。

像这样创建一个“RouteConfig”类：使用using System.Web.Routing;

public class RouteConfig
{
    public static void RegisterRoutes(RouteCollection routes)
    {
        routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

        var route = routes.MapRoute(
            name: "Default",
            url: "{controller}/{action}/{id}",
            defaults: new { controller = "YourController", action = "Index", id = UrlParameter.Optional },
            namespaces: new string[] { "YourDomain.NameSpace.Controllers" }
        );
        route.DataTokens["UseNamespaceFallback"] = true;
    }
}

在 Application_Start() 方法中注册 Global.asax 文件中的路由：

RouteConfig.RegisterRoutes(RouteTable.Routes);

现在实现 Session 概念以将登录到您的应用程序的用户重定向并在您的基本控制器中使用 OnAuthorization 方法调用它。

如果要使用局部视图页面，请使用：

@Html.Partial("_YourPartialViewPage", Model)

在您的 javascript 方法中使用 Ajax 调用将数据传递给控制器​​。

yourAjax({ url: '@Url.Content("~/YourController/YourControllerAction")', data: { headerId: id, }, success: successFunction });