在 POST 请求中隐藏 Div AJAX

Question

I get the ID value I need from the URL, when I click on the Department Name I want the values to autofill on the textboxes instead of having the extra div. I also need the Divs to hide when the POST request is submitted, currently the page refreshes on post revealing the divs. Another issue I'm having is that when I click Submit, I need the last 4 numbers of the social to be masked for security purposes. If possible have an eye icon to reveal the full value.

index.cshtml

@page "{id?}"
@model IndexModel
@{ ViewData["Title"] = "Index"; }

<form method="get">
    <div id="DepartmentResult"></div>&nbsp;
    <div id="EmployeeResult"></div>
</form>

<form method="post">
    <label>Department Name:</label>
    <input type="text" id="DeptName" />
    <label>Photo File Name:</label>
    <input type="text" id="NameResult" />
    <button type="submit">Submit</button>
    <input type="text" id="social" />
</form>

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

_DisplayDepartmentPartial.cshtml

@model IEnumerable<Models.Department>

@if (Model.Count() != 0)
 {
    <div id="EmployeeSection">
        <table style="border: 1px solid black">
            <thead>
                <tr>
                    <th colspan="2" style="border: 1px solid black; text-align: center;">Department Results</th>
                </tr>
            </thead>

            <tbody>
                <tr><td align="center" style="border: 1px solid black; font-weight: bold;">@Html.DisplayNameFor(m => m.DepartmentName)</td></tr>

                @foreach (Models.Department item in Model)
                 {
                    <tr><td style="border: 1px solid black; text-align: center"><a href="Index?handler=DisplayEmployee&value=@item.DepartmentName">@item.DepartmentName</a></td></tr>
                 }
            </tbody>
        </table>
    </div>
 }
else
{
    <p>No data</p>
}

<script>
    $('#EmployeeSection a').click(function(event) {
        $('#EmployeeResult').hide().load($(this).attr('href'), function() {
            $('#EmployeeResult').show()
        })
        return false
    })
</script>

_DisplayEmployeePartial.cshtml

@model IEnumerable<Models.Employee>

@if (Model.Count() != 0)
 {
    <table style="border: 1px solid black">
        <thead>
            <tr>
                <th colspan="2" style="border: 1px solid black; text-align: center;">Employee Results</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td align="center" style="border: 1px solid black; font-weight: bold;">
                    @Html.DisplayNameFor(m => m.EmployeeName)
                    @Html.DisplayNameFor(m => m.DepartmentName)
                    @Html.DisplayNameFor(m => m.PhotoFileName)
                </td>
            </tr>

            @foreach (Models.Employee item in Model)
             {
                <tr>
                    <td align="center" style="border: 1px solid black;">
                        <a>@item.EmployeeName</a>
                        <a>@item.DepartmentName</a>
                        <a>@item.PhotoFileName</a>
                    </td>
                </tr>
             }
        </tbody>
    </table>
 }
else
{
    <p>No data</p>
}

index.cs

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
using PracticeApp.Models;
using System.Linq;

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

        [BindProperty(SupportsGet = true)] public int Id { 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());
    }
}

Employee model.cs

using System;
using System.Collections.Generic;

namespace PracticeApp.Models
{
    public partial class Employee
    {
        public int EmployeeId { get; set; }
        public string? EmployeeName { get; set; }
        public string DepartmentName { get; set; } = null!;
        public DateTime? DateofJoining { get; set; }
        public string? PhotoFileName { get; set; }
        public int? DepartmentId { get; set; }
        public string? Ssn { get; set; }
    }
}

Answer 1

You can hide this div directly when you click Submit.

For example, I add a form in _DisplayDepartmentPartial to query the employees of "IT":

<form asp-page-handler="DisplayEmployee" method="post">
      <input id="value" name="value"/>
      <button type="submit">Submit</button>
</form>
<script>
    $("form").submit(function(e){
        $("#DepartmentResult").hide();
        e.preventDefault();
        $.ajax(
            {
                url: "Index?handler=DisplayEmployee",
                type: "POST",
                data: { value: $("#value").text()},
                headers: { RequestVerificationToken: $('input:hidden[name="__RequestVerificationToken"]').val() },
                success: function(data) { $("#EmployeeResult").html(data); }
            });
    })
</script>

Result:

Enter "IT":

Click Submit: