Is there a way to include a fragment identifier when using Asp.Net MVC ActionLink, RedirectToAction, etc.?

StackOverflow https://stackoverflow.com/questions/5628

  •  08-06-2019
  •  | 
  •  

Question

I want some links to include a fragment identifier. Like some of the URLs on this site:

Debugging: IE6 + SSL + AJAX + post form = 404 error#5626

Is there a way to do this with any of the built-in methods in MVC? Or would I have to roll my own HTML helpers?

Was it helpful?

Solution

We're looking at including support for this in our next release.

OTHER TIPS

As Brad Wilson wrote, you can build your own link in your views by simply concatenating strings. But to append a fragment name to a redirect generated via RedirectToAction (or similar) you'll need something like this:

public class RedirectToRouteResultEx : RedirectToRouteResult {

    public RedirectToRouteResultEx(RouteValueDictionary values)
        : base(values) {
    }

    public RedirectToRouteResultEx(string routeName, RouteValueDictionary values)
        : base(routeName, values) {
    }

    public override void ExecuteResult(ControllerContext context) {
        var destination = new StringBuilder();

        var helper = new UrlHelper(context.RequestContext);
        destination.Append(helper.RouteUrl(RouteName, RouteValues));

        //Add href fragment if set
        if (!string.IsNullOrEmpty(Fragment)) {
            destination.AppendFormat("#{0}", Fragment);
        }

        context.HttpContext.Response.Redirect(destination.ToString(), false);
    }

    public string Fragment { get; set; }
}

public static class RedirectToRouteResultExtensions {
    public static RedirectToRouteResultEx AddFragment(this RedirectToRouteResult result, string fragment) {
        return new RedirectToRouteResultEx(result.RouteName, result.RouteValues) {
            Fragment = fragment
        };
    }
}

And then, in your controller, you'd call:

return RedirectToAction("MyAction", "MyController")
       .AddFragment("fragment-name");

That should generate the URL correctly.

In MVC3 (and possibly earlier I haven't checked), you can use UrlHelper.GenerateUrl passing in the fragment parameter. Here's a helper method I use to wrap the functionalityL

public static string Action(this UrlHelper url, string actionName, string controllerName, string fragment, object routeValues)
{
    return UrlHelper.GenerateUrl(
        routeName: null,
        actionName: actionName,
        controllerName: controllerName,
        routeValues: new System.Web.Routing.RouteValueDictionary(routeValues),
        fragment: fragment,
        protocol: null,
        hostName: null,
        routeCollection: url.RouteCollection,
        requestContext: url.RequestContext,
        includeImplicitMvcValues: true /*helps fill in the nulls above*/
    );
}

@Dominic,

I'm almost positive that putting that in the route will cause routing issues.

@Ricky,

Until MVC has support for this, you can be a little more "old school" about how you make your routes. For example, you can convert:

<%= Html.ActionLink("Home", "Index") %>

into:

<a href='<%= Url.Action("Index") %>#2345'>Home</a>

Or you can write your own helper that does essentially the same thing.

The short answer is: No. In ASP.NET MVC Preview 3 there's no first-class way for including an anchor in an action link. Unlike Rails' url_for :anchor, UrlHelper.GenerateUrl (and ActionLink, RedirectToAction and so on which use it) don't have a magic property name that lets you encode an anchor.

As you point out, you could roll your own that does. This is probably the cleanest solution.

Hackily, you could just include an anchor in a route and specify the value in your parameters hash:

routes.MapRoute("WithTarget", "{controller}/{action}/{id}#{target}");
...
<%= Html.ActionLink("Home", "Index", new { target = "foo" })%>

This will generate a URL like /Home/Index/#foo. Unfortunately this doesn't play well with URL parameters, which appear at the end of the URL. So this hack is only workable in really simple circumstances where all of your parameters appear as URL path components.

This is a client side solution but if you have jquery available you can do something like this.

<script language="javascript" type="text/javascript">
    $(function () {
        $('div.imageHolder > a').each(function () {
            $(this).attr('href', $(this).attr('href') + '#tab-works');
        });
    });
</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top