Database value not populating on button submit

Question

When I click the submit button on my form the value of Submit is not displaying and at the same time my input fields at the top are still not autofilling like I'd like them to. I'm also trying to use the eye icon to hide the value on post request and clicking the eye icon will reveal the value on textbox.

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

You forgot to add a BindProperty attribute to your OutputSSN property, so the posted form value is not being bound to it. That's why you get a NullReferenceException when you try to access its Length property.

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

Answer 2

As @Mike Brind has said the posted form value is not being bound to it.

First you need to add [BindProperty] like this:

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

Besides,

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

you set the input disabled , so it will cause form value is not being bound to it too. If you want it cannot be modified, you can use readonly:

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

I'm also trying to use the eye icon to hide the value on post request and clicking the eye icon will reveal the value on textbox.

Below is a demo about eye icon, you can refer to it, I set the value to OutputSSN to show data , you can use your way:

<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>
}

result: