CODEWITHSUNDEEP
htmlasp.net-mvcrazor
chuckd
chuckd

Reputation: 14610

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?

Upvotes: 0

Views: 2822

Answers (3)

Tieson T.
Tieson T.

Reputation: 21246

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>

Upvotes: 1

chuckd
chuckd

Reputation: 14610

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

Upvotes: 0

ChrisV
ChrisV

Reputation: 1309

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.

Upvotes: 0

Related Questions