Creating navigation with routed URL in ASP.NET MVC

Question

Creating navigation with routed URL in ASP.NET MVC

I'm having trouble with the navigation in asp.net mvc and handling URLs.

For example, when you visit your profile on Facebook, the URL is facebook.com/yourusername. On your profile page, there is a menu with links such as Timeline, About, Friends, etc.

If you click on a link like Photos, the URL changes to facebook.com/yourusername/Photos, and the photos are displayed. The menu remains visible, along with the profile picture and cover photo. It's almost like a partial view has been rendered for viewing the photos.

I would like to achieve this same effect in my project, but I'm not sure how to implement it. I have tried using Partial view, but the problem is that the URL does not change when the partial view is rendered.

How should I structure this in my project?

Here is an example of what my Index.cshtml file, belonging to the Home-controller, looks like:

<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>

javascript c#asp.net asp.net-mvc razor

Answer 1

Answer №1

To start organizing the methods associated with the user, it is recommended to group them within a dedicated UserController. This controller can include methods such as:

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

Furthermore, set up routing configurations as discussed in your previous inquiry. Create a separate layout page named _UserLayout.cshtml to be used for each of these methods. Each corresponding view should include:

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

To effectively pass the username throughout (to the layout and subsequently to the methods via ActionLink() methods), establish a base class like so:

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

All models utilized in these methods should inherit from this base class; for instance:

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

Within _UserLayout.cshtml, leverage the UserName property of UserBaseVM to construct your links:

@model yourAssembly.UserBaseVM
... //include 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>
            ....

In line with a cleaner and more adaptable approach, consider creating a [ChildActionOnly] method that outputs a partial view of the menu, like so:

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

Within the _UserLayout.cshtml file, implement:

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

Answer 2

To start organizing the methods associated with the user, it is recommended to group them within a dedicated UserController. This controller can include methods such as:

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

Furthermore, set up routing configurations as discussed in your previous inquiry. Create a separate layout page named _UserLayout.cshtml to be used for each of these methods. Each corresponding view should include:

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

To effectively pass the username throughout (to the layout and subsequently to the methods via ActionLink() methods), establish a base class like so:

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

All models utilized in these methods should inherit from this base class; for instance:

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

Within _UserLayout.cshtml, leverage the UserName property of UserBaseVM to construct your links:

@model yourAssembly.UserBaseVM
... //include 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>
            ....

In line with a cleaner and more adaptable approach, consider creating a [ChildActionOnly] method that outputs a partial view of the menu, like so:

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

Within the _UserLayout.cshtml file, implement:

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

Answer 3

Answer №2

To optimize your application, consider incorporating routes into the design.

Begin by creating a class called "RouteConfig" and include 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;
    }
}

Incorporate these routes in your Global.asax file within the Application_Start() method:

RouteConfig.RegisterRoutes(RouteTable.Routes);

Integrate the Session feature to efficiently redirect logged-in users within your application using the OnAuthorization method in the base controller.

If utilizing partial view pages, use:

@Html.Partial("_YourPartialViewPage", Model)

For passing data to the controller, opt for Ajax calls in your JavaScript methods.

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

Answer 4

To optimize your application, consider incorporating routes into the design.

Begin by creating a class called "RouteConfig" and include 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;
    }
}

Incorporate these routes in your Global.asax file within the Application_Start() method:

RouteConfig.RegisterRoutes(RouteTable.Routes);

Integrate the Session feature to efficiently redirect logged-in users within your application using the OnAuthorization method in the base controller.

If utilizing partial view pages, use:

@Html.Partial("_YourPartialViewPage", Model)

For passing data to the controller, opt for Ajax calls in your JavaScript methods.

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

Creating navigation with routed URL in ASP.NET MVC

Answer №1

Answer №2

Similar questions

How to interact with a specific button using Javascript

Utilize clipboard functionality in automated tests while using Selenium WebDriver in conjunction with JavaScript

Retrieve elements from an array based on the value of an object

I am attempting to verify a user's login status with Next.js and Supabase, however, I am encountering difficulties in making it function properly

Extracting textual information from Wikipedia through iframes?

How can I use JavaScript to sort through an array and organize the data into groups?

Is Chrome not displaying any notification pop-up when I submit a form and then click the back button?

Tips for continuing code execution in an ajax success function following the completion of a nested ajax call within the success block

Looping through items using v-model value in v-for

Angular custom filter applied only when a button is clicked

``Toggling all classes in a click event instead of toggling the correct block

Arrange the objects in the array in React based on their time and date of creation

"Trouble with script: external JavaScript file failing to run

Using regular expressions in Javascript to extract decimal numbers from a string for mathematical operations

What is the rationale behind permitting kebab-case for non-standard attributes but not for others? Additionally, how can one specify types like this in TypeScript?

typescript array filter attributes

Optimal approach for organizing a mysql+nodejs+express application

Save the outcome of an ArrayBuffer variable into an array within a Javascript code

Explore our product gallery with just a simple hover

Maximizing Efficiency with Selenium: Leveraging the Page Object Pattern and Page Factory