在父级的提交操作中获取部分视图模型

Question

我可以像这样将多个局部视图动态添加到我的页面中

Create.cshtml

@model Opto.Models.GlassOrder
...
...
...
    <div class="text-center" dir="rtl" id="ttt">
    </div>
    <a id="add1" style="cursor:pointer">add</a>
    
    <script>
    var rowNum = 0;
            $('#add1').click(function () {
                rowNum++;
                $.get('/Glasses/DisplayBill?id=' + rowNum, function (partial) {
                    console.log(partial);
                    $('#ttt').append(partial);
                });
    
            });
        </script>

BillFarSighted.cshtml

    @model Opto.Models.BillFarSighted
    
        <div style="display: inline-block">
            
            <div class="row form-group">
            <label asp-for="PackFactor" class="col-5 text-left col-form-label"></label>
            <div class="col-7">
                <select asp-for="PackFactor" class="form-control" asp-items="Html.GetEnumSelectList<Compression>()">
                    <option selected value="">انتخاب کنید</option>
                </select>
                <span asp-validation-for="PackFactor" class="text-danger"></span>
            </div>
        </div>            
            ...
...
... 
        </div>

BillFarSighted.cs

public partial class BillFarSighted
    {
        public long Id { get; set; }
        public long RecipeId { get; set; }
...
...
...
}

GlassesController.cs

    public ActionResult DisplayBill(int id)
            {
                BillFarSighted billFarSighted = new BillFarSighted() { PackFactor = 3 };
                return PartialView("BillFarSighted", billFarSighted);
            }
    
[HttpPost]
    public async Task<IActionResult> Create(List<BillFarSighted> billFarSighteds)
            {
    ....
    }

但是当我提交父表单时（在创建操作中），billFarSighteds列表是空的，我怎样才能在控制器中获取那些部分模型？

Answer 1

列表对象绑定的关键是确保将方括号中的顺序索引添加到表单字段的名称属性中，例如 [0].PackFactor.

在你的情况下，你可以将rowNum作为索引。

Create.csthml

<form asp-action="Create" method="post">
    <div class="text-center" dir="rtl" id="ttt">
    </div>

    <input type="submit" value="submit" class="btn btn-primary" />

</form>
<a id="add1" style="cursor:pointer">add</a>

@section scripts{
    <script>
        var rowNum = 0;
        $('#add1').click(function () {
            $.get('/Glasses/DisplayBill?id=' + rowNum, function (partial) {
                console.log(partial);
                $('#ttt').append(partial);
                rowNum++;
            });
        
        });
    </script>
}

BillFarSighted.cshtml

@model BillFarSighted

<div style="display: inline-block">

    <div class="row form-group">
        <label asp-for="PackFactor" class="col-5 text-left col-form-label"></label>
        <div class="col-7">
            <select asp-for="PackFactor" name="[@Model.Id].PackFactor" class="form-control" asp-items="Html.GetEnumSelectList<Compression>()">
                <option selected value="">Select</option>
            </select>
            <span asp-validation-for="PackFactor" class="text-danger"></span>
        </div>
    </div>
</div>

型号：

public class BillFarSighted
{
    public long Id { get; set; }
    public long RecipeId { get; set; }
    public long PackFactor { get; set; }
}

public enum Compression
{
    AAA = 1,
    BBB = 2,
    CCC = 3,
    DDD = 4
}

控制器：

public ActionResult DisplayBill(int id)
{
    BillFarSighted billFarSighted = new BillFarSighted() { Id = id };
    return PartialView("BillFarSighted", billFarSighted);
}

[HttpPost]
public async Task<IActionResult> Create(List<BillFarSighted> billFarSighteds)
{
    //some codes
}

结果：

在父级的提交操作中获取部分视图模型

Get partial view models in submit action of parent

asp.net-mvc-partialview

asp.net-core