没有填充按钮提交的数据库值

Question

当我单击表单上的submit按钮时，Submit的值将不会显示，同时，顶部的输入字段仍不会像我希望的那样自动填充。我还试图使用眼睛图标来隐藏post请求中的值，单击“眼睛”图标将显示文本框上的值。

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;

// Namespaces
namespace PracticeApp.Pages
{
    // Classes
    public class IndexModel : PageModel
    {
        // Fields
        public CompanyContext _context;

        // Properties
        [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; }

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

        // Methods
        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);
        }
    }
}

​

​

​

​

​

​

Answer 1

您忘记向您的BindProperty属性添加OutputSSN属性，因此未将已发布的表单值绑定到它。这就是当您尝试访问NullReferenceException的Length属性时得到它的原因。

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

Answer 2

正如@Mike所说，发布的表单值没有绑定到它。

首先，您需要像这样添加[BindProperty]：

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

另外，

<input class="form-control" type="text" asp-for="OutputSSN" disabled />

您设置了输入disabled，因此它将导致表单值也不会绑定到它。如果您希望不能修改它，可以使用readonly

<input class="form-control" type="text" asp-for="OutputSSN" readonly />

我也尝试使用眼睛图标来隐藏post请求中的值，单击眼睛图标将显示textbox上的值。

下面是一个关于眼睛图标的演示，您可以参考它，我将值设置为OutputSSN来显示数据，您可以使用您的方式：

<input class="form-control"  asp-for="OutputSSN"  value="a" type="text" readonly/>
<i  class="far fa-eye" id="toggleOutputSSN" ></i>
@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); }
        });
        const toggleOutputSSN = document.querySelector('#toggleOutputSSN');
        const OutputSSN = document.querySelector('#OutputSSN');

        toggleOutputSSN.addEventListener('click', function (e) {
        // toggle the type attribute
        const type = OutputSSN.getAttribute('type') === 'text' ? 'password'   : 'text';
        OutputSSN.setAttribute('type', type);
        // toggle the eye slash icon
        this.classList.toggle('fa-eye-slash');
    });
        });
</script>
}

结果：

​

​