如何使用 HTML 表單傳遞整個 object？

Question

為簡單起見，我將僅包括 model 的相關屬性和相關行：

Model： Department.cs
屬性： public virtual Staff HOD { get; set; } public virtual Staff HOD { get; set; }

控制器方法：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Add([Bind] Department newDepartment)
{
    await _departmentRepository.AddDepartmentAsync(newDepartment);
    await _departmentRepository.SaveTransactionAsync(true);
    return Redirect("Details" + "/" + newDepartment.Id);
}

看法：

@model Department
@inject IStaffRepository staffRepository

@{
    // select list
    var listOfEmployees = new List<Staff>();
    foreach (var staff in await staffRepository.GetAllStaffAsync())
    {
        listOfEmployees.Add(staff);
    }
    var selectListHOD = new SelectList(listOfEmployees, "EmployeeId", "Name"); //populates the option element with the correct Employee Id
}

<form class="form-group" method="post">
    <div class="d-flex flex-column">
        <div class="input-group" style="margin-bottom: 1%">
            @Html.DropDownListFor(department => department.HOD, selectListHOD, htmlAttributes: new { @class="form-control" })
        </div>
        <div class="input-group">
            <input class="btn btn-primary" type="submit" value="Save" />
        </div>
    </div>
</form>

結果：
（我沒有在問題中包含此處看到的其他屬性，但相信我，controller 的參數屬性得到正確填充，HOD 屬性除外）

---

資源：

<form class="form-group" method="post">
    <div class="d-flex flex-column">
        <div class="input-group" style="margin-bottom: 1%">
            <input class="form-control" id="Id" name="Id" placeholder="Id" type="text" value="" /> </div>
        <div class="input-group" style="margin-bottom: 1%">
            <input class="form-control" id="Name" name="Name" placeholder="Department" type="text" value="" /> </div>
        <div class="input-group" style="margin-bottom: 1%">
            <input class="form-control" id="Description" name="Description" placeholder="Description" type="text" value="" /> </div>
        <div class="input-group" style="margin-bottom: 1%">
            <select class="form-control" id="HOD" name="HOD">
                <option value="EMP01">Employee 1</option>
                <option value="EMP02">Employee 2</option>
            </select>
        </div>
        <div class="input-group">
            <input class="btn btn-primary" type="submit" value="Save" /> </div>
    </div>
    <input name="__RequestVerificationToken" type="hidden" value="CfDJ8AIwSWkSO0hJqMxy-oQKoeG35LTDmI2N1XHDZL9qeaxRxc17TyZbT2z9Iq0GMPkRyE7HnaX1r4ZSIs0bQATYB7w_A_HZDBXGETMmpdSqlMXZCmf7cH9ECzrNGz0Wuu9zHkE50yI92vPY-GxNPG-pRhs" /> 
</form>

我的猜測是提供給 controller 的值似乎是錯誤的。 我將如何傳遞實際的 object 而不是 ID？
我嘗試使用this而不是 EmployeeId，但它會拋出Object Reference not found異常。

Answer 1

您不能將Hod.Name與<select></select> ..您可以嘗試將Hod.EmployeeId綁定到<select></select> 。隱藏輸入。這是一個演示：

<form class="form-group" method="post">
    <div class="d-flex flex-column">
        <div class="input-group" style="margin-bottom: 1%">
            @Html.DropDownListFor(department => department.HOD.EmployeeId, selectListHOD, htmlAttributes: new { @class = "form-control",@onChange= "AddName()" })
            <input hidden asp-for="HOD.Name" />
        </div>
        <div class="input-group">
            <input class="btn btn-primary" type="submit" value="Save" />
        </div>
    </div>
</form>
@section scripts
{
    <script>
        $(function () {
            AddName();
        })
        function AddName() {
            $("#HOD_Name").val($("#HOD_EmployeeId option:selected").text());
        }
    </script>
}

結果：