如何让渲染在Layout上的PartialView触发OnPostAsync方法？

问题根源 #

你现在的问题出在两个核心点：

• 用Html.PartialRender渲染Feedback.cshtml时，仅输出了视图的静态HTML，但表单没有和FeedbackModel的OnPostAsync方法建立正确的路由关联，导致点击提交后找不到对应的Post处理端点。
• 直接写asp-page-hander="@Model.OnPostAsync()"或onclick="@Model.OnPostAsync()"会在页面渲染阶段就执行C#方法——因为Razor会即时解析并调用代码，而非生成点击事件的绑定逻辑。

方案一：正确配置表单路由（保留PageModel） #

1. 修正布局中的渲染方式 #

替换PartialRender为RenderPage，确保页面模型的路由逻辑能被正确识别：

<div class="feedback">
    @await Html.RenderPage("/Feedback.cshtml", new FeedbackModel())
</div>
<div class="content">
    @RenderBody()
</div>

2. 完善Feedback视图的表单 #

给表单添加asp-page属性指定目标页面路径，让提交请求能正确指向FeedbackModel的Post方法：

@model FeedbackModel
<div id="offcanvas formContainer">
  <form id="feedbackForm" method="post" asp-page="/Feedback">
    <!-- 表单字段需用asp-for绑定模型属性，确保数据能正确提交 -->
    <input asp-for="UserName" type="text" placeholder="你的昵称" />
    <textarea asp-for="Content" placeholder="反馈内容"></textarea>
    <button type="submit">提交反馈</button>
  </form>
</div>

3. 可选：AJAX无刷新提交（保留滑层状态） #

如果不想提交后跳转页面，用AJAX处理提交逻辑：

document.getElementById('feedbackForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const response = await fetch(this.action, {
        method: this.method,
        body: formData
    });
    if (response.ok) {
        // 提交成功后的交互，比如关闭滑层、提示用户
        document.getElementById('offcanvas').style.transform = 'translateX(100%)';
        alert('反馈提交成功！');
    } else {
        alert('提交失败，请稍后重试');
    }
});

方案二：改用ViewComponent配合AJAX提交 #

若不想依赖PageModel，可通过ViewComponent渲染视图，再用AJAX把数据提交到后端端点：

1. 创建FeedbackViewComponent #

public class FeedbackViewComponent : ViewComponent
{
    public async Task<IViewComponentResult> InvokeAsync()
    {
        var model = new FeedbackModel();
        return View(model);
    }
}

2. 编写ViewComponent对应的视图（Views/Shared/Components/Feedback/Default.cshtml） #

@model FeedbackModel
<div id="offcanvas formContainer">
  <form id="feedbackForm">
    <input name="UserName" type="text" placeholder="你的昵称" />
    <textarea name="Content" placeholder="反馈内容"></textarea>
    <button type="submit">提交反馈</button>
  </form>
</div>

3. 在布局中引用ViewComponent #

<div class="feedback">
    @await Component.InvokeAsync("Feedback")
</div>
<div class="content">
    @RenderBody()
</div>

4. AJAX提交逻辑（需包含CSRF令牌验证） #

document.getElementById('feedbackForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    // 手动加入ASP.NET Core的CSRF令牌，避免提交被拦截
    formData.append('__RequestVerificationToken', document.querySelector('input[name="__RequestVerificationToken"]').value);
    
    const response = await fetch('/Feedback/OnPostAsync', {
        method: 'POST',
        body: formData
    });
    // 后续成功/失败处理逻辑同上
});

关键注意事项 #

• 绝对不要在Razor视图中直接调用@Model.OnPostAsync()，这会导致页面一加载就执行方法，而非点击按钮触发。
• 表单的method="post"必须保留，ASP.NET Core会自动生成CSRF隐藏令牌，不要手动删除。
• 若用AJAX提交，必须确保请求携带CSRF令牌，否则后端会拒绝请求。

内容的提问来源于stack exchange，提问作者Xeno Xetric