使用 Ajax 更新非 MVC Asp.Net Core 6 RazorPages 上的部分视图

Question

我正在使用 RazorPages（无 MVC）开发 ASP.Net Core 6 Web 应用程序。 RazorPage 包含一个部分视图，我想在模型更新后更新它。通过使用 Ajax 在代码隐藏中调用处理程序，可以成功完成模型更新。

但是：如何更新局部视图以显示更改后的模型？处理程序返回一个新生成的 PartialView，但到目前为止，所有测试的更新选项都失败了。

所以有一个 RazorPage MappingDetail 其中包括部分：

<div id="detailPartial" class="col-6">
      <partial name="shared/AdminLTE/_MappingDetailPartial" model=Model.SelectedDetailsList />
  </div>

部分_MappingDetailPartial接收并使用这样的模型：

@model List<EpaMdetail>
...
foreach(EpaMdetail detail in Model)
{
 //do some stuff to show
}

RazorPage 代码隐藏中的处理程序MappingDetail 看起来像这样（由 Ajax 成功调用）：

public async Task<PartialViewResult> OnPostSetSelectedId([FromBody]string id)
        {

            //some testdata
            MappingDetailsList = await _repositoryService.GetMappingDetailsByHeader(MappingId);
            EpaMdetail detail = new EpaMdetail();
            detail.ItmIid = "E0_I_001";
            detail.SnomedFsn = "xcvdxfgvfxgfd";
            detail.SnomedId = "12321324324324234";
            MappingDetailsList.Add(detail);


            SelectionId = id;
            SelectedDetailsList = new List<EpaMdetail>();
            SelectedDetailsList.AddRange(MappingDetailsList.Where(x=>x.ItmIid == id));

            //return partial view with updated model and update on client-side???
            //...or can we update the partial from handler directly???

            return Partial("_MappingDetailPartial", SelectedDetailsList);
           
        }

这将返回部分内容。 RazorPage MappingDetail的Ajax看起来像这样：

<script type="text/javascript">
    function Edit(name, iid, id) {
       alert('click');
        var vIid = document.getElementById('DetailIID');
        vIid.value = iid;
        var vName = document.getElementById('DetailName');
        vName.value = name;

        var sIid = document.getElementById('SelectionId');
        sIid.value = iid;

        $.ajax({
            url: "@Url.Page("/MappingDetail")?handler=SetSelectedId",
            method: "POST",       
            contentType: 'application/json',
            beforeSend: function (xhr) {
                xhr.setRequestHeader("XSRF-TOKEN",
                    $('input:hidden[name="__RequestVerificationToken"]').val());
            },
            data: JSON.stringify(iid),
            success: function (data) {
                            
                alert('ok');
                
            },
            error: function (data) {
               
                alert('error');
            }


        });
    };



</script>

并由 onClick-Event 调用：

 <tr data-widget="expandable-table" aria-expanded="false" onClick="Edit('@childItem.ItmNameKombDe', '@childItem.ItmIid', @childItem.Id)">

这通过 Ajax 调用我的处理程序并更新模型。但是如何处理返回的数据来更新/渲染部分呢？目前，当返回

PartialViewResult

时，这会导致离开处理程序后出现错误。

对于 MVC，有多种使用类似的选项

success: function (result) {
            $("#partial").html(result);
}

但似乎没有任何工作/更新部分。那么正确的方法是什么？

Answer 1

不要将 AJAX 请求中的 id 作为 JSON 发送，除非有充分的理由这样做。无法直接从请求正文访问它。您需要反序列化 JSON 中的请求才能获取页面处理程序中的值。如果您将对象而不是字符串传递给

data

参数，生活会更容易：

data: {id: iid}

您应该检查开发人员工具的网络选项卡，看看是否发出了请求以及得到了什么响应。您的请求验证令牌 (

XSRF-TOKEN

) 的标头名称不标准，可能会导致 400 错误请求。默认标头名称只是

RequestVerificationToken

。