ASP .NET Core - 发回填充的模型

问题描述

我正在开发一个 Web 应用程序，该应用程序基本上允许您管理体育联合会内的陪审员职责。其中一个页面用于将人们分配到预定义面板内的多个预定义“职责”。该页面显示可用面板的一侧（一行 3 个）。然后，您可以选择要修改的面板。

从技术上讲，在页面内，我为每个可用面板加载了一个局部视图。当您选择要编辑的面板时，页面会重新加载，所选面板会重新加载到可编辑的局部视图中。

edit.cshtml

@model Models.Database.Models.Paneloverviewmodel;

@{
    ViewBag.Title = "Samenstelling van de panels";
    Layout = "_Layout";
}

<h2>Samenstelling van de panels.</h2>

<div class="container-fluid  mb-3">
    <div class="container bg-light">
        @if (Model.PanelMatrix != null && Model.PanelMatrix.Count > 0)
        {
            @for (var index = 0; index < Model.PanelMatrix.Keys.Count; index++)
            {
                <div class="line"></div>

                @if (Model.PanelMatrix.ContainsKey(index))
                {
                    var panelNames = Model.PanelMatrix[index];

                    <div class="row mb-3">
                        @foreach (var panel in panelNames)
                        {
                            var currentPanel = Model.PanelComposition[panel];

                            @if (currentPanel.PanelName == Model.SelectedPanel)
                            {
                                <div class="col">
                                    @await Html.PartialAsync("JuryOpstelling/_EditPanelView",currentPanel)
                                </div>
                            }
                            else
                            {
                                <div class="col">
                                    @await Html.PartialAsync("JuryOpstelling/_ShowPanelView",currentPanel)
                                </div>
                            }
                        }

                    </div>
                }

                <div class="line"></div>
            }
        }
        else
        {
            <div class="line"></div>
            <p>Geen panels gevonden.</p>
            <div class="line"></div>
        }
    </div>
</div>

_EditPanelView.cshtml

@model Models.Database.Models.PanelModel

<div class="border-right">
    <form asp-action="SavePanel" method="post">
        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <input type="hidden" id="currentPanel" name="currentPanel" asp-for="@Model.PanelName" />
        <input type="hidden" id="wedstrijdSessie" name="wedstrijdSessie" asp-for="@Model.WedstrijdSessie" />
        <input type="hidden" id="currentMembers" name="currentMembers" asp-for="@Model.PanelComposition" />

        <div class="form-group">
            <div class="row">
                <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
                    <input type="submit" value="Edit" class="btn btn-outline-info"/>
                </div>
                <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
                    <input type="button" value="Overview" class="btn btn-outline-info" onclick= "location.href = '@Url.Action("Index","JuryOpsteller",new { id = Model.WedstrijdSessie })'"/>
                </div>
            </div>
        </div>

        <h3>@Model.PanelName</h3>

        <div class="container-fluid mb-3">
            <div class="container bg-light">
                @foreach (var panel in Model.PanelComposition)
                {
                    <hr style="border-style: dotted;"/>

                    <div class="row formgroup align-items-center">
                        <div class="col-4">
                            <label class="control-label"><p class="font-weight-bold">@panel.Functie:</p></label>
                        </div>
                        <div class="col-8">
                            <select asp-for="@panel.FK_Jury"
                                    asp-items="Model.JuryMembers"
                                    class="form-control text-center d-flex align-items-center justify-content-center"
                                    id ="currentSelectedJuryMemmber"
                                    name="currentSelectedJuryMemmber" 
                                    value="@panel.JuryName"></select>
                            <span asp-validation-for="@panel.JuryName" class="text-danger"></span>
                        </div>
                    </div>
                }
            </div>
        </div>
    </form>
</div>

_EditPanelView.cshtml 显示每个职责的组合框，其中包含可用陪审团成员的列表。最后，我们可以单击“编辑”，然后更改列表。但是无论我做什么，PanelComposition 属性总是返回 null，而它应该包含 Jurymember 数据。我该如何解决这个问题？

编辑

根据我得到的答案，我重新编写了 _EditPanelView.cshtml 中的代码，如下所示：

<form asp-action="SavePanel" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" id="currentPanel" name="currentPanel" asp-for="@Model.PanelName" />
    <input type="hidden" id="wedstrijdSessie" name="wedstrijdSessie" asp-for="@Model.WedstrijdSessie" />

    <div class="form-group">
        <div class="row">
            <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
                <input type="submit" value="Aanpassen" class="btn btn-outline-info" />
            </div>
            <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
                <input type="button" value="Terug naar het overzicht" class="btn btn-outline-info" onclick="location.href = '@Url.Action("Index",new { id = Model.WedstrijdSessie })'" />
            </div>
        </div>
    </div>

    <h3>@Model.PanelName</h3>

    <div class="container-fluid mb-3">
        <div class="container bg-light">
            @for (var i = 0; i < Model.PanelComposition.Count; i++)
            {
                <hr style="border-style: dotted;" />

                <div class="row formgroup align-items-center">
                    <div class="col-4">
                        <label class="control-label"><p class="font-weight-bold">@Model.PanelComposition[i].Functie:</p></label>
                    </div>
                    <div class="col-8">
                        <select asp-items="@Model.JuryMembers"
                                class="form-control text-center d-flex align-items-center justify-content-center"
                                name="@Model.PanelComposition[i].JuryName"
                                value="@Model.PanelComposition[i].FK_Jury">
                        </select>
                        <span asp-validation-for="@Model.PanelComposition[i].JuryName" class="text-danger"></span>
                    </div>
                </div>
            }
        </div>
    </div>
</form>

这解决了一个问题，因为发布者建议这允许映射模型并允许 HttpPost 操作加载数据。

但是，您可以在以下屏幕截图中看到我仍然存在一些问题：

如您所见，组合框都显示了相同的选项，即您在生成的 HTML 中看到的第一个加载的记录：

好像数据进入了HTML，但是标签还是有问题。

这里有人有想法吗？我已将加载到使用模型中的数据添加为 json file（NewtonSoft 万岁）。

解决方法

根据这段代码，PanelComposition 是一个集合。在表单中，它的名称应该更改为一个集合类型。

删除<input type="hidden" id="currentMembers" name="currentMembers" asp-for="@Model.PanelComposition" />。

更改 _EditPanelView.cshtml 中的代码 (foreach)。

在标签 <select> 中，添加 name="PanelComposition[@i].FK_Jury"。

  @for(var i=0;i<Model.PanelComposition.Count;i++)
            {
                <hr style="border-style: dotted;" />

                <div class="row formgroup align-items-center">
                    <div class="col-4">
                        <label class="control-label"><p class="font-weight-bold">@Model.PanelComposition[i].Functie:</p></label>
                    </div>
                    <div class="col-8">
                        <select 
                                asp-items="Model.JuryMembers"
                                class="form-control text-center d-flex align-items-center justify-content-center"
                                name="PanelComposition[@i].FK_Jury"
                                value="@Model.PanelComposition[i].JuryName"></select>
                        <span asp-validation-for="@Model.PanelComposition[i].JuryName" class="text-danger"></span>
                    </div>
                </div>
            }

然后，这个表单可以映射模型。

动态改变选中状态。

<select asp-items="Model.JuryMembers.Where(x=>x.Text==Model.PanelComposition[i].JuryName?x.Selected=true:x.Selected=false)"
                                class="form-control text-center d-flex align-items-center justify-content-center"
                                name="PanelComposition[@i].FK_Jury"
                                value="@Model.PanelComposition[i].JuryName"></select>

,

根据我收到的回复，我通过结合一些回复和一点点逻辑思考设法让它发挥作用。

当前代码允许我正确生成组合框，并在帖子中读取更改的值：

<form asp-action="SavePanel" method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" id="currentPanel" name="currentPanel" asp-for="@Model.PanelName" />
    <input type="hidden" id="wedstrijdSessie" name="wedstrijdSessie" asp-for="@Model.WedstrijdSessie" />

    <div class="form-group">
        <div class="row">
            <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
                <input type="submit" value="Aanpassen" class="btn btn-outline-info" />
            </div>
            <div class="col-md-6 text-center d-flex align-items-center justify-content-center">
                <input type="button" value="Terug naar het overzicht" class="btn btn-outline-info" onclick="location.href = '@Url.Action("Index","JuryOpsteller",new { id = Model.WedstrijdSessie })'" />
            </div>
        </div>
    </div>

    <h3>@Model.PanelName</h3>

    <div class="container-fluid mb-3">
        <div class="container bg-light">
            @for(var i = 0; i < Model.PanelComposition.Count; i++)
            {
                int juryCount = i;
                <hr style="border-style: dotted;" />

                <div class="row formgroup align-items-center">
                    <div class="col-4">
                        <label class="control-label"><p class="font-weight-bold">@Model.PanelComposition[i].Functie:</p></label>
                    </div>

                    <div class="col-8">
                        <select asp-for= "PanelComposition[juryCount].FK_Jury"
                                asp-items = "Model.JuryMembers"
                                class="form-control text-center d-flex align-items-center justify-content-center"
                                name="PanelComposition[@juryCount].FK_Jury"
                                value="@Model.PanelComposition[juryCount].FK_Jury.ToString()">
                        </select>
                        <span asp-validation-for="@Model.PanelComposition[i].JuryName" class="text-danger"></span>
                    </div>
                </div>
            }
        </div>
    </div>
</form>

这会按照我需要的方式生成表单：

在测试时我发现模型映射现在可以正常工作，所以我得到了我需要的更新数据：

{
  "WedstrijdSessie": 5828,"PanelName": null,"ClubName": null,"PanelComposition": [
    {
      "FK_WedstrijdSessie": null,"SK_JuryOpgave": null,"FK_Jury": 156,"Omschrijving": null,"Functie": null,"Naam": null,"Voornaam": null,"JuryNiveau": null,"JuryNiveauNr": null,"SK_Club": null,"Club": null,"Vlg_PositieToegekend": null,"JuryName": " "
    },{
      "FK_WedstrijdSessie": null,"FK_Jury": 66,"FK_Jury": 143,"FK_Jury": 121,"FK_Jury": 110,"FK_Jury": 129,"FK_Jury": 46,"FK_Jury": 64,"FK_Jury": 88,"JuryName": " "
    }
  ],"JuryMembers": null
}

有了这个，我可以继续，虽然我想知道一件事。如您所见，我在 post-action 中获得的数据仅包含 FK_Jury 的值。有没有办法同时填充 Functie 的值？