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!

Brunelle

Answer 1

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") %>';" />

Colyer

This is an <input type="button" /> – Brunelle

@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? – Quartas

Answer 2

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")';

Hartnett

How to pass parameter in this .Please help – Seventh

'@Url.Action("actionName", "controllerName", new { myparam = "blabla" })' – Hartnett

Answer 3

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>

Valse

Answer 4

if using JQuery, you can do this :

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

Propylite

Answer 5

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.

Strident

Answer 6

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")'" />

Posada

Answer 7

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")";' />

Mononucleosis

Answer 8

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

Twill

Answer 9

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

Yippee

Answer 10

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

Try this

Transudation