问题描述
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>
}