Razor Pages功能优化需求：自动填充、Div隐藏与SSN掩码处理

解决方案分模块实现 #

1. 从URL提取ID+点击部门填充输入框（替代显示额外Div）

后端（index.cs）

从URL路由/查询参数获取ID，传递给视图：

public IActionResult Index(int? id)
{
    // 将ID传递到视图，用于初始化输入框
    ViewBag.DepartmentId = id;
    // 加载部门列表逻辑（比如从数据库获取）
    var departments = _departmentService.GetAll();
    return View(departments);
}

部门分部视图（_DisplayDepartmentPartial.cshtml）

修改点击事件，直接填充主页面的输入框，取消额外Div显示：

@model IEnumerable<Department>

@foreach (var dept in Model)
{
    <span class="dept-item" data-id="@dept.Id" data-name="@dept.Name" style="cursor: pointer; margin-right: 15px;">
        @dept.Name
    </span>
}

<script>
document.querySelectorAll('.dept-item').forEach(item => {
    item.addEventListener('click', () => {
        // 填充主页面的部门输入框（需确保主页面有对应ID的输入框）
        document.getElementById("deptId").value = item.dataset.id;
        document.getElementById("deptName").value = item.dataset.name;
        // 若存在旧的额外Div，直接隐藏
        document.querySelector(".extra-div")?.style.display = "none";
    });
});
</script>

主页面（index.cshtml）

添加用于接收部门数据的输入框：

<div class="form-group">
    <label>部门ID</label>
    <input type="text" id="deptId" name="DepartmentId" value="@ViewBag.DepartmentId" readonly />
</div>
<div class="form-group">
    <label>部门名称</label>
    <input type="text" id="deptName" name="DepartmentName" readonly />
</div>

<!-- 引入部门分部视图 -->
<partial name="_DisplayDepartmentPartial" model="@Model" />

2. POST提交后隐藏指定Div，解决刷新后重新显示问题

后端（index.cs）

POST处理完成后，传递隐藏标志到视图：

[HttpPost]
public IActionResult Index(Employee model)
{
    if (ModelState.IsValid)
    {
        // 处理员工数据提交逻辑
        _employeeService.Save(model);
    }
    // 设置标志，告知前端需要隐藏Div
    ViewBag.HideTargetDivs = true;
    // 重新加载部门列表，返回视图
    var departments = _departmentService.GetAll();
    return View(departments);
}

主页面（index.cshtml）

根据后端传递的标志控制Div显示：

<!-- 需要隐藏的目标Div -->
<div class="extra-div" style="@(ViewBag.HideTargetDivs ? "display: none;" : "")">
    <!-- Div原有内容 -->
</div>

<!-- 可选：JS兜底，防止后端标志失效 -->
<script>
window.onload = () => {
    if ('@ViewBag.HideTargetDivs' === 'True') {
        document.querySelector(".extra-div").style.display = "none";
    }
};
</script>

3. SSN后四位掩码+眼睛图标切换显示

主页面（index.cshtml）

添加带切换功能的SSN输入框：

<div class="form-group ssn-group">
    <label>社保号(SSN)</label>
    <div style="display: flex; align-items: center;">
        <input type="password" id="ssnInput" name="SSN" value="@GetMaskedSsn(Model.SSN)" />
        <button type="button" id="toggleSsnBtn" style="border: none; background: none; margin-left: 5px;">
            <!-- 眼睛图标 -->
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
                <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
                <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
            </svg>
        </button>
    </div>
</div>

<script>
// 存储原始SSN（从模型获取）
const originalSsn = '@Model.SSN';
// 生成掩码后的SSN
const maskedSsn = originalSsn ? `XXX-XX-${originalSsn.slice(-4)}` : '';
let isVisible = false;

// 切换显示状态
document.getElementById('toggleSsnBtn').addEventListener('click', () => {
    const input = document.getElementById('ssnInput');
    const icon = document.querySelector('#toggleSsnBtn svg');
    
    if (isVisible) {
        // 切换为掩码状态
        input.type = 'password';
        input.value = maskedSsn;
        // 替换为睁眼图标
        icon.outerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/></svg>`;
    } else {
        // 切换为显示完整状态
        input.type = 'text';
        input.value = originalSsn;
        // 替换为闭眼图标
        icon.outerHTML = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16"><path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/><path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/><path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c2.12 0 3.879-1.168 5.168-2.457a13.134 13.134 0 0 0 1.66-2.043l-.708-.709c-.165-.16-.337-.328-.517-.486A5.942 5.942 0 0 1 8 10.5c-2.12 0-3.879-1.168-5.168-2.457zm0 0l-.708-.709z"/></svg>`;
    }
    isVisible = !isVisible;
});

// 页面初始化时设置掩码状态
window.onload = () => {
    document.getElementById('ssnInput').value = maskedSsn;
};

// 提交表单时确保传递掩码后的SSN（若需求如此）
document.getElementById('employeeForm').addEventListener('submit', (e) => {
    const input = document.getElementById('ssnInput');
    if (isVisible) {
        input.value = maskedSsn;
    }
});
</script>

后端辅助方法（可选，在View中添加）

如果需要在后端生成掩码SSN，可以在视图中添加一个辅助方法：

@functions{
    public string GetMaskedSsn(string ssn)
    {
        if (string.IsNullOrEmpty(ssn) || ssn.Length < 4) return ssn;
        return $"XXX-XX-{ssn.Substring(ssn.Length - 4)}";
    }
}

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