表单提交后数据未显示、输入框不自动填充及SSN显示功能异常

问题概述 #

• 点击Submit按钮后，提交状态无反馈，页面顶部的员工姓名、部门名称输入框未能自动填充
• POST请求后SSN值隐藏、点击eye图标显示完整SSN的功能未生效

相关代码 #

index.cshtml #

@page "{id?}"
@model IndexModel

@{ViewData["Title"] = "Main";}

<div class=" container">
    <div class="row">
        <div class="text-center">
            <h1 class="display-4">@Model.PageTitle</h1>
        </div>
    </div>
    <div class="row">
        <form class="mt-0" method="get">
            <div class="row">
                <div class="col-3 offset-2" id="DepartmentResult"></div>
                <div class="col-4" id="EmployeeResult"></div>
            </div>
        </form>
        <form class="mt=0" method="post">
            <div class="row">
                <label class="col-2 offset-3 col-form-label">Employee Name:</label>
                <div class="col-2">
                    <input class="form-control" title="Employee name" asp-for="Name">
                </div>
            </div>
            <br />
            <div class="row">
                <label class="col-2 offset-3 col-form-label">Department Name:</label>
                <div class="col-2">
                    <input class="form-control" title="Department name" asp-for="DeptName">
                </div>
            </div>
            <br />
            <div class="row">
                <button class="btn btn-outline-dark col-1 offset-5" type="submit" id="SubmitBtn" name="SubmitBtn" value="Submit" asp-page-handler="Submit">Submit</button>
            </div>
            <br />
            <div class="row">
                <div col-4>
                <br />
                    <div class=" row">
                        <label class="col-6 col-form-label">Social Security #:</label>
                        <div class="col-5">
                            <input class="form-control" type="text" asp-for="OutputSSN" disabled />
                            <i class="fa fa-eye-slash"></i>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

@section Scripts {
<script>
    $(document).ready(function()
    {
        $.ajax(
        {
            url: "/Index?handler=DisplayDepartment",
            type: "GET",
            data: { value: @Model.Id },
            headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
            success: function(data) { $("#DepartmentResult").html(data); }
        });
    });
</script>
}

index.cs #

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using PracticeApp.Models;
using System.Linq;
using System.Runtime.Serialization;
using System.Threading.Tasks;

namespace PracticeApp.Pages
{
    public class IndexModel : PageModel
    {
        public CompanyContext _context;

        [BindProperty(SupportsGet = true)] public int Id { get; set; }
        [BindProperty] public string PageTitle { get; set; } = "Employee Check";
        public Employee CheckEmployee { get; set; }
        [BindProperty, DataMember] public string Name { get; set; }
        [BindProperty, DataMember] public string DeptName { get; set; }
        public string OutputSSN { get; set; }

        public IndexModel(CompanyContext context) { _context = context; }

        public PartialViewResult OnGetDisplayDepartment(int value) => Partial("_DisplayDepartmentPartial", _context.Departments.Where(x => x.DepartmentId == value).ToList());
        public PartialViewResult OnGetDisplayEmployee(string value) => Partial("_DisplayEmployeePartial", _context.Employees.Where(x => x.DepartmentName == value).GroupBy(x => x.EmployeeName).Select(x => x.First()).ToList());

        public async Task<IActionResult> OnPostSubmit()
        {
            OutputSSN = $"{SubstringCheck(OutputSSN, 3)}-{SubstringCheck(OutputSSN, 3, 2)}-{SubstringCheck(OutputSSN, 5, 4)}";
            return Page();
        }

        public string SubstringCheck(string s, int length)
        {
            int len = s.Length;

            if (len > length)
            {
                len = length;
            }
            return s.Substring(0, len);
        }

        public string SubstringCheck(string s, int b, int length)
        {
            int len = s.Length;

            if (len <= b)
            {
                return s;
            }
            len -= b;

            if (len > length)
            {
                len = length;
            }
            return s.Substring(b, len);
        }
    }
}

修复方案 #

1. 解决Submit反馈与输入框自动填充问题 #

后端修改（index.cs）

• 给OutputSSN添加[BindProperty]特性，确保POST请求能绑定值：

[BindProperty] public string OutputSSN { get; set; }

• 修改OnPostSubmit方法，从数据库查询员工信息，自动填充输入框并格式化SSN：

public async Task<IActionResult> OnPostSubmit()
{
    // 根据姓名和部门匹配员工
    CheckEmployee = _context.Employees
        .FirstOrDefault(e => e.EmployeeName == Name && e.DepartmentName == DeptName);
    
    if (CheckEmployee != null)
    {
        // 自动填充输入框
        Name = CheckEmployee.EmployeeName;
        DeptName = CheckEmployee.DepartmentName;
        
        // 格式化隐藏版SSN，同时存储原始值到ViewData供前端使用
        var originalSSN = CheckEmployee.SocialSecurityNumber;
        OutputSSN = $"{originalSSN.Substring(0,3)}-{originalSSN.Substring(3,2)}-****";
        ViewData["OriginalSSN"] = originalSSN;
    }
    return Page();
}

• 若需显示Submit按钮的提交状态，添加绑定属性：

[BindProperty] public string SubmitBtn { get; set; }

之后可在页面用@Model.SubmitBtn展示提交状态。

前端修改（index.cshtml）

无需额外修改，后端赋值后asp-for绑定的输入框会自动填充数据。

2. 修复Eye图标显示/隐藏SSN功能 #

前端修改（index.cshtml）

• 将SSN输入框的disabled改为readonly，添加data-original属性存储原始SSN：

<input class="form-control" type="text" asp-for="OutputSSN" readonly data-original="@ViewData["OriginalSSN"]" />

• 给eye图标添加ID，方便绑定事件：

<i class="fa fa-eye-slash" id="toggleSSN"></i>

• 在Scripts区块添加切换逻辑：

$(document).ready(function() {
    // 保留原有AJAX代码
    $.ajax({
        url: "/Index?handler=DisplayDepartment",
        type: "GET",
        data: { value: @Model.Id },
        headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
        success: function(data) { $("#DepartmentResult").html(data); }
    });

    // SSN显示/隐藏切换逻辑
    $("#toggleSSN").click(function() {
        const ssnInput = $('input[name="OutputSSN"]');
        const originalSSN = ssnInput.data('original');
        const currentValue = ssnInput.val();
        const icon = $(this);

        if (currentValue.includes('****')) {
            // 切换为显示完整SSN
            ssnInput.val(originalSSN);
            icon.removeClass('fa-eye-slash').addClass('fa-eye');
        } else {
            // 切换为隐藏版SSN
            const hiddenSSN = `${originalSSN.substring(0,3)}-${originalSSN.substring(3,2)}-****`;
            ssnInput.val(hiddenSSN);
            icon.removeClass('fa-eye').addClass('fa-eye-slash');
        }
    });
});

注意事项 #

• 确保Employee实体包含SocialSecurityNumber字段，与后端代码对应
• 确保页面已正确引入Font Awesome图标库，否则eye图标无法正常显示

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