使用Ajax调用Razor Page Post方法实现弹窗删除确认问题排查

问题描述 #

使用jQuery UI Dialog实现删除操作二次确认弹窗时，点击弹窗内的确认删除按钮，始终无法调用Razor Page的OnPost删除处理方法，后端接口未收到请求。

现有代码 #

后端DeleteUser页处理代码 #

public class DeleteUserModel : PageModel
{
    public InformationUserViewModel InformationUser { get; set; }
    public void OnGet(int id)
    {
        ViewData["UserId"] = id;
        InformationUser = _userService.GetUserInformation(id);
    }

    public IActionResult OnPost(int userId)
    {
        _userService.DeleteUser(userId);
        return RedirectToPage("Index");
    }
}

Index页删除按钮代码 #

@page
@model Fraud.Pages.Admin.IndexModel

<input type="button" value="Delete" class="btn btn-danger" onclick="deleteConfirm('@user.UserName', '@user.UserId')" />

删除确认弹窗代码 #

<div class="modal-body">
    <div class="row">
        <div class="form-group">
            <div class="col-sm-12">
                <span>Are you sure you want to delete?</span>
                <strong id="deletedValueName"></strong>
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    <input type="submit" class="btn btn-danger" value="Delete"  onclick="deleteData()" />
</div>

原有jQuery Ajax代码 #

<script type="text/javascript">
    var deleteConfirm = function (val,id) {
        $('#deletedValueName').text(val);
        $('#id').val(id);
        $('#delete-conformation').modal('show');
    }

    var deleteData = function () {
        $('#divLoading').show();
        var id =  $('#id').val();
        $.ajax({
            type: "POST",
            url: "/Admin/Users/DeleteUser?handler=Send",
            // url: '/Admin/Users/DeleteUser/OnPost',
            data: { UserId: id },
            success: function (result) {
                $("#delete-conformation").modal('hide');
            },
            error: function () {
                $("#delete-conformation").modal('hide');
            }
        });
    }
</script>

问题根因 #

• 请求路径配置错误：Razor Page的Handler路由规则为OnPost[HandlerName]对应POST请求的?handler=HandlerName参数，当前后端只有无后缀的OnPost方法，不需要加handler参数，写?handler=Send和注释里的/OnPost路径都不符合路由规则，匹配不到后端方法。
• 缺少防伪造令牌验证：Razor Page默认开启AntiForgeryToken校验，Ajax POST请求未携带合法令牌会直接返回400错误，无法进入后端处理逻辑。
• 存储用户ID的DOM元素不存在：JS逻辑中调用$('#id').val(id)给元素赋值，但页面中没有定义id为id的隐藏域，取值时会拿到undefined，后端参数绑定失败。
• 按钮默认提交行为冲突：弹窗内的删除按钮是type="submit"类型，点击时会触发表单默认提交，打断Ajax请求逻辑。

修复方案 #

1. 补充页面缺失的隐藏域和防伪造令牌：
   在页面中加入存储待删除用户ID的隐藏域，同时渲染Razor Page自动生成的防伪造令牌：

   <!-- 存储待删除用户ID -->
   <input type="hidden" id="deleteUserId" />
   <!-- 生成防伪造令牌 -->
   @Html.AntiForgeryToken()
   

2. 修正弹窗删除按钮配置，避免默认提交：
   将删除按钮的type改为button，同时在点击事件中传入事件对象，阻止默认行为：

   <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
       <button type="button" class="btn btn-danger" onclick="deleteData(event)">Delete</button>
   </div>
   

3. 修正JS逻辑，修复路径、补全请求头、修复ID赋值逻辑：

   <script type="text/javascript">
       var deleteConfirm = function (val,id) {
           $('#deletedValueName').text(val);
           // 给正确的隐藏域赋值
           $('#deleteUserId').val(id);
           $('#delete-conformation').modal('show');
       }
   
       var deleteData = function (e) {
           // 阻止默认事件
           e.preventDefault();
           $('#divLoading').show();
           var id = $('#deleteUserId').val();
           $.ajax({
               type: "POST",
               // 修正请求路径，去掉错误的handler参数
               url: "/Admin/Users/DeleteUser",
               // 参数名和后端形参userId保持一致，避免绑定失败
               data: { userId: id },
               // 携带防伪造令牌请求头
               headers: {
                   "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val()
               },
               success: function (result) {
                   $("#delete-conformation").modal('hide');
                   $('#divLoading').hide();
                   // 删除成功后刷新页面即可
                   location.reload();
               },
               error: function () {
                   $("#delete-conformation").modal('hide');
                   $('#divLoading').hide();
                   alert("删除失败，请重试");
               }
           });
       }
   </script>
   

补充：如果后续要自定义Handler方法名，比如将后端方法改为public IActionResult OnPostSend(int userId)，才需要将请求URL改为/Admin/Users/DeleteUser?handler=Send。

内容的提问来源于stack exchange，提问作者fahime abouhamze