ActionButton instead of ActionLink

Question

I want to create a button which when clicked calls an action. I have used Html.ActionLink to create a link which does exactly that but there is no Html.ActionButton. Is there some other way?

score 28 · Answer 1 · answered Feb 22 '14 at 14:59

28

Here is an example using Bootstrap's CSS button and applying it against the link to make it look exactly like the button.

@Html.ActionLink("Select", "Select", new { id = patient.Id }, new { @class = "btn btn-primary", @style = "color:white" })

answered Feb 22 '14 at 14:59

Flea

11,176
6
72
83

3

(Just nitpicking) Also add `role="button"` to the attributes to be 100% bootstrap reqs compliant – Alex Mar 26 '15 at 16:53

score 24 · Accepted Answer · answered Jun 18 '12 at 10:03

24

Is there some other way?

You could use a html <form>:

@using (Html.BeginForm("someAction", "someController"))
{
    <button type="submit">OK</button>
}

answered Jun 18 '12 at 10:03

Darin Dimitrov

1,023,142
271
3,287
2,928

score 16 · Answer 3 · edited Jun 04 '15 at 16:02

16

This seems very simple - am I missing something?

@Html.ActionLink("About", "About","Home", new { @class = "btn btn-success" })

edited Jun 04 '15 at 16:02

Josef Van Zyl

915
3
19
43

answered Apr 09 '15 at 02:44

Bicycle Dave

484
1
7
25

4

To point out the obvious, this relies on having btn / btn-success css classes (assuming this is Bootstrap or similar). ActionLink creates , but the question was looking for actual – Henry C Jun 30 '16 at 14:12

Jeow Li Huan · Answer 4 · 2012-06-19T03:26:37.257

6

Use this:

@using (Html.BeginForm("yourAction", "yourController"))
{
    <input type="submit" value="Some text"/>
}

edited Jun 19 '12 at 03:26

answered Jun 18 '12 at 10:03

Jeow Li Huan

3,758
1
34
52

score 5 · Answer 5 · answered Jun 18 '12 at 10:04

5

@using (Html.BeginForm("ActionName", "ControllerName")){
   <input type="button" value="Submit" />
}

answered Jun 18 '12 at 10:04

Curtis

101,612
66
270
352

score 5 · Answer 6 · answered Jul 01 '13 at 13:27

a[type="button"] {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: 1.2em;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
    text-decoration: none;
}

@Html.ActionLink("ActionName", "ControllerName",null, new {type = "button" })

score 5 · Answer 7 · answered Nov 12 '16 at 13:34

Sometimes your button might have nested markup (e.g. for an icon)

This might be helpful to some people:

<button type="button" onclick="location.href='@Url.Action("Action", "Controller")'" class="btn btn-success">My button name <i class="glyphicon glyphicon-search"></i></button>

type=button is required to prevent page from submitting... Another possible solution (if you think type=button looks weird because the element is already a button) would be to call event.preventDefault() in the OnClick javascript handler.

<button onclick="event.preventDefault(); location.href='@Url.Action("Action", "Controller")'" class="btn btn-success">My button name <i class="glyphicon glyphicon-search"></i></button>

I decided to use this instead of ActionLink ( tag) because I couldn't find a way to vertically center the text. +1 for @Html.ActionButton or ButtonLink or whatever. — William T. Mallard, Apr 03 '19 at 17:50

score 2 · Answer 8 · edited May 23 '17 at 12:34

2

This should answer your question.

Can I use an asp:Button like an Html.ActionLink?

Uses CSS to make the link look like a button.

Or use the button inside the form with the form controls moving the page along.

edited May 23 '17 at 12:34

Community

1
1

answered Jun 18 '12 at 10:03

Gabriel Baker

1,209
11
21

Caitlin Everett · Answer 9 · 2015-03-26T16:25:46.887

2

You can write a link to controller and view this way / skip the whole razor notation (worked for me recently on my localhost!):

<a href="../Home(controller)/Index(view)"><button type="submit">OK</button></a>

edited Mar 26 '15 at 16:25

answered Mar 26 '15 at 16:19

Caitlin Everett

33
8

1

This breaks if you ever change your route config. The @Html.ActionLink approach is dynamic, and will work without depending on a certain route config – Alexander Jul 21 '16 at 20:25

score 2 · Answer 10 · answered Dec 07 '15 at 11:29

2

use FORMACTION

<input type="submit" value="Delete" id="delete" formaction="@Url.Action("Delete", new { id = Model.Id })" />

answered Dec 07 '15 at 11:29

Serge

343
5
8

score 2 · Answer 11 · answered Sep 05 '17 at 10:44

2

I know this is an old topic, but this helped me:

@Html.ActionLink("New member", "Create", null, new {@class = "btn btn-default"})

answered Sep 05 '17 at 10:44

H35am

768
2
12
32

score 1 · Answer 12 · answered Jun 05 '19 at 08:01

Make sure you use the correct overload or else you will be directed to the wrong controller.

you need to use a "null" before the new {} as shown below:

@Html.ActionLink("About", "Action Name","Controller Name",null, new { @class = "btn btn-success" })

Notice the null above. This is important!!!

score 0 · Answer 13 · answered Aug 17 '18 at 02:59

For those of you trying to make an anchor tag look like a button in Bootstrap v3 (maybe v4, too), beware that there are some subtle styling differences regarding margin that bootstrap targets to the Input element and not the A element. This can be a little frustrating when trying to put several buttons next to each other.

There's a rather obvious reason why MVC doesn't have a ButtonLink helper: Think about it. Buttons do not link to anything. They run code. So what code would the helper render? I mean it seems simple that it could just render something like onclick="window.location=/controller/method..." but, is that really what you want? Is it what everyone always wants? Isn't that really just doing a GET? It gets kind of goofy.

So, really, if you want a button that opens a link the easiest way is to do what everyone else suggested and style an A tag to look like a button but then probably go into your stylesheet and do a very specific target of your button anchors to get the same styling as actual buttons. Or use an Input tag and force Razor (or whatever) to render the link inline with your JavaScript.

ActionButton instead of ActionLink

13 Answers13

Linked