能否在嵌套PartialView中使用Modal并在主页面显示？PageHandler未触发

在Razor页面中通过PartialView展示数据表格，点击编辑按钮想唤起Modal PartialView编辑行数据，但调试发现后端OnPostEditPositionPartial从未被调用。

Razor页面中的表格PartialView容器 #

<div class="col-8 border-start border-bottom border-dark border-end pt-2">
    <div id="MyPartialView">
        @{
            await Html.RenderPartialAsync("_ArticlePositonsPartial", Model.TempPositionsView, ViewData);
         }
    </div>
</div>

表格样式说明 #

表格每行右侧操作列包含垂直排列的蓝色编辑按钮、红色删除按钮。

表格PartialView内的操作按钮代码 #

<td style="width:60px">
    <div class="btn-group-vertical">
        <button class="btn btn-outline-primary btn-sm" data-toggle="ajax-modal" data-url="@Url.Page("NewInvoice", "EditPositionPartial", @Model.TempPositions[i])"> <i class="fa-solid fa-pen-to-square"></i></button>
        @Html.AntiForgeryToken()
        <button class="btn btn-outline-danger btn-sm" onclick="GetPartialView(2,@Model.TempPositions[i].Id)"> <i class="fa-solid fa-trash-can"></i></button>
    </div>
</td>

后端PageHandler代码 #

public async Task<PartialViewResult> OnPostEditPositionPartial(FaktTempPositionen f)
{
    FaktTempPositionen faktTempPosition = await _TempArticlePositionRepository.GetPositionBySessionKeyAndId(f.SessionKey, f.Id);

    return new PartialViewResult
    {
        ViewName = "_EditPositionPartial",
        ViewData = new ViewDataDictionary<FaktTempPositionen>(ViewData, faktTempPosition),
    };
}

Modal的PartialView代码 #

@model Rechnungen.Models.Views.TempPositonsView
<div class="modal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
               <h6>test</h6>
            </div>
        <div class="modal-body">
            
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Schließen</button>
            <button type="button" class="btn btn-primary" data-save="modal">Speichern</button>
        </div>
    </div>
</div>
</div>

Modal相关JS代码 #

$(function () {
    const modalPlaceholder = $('#modal-placeholder');
    $('button[data-toggle="ajax-modal"]').on('click', function () {
        const requestUrl = $(this).data('url');
        $.get(requestUrl)
            .done(function (response) {
                modalPlaceholder.html(response);
                modalPlaceholder.find('.modal').modal('show');
            });
    });
});

核心问题 #

后端Handler定义为Post请求（OnPostEditPositionPartial），但前端JS使用$.get()发起Get请求，请求方式不匹配，导致Razor页面无法映射到对应的Post Handler，因此从未被调用。

另外存在模型不匹配问题：Modal PartialView的模型是TempPositonsView，但后端返回的是FaktTempPositionen，会导致视图渲染错误，需要统一模型类型。

解决方案 #

方案1：修改后端为Get Handler

将Post Handler改为Get版本，匹配前端请求方式：

public async Task<PartialViewResult> OnGetEditPositionPartial(FaktTempPositionen f)
{
    FaktTempPositionen faktTempPosition = await _TempArticlePositionRepository.GetPositionBySessionKeyAndId(f.SessionKey, f.Id);

    return new PartialViewResult
    {
        ViewName = "_EditPositionPartial",
        ViewData = new ViewDataDictionary<FaktTempPositionen>(ViewData, faktTempPosition),
    };
}

方案2：修改前端为Post请求

若必须使用Post（如涉及敏感数据或后续提交修改），调整JS代码并携带AntiForgeryToken：

1. 调整按钮参数传递方式，添加data属性：

<button class="btn btn-outline-primary btn-sm" data-toggle="ajax-modal" 
        data-url="@Url.Page("NewInvoice", "EditPositionPartial")"
        data-id="@Model.TempPositions[i].Id"
        data-session-key="@Model.TempPositions[i].SessionKey">
    <i class="fa-solid fa-pen-to-square"></i>
</button>

2. 修改JS为Post请求：

$(function () {
    const modalPlaceholder = $('#modal-placeholder');
    $('button[data-toggle="ajax-modal"]').on('click', function () {
        const requestUrl = $(this).data('url');
        const token = $('input[name="__RequestVerificationToken"]').val();
        $.post(requestUrl, { 
            __RequestVerificationToken: token,
            Id: $(this).data('id'),
            SessionKey: $(this).data('session-key')
        })
            .done(function (response) {
                modalPlaceholder.html(response);
                modalPlaceholder.find('.modal').modal('show');
            });
    });
});

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