區域視圖中的ASP.NETCoreMVC主詳細資訊

我正在嘗試在 Master Detail 模型上執行 CRUD 操作Department并Employee使用模式彈出視窗。這是我使用的代碼：

DepartmentController：

[HttpGet]
public IActionResult Create()
{
    Department department= new Department();
    department.Employees.Add(new Employee() { EmployeeId = 1 });
    department.Employees.Add(new Employee() { EmployeeId = 2 });
    department.Employees.Add(new Article() { EmployeeId = 3 });
    return PartialView("_AddDepartmentPartialView",department);
}

[HttpPost]
public IActionResult Create(Department department)
{
    if (department != null)
    {
        _dbcontext.Department.Add(department);
        _dbcontext.SaveChanges();
        return RedirectToAction("Index");
    }
    return View();
}

Index.cshtml：

@model IEnumerable<Department>

@{
    ViewData["Title"] = "Index";
    Layout = "~/Views/Shared/_Theme.cshtml";
}

<div>
    <div >
        <div >
            <div >
                <div >
                    <h3 >Department</h3>
                    <div >
                        <button type="button"  data-toggle="modal" data-target="#addDepartment">
                            <i ></i>
                            Ajouter
                        </button>


                    </div>
                </div>
                <div >
                    .....

                </div>
            </div>
        </div>
    </div>
</div>
@await Html.PartialAsync("_AddDepartmentPartialView", new Department())

_AddDepartmentPartialView.cshtml：

@model Department

@{
    ViewData["Title"] = "_AddDepartmentPartialView";
}

<div  role="dialog" tabindex="-1" id="addDepartment" aria-labelledby="addDepartmentLabel" aria-hidden="true">
    <div  role="document">
        <div >
            <div >
                .....
            </div>
            <div  >
                        .......
                
                        <form asp-action="Create" method="post">
                            <div asp-validation-summary="ModelOnly" ></div>
                            
                            
                                <table >
                                    <thead>
                                        <tr>
                                            <th>Employee name</th>
                                            <th>Profession</th>
                                            <th>Email</th>
                                        </tr>
                                    </thead>
                                    <tbody>

                                        @for (int i = 0; i < Model.Employees.Count; i  )
                                        {
                                            <tr>
                                                <td>
                                                    @Html.EditorFor(x => x.Employees[i].EmployeeName, new { htmlAttributes = new { @class = "form-control" } })
                                                </td>
                                                <td>
                                                    @Html.EditorFor(x => x.Employees[i].Profession, new { htmlAttributes = new { @class = "form-control" } })
                                                </td>
                                                <td>
                                                    @Html.EditorFor(x => x.Employees[i].Email, new { htmlAttributes = new { @class = "form-control" } })
                                                </td>
                                            </tr>
                                        }

                                    </tbody>
                                </table>
                            
                            <div >
                                <button type="button"  data-dismiss="modal">Annuler</button>
                                <button type="submit"  >Sauvegarder</button>
                            </div>
                        </form>
                    
            </div>
            
        </div>

    </div>
</div>

但是這個 PartialView 只顯示Department模型的輸入，它不顯示要插入員工記錄的表的行（它只顯示表的頭部）。

那么，如何同時傳遞Department和傳遞Employee給區域視圖呢？

更新

我嘗試了@Xinran Shen的解決方案，模態彈出視窗終于出現了模型部門和員工。但是在 Ajouter 單擊時，模式彈出視窗后面的索引視圖發生了變化（應該顯示所有部門的表，但沒有顯示任何內容），而且我在模式彈出視窗中有一個下拉串列，它顯示為空且未填充。我想是因為我使用的是自定義布局頁面，但我找不到問題到底出在哪里。有什么幫助嗎？？

uj5u.com熱心網友回復：

在Index.cshtml中，您使用：

@await Html.PartialAsync("_AddDepartmentPartialView", new Department())

加載區域視圖，它不會通過 Create get 方法創建區域視圖。而你只是傳入new Department() 部分視圖，Department傳入的視圖是空的，所以它不顯示表格的行。

您可以在按鈕上設定一個 onclick 事件Ajouter，當用戶單擊該按鈕時，它將訪問 Create get 方法并使用Department初始值進行初始化，然后將部分視圖回傳到索引視圖。

.............
<button type="button"  data-bs-toggle="modal" data-bs-target="#addDepartment" onclick="GetDetails()">
    <i ></i>
    Ajouter
</button>
..........

<div  id="Body">

</div>

...............

<script>
    function GetDetails() {
        $.ajax({
            type: "Get",
            url: "/Home/Create",
            success: function (res) {
                
                $("#Body").html(res);
                $("#addDepartment").modal('show');
            }
        });
    }
</script>

然后，當您單擊按鈕時，它將顯示完整的表格。

標籤：asp.net 核心引导模式部分视图主细节

上一篇：IdentityServer4-如何將clientId和clientSecret添加到服務中？

下一篇：為ASPNET6中的GET請求啟用CORS