Почему необработанный JSON объект возвращается вместо моего частичного просмотра?

Question

Когда я отправляю свою форму, страница перенаправляется в новое окно с необработанным объектом json вместо отображения предупреждений, которые я настроил для тестирования. Я предполагаю, что это как-то связано с возвращением Json результата с контроллера, но я не достаточно опытен с ajax или json, чтобы понять, почему это происходит.

Частичное представление (с именем _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>

Главное представление

@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);
                    }
                }
            });
        });
    };
});

Контроллер

[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 объект, который возвращается в новом окне

{"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

Вам необходимо избежать обычного процесса формы, и у вас есть 2 варианта:

Первое: добавить возвращаемое значение false для события onclick.

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

Эта первая опция будет выполнена, только если кнопка нажата, но, возможно, нет, если при вводе на клавиатуре нажата клавиша ENTER.

Второй и лучший вариант: добавьте прослушиватель событий в форму:

<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>

Редактировать: Поскольку вы используете jQuery .ready(), все немного по-другому:

$(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);
                    }
                }
            });
        });
});

Answer 2

Я использовал метод, аналогичный тому, который предложил Triby, но вместо добавления прослушивателя событий в форму отправки, я добавил один в нажатие кнопки отправки.