Asp.Net Core 通过 Ajax 提交表单时获得 500 状态。无需 Ajax 即可完美运行

Question

我有一个非常简单的表单 - 只有三个字段，其中只有两个字段由用户通过下拉菜单填写。第三个自动标记为 DateTime.Now。我使用了来自其他表单的一些脚手架的表单提交代码。当我将该代码放入 Home 控制器中（显然是在更改了一些代码之后）并构建了表单时，一切都提交得很好。所以我知道我的人脉和道路都很好。

但是，提交后，它会刷新整个页面。我不能这样。它只需要刷新页面上的特定 div 即可。所以，我必须通过 Ajax 来运行它。这就是我失去一半头发的地方......

当我记录通过 Ajax 传入的值时，获得了正确的值，但随后我收到了“Home/CreateBreak”的 500 错误，这是就在控制器中的位置。以下是所有代码和控制台在 Chrome 中的外观的屏幕截图。预先感谢您的帮助。

Home Controller：（创建条目时仅填写 TimeEntered、EmployeeId 和 EmpPosition）。

     //Create//
    [HttpPost]
    public async Task<IActionResult> CreateBreak([Bind("Id,TimeEntered,TimeCleared,EmpSent,EmployeeId,EmpPosition,RlfPosition")] Break newBreak)
    {
        if (ModelState.IsValid)
        {
            newBreak.TimeEntered = DateTime.Now;
            _context.Add(newBreak);
            await _context.SaveChangesAsync();
            return Json(new { success = true, });
        }
           
        else
        {
            return Json(new { success = false });
        }                
    }

Ajax：

//Add Break
$(document).on("click", "#break_submit", function () {
    var model = {};
    model.EmployeeId = Number($("#EmpId").val());
    model.EmpPosition = Number($("#EmployeePosition").val());
    console.log("model", model);
    $.ajax({
        type: "Post",
        url: "/Home/CreateBreak",
        dataType: 'json',
        data: JSON.stringify(model),
        success: function (data) {
            if (data.success)
            {
                $(" #headerRefresh ").load(window.location.href + " #headerRefresh ");
                $(" .dthRefresh ").load(window.location.href + " .dthRefresh ");
            }
            else
                alert("Error: Please enter your name AND position");
        },
        error: function () {
            alert("Error: Please enter your name AND position");
        }
    });
});

表单：

@model Seating.ViewModels.ListsVM

<form id="ajax_submit" 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;" id="EmpId">
            <option disabled selected>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" id="EmployeePosition">
            <option disabled selected>Position</option>
            @foreach (var item in Model.Positions)
            {
                <option class="dropdown-item pr-1" value="@item.Id">@item.PositionName</option>
            }
        </select>
    </div>
    <button type="button" class="btn btn-sm btn-block dropdownStyling" id="break_submit" style="margin-left: -1rem; width:15rem;">Submit</button>
</form>

填充下拉列表的虚拟机（适用于所有表单 - 不仅仅是这个）：

namespace Seating.ViewModels
{
    public class ListsVM
    {
        public ListsVM()
        {
            Employees = new List<Employee>();
            Positions = new List<Position>();
        }
        public IEnumerable<Dth> Dths { get; set; }
        public IEnumerable<Break> Breaks { get; set; }
        public IEnumerable<Lunch> Lunches { get; set; }
        public IEnumerable<Employee> Employees { get; set; }
        public IEnumerable<Position> Positions { get; set; }

        public int EmployeeId { get; set; }
        public int EmpPosition { get; set; }
        public bool EmpSent { get; set; }
        public bool LunchTime { get; set; }
        public bool LongerLunch { get; set; }
        public bool DblLunch { get; set; }
    }
}

以及屏幕截图。您可以看到日志显示员工 ID 3 和职位 3 - 这是完美的。但随后它会感到困惑，无法弄清楚从那里该去哪里——尽管我准确地告诉了它该去哪里。

再次感谢

Answer 1

恕我直言，您使用 Model 结构不必要地使 Controller 方法上的事情变得复杂。由于您只需将 EmployeeId 和 EmpPosition 变量发送到 Controller 方法，

//Add Break
$(document).on("click", "#break_submit", function () {
    var EmployeeId = Number($("#EmpId").val());
    var EmpPosition = Number($("#EmployeePosition").val());
    var json = {
            EmployeeId: EmployeeId,
            EmpPosition: EmpPosition
        };
    console.log("Model", json);
    $.ajax({
        type: "post",
        //url: "/Home/CreateBreak",
        url: "@Url.Action("CreateBreak", "Home")",
        dataType: "json",
        data: {"json": JSON.stringify(json)},
        success: function (data) {
            if (data.success)
            {
                $(" #headerRefresh ").load(window.location.href + " #headerRefresh ");
                $(" .dthRefresh ").load(window.location.href + " .dthRefresh ");
            }
            else
                alert("Error: Please enter your name AND position");
        },
        error: function () {
            alert("Error: Please enter your name AND position");
        }
    });
});

因此 您可以执行以下操作： code> 方法将如下所示：

 //Create//
[HttpPost]
public async Task<IActionResult> CreateBreak(string json)
{
    Break newBreak=new Break();
    int EmployeeId=0;
    int EmpPosition=0;
    
    if(!string.IsNullOrEmpty(json))
    {
        var jsonData = JsonConvert.DeserializeObject<dynamic>(json);
        EmployeeId = Convert.ToInt32(jsonData.EmployeeId);
        EmpPosition = Convert.ToInt32(jsonData.EmpPosition);
        
        newBreak.EmployeeId = EmployeeId;
        newBreak.EmpPosition = EmpPosition;
        
        if (ModelState.IsValid)
        {
            newBreak.TimeEntered = DateTime.Now;
            _context.Add(newBreak);
            await _context.SaveChangesAsync();
            return Json(new { success = true, });
        }
           
        else
        {
            return Json(new { success = false });           
        } 
    }
    else
    {
        return Json(new { success = false });   
    }             
}

Answer 2

来自 ASP.NET 的 500 可能意味着在处理请求时的某个时刻抛出了未处理的异常。
我建议你将调试器附加到网络服务器进程
如果您还仔细检查 URL 是否正确，将会有所帮助。

Answer 3

您有错误，因为您的操作输入参数为空。从 ajax 中删除 JSON.stringify(model)

$.ajax({
        type: "Post",
        url: "/Home/CreateBreak",
        dataType: 'json',
        data: model,
        success: function (data) {
         .....

或者如果您想使用 json，则添加 contentType: application/json

$.ajax({
        type: "Post",
        url: "/Home/CreateBreak",
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(model),
        success: function (data) {
        ...

并将 [FromBody] 添加到操作

public async Task<IActionResult> CreateBreak([FromBody] Break newBreak)