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

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)

等，以及根据您后续问题的路由配置。 并创建一个单独的布局页面 帽子将用于这些方法（例如）_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);

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

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

@Html.Partial("_YourPartialViewPage", Model)

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

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