Html ActionLink as a button or an image not a link

Question

In the latest  RC1  release of ASP NET MVC  how do I get Html ActionLink to render as a button or an image instead of a link

User · Answer

A simple way to do make your Html ActionLink into a button  as long as you have BootStrap plugged in - which you probably have  is like this    Html ActionLink  Button text    ActionName    ControllerName   new    class    btn btn-primary

User · Answer

you can create your own extension method take look at my implementation   public static class HtmlHelperExtensions       public static MvcHtmlString ActionImage this HtmlHelper html  string action  object routeValues  string imagePath  string alt  object htmlAttributesForAnchor  object htmlAttributesForImage                var url   new UrlHelper html ViewContext RequestContext               build the  lt img gt  tag         var imgBuilder   new TagBuilder  img            imgBuilder MergeAttribute  src   url Content imagePath            imgBuilder MergeAttribute  alt   alt           imgBuilder MergeAttributes new RouteValueDictionary htmlAttributesForImage            string imgHtml   imgBuilder ToString TagRenderMode SelfClosing               build the  lt a gt  tag         var anchorBuilder   new TagBuilder  a            anchorBuilder MergeAttribute  href   action    null   url Action action  routeValues                  anchorBuilder InnerHtml   imgHtml     include the  lt img gt  tag inside         anchorBuilder MergeAttributes new RouteValueDictionary htmlAttributesForAnchor             string anchorHtml   anchorBuilder ToString TagRenderMode Normal           return MvcHtmlString Create anchorHtml             then use it in your view take look at my call    Html ActionImage null  null         Content img Button-Delete-icon png   Resource en Delete                 new   htmlAttributesForAnchor                    href                           data toggle    modal                      data target     confirm-delete                      data id   user ID                     data name   user Name                     data usertype   user UserTypeID                   new  style    margin-top  24px    htmlAttributesForImage

User · Answer

This is how I did it without scripting    using  Html BeginForm  Action    Controller   FormMethod Get          lt button type  submit               class  btn btn-default               title  Action description  gt Button Label lt  button gt      Same  but with parameter and confirmation dialog    using  Html BeginForm  Action    Controller            new   paramName   paramValue             FormMethod Get           new   onsubmit    return confirm  Are you sure                 lt button type  submit               class  btn btn-default               title  Action description  gt Button Label lt  button gt

User · Answer

Url Action   will get you the bare URL for most overloads of Html ActionLink  but I think that the URL-from-lambda functionality is only available through Html ActionLink so far  Hopefully they ll add a similar overload to Url Action at some point

User · Answer

You can t do this with Html ActionLink   You should use Url RouteUrl and use the URL to construct the element you want

User · Answer

use FORMACTION   lt input type  submit  value  Delete  formaction   Url Action  Delete   new   id   Model Id       gt

User · Answer

lt button onclick  location href   Url Action  NewCustomer    Customers     gt Checkout  gt  gt  lt  button gt

User · Answer

Late response but you could just keep it simple and apply a CSS class to the htmlAttributes object    lt    Html ActionLink  Button Name    Index   null  new    class  classname       gt    and then create a class in your stylesheet  a classname       background  url    Images image gif  no-repeat top left       display  block       width  150px       height  150px       text-indent  -9999px     hides the link text

User · Answer

if you don t want to use a link  use button  you can add image to button as well    lt button type  button  onclick  location href   Url Action  Create    Company      gt     Create New     lt img alt  New  title  New  src    Images Button plus png  gt   lt  button gt    type  button  performs your action instead of submitting form

User · Answer

Using bootstrap this is the shortest and cleanest approach to create a link to a controller action that appears as a dynamic button    lt a href   Url Action  Action    Controller    class  btn btn-primary  gt Click Me lt  a gt    Or to use Html helpers    Html ActionLink  Click Me    Action    Controller   new    class    btn btn-primary

User · Answer

Do what Mehrdad says - or use the url helper from an HtmlHelper extension method like Stephen Walther describes here and make your own extension method which can be used to render all of your links   Then it will be easy to render all links as buttons anchors or whichever you prefer - and  most importantly  you can change your mind later when you find out that you actually prefer some other way of making your links

User · Answer

There seems to be lots of solutions on how to created a link that displays as an image  but none that make it appear to be a button   There is only good way that I have found to do this  Its a little bit hacky  but it works   What you have to do is create a button and a separate action link  Make the action link invisible using css  When you click on the button  it can fire the click event of the action link    lt input type  button  value  Search  onclick  Search      gt    Ajax ActionLink  Search    ActionName   null  new AjaxOptions     new   id    SearchLink   style  display none       function Search            SearchLink   click         It may be a pain in the butt to do this every time you add a link that needs to look like a button  but it does accomplish the desired result

User · Answer

I like to use Url Action   and Url Content   like this    lt a href   Url Action  MyAction    MyController    gt       lt img src   Url Content    Content Images MyLinkImage png      gt   lt  a gt    Strictly speaking  the Url Content is only needed for pathing is not really part of the answer to your question   Thanks to  BrianLegg for pointing out that this should use the new Razor view syntax  Example has been updated accordingly

User · Answer

For Material Design Lite and MVC    lt a class  mdl-navigation  link  href   Url Action  MyAction    MyController    gt Link Name lt  a gt

User · Answer

lt li gt  lt a href   Url Action    View    Controller     gt  lt i class  fa fa-user  gt  lt  i gt  lt span gt Users View lt  span gt  lt  a gt  lt  li gt    To display an icon with the link

User · Answer

Just simply     lt button onclick   Url Action  index    Family   new  familyid   Model FamilyID     gt Cancel lt  button gt

User · Answer

Borrowing from Patrick s answer  I found that I had to do this    lt button onclick  location href   Url Action  Index    Users    return false   gt Cancel lt  button gt    to avoid calling the form s post method

User · Answer

The way I have done it is to have the actionLink and the image seperately  Set the actionlink image as hidden and then added a jQuery trigger call  This is more of a workaround     lt    Html ActionLink  Button Name    Index   null  new    class  yourclassname       gt    lt img id  yourImage  src  myImage jpg    gt    Trigger example       yourImage   click function            yourclassname   trigger  click

User · Answer

A late answer but this is how I make my ActionLink into a button  We re using Bootstrap in our project as it makes it convenient  Never mind the  T since its only an translator we re using    Html Actionlink  Some button text    ActionMethod    Controller    Optional parameter    html code you want to apply to the actionlink      The above gives a link like this and it looks as the picture below   localhost XXXXX Firms AddAffiliation F0500     In my view    using  Html BeginForm       lt div class  section-header  gt       lt div class  title  gt           T  Admin Users Users        lt  div gt       lt div class  addAffiliation  gt           lt p   gt           Html ActionLink       T  Admin Users AddAffiliation     AddAffiliation    Firms   new   id    string  WorkContext CurrentFirm ExternalId    new    class  btn btn-primary          lt  div gt   lt  div gt       Hope this helps somebody

User · Answer

Even later response  but I just ran into a similar issue and ended up writing my own Image link HtmlHelper extension    You can find an implementation of it on my blog in the link above    Just added in case someone is hunting down an implementation

User · Answer

using  Html BeginForm  DeleteMember    Member   new   id   Model MemberID                    lt input type  submit  value  Delete Member  onclick    return confirm  Are you sure you want to delete the member        gt

User · Answer

Call me simplistic  but I just do    lt a href   lt    Url Action  ActionName    ControllerName     gt   gt       lt button gt Button Text lt  button gt   lt  a gt    And you just take care of the hyperlink highlight   Our users love it

User · Answer

Just found this extension to do it - simple and effective

[asp.net-mvc] Html.ActionLink as a button or an image, not a link

Examples related to asp.net-mvc

Examples related to actionlink