根据数据模型创建复选框列表，并将其存储回ASP.NET Core MVC

如何解决根据数据模型创建复选框列表，并将其存储回ASP.NET Core MVC

public class Project
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
}

public class Step
{
    public int Id { get; set; }
    public string Name { get; set; }
}

public class StepDate
{
    public int StepId { get; set; }
    public int ProjectId { get; set; }
    public bool Selected { get; set; }
    public DateTime StartDate { get; set; }
    public DateTime EndDate { get; set; }
}

public class CreateProjectVM
{
    public string Name { get; set; }
    public string Description { get; set; }
    public List<Steps> Steps { get; set; }
    public List<StepDate> StepDates { get; set; }
}

我有给定的数据模型。首先，我想为每个步骤创建一个带有复选框列表的页面，并带有StartDate和EndDate的其他输入字段。其次，在发布后，我要存储已检查的步骤和根据日期。数据模型的CRUD功能已经实现。我只需要在cshtml和cs之间进行通信的方式。

解决方法

这是一个使用ajax的演示：

控制器：

[HttpGet]
        public IActionResult TestCreateProjectVM()
        {
            //Step[i] is related to StepData[i]
            CreateProjectVM c = new CreateProjectVM { Description = "d",Name = "c" };
            List<StepDate> StepDates = new List<StepDate> { new StepDate { ProjectId = 1,Selected = false,StepId = 11,StartDate = new DateTime(2012,1,1),EndDate = new DateTime(2012,2) },new StepDate { ProjectId = 1,StepId = 12,2,2) } };
            List<Step> Steps = new List<Step> { new Step { Id = 11,Name = "step1" },new Step { Id = 12,Name = "step2" } };
            c.StepDates = StepDates;
            c.Steps = Steps;
            return View(c);
        }
        [HttpPost]
        public IActionResult TestCreateProjectVM(CreateProjectVM createProjectVM)
        {
            return Ok();
        }

查看：

  Name:<input asp-for="Name" />
    Description:<input asp-for="Description" />
    @for (var i = 0; i < Model.StepDates.Count(); i++)
    {
<div id="@i">
    <div class="checkbox">
        <label asp-for="@Model.StepDates[i].Selected">
            <input asp-for="@Model.StepDates[i].Selected" />
        </label>
    </div>


    <label asp-for="@Model.Steps[i].Name"></label>
    <input asp-for="@Model.StepDates[i].StartDate" />
    <input asp-for="@Model.StepDates[i].EndDate" />
    <input asp-for="@Model.Steps[i].Id" hidden />
    <input asp-for="@Model.Steps[i].Name" hidden />
    <input asp-for="@Model.StepDates[i].StepId" hidden />
    <input asp-for="@Model.StepDates[i].ProjectId" hidden />

</div>
    }
    <button  onclick="submit()">submit</button>

@section scripts{
    <script>
    function submit() {
        var model = {};
        model.Name = $("#Name").val();
        model.Description = $("#Description").val();
        var StepDates = new Array();
        var Steps = new Array();
        $('input[type=checkbox]:checked').each(function () {
            var stepDate = {};
            stepDate.Selected = true;
            stepDate.StartDate = $('#' + $(this).attr("id").replace("Selected","StartDate")).val();
            stepDate.EndDate = $('#' + $(this).attr("id").replace("Selected","EndDate")).val();
            stepDate.StepId = $('#' + $(this).attr("id").replace("Selected","StepId")).val();
            stepDate.ProjectId = $('#' + $(this).attr("id").replace("Selected","ProjectId")).val();
            StepDates.push(stepDate);
            var step = {};
            step.Name = $('#' + $(this).attr("id").replace("Selected","Name").replace("StepDates","Steps")).val();
            step.Id = $('#' + $(this).attr("id").replace("Selected","Id").replace("StepDates","Steps")).val();
            Steps.push(step);
        })
        model.StepDates = StepDates;
        model.Steps = Steps;
        $.ajax({
                type: "POST",url: '@Url.Action("TestCreateProjectVM","Test1")',data: model
             }).done(function (data) {

    });
    }
    </script>
    
}

结果：