Including an anchor tag in an ASP NET MVC Html ActionLink

Question

In ASP NET MVC  I m trying to create a link that includes an anchor tag  that is  directing the user to a page  and a specific section of the page    The URL I am trying to create should look like the following    lt a href   category subcategory 1 section12  gt Title for a section on the page lt  a gt    My routing is set up with the standard    routes MapRoute  Default     controller   action   categoryid        The action link syntax that I am using is     lt  foreach  Category parent in ViewData Model      gt   lt h3 gt  lt   parent Name   gt  lt  h3 gt   lt ul gt   lt  foreach  Category child in parent SubCategories      gt       lt li gt  lt   Html ActionLink lt CategoryController gt  x   gt  x Subcategory parent ID   child Name    gt  lt  li gt   lt      gt   lt  ul gt   lt      gt    My controller method is as follows   public ActionResult Subcategory int categoryID         return itemList     return View itemList       The above correctly returns a URL as follows    lt a href   category subcategory 1  gt Title for a section on the page lt  a gt    I can t figure out how to add the  section12 part  The  section  word is just the convention I am using to break up the page sections  and the 12 is the ID of the subcategory  i e   child ID   How can I do this

User · Answer

My solution will work if you apply the ActionFilter to the Subcategory action method, as long as you always want to redirect the user to the same bookmark:

http://spikehd.blogspot.com/2012/01/mvc3-redirect-action-to-html-bookmark.html

It modifies the HTML buffer and outputs a small piece of javascript to instruct the browser to append the bookmark.

You could modify the javascript to manually scroll, instead of using a bookmark in the URL, of course!

Hope it helps :)

User · Answer

There are overloads of ActionLink which take a fragment parameter  Passing  section12  as your fragment will get you the behavior you re after   For example  calling LinkExtensions ActionLink Method  HtmlHelper  String  String  String  String  String  String  Object  Object     lt    Html ActionLink  Link Text    Action    Controller   null  null   section12-the-anchor   new   categoryid    blah    null    gt

User · Answer

I Did that and it works for redirecting to other view  I think If you add the  sectionLink after It will work   lt a class  btn yellow  href   users Create  Model Id  target   blank  gt                                          Add As User                                      lt  a gt

User · Answer

There are overloads of ActionLink which take a fragment parameter  Passing  section12  as your fragment will get you the behavior you re after   For example  calling LinkExtensions ActionLink Method  HtmlHelper  String  String  String  String  String  String  Object  Object     lt    Html ActionLink  Link Text    Action    Controller   null  null   section12-the-anchor   new   categoryid    blah    null    gt

User · Answer

I just did it like this    lt a href   Url Action  Index   Home   features  gt Features lt  a gt

User · Answer

Here is the real life example   Html Grid Model  Columns columns   gt                   columns Add                       Encoded false                      Sanitized false                      SetWidth 10                      Titled string Empty                      RenderValueAs x   gt   Html ActionLink  Edit    UserDetails    Membership   null  null   discount   new    id    x Id    new    target     blank             WithPaging 200  EmptyText  There Are No Items To Display     And the target page has TABS   lt ul id  myTab  class  nav nav-tabs  role  tablist  gt            lt li class  active  gt  lt a href   discount  role  tab  data-toggle  tab  gt Discount lt  a gt  lt  li gt       lt  ul gt

User · Answer

I don t remember in which version of ASP NET MVC  ASP NET MVC 3  I believe    Razor the parameterlabeldeclaration or whatever it s called  parameter  x  feature was introduced  but to me this is definitely the proper way to build a link with an anchor in ASP NET MVC    Html ActionLink  Some link text    MyAction    MyController   protocol  null  hostName  null  fragment   MyAnchor   routeValues  null  htmlAttributes  null    Not even Ed Blackburns antipattern argument from this answer can compete with that

User · Answer

I would probably build the link manually  like this    lt a href   lt   Url Action  Subcategory    Category   new   categoryID   parent ID      gt  section12  gt link text lt  a gt

User · Answer

I would probably build the link manually  like this    lt a href   lt   Url Action  Subcategory    Category   new   categoryID   parent ID      gt  section12  gt link text lt  a gt

User · Answer

I just did it like this    lt a href   Url Action  Index   Home   features  gt Features lt  a gt

User · Answer

Here is the real life example   Html Grid Model  Columns columns   gt                   columns Add                       Encoded false                      Sanitized false                      SetWidth 10                      Titled string Empty                      RenderValueAs x   gt   Html ActionLink  Edit    UserDetails    Membership   null  null   discount   new    id    x Id    new    target     blank             WithPaging 200  EmptyText  There Are No Items To Display     And the target page has TABS   lt ul id  myTab  class  nav nav-tabs  role  tablist  gt            lt li class  active  gt  lt a href   discount  role  tab  data-toggle  tab  gt Discount lt  a gt  lt  li gt       lt  ul gt

User · Answer

I would probably build the link manually  like this    lt a href   lt   Url Action  Subcategory    Category   new   categoryID   parent ID      gt  section12  gt link text lt  a gt

User · Answer

There are overloads of ActionLink which take a fragment parameter  Passing  section12  as your fragment will get you the behavior you re after   For example  calling LinkExtensions ActionLink Method  HtmlHelper  String  String  String  String  String  String  Object  Object     lt    Html ActionLink  Link Text    Action    Controller   null  null   section12-the-anchor   new   categoryid    blah    null    gt

User · Answer

My solution will work if you apply the ActionFilter to the Subcategory action method, as long as you always want to redirect the user to the same bookmark:

http://spikehd.blogspot.com/2012/01/mvc3-redirect-action-to-html-bookmark.html

It modifies the HTML buffer and outputs a small piece of javascript to instruct the browser to append the bookmark.

You could modify the javascript to manually scroll, instead of using a bookmark in the URL, of course!

Hope it helps :)

User · Answer

I don t remember in which version of ASP NET MVC  ASP NET MVC 3  I believe    Razor the parameterlabeldeclaration or whatever it s called  parameter  x  feature was introduced  but to me this is definitely the proper way to build a link with an anchor in ASP NET MVC    Html ActionLink  Some link text    MyAction    MyController   protocol  null  hostName  null  fragment   MyAnchor   routeValues  null  htmlAttributes  null    Not even Ed Blackburns antipattern argument from this answer can compete with that

User · Answer

I would probably build the link manually  like this    lt a href   lt   Url Action  Subcategory    Category   new   categoryID   parent ID      gt  section12  gt link text lt  a gt

User · Answer

I Did that and it works for redirecting to other view  I think If you add the  sectionLink after It will work   lt a class  btn yellow  href   users Create  Model Id  target   blank  gt                                          Add As User                                      lt  a gt

User · Answer

There are overloads of ActionLink which take a fragment parameter  Passing  section12  as your fragment will get you the behavior you re after   For example  calling LinkExtensions ActionLink Method  HtmlHelper  String  String  String  String  String  String  Object  Object     lt    Html ActionLink  Link Text    Action    Controller   null  null   section12-the-anchor   new   categoryid    blah    null    gt

[asp.net-mvc] Including an anchor tag in an ASP.NET MVC Html.ActionLink

Examples related to asp.net-mvc