如何使用 asp tag-helper 为存在于列表层中的对象属性设置模型输入？

Question

我有一个包含很多层的模型。在主框架上，将有一个用于基本输入的对象和一个对象列表，其中包含一个用于存储视图数据的模型，但在其中，每个项目都有一个数据字段来存储其新值，我也将其视为输入数据.我的问题是我不知道如何调用，在标签助手中设置该数据字段，因为它被列表列表覆盖。我想要实现的是将所有数据传回控制器。

public class TenDongThuocCongTy
{
    public int Id { get; set; }
    public int CauHinhBangId { get; set; }
    public string CongThucDong { get; set; }
    public string TenDong { get; set; }
    public int CauHinhBang_Cha { get; set; }
    [NotMapped]
    public string inputValue { get; set; }
}
public class LayThongTinBangThuocCongTyThanhVien
{
    public int Cttv_ThuocBangId { get; set; }
    public int CauHinhBangID { get; set; }
    public int CttvId { get; set; }
    public string TenDong { get; set; }
    public string CongThucDong { get; set; }
    public string DichCongThuc { get; set; }
    public List<TenDongThuocCongTy> TenDongThuocCongTies { get; set; }
}
public class MuaVuTruocUpsertModel
{
    
    [DisplayName("Day")]
    public DateTime? Ngay { get; set; }

    [Required(ErrorMessage = "Number")]
    [DisplayName("Number")]
    public int? STT { get; set; }
}

public class TongHopItemMuaVuTruoc
{
    public List<LayThongTinBangThuocCongTyThanhVien> MenuItemMuaVutruoc { get; set; }
    public MuaVuTruocUpsertModel muaVuTruocModel {get; set;}
}

和上面的模型一样，我想访问'inputValue'定义的含义然后把它放在：

@model MFF.Infrastructure.Models.TongHopItemMuaVuTruoc
<input asp-for="inputModel" type="text"/>

Answer 1

What I want to achieve is to pass all data back to controller.

要将数据从视图传递到控制器，您可以使用以下方法：

使用 asp.net core Model Binding 和提交按钮提交表单。
使用 JQuery Ajax 将表单数据或 JavaScript 对象提交给控制器。

请参考以下示例代码：

控制器：

    public IActionResult Index2()
    {
        TongHopItemMuaVuTruoc tongHopItemMuaVuTruoc = new TongHopItemMuaVuTruoc()
        {
            MenuItemMuaVutruoc = new List<LayThongTinBangThuocCongTyThanhVien>()
             {
                 new LayThongTinBangThuocCongTyThanhVien()
                 {
                      TenDongThuocCongTies = new List<TenDongThuocCongTy>()
                      {
                           new TenDongThuocCongTy()
                           {
                                TenDong = "TD 1",
                                inputValue = "AA",
                           },
                           new TenDongThuocCongTy()
                           {
                                TenDong = "TD 2",
                                inputValue = "BB",
                           }
                      }
                 }
             }
        };

        return View(tongHopItemMuaVuTruoc);
    }
    [HttpPost]
    public IActionResult Index2(TongHopItemMuaVuTruoc tongHopItemMuaVuTruoc)
    {
        if (ModelState.IsValid)
        {
            //do something
        }
        return View(tongHopItemMuaVuTruoc);
    }

Index2查看页面(Index2.cshtml)：这里我添加了两个按钮，“提交”按钮将使用第一种方法提交表单，“Ajax提交”按钮将提交表单使用 JQuery Ajax 方法。您可以使用类似的标签添加其他属性。

@model WebApplication6.Models.TongHopItemMuaVuTruoc

<div class="row">
    <div class="col-md-4">
        <form id="mainform" asp-action="Index2">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="muaVuTruocModel.Ngay" class="control-label"></label>
                <input asp-for="muaVuTruocModel.Ngay" class="form-control" />
                <span asp-validation-for="muaVuTruocModel.Ngay" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="muaVuTruocModel.STT" class="control-label"></label>
                <input asp-for="muaVuTruocModel.STT" class="form-control" />
                <span asp-validation-for="muaVuTruocModel.STT" class="text-danger"></span>
            </div>
            @for (var i = 0; i < Model.MenuItemMuaVutruoc.Count(); i++)
            {
                for (var j = 0; j < Model.MenuItemMuaVutruoc[i].TenDongThuocCongTies.Count; j++)
                {
                    <div class="form-group"> 
                        <input asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].TenDong" type="text" />
                    </div>
                    <div class="form-group"> 
                        <input asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].inputValue" type="text" />
                    </div>
                }
            }

            <div class="form-group">
                <input type="submit" value="Save" class="btn btn-primary" /> <input type="button" id="btnSubmit" value="Ajax Submit" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

在上面的查看页面最后，添加如下脚本：

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

<script>
    $(function () {
        $("#btnSubmit").click(function () {
            $.ajax({
                url: "Test/Index2",
                method: "Post",
                data: $("#mainform").serialize(),
                success: function () {
                    alert("sueess");
                },
                error: function (error) {
                    alert("error");
                }
            });
        });
    })
</script>
}

输出如下：

参考：

Razor syntax reference for ASP.NET Core

Answer 2

我终于明白了。我要做的是将我的模型视为数组对象。下面的代码returns我所有的数据，包括默认数据和新输入的数据，成功返回到控制器。

@for (int i = 0; i < Model.MenuItemMuaVutruoc.Count; i++)
{
//Value for Model
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].CttvId" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].Cttv_ThuocBangId" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].CauHinhBangID" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].TenDong" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].CongThucDong" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].DichCongThuc" />
@for (int j = 0; j < danhmuc.TenDongThuocCongTies.Count; j++)
{
//Value cho tung item
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].Id" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].CauHinhBangId" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].CongThucDong" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].CauHinhBang_Cha" />
<input type="hidden" asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].TenDong" />
var item = danhmuc.TenDongThuocCongTies.ElementAt(j);
<h6 class="col-md-4 col-lg-4 col-sm-4  mt-lg-2 mt-md-2 mt-2 mt-sm-2">
   @item.TenDong
</h6>
<input asp-for="MenuItemMuaVutruoc[i].TenDongThuocCongTies[j].inputValue" type="text" class="form-control col-md-8 col-lg-8 col-sm-8 mt-lg-2 mt-md-2 mt-2 mt-sm-2" />
}
}

如何使用 asp tag-helper 为存在于列表层中的对象属性设置模型输入？

How can I set model input for an object attribute that exist in layers of list with asp tag-helper?

c#

razor

asp.net-core