Stopping POST Behavior from INput Button

Question

Hello everyone and thanks for the help in advance. I am developing an Asp.Net Core application that uses jQuery ajax to post data to a controller that returns a partial view to update the page. Since this is an ajax call, I don't want return the entire page, instead wanting only to update a small portion. I have attempted to override the button click:

$(document).ready(function () {
    $('#btnupload').off('click').on('click', function (event) {
        event.preventDefault();
        let form = $("#frmupload");
        let url = form.attr('action');
        $.ajax({
            type: "POST",
            url: url,
            data: form.serialize(), // Serialize form data
            success: function (response) {
                $("#divRESPONSE").html(response);
            },
            error: function (data) {
                alert("Error occurred while submitting the form");
            }
        });
    });
});

And the HTML

                    <form id="frmupload" name="frmupload" method="post" action="/Controller/Upload">
                        <input type="hidden" id="ID" name="ID" value="123" />
                        <input id="btnupload" name="btnupload" type="submit" value="Upload" />
                    </form>

When the button is clicked, the form posts to /Controller/Upload, but ends up displaying the returned partial view like a complete page.

The controller looks like:

        [HttpPost]
        public IActionResult Upload(int ID) 
        {


            // do some database stuff

            return PartialView("~/Views/Shared/_PartialView.cshtml");

        }

Any help would be appreciated.

Answer 1

Stopping POST Behavior from INput Button

Isn't event.preventDefault(); working?

If not, please try changing

<input id="btnupload" name="btnupload" type="submit" value="Upload" />

to

<input id="btnupload" name="btnupload" type="button" value="Upload" />

Answer 2

If you're seeing a full page refresh after submitting the form, it means the AJAX request isn't working as intended. To pinpoint the issue, use your browser's Developer Tools and strategically place console.log() statements within your JavaScript code. This will help you track the flow of data and identify where the script is failing.

The example below demonstrates how to handle form submissions using AJAX, focusing on the form's submit event rather than a button click.

@{
    ViewData["Title"] = "Ajax";
}
<form id="frmupload" name="frmupload" method="post" action="/Ajax/Upload">
    <input type="hidden" id="ID" name="ID" value="123" />
    <input id="btnupload" name="btnupload" type="submit" value="Upload" />
</form>
<hr />
<div id="divRESPONSE"></div>

@section scripts {

<script>
        $(document).ready(function() {
          $('#frmupload').submit(function(event) {
            event.preventDefault();

            const form = $("#frmupload");
            const url = form.attr('action');

            $.ajax({
              type: 'POST',
              url: url,
              data: $(this).serialize(),
              dataType: 'html',
              success: function(response) {
                console.log(response);
                $('#divRESPONSE').html(response);
              },
              error: function(xhr, status, error) {
                console.error('AJAX Error:', status, error);
                $('#divRESPONSE').html('<p style="color: red;">An error occurred.</p>');
              }
            });
          });
        });
</script>
}

Answer 3

View source and check the jquery link is before the code. Also check the browsers console for errors.