Html button calling an MVC Controller and Action method

html

ajax

mvc

best-practices

byAlex Kataev·Aug 19, 2024

To directly call an MVC Controller's Action method with a <form>, use this:

<form action="/Controller/Action" method="post">
    <input type="submit" value="Execute Action" />
</form>

For asynchronous triggering with AJAX and jQuery:

$("#buttonId").click(function() {
    $.post('/Controller/Action', function(response) {
        // Handle response here
    });
});

These snippets are for POST requests and adopt to your specific controllers and actions. Remember to load jQuery for AJAX.

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!

explain-codes / Html / Html button calling an MVC Controller and Action method

Linked

Jquery AJAX submit form



Submit form using a button outside the <form> tag



How do I make an HTML button not reload the page



How to submit an HTML form without redirection



Difference between `` and ``