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 >
    <div >
        <div >
            <h1 >@Model.PageTitle</h1>
        </div>
    </div>
    <div >
        <form  method="get">
            <div >
                <div  id="DepartmentResult"></div>
                <div  id="EmployeeResult"></div>
            </div>
        </form>
        <form  method="post">
            <div >
                <label >Employee Name:</label>
                <div >
                    <input  title="Employee name" asp-for="Name">
                </div>
            </div>
            <br />
            <div >
                <label >Department Name:</label>
                <div >
                    <input  title="Department name" asp-for="DeptName">
                </div>
            </div>
            <br />
            <div >
                <button  type="submit" id="SubmitBtn" name="SubmitBtn" value="Submit" asp-page-handler="Submit">Submit</button>
            </div>
            <br />
            <div >
                <div col-4>
                <br />
                    <div >
                        <label >Social Security #:</label>
                        <div >
                            <input  type="text" asp-for="OutputSSN" disabled />
                            <i ></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);
        }
    }
}

CodePudding user response：

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

CodePudding user response：

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 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  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   asp-for="OutputSSN"  value="a" type="text" readonly/>
<i   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: