.Net 核心 MVC - 通过控制器提交表单不 return ajax - 只是控制器的 URL 和结果文本

Question

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

有人帮我 ajax 和控制器。表单提交效果很好。它提交表单并做它应该做的几乎所有事情。但是在提交时，它没有返回到 ajax 来刷新 div，而是将我重定向到控制器的 URL，其中一行显示了我在 return 部分中传递的任何内容。有点混乱。我希望下面的部分有助于理解。

表单局部视图：

<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">@item.Employee.DisplayName-@item.Employee.DispatchNumber</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>
                    }

表单提交得很好，但是当我提交它时 returns this:

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

Answer 1

But on submit, instead of going back to ajax to refresh the divs, it redirects me to the controller's URL with a line that says whatever I pass in the return section. Kind of confusing.

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

您在 function () 中错过了 e，更改如下：

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

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

.Net 核心 MVC - 通过控制器提交表单不 return ajax - 只是控制器的 URL 和结果文本

.Net core MVC - submit a form through a controller doesn't return ajax - just the controller's URL with result text

javascript

ajax

asp.net-core-mvc