Proper way to handle maneuvering through pages using buttons in ASP.NET MVC?

Question

I'm writing an app with ASP.NET MVC where, for various reasons, the navigation is handled through HTML input buttons. What are the Best practices on how to handle this situation?

1. Set up a Form on the buttons where information needs to be POSTed and just use JavaScript to redirect on the buttons where information doesn't need to be retained

2. Have all buttons handled through forms, to the point where a mini-form handles navigation on the buttons where the information doesn't need to be retained

   <% using (Html.BeginForm())
      { %>
   <input type="hidden" name="controller" value="1" />
   <input type="hidden" name="action" value="Location" />
   <input id="BackButton" type="submit" value="Go Back" />
   <% } %>
   

3. Something I haven't thought of here

Answer 1

3: Style some anchor tags to look like buttons.

On a recent application we implemented option 1. The client liked having "Cancel" buttons on all the forms (...) so we just stuck a click event on the reset inputs which did:

history.go(-1); return false;

Answer 2

1. Javascript is probably your best bet.

Using a mini form seems really heavy handed. You are basically looking to use a button as a link (I'd look seriously at why you are breaking that very basic web convention: buttons post/modify and links navigate) so the more basic you can make it the better.

Answer 3

Here you can find a pretty good article on how to style an anchor tag like a button

Answer 4

Use empty <a href="#"> tags and Javascript/jQuery. For example:

In View:

<script src="<%= Url.Content("~/Content/navigation.js") %>" type="text/javascript"></script>
...
<a id="back" href="#">Back</a>
<a id="next" href="#">Next</a>

<script type='text/javascript'>
    var back_href="<%= Url.Action("...") %>";
    var next_href="<%= Url.Action("...") %>";
</script>

Somewhere in navigation.js:

$(document).ready(function() {
    $('a#back').attr('href', back_href);
    $('a#next').attr('href', next_href);
});