How do I redirect a user when a button is clicked?

Question

I have a view with a button. When the user clicks the button I want them redirected to a data entry view. How do I accomplish this? I should mention the views are created, tested, and functioning. I can get to them by typing the url.

I looked for steps explaining how to wire up the onclick event of the button but I'm new to MVC and kinda lost at this point.

Thanks!

Darin Dimitrov · Accepted Answer · 2010-07-02T19:37:24.257

104

It depends on what you mean by button. If it is a link:

<%= Html.ActionLink("some text", "actionName", "controllerName") %>

For posting you could use a form:

<% using(Html.BeginForm("actionName", "controllerName")) { %>
    <input type="submit" value="Some text" />
<% } %>

And finally if you have a button:

<input type="button" value="Some text" onclick="window.location.href='<%= Url.Action("actionName", "controllerName") %>';" />

edited Jul 02 '10 at 19:37

answered Jul 02 '10 at 19:30

Darin Dimitrov

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

This is an – DenaliHardtail Jul 02 '10 at 19:37
`@Html.TextBox("btnAdd", "Add New", new { type = "button" }`, is it possible to add `action` and/or `controller` to this razor code so that on clicking this particular button I get redirected to another `action` in the same/different controller? – phougatv Jul 03 '15 at 09:10

AGuyCalledGerald · Answer 2 · 2014-04-08T11:47:34.343

50

Just as an addition to the other answers, here is the razor engine syntax:

<input type="button" value="Some text" onclick="@("window.location.href='" + @Url.Action("actionName", "controllerName") + "'");" />

or

window.location.href = '@Url.Action("actionName", "controllerName")';

edited Apr 08 '14 at 11:47

answered Jan 15 '14 at 16:30

AGuyCalledGerald

7,882
17
73
120

How to pass parameter in this .Please help – Sribin May 17 '18 at 12:01
'@Url.Action("actionName", "controllerName", new { myparam = "blabla" })' – AGuyCalledGerald Nov 27 '20 at 09:36

score 12 · Answer 3 · answered Jul 02 '10 at 19:40

12

If, like me, you don't like to rely on JavaScript for links on buttons. You can also use a anchor and style it like your buttons using CSS.

<a href="/Controller/View" class="Button">Text</a>

answered Jul 02 '10 at 19:40

Dustin Laine

37,935
10
86
125

score 10 · Answer 4 · edited Sep 15 '15 at 09:42

10

if using JQuery, you can do this :

<script type="text/javascript">
    $('#buttonid').click(function () {
        document.location = '@Url.Action("ActionName","ControllerName")';
    });
</script>

edited Sep 15 '15 at 09:42

hg8

1,082
2
15
28

answered Sep 15 '15 at 09:12

Cherubic

107
1
5

score 4 · Answer 5 · answered Sep 16 '12 at 21:18

Or, if none of the above works then you can use following approach as it worked for me.

Imagine this is your button

<button class="btn" onclick="NavigateToPdf(${Id});"></button>

I got the value for ${Id} filled using jquery templates. You can use whatever suits your requirement. In the following function, I am setting window.location.href equal to controller name then action name and then finally parameter. I am able to successfully navigate.

function NavigateToPdf(id) {
    window.location.href = "Link/Pdf/" + id;
}

I hope it helps.

score 4 · Answer 6 · answered Mar 24 '20 at 12:37

It has been my experience that ASP MVC really does not like traditional use of button so much. Instead I use:

  <input type="button" class="addYourCSSClassHere" value="WordsOnButton" onclick="window.location= '@Url.Action( "ActionInControllerHere", "ControllerNameHere")'" />

score 3 · Answer 7 · answered Apr 12 '18 at 08:00

You can easily wrap your button tag with tag.Using Url.Action() HTML Helper this will get to navigate to one page to another.

<a href='@Url.Action("YourAction", "YourController")'>
    <input type='button' value='Dummy Button' />
</a>

If you want to navigate with javascript onclick() function then use

<input type='button' value='Dummy Button' onclick='window.location = "@Url.Action("YourAction", "YourController")";' />

score 1 · Answer 8 · edited Jul 26 '19 at 19:55

RIGHT ANSWER HERE: Answers above are correct (for some of them) but let's make this simple -- with one tag.

I prefer to use input tags, but you can use a button tag

Here's what your solution should look like using HTML:

< input type="button" class="btn btn-info" onclick='window.location.href = "@Url.Action("Index", "ReviewPendingApprovals", routeValues: null)"'/> // can omit or modify routeValues to your liking

score 0 · Answer 9 · answered Jul 02 '10 at 19:32

0

$("#yourbuttonid").click(function(){ document.location = "<%= Url.Action("Youraction") %>";})

answered Jul 02 '10 at 19:32

Gregoire

24,219
6
46
73

score -1 · Answer 10 · answered May 26 '20 at 15:42

-1

<li class="nav-item">
    <a class="nav-link text-dark" asp-area="" asp-page="/UsersPage">Users</a>
</li>

Try this

answered May 26 '20 at 15:42

PsyhoLord

69
1
3

How do I redirect a user when a button is clicked?

10 Answers10

Linked