Question

我正在使用asp.net mvc和URL进行导航。

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

当您点击其中一个链接（例如Photos）时，网址将更改为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中，使用UserName的{{1}}属性生成链接

UserBaseVM

那么你的方法就是

@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

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 });

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

2 个答案: