如何將 .net 核心 MVC 表單綁定到父子視圖模型？

Question

這似乎是構建 MVC 應用程序的老式方法； 但這里是。

我有一個父 ViewModel，其中包含一個字段Description ，然后是子 ViewModel 的集合PowerCurvePoints 。 通常有 25-30 PowerCurvePoints ，應將其作為一個組進行編輯並發回服務器。

如何最好地布局 cshtml 模板並將其綁定到 controller 操作中？

我相當確定這會失敗； 我將在一分鍾內對其進行測試，但我們將不勝感激任何關於如何“讓它工作”的建議。

<h1>Create</h1>

<h4>Power Curve</h4>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="Description" class="control-label"></label>
                <input asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>
            
            @for (var i = 0; i < Model.PowerCurvePoints.Count; i++)
            {
                <div class="form-group">
                    <label asp-for="PowerCurvePoints[i].Bin" class="control-label"></label>
                    <input asp-for="PowerCurvePoints[i].Bin" class="form-control" />
                    <span asp-validation-for="PowerCurvePoints[i].Bin" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="PowerCurvePoints[i].WindSpeed" class="control-label"></label>
                    <input asp-for="PowerCurvePoints[i].WindSpeed" class="form-control" />
                    <span asp-validation-for="PowerCurvePoints[i].WindSpeed" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="PowerCurvePoints[i].ActivePower" class="control-label"></label>
                    <input asp-for="PowerCurvePoints[i].ActivePower" class="form-control" />
                    <span asp-validation-for="PowerCurvePoints[i].ActivePower" class="text-danger"></span>
                </div>
            }
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

Answer 1

是的，它有效。 Controller 方法中的等效綁定是：

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("Description,PowerCurvePoints")] WarrantedPowerCurveViewModel viewModel)
{
    ...
}

它填充 ViewModel 上的PowerCurvePoints 。

下面的 amended.cshtml 將子集合布置為用於編輯的網格。

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

<h1>Create</h1>

<h4>Power Curve</h4>
<hr />
<div class="row">
    <div class="col-md-12">
        <form asp-action="Create">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group col-4">
                <label asp-for="Description" class="control-label"></label>
                <input asp-for="Description" class="form-control" />
                <span asp-validation-for="Description" class="text-danger"></span>
            </div>

            @for (var i = 0; i < Model.PowerCurvePoints.Count; i++)
            {
                @if (i == 0)
                {
                    <div class="row">
                        <div class="col-4">
                            <div class="form-group">
                                <label asp-for="PowerCurvePoints[i].Bin" class="control-label"></label>
                                <input asp-for="PowerCurvePoints[i].Bin" class="form-control" readonly="readonly"/>
                                <span asp-validation-for="PowerCurvePoints[i].Bin" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label asp-for="PowerCurvePoints[i].WindSpeed" class="control-label"></label>
                                <input asp-for="PowerCurvePoints[i].WindSpeed" class="form-control" readonly="readonly"/>
                                <span asp-validation-for="PowerCurvePoints[i].WindSpeed" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <label asp-for="PowerCurvePoints[i].ActivePower" class="control-label"></label>
                                <input asp-for="PowerCurvePoints[i].ActivePower" class="form-control" />
                                <span asp-validation-for="PowerCurvePoints[i].ActivePower" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                }
                else
                {
                    <div class="row">
                        <div class="col-4">
                            <div class="form-group">
                                <input asp-for="PowerCurvePoints[i].Bin" class="form-control" readonly="readonly"/>
                                <span asp-validation-for="PowerCurvePoints[i].Bin" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <input asp-for="PowerCurvePoints[i].WindSpeed" class="form-control" readonly="readonly"/>
                                <span asp-validation-for="PowerCurvePoints[i].WindSpeed" class="text-danger"></span>
                            </div>
                        </div>
                        <div class="col-4">
                            <div class="form-group">
                                <input asp-for="PowerCurvePoints[i].ActivePower" class="form-control" />
                                <span asp-validation-for="PowerCurvePoints[i].ActivePower" class="text-danger"></span>
                            </div>
                        </div>
                    </div>
                }
            }
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}