Razor Post方法返回页面时定位指定位置并显示模态框问题

问题概述 #

点击页面中的编辑按钮后，页面通过POST提交并填充模态框表单，返回页面时模态框能显示，但存在两个问题：

• 页面会自动回到顶部，无法定位到点击按钮的位置
• 尝试通过JavaScript修改URL添加锚点实现定位时，模态框仅显示1秒就消失

已知限制：RedirectToPage支持fragment参数但会重置页面状态，不符合需求；return Page()无法直接设置锚点。

简易解决方案 #

核心思路：避免通过修改URL触发页面刷新，直接用DOM API完成页面定位，同时保持模态框状态。

1. 修正后端代码（.cs文件） #

修改TempData存储的锚点信息，只保留锚点ID的数值：

public IActionResult OnPostDisplayEdit(int id, string email,string AttorneyRole,int pAttorneyRoleID,int pAttorney,int pEditAttorneyUserID,int PageFragment)
{
    // 原有业务逻辑保持不变
    EditUserEmailInput = email;
    string curDictionaryAttorneyRole;
    if (AttorneyRole.Contains('('))
    {
        curDictionaryAttorneyRole = AttorneyRole.Split(new[] { '(' }, 2)[0].Trim();
        EditUserPartyInput = AttorneyRole.Split(new[] { '(' }, 2)[1];
        var LastRightParenIndex = EditUserPartyInput.LastIndexOf(')');
        EditUserPartyInput = EditUserPartyInput.Substring(0, LastRightParenIndex);
    }
    else
    {
        curDictionaryAttorneyRole = AttorneyRole;
        EditUserPartyInput = null;
    }

    // 修改此处：只存储锚点ID数值
    TempData["EditingParty"] = "Yes";
    TempData["EndOfURL"] = PageFragment.ToString(); 

    // 原有业务逻辑保持不变
    SetFileSequenceField();
    ModelState.Clear();
    SetAttorneyRoleList();
    var selectedIndex = AttorneyRolesList.Where(arl => arl.AttorneyRole == curDictionaryAttorneyRole).Select(arl => arl.AttorneyRoleID).FirstOrDefault();
    AttorneyRoleIDEditForm = selectedIndex;
    EditAttorneyUserID = pEditAttorneyUserID;
    UneditedEmail = email;
    UneditedAttorneyRoleID = pAttorneyRoleID;
    PopulateUserList();

    return Page();
}

2. 重写前端JavaScript逻辑 #

删除URL跳转逻辑，改用scrollIntoView实现页面定位，避免页面刷新：

function OnLoad() {
    if ("@TempData["EditingParty"]" == "Yes") {
        const targetAnchorId = "@TempData["EndOfURL"]";
        const anchorElement = document.getElementById(targetAnchorId);
        
        // 定位到点击位置的锚点
        if (anchorElement) {
            // smooth参数可选，实现平滑滚动，去掉则直接跳转
            anchorElement.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
        
        // 显示模态框
        document.getElementById("EditUsersForm").style.display = "inline-block";
    } else {
        document.getElementById("EditUsersForm").style.display = "none";
    }
}

3. 验证锚点元素 #

你的CSHTML中已经存在<a id="@i"></a>，确保按钮的asp-route-PageFragment="@i"与锚点ID对应即可，无需额外修改。

原问题原因分析 #

之前用location.href修改URL的方式会触发浏览器重新加载页面，导致刚显示的模态框因为页面刷新而消失。而scrollIntoView是在当前页面的DOM环境内完成滚动，不会触发刷新，因此模态框能保持显示，同时完成定位需求。

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