javascript - 为什么返回原始 JSON 对象而不是我的部分 View ？

Question

当我提交表单时，页面会重定向到带有原始 json 对象的新窗口，而不是显示我为测试设置的警报。我猜测这与从 Controller 返回 Json 结果有关，但我对 ajax 或 json 的经验不够，不知道为什么会发生这种情况。

部分 View (名为 _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);
                    }
                }
            });
        });
    };
});

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

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

您需要避免正常的表单流程，您有两个选择:

第一:将 return 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);
                    }
                }
            });
        });
});