ASP.NET CORE 3.0 Jquery Ajax请求成功有时不在同一视图中执行

Posted 2023-01-05

这分别是我的视图，ajax请求和控制器。问题是当我保存某些内容时，有时它会在ajax请求中触发成功方法，有时却没有。

查看

        <form id="myForm">
        <div>
            <div class="row">
                <div class="col-12">
                    <label asp-for="RoleName" class="control-label"></label>
                </div>
            </div>
            <div class="row">
                <div class="col-10">
                    <input asp-for="RoleName" class="form-control" />
                    <span asp-validation-for="RoleName" class="text-danger"></span>
                </div>
                <div class="col-2">
                    <div>
                        <button value="Index" id="btnSave" class="btn btn-success" data-toggle="tooltip" data-placement="bottom" title="Save !"><i class="fa fa-save"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </form>

Ajax请求

        $("#btnSave").click(function () 

        debugger;

        var RoleObj =  RoleName: $('#RoleName').val() ;

        $.ajax(
            cache: false,
            type: "POST",
            contentType: "application/json; charset=utf-8",
            url: '@Url.Action("Index", "MasterRoles")',
            dataType: "json",
            data: JSON.stringify(RoleObj),
            headers:  RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() 
        ).done(function (response) 
            alert('Success');
        ).fail(function (jqXHR, textStatus) 
            alert('Error');
        );
    );

这是在post方法中调用的控制器。数据发布的唯一问题是有时成功获取返回值，但并非总是如此

      [HttpPost]
    [ValidateAntiForgeryToken]
    public async Task<JsonResult> Index([Bind("RoleName")] [FromBody] MasterRole masterRole)
    
        try
        
            if (ModelState.IsValid)
            
                _context.Add(masterRole);
                await _context.SaveChangesAsync();

                return Json(new  status = "1", roleList );
            
            else
            
                return Json(new  status = "2", roleList );
            
        
        catch (Exception ex)
        
            return Json(new  status = "2" );
        
    

答案

我怀疑您的表单是在单击按钮时提交的，这就是为什么您有时看不到ajax函数被调用的原因。

您需要忽略默认的鼠标单击按钮，因为这将提交表单：

$("#btnSave").click(function (e) 
  e.preventDefault();
  debugger;
  var RoleObj =  RoleName: $("#RoleName").val() ;
  $.ajax(
    cache: false,
    type: "POST",
    contentType: "application/json; charset=utf-8",
    url: '@Url.Action("Index", "MasterRoles")',
    dataType: "json",
    data: JSON.stringify(RoleObj),
    headers: 
      RequestVerificationToken: $(
        'input:hidden[name="__RequestVerificationToken"]'
      ).val(),
    ,
  )
    .done(function (response) 
      alert("Success");
    )
    .fail(function (jqXHR, textStatus) 
      alert("Error");
    );
);