Asp.Net Core Razor Pages无表单提交修改PageModel属性的问题

问题分析 #

你的代码里有几个核心问题导致OnPostRemovePhoto方法没被触发：

1. 按钮没有设置id="Click"，jQuery选择器找不到目标元素；
2. Ajax请求没携带防伪造令牌，Razor Pages默认会拦截无令牌的POST请求；
3. 没阻止按钮的默认表单提交行为，可能导致页面跳转中断Ajax请求；
4. 后台SchoolEdit可能因无表单数据绑定处于null状态，无法修改Logo属性。

分步解决方案 #

1. 修正按钮标记，添加ID并准备拦截默认行为

给按钮加上id，确保jQuery能选中它：

@if (Model.SchoolEdit.Logo != null) {
    <button id="Click" class="btn btn-danger" asp-page-handler="RemovePhoto">
        <span aria-hidden="true">&times;</span>
    </button>
}

2. 完善后台Handler方法

确保方法是public访问修饰符，并且能正确获取/更新SchoolEdit（这里假设你用仓储模式操作数据）：

public class SchoolModel : PageModel {
    [BindProperty]
    public School SchoolEdit { get; set; }

    private readonly ISchoolRepository _schoolRepo;

    public SchoolModel(ISchoolRepository schoolRepo)
    {
        _schoolRepo = schoolRepo;
    }

    // GET方法初始化SchoolEdit
    public async Task OnGetAsync(int id)
    {
        SchoolEdit = await _schoolRepo.GetByIdAsync(id);
    }

    // 处理移除Logo的POST Handler
    public async Task<IActionResult> OnPostRemovePhoto()
    {
        // 重新从数据库获取School实例（因为BindProperty默认不绑定无表单的POST数据）
        var school = await _schoolRepo.GetByIdAsync(SchoolEdit.Id);
        if (school != null)
        {
            school.Logo = null;
            await _schoolRepo.UpdateAsync(school);
            // 更新页面的SchoolEdit实例
            SchoolEdit = school;
            return new JsonResult(new { success = true });
        }
        return new JsonResult(new { success = false, message = "学校信息不存在" });
    }
}

3. 修正Ajax代码，添加防伪造令牌并阻止默认行为

修改脚本，确保携带防伪造令牌，同时拦截按钮默认行为：

@section Scripts {
    <script>
        $(function () {
            $("#Click").click(function (e) {
                // 阻止按钮默认的表单提交/跳转行为
                e.preventDefault();

                $.ajax({
                    type: "POST",
                    // 用@Url.Page()生成正确的Handler URL，避免硬编码路径错误
                    url: '@Url.Page("School", "RemovePhoto")',
                    // 携带防伪造令牌，Razor Pages默认在页面生成隐藏的__RequestVerificationToken字段
                    headers: {
                        "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val()
                    },
                    error: function (xhr) {
                        alert('请求失败：' + xhr.responseText);
                    },
                    success: function (response) {
                        if (response.success) {
                            // 成功后更新UI，比如隐藏按钮或移除图片显示
                            $("#Click").hide();
                            alert('Logo已成功移除');
                        } else {
                            alert('操作失败：' + response.message);
                        }
                    }
                });
            });
        })
    </script>
}

额外注意事项 #

• 如果需要传递额外参数（比如SchoolId），可以在Ajax的data字段添加：

  data: { schoolId: '@Model.SchoolEdit.Id' },
  

  后台方法对应修改为：

  public async Task<IActionResult> OnPostRemovePhoto(int schoolId)
  {
      var school = await _schoolRepo.GetByIdAsync(schoolId);
      // ...后续逻辑
  }
  

• 若不需要持久化到数据库，仅修改页面模型的SchoolEdit，可以直接在Handler里操作SchoolEdit.Logo = null，但要注意页面模型的生命周期（每次请求都会重新实例化）。

内容的提问来源于stack exchange，提问作者Meisam Dehghan