Html button calling an MVC Controller and Action method

Click and go: No-form button redirection

Do away with forms entirely when you just need redirection. Use an input button with type="button" and the onclick attribute:

<input type="button" value="Execute Action"
       onclick="location.href='@Url.Action('Action', 'Controller')'" />


With Razor syntax, this creates a non-POST button that redirects the user to the right URL.

Modern times: AJAX calls without page refresh

Stay on the page while making action calls via AJAX:

$("#ajaxButton").click(function(e) {
    e.preventDefault(); // Keep refreshing like a Reddit feed at bay
    $.ajax({
        url: '@Url.Action('Action', 'Controller')',
        type: 'GET', 
        success: function(response) {
            // Handle response, probably a conspiracy theory
        }
    });
});


This initiates independent HTTP requests without causing page refresh, keeping users as hooked as to refreshing Reddit feeds.

Hidden mines: Common pitfalls and solutions

Beware of the sneaky errors:

• Unintentionally submitting a form? Happens when a button inside a <form> lacks type="button".
• $ not working? Check if jQuery got an invite.
• Url.Action not resolving correctly? Probably forgot to @ it.

Helpers to the rescue: MVC View HtmlHelpers

Use MVC's Html Helpers to keep your markup clean:

@Html.ActionLink("Execute Action", "Action", "Controller", null, new { @class = "button" })


It generates an a tag that is styled and behaves like a button. Let's say, it's a secret identity kind of thing!

Non-form input buttons: Best practices

Here are some solid best practices for your type="button" heroics:

• Indicate type="button" explicitly and avoid untimely page refreshes.
• Using @Url.Action() in Razor views ensures correct routing.
• AJAXify for a more seamless user experience.
• Always load the jQuery combat gear if you're going AJAX.
• Remember that MVC requests have a lifecycle, like that gym routine you never started.
• The different button methods do affect SEO and UX. Tread wisely.

With these in mind, your button battles won't leave you hitting the panic button!