Navigate to a page on button click

问题

I have a button here.

<button type="button">@item.StepsToList steps to list</button>

I want the button to go to the page similar to my action below.

/ManageSpaces/id/Overview

I'm trying to do this by putting this action link inside the button.

@Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new {controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId })

How to make the action link above work inside the button tag?

回答1:

Buttons aren't for navigation. That's what hyperlinks are for. Putting a non-anchor <a> inside of a <button> isn't valid, either. If your focus is on the look of a button, your choices are to

use a button. Capture the click event and navigate the page using window.location, or
use a hyperlink. Add a CSS framework such as Bootstrap or Foundation, and apply one of their button styles.

Assuming you're familiar with jQuery at all, something like this works for the former point:

<button class="link-button" data-url="/some/url">I navigate somewhere</button>

<script>
    $('.link-button').on('click', function(e) {
        window.location = $(this).data('url');
    });
</script>

For the latter point, Bootstrap and Foundation both have dedicated styles for making just about anything look like a "button":

Bootstrap

<a href="/some/url" class="btn btn-default">I navigate somewhere</a>

Foundation

<a href="#" class="button">I navigate somewhere</a>

回答2:

It's unclear what you're trying to achieve. Do you want to simply navigate to a new page? If so you should use an Html.ActionLink by itself instead of a <button> - that's what they're for. You can style the resulting <a> element to look like a button. If you want to post a form to a new action method, you should specify that in your call to Html.BeginForm, then the button will automatically submit to that action when clicked.

回答3:

@Html.ActionLink("Manage Yoga Space and Calendar", "Overview", new { controller = "ManageSpaces", action = "Overview", id = item.YogaSpaceId }, new { @class = "btn btn-default " })

来源：https://stackoverflow.com/questions/29662692/navigate-to-a-page-on-button-click

标签

html

asp.net-mvc

razor