Why is the raw JSON object getting returned instead of my partial view?

Question

When I submit my form, the page gets redirected to a new window with the raw json object instead of showing the alerts that I have set up for testing. I'm guessing that it has something to do with returning a Json result from the controller, but I'm not experienced enough with ajax or json to know why this is happening.

Partial View (named _FooterButtons)

<div class="row col-12">
    <div class="col-12 footerbuttons">
        <button type="button" onclick="submit()" id="submit-form" class="btn btn-primary" value="Print" style="display: inline-block">Print</button>
        <input type="button" class="btn btn-secondary" value="Cancel" />
    </div>
</div>

Main View

@using (Html.BeginForm("Daily", "Reports", FormMethod.Post, new { id = "reportForm", @class = "report-form col-9" }))
{
...

<partial name="../Shared/_FooterButtons" />
}

JavaScript

$(document).ready(function () {
    $("#startdatepicker").datepicker();
    $("#enddatepicker").datepicker();

    // Add the listener only when everything is loaded
    window.onload = function () {
        // Get the form
        let rform = document.getElementById('reportForm');
        console.log(rform);
        // Add the listener
        rform.addEventListener('submit', function (e) {
            // Avoid normal form process, so no page refresh
            // You'll receive and process JSON here, instead of on a blank page
            e.preventDefault();
            // Include here your AJAX submit:
            console.log("Form submitted");
            $.ajax({
                type: 'POST',
                data: $('#reportForm').serialize(),
                url: '@Url.Action("Daily","Reports")',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    if (data.success) {
                        alert("Data Success");
                    } else {
                        alert("Data Fail");
                        $('#errorsModal').modal('toggle');
                        $('#errorsModal .modal-body label').html(data.message);
                    }
                }
            });
        });
    };
});

Controller

[HttpPost]
public IActionResult Daily(Daily dailyReport)
{
    var dr = new ReportDaily();
    var rc = new ReportDailyCriteria();
    dr.Preview(rc, IntPtr.Zero, out Notification notification);
    //dr.CreateReportAsPDF(ReportCriteria(), @"C:/");
    if (notification.HasErrors)
    {
        return Json(new
        {
            success = false,
            message = notification.GetConcatenatedErrorMessage(Environment.NewLine + Environment.NewLine)
        });
    }

    return Json(new { success = true });
}

Json object that gets returned in a new window

{"success":false,"message":"Must select a payment Source, County and/or Municipal.\r\n\r\nMust select at least one payment type.\r\n\r\nMust select at least one user.\r\n\r\n"}

Answer 1

I used a method similar to what Triby has suggested, but instead of adding an event listener on the form submit, I added one onto the submit button click.

Answer 2

You need to avoid the normal form process and you have 2 options:

First: Add return false to onclick event.

<button type="button" onclick="submit(); return false" id="submit-form" class="btn btn-primary" value="Print" style="display: inline-block">Print</button>

This first option will be executed only if button is clicked, but maybe not if ENTER key is pressed while typing on an input.

Second and better option: Add an event listener to your form:

<script>
// Add the listener only when everything is loaded
window.onload = function() {
    // Get the form
    let rform = document.getElementById('reportForm');
    // Add the listener
    rform.addEventListener('submit', function(e) {
        // Avoid normal form process, so no page refresh
        // You'll receive and process JSON here, instead of on a blank page
        e.preventDefault();
        // Include here your AJAX submit:
        console.log("Form submitted");
        $.ajax({
            type: 'POST',
            data: $('#reportForm').serialize(),
            url: '@Url.Action("Daily","Reports")',
            contentType: 'application/json; charset=utf-8',
            success: function (data) {
                if (data.success) {
                    alert("Data Success");
                } else {
                    alert("Data Fail");
                    $('#errorsModal').modal('toggle');
                    $('#errorsModal .modal-body label').html(data.message);
                }
            }
        });
    });
};
</script>

Edit: Since you're using jQuery .ready(), things are a bit different:

$(document).ready(function () {
    $("#startdatepicker").datepicker();
    $("#enddatepicker").datepicker();

    // Not really sure if window.onload inside .ready() was the problem,
    // but it could be

        // Get the form and add the listener
        $("#reportForm").on('submit', function (e) {
            // Avoid normal form process, so no page refresh
            // You'll receive and process JSON here, instead of on a blank page
            e.preventDefault();

            console.log("Form submitted");
            $.ajax({
                type: 'POST',
                data: $('#reportForm').serialize(),
                url: '@Url.Action("Daily","Reports")',
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    if (data.success) {
                        alert("Data Success");
                    } else {
                        alert("Data Fail");
                        $('#errorsModal').modal('toggle');
                        $('#errorsModal .modal-body label').html(data.message);
                    }
                }
            });
        });
});