AJAX POST请求下Div隐藏、表单自动填充及SSN掩码需求

针对你提出的几个需求，下面是对应各个文件的具体修改代码：

1. 从URL获取ID值 #

后端（Index.cs） #

直接通过路由参数或QueryString提取ID：

public IActionResult Index(int? id)
{
    // 从路由参数获取ID
    if(id.HasValue)
    {
        // 这里写ID对应的业务逻辑，比如加载对应部门数据
    }
    // 或者从URL的QueryString获取（比如?id=123）
    var queryIdStr = Request.Query["id"].ToString();
    if(int.TryParse(queryIdStr, out int queryId))
    {
        // 处理逻辑
    }
    return View();
}

前端（index.cshtml） #

如果需要前端JS获取ID参数：

// 解析URL参数的工具函数
function getUrlParam(paramName) {
    const reg = new RegExp(`(^|&)${paramName}=([^&]*)(&|$)`);
    const matchResult = window.location.search.substr(1).match(reg);
    return matchResult ? decodeURIComponent(matchResult[2]) : null;
}

// 使用示例：获取部门ID
const deptId = getUrlParam("id");

2. 点击部门名称直接填充员工到文本框 #

放弃加载_DisplayEmployeePartial.cshtml的额外Div，改成AJAX拉取数据后直接填充表单：

修改_DisplayDepartmentPartial.cshtml #

给部门名称绑定点击事件：

@model Department
<div class="dept-item">
    <span class="dept-name" data-dept-id="@Model.Id">@Model.Name</span>
</div>

<script>
$(function() {
    $(".dept-name").on("click", function() {
        const deptId = $(this).data("dept-id");
        // AJAX请求该部门下的员工数据
        $.get("/Home/GetEmployeeByDept", { deptId: deptId }, function(employee) {
            // 填充到表单的文本框（假设文本框ID和Employee属性对应）
            $("#EmployeeName").val(employee.Name);
            $("#EmployeeEmail").val(employee.Email);
            // 社保号先掩码显示
            $("#EmployeeSSN").val(maskSSN(employee.SSN));
            // 存储原始社保号，方便后续切换显示
            $("#EmployeeSSN").data("original-ssn", employee.SSN);
        });
    });
});
</script>

后端Index.cs新增接口 #

public IActionResult GetEmployeeByDept(int deptId)
{
    // 根据部门ID查询员工（这里假设一个部门对应一个员工，按需调整逻辑）
    var employee = _dbContext.Employees.FirstOrDefault(e => e.DepartmentId == deptId);
    return Json(employee);
}

3. 提交POST后隐藏目标Div #

方案1：AJAX无刷新提交（推荐） #

修改index.cshtml的表单提交逻辑，避免页面刷新，提交后直接隐藏Div：

<form id="employee-form" method="post">
    <!-- 你的表单控件：姓名、邮箱、社保号等 -->
    <button type="submit">提交</button>
</form>

<div id="target-div">
    <!-- 需要隐藏的内容 -->
</div>

<script>
$("#employee-form").submit(function(e) {
    e.preventDefault();
    // 先恢复完整社保号再提交
    const ssnInput = $("#EmployeeSSN");
    ssnInput.val(ssnInput.data("original-ssn"));
    
    const formData = $(this).serialize();
    $.post("/Home/Index", formData, function() {
        // 提交成功后隐藏目标Div
        $("#target-div").hide();
        // 重新掩码显示社保号
        ssnInput.val(maskSSN(ssnInput.val()));
        alert("提交成功");
    });
});
</script>

方案2：后端控制视图显示（传统页面刷新方式） #

在POST方法中设置标记，前端根据标记隐藏Div：

[HttpPost]
public IActionResult Index(Employee model)
{
    if(ModelState.IsValid)
    {
        // 处理保存逻辑
        _dbContext.Employees.Update(model);
        _dbContext.SaveChanges();
        // 设置提交成功标记
        ViewBag.SubmittedSuccess = true;
    }
    return View(model);
}

前端index.cshtml中判断：

<div id="target-div" @(ViewBag.SubmittedSuccess ? "style='display: none;'" : "")>
    <!-- 需要隐藏的内容 -->
</div>

4. 社保号掩码+眼睛图标切换显示 #

在index.cshtml中修改社保号输入框的渲染逻辑：

<div class="ssn-wrapper">
    <input type="password" id="EmployeeSSN" name="SSN" value="@Model.SSN" />
    <span class="eye-btn" onclick="toggleSSNVisibility()">👁️</span>
</div>

<script>
// 社保号掩码函数
function maskSSN(ssn) {
    if(!ssn || ssn.length < 4) return ssn;
    return "*".repeat(ssn.length - 4) + ssn.slice(-4);
}

// 页面加载时自动掩码显示
$(function() {
    const ssnInput = $("#EmployeeSSN");
    const originalSSN = ssnInput.val();
    ssnInput.data("original-ssn", originalSSN);
    ssnInput.val(maskSSN(originalSSN));
});

// 切换社保号显示状态
function toggleSSNVisibility() {
    const ssnInput = $("#EmployeeSSN");
    const currentType = ssnInput.attr("type");
    const originalSSN = ssnInput.data("original-ssn");
    
    if(currentType === "password") {
        ssnInput.attr("type", "text");
        ssnInput.val(originalSSN);
    } else {
        ssnInput.attr("type", "password");
        ssnInput.val(maskSSN(originalSSN));
    }
}
</script>

补充：Employee Model.cs #

确保模型包含SSN属性：

public class Employee
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
    public string SSN { get; set; }
    public int DepartmentId { get; set; }
    public Department Department { get; set; }
}

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