Asp Core 5.0 Razor Page：调用 RedirectToPage() 时如何保留 window.location.hash答案

【问题标题】：Asp Core 5.0 Razor Page: how to preserve window.location.hash when calling RedirectToPage()Asp Core 5.0 Razor Page：调用 RedirectToPage() 时如何保留 window.location.hash
【发布时间】：2021-07-17 09:34:08
【问题描述】：

我有一个带有表格的 Asp Core 5.0 Razor 页面，该表格代表例如来自数据库的消息。有几个表格放置在几个选项卡中（Boostrap 4 nav-pills）。每条记录都有一个用于修改消息的操作的图标：

<a asp-page-handler="ModifyMessage" asp-route-id="@item.Id" title="Modify message"><i class="fas fa-edit"></i></a>

该操作的代码隐藏类似于：

public async Task<IActionResult> OnGetModifyMessageAsync(Int64 Id)
{
     var message = _context.Messages.Single(m => m.Id == Id);
     message.MessageIsRead = !message.MessageIsRead;

     await _context.SaveChangesAsync();

     return RedirectToPage(); //it can be Page();
}

在我的视图中，当用户更改活动选项卡时，将活动选项卡 ID 保存在 window.location.hash 中。之后我阅读 window.location.hash 并在页面重新加载时恢复活动标签。

window.location.hash 值在通过 F5（甚至 Ctrl+F5）和 JavaScript 重新加载页面之间保留：

$('#SomeButtonId').click(function (e) {
        window.location.reload();
    });

但是当页面通过return RedirectToPage();（或return Page();）重新加载时，window.location.hash值会被清除。

那么在调用RedirectToPage()时如何保存window.location.hash？

提前谢谢你。

【问题讨论】：

标签： javascript asp.net-core razor razor-pages .net-5

【解决方案1】：

导航标签也有这个问题。我想出了一个可以接受的解决方案。您要做的是以编程方式单击页面加载时的选项卡。在您的 Get 方法中，将活动选项卡的 id 传递给请求：我不确定您是否在索引文件中有此内容，但如果此请求在 Index.cshtml.cs 中，您将重定向到 /index/id/activeTabId。请在下方评论，以便我了解您的路由设置。

 OnGetModifyMessageAsync(Int64 Id,activeTabId){
   
  return RedirectToPage($"/{Id}/#{activeTabId}")
}

在页面加载的 JS 文档中，您获取窗口位置并使用 javascript 单击选项卡：

window.onload =function(){
   let loc = window.location.href;
    if (loc.includes("#")) {
        let activeTabId = refLoc.substring(refLoc.indexOf('#') + 1, refLoc.length);
        document.getElementById(activeTabId).click();
    }
}

【讨论】：

【解决方案2】：

所以我最终没有使用asp-page-handler 和asp-route-id 标签并使用JavaScript/jQuery + AJAX 解决方案：

<a title="Modify message"><i class="fas fa-edit"></i></a>

<script>
var ModifyMessage= function (messageId) {    
    $.ajax({
        type: "Get",
        url: '?handler=ModifyMessage',
        data: "messageId=" + messageId,
        async: false,
        contentType: "application/json",
        success: function () {
        },
        failure: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
}

$(document).ready(function () {
    $(".fa-edit").parent("a").click(function (e) {
        //get current message Id somehow
        var messageId= $(e.target).closest('tr')[0].children[0].innerText.trim();
        //call AJAX function           
        ModifyMessage(messageId);
        //refresh page to get all messages current state (preserves window.location.hash)
        window.location.reload();
    });
}
</script>

代码隐藏：

public JsonResult OnGetModifyMessage(Int64 messageId)
{
     var message = _context.Messages.Single(m => m.Id == messageId);
     message.MessageIsRead = !message.MessageIsRead;

     _context.SaveChanges();

     return null;
}

【讨论】：