.Net core MVC - 通过控制器提交表单不返回ajax - 仅返回带有结果文本的控制器的URL

Question

我有一个索引页，其中有一个表格和一个只有两个下拉列表的简单表单。该页面还有几个带有部分视图的 div。提交时，我需要它只刷新那些 div 而不是整个页面。

有人帮助我使用ajax和控制器。表单提交效果很好。它提交表单并执行几乎所有应该执行的操作。但是在提交时，它不会返回 ajax 来刷新 div，而是将我重定向到控制器的 URL，其中一行显示了我在返回部分传递的内容。有点令人困惑。我希望下面的部分有助于理解它。

表单部分视图：

<form id="ajax_submit" asp-controller="Home" asp-action="CreateBreak" class="DthdropdownGroup ml-3">
<div class="btn-group" style="margin-left:-1rem">
    <select class="form-group dropdownStyling btn-sm dropdown-toggle d-inline-block btn-outline-light" style="width: 7.4em;" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="EmployeeId" asp-for="EmployeeId">
        <option>Dispatcher</option>
        @foreach (var item in Model.Employees)
        {
            <option class="dropdown-item pr-1 form-control" value="@item.Id">@item.DisplayName</option>
        }
    </select>
</div>

<div class="btn-group">
    <select class="form-group dropdownStyling btn-sm dropdown-toggle d-inline-block btn-outline-light" style="width: 7.3em" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" id="EmpPosition" asp-for="EmpPosition">
        <option>Position</option>
        @foreach (var item in Model.Positions)
        {
            <option class="dropdown-item pr-1" value="@item.Id">@item.PositionName</option>
        }
    </select>
</div>
<button type="submit" class="btn btn-sm btn-block dropdownStyling" id="break-submit" style="margin-left: -1rem; width:15rem;">Submit</button>

控制器：

        [HttpPost]
    public async Task<JsonResult> CreateBreak(int EmployeeId, int EmpPosition)
    {
        Break newBreak = new Break();

        newBreak.EmployeeId = EmployeeId;
        newBreak.EmpPosition = EmpPosition;
        newBreak.TimeEntered = DateTime.Now;

        _context.Add(newBreak);
        await _context.SaveChangesAsync();

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

Javascript：

$(document).on("submit", "#ajax_submit", function () {

// prevent regular form submit
e.preventDefault();

var data = {
    EmployeeId: $("#EmployeeId").val(),
    EmpPosition: $("#EmpPosition").val()
}

$.ajax({
    type: "Post",
    url: "/Home/CreateBreak",
    dataType: 'json',
    data: data,
    success: function () {
        $(" #headerRefresh ").load(window.location.href + " #headerRefresh ");
        $(" .breakRefresh ").load(window.location.href + " .breakRefresh ");
    },
});

}）

来自其中一个部分的部分代码，以查看我如何设置部分：

    <div class="dthRefresh">
        <table class="table table-bordered">
            <tbody>
                @foreach (var item in Model.Dths)
                {
                    @*////EMPLOYEE SENT////*@
                    @if (item.EmpSent == true)
                    {
                        <tr style="background-color:lightgreen; font-size:large">
                            <td class="w-75 h-25 p-0">
                                <input type="hidden" class="hiddenDthID" value="@item.Id" />
                                <a href="Javascript:;" class="empNameDth" style="color:black">@[email protected]</a>
                            <td class="h-25 p-0" style="font-size:large">@item.EmpPositionNavigation.PositionName</td>
                            <td class="h-25 justify-content-center p-0 pl-1">
                                <input type="checkbox" value="" id="flexCheckChecked" checked>
                            </td>
                        </tr>
                    }

表单提交得很好，但当我提交时它返回：

所以不要刷新那些div 并停留在索引页面上，它将 URL 更改为 Home/CreateBreak。它应该保留在 Index 上并刷新索引页面上的那些 div。我已经被困了好几天了我真的很感谢任何人的帮助。

Answer 1

但是在提交时，它不会返回 ajax 来刷新 div，而是将我重定向到控制器的 URL，其中包含一行内容，其中显示了我在返回部分传递的内容。有点令人困惑。

那是因为你未能阻止常规表单提交。

你错过了 function () 中的 e ，更改如下：

$(document).on("submit", "#ajax_submit", function (e) {

    // prevent regular form submit
    e.preventDefault();
    //...
})