在ASP.NET Core MVC中创建实体列表 [英] Create list of entities in asp.net core mvc
问题描述
我想在asp.net核心mvc中创建一个实体.该实体表示锻炼锻炼,并且具有一系列锻炼子集:
I want to create an entity in asp.net core mvc. The entity represents an exercise workout, and it has a child collection of exercise sets:
public class Workout
{
public DateTime Date { get; set; }
public string Name { get; set; }
public string Description { get; set; }
public virtual ICollection<Set> Sets { get; set; }
}
public class Set
{
public int Id { get; set; }
public int ExerciseId { get; set; }
public int WorkoutId { get; set; }
public decimal Weight { get; set; }
public int Reps { get; set; }
public virtual Exercise Exercise { get; set; }
public virtual Workout Workout { get; set; }
}
表单如下:
添加集"按钮使用JavaScript将一组与集"相关的字段添加到表单中,因此可以有任意数量的集"相关字段.
The "Add Set" button uses JavaScript to add a group of "set" related fields to the form, so there can be any number of "set" related fields.
这是我现有的包含以下形式的视图的代码:
Here is my existing code for the view containing the form:
@model Weightlifting.Models.Workout
@{
ViewData["Title"] = "Add Workout";
}
<h2>Add Workout</h2>
<form asp-action="Create">
<div class="form-horizontal">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Date" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Name" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Description" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Description" class="form-control" />
<span asp-validation-for="Description" class="text-danger" />
</div>
</div>
<div class="form-group">
<fieldset class="form-add-set">
<label for="sets" class="col-md-2 control-label">Sets</label>
<div class="col-md-10">
<div class="add-sets">
<div class="form-inline add-set">
<div class="form-group">
<label class="control-label">Exercise</label>
<select class="form-control" asp-items="ViewBag.Exercises"></select>
</div>
<div class="form-group">
<label asp-for="Sets.First().Reps" class="control-label"></label>
<input asp-for="Sets.First().Reps" placeholder="Reps" class="form-control" />
<span asp-validation-for="Sets.First().Reps" class="text-danger" />
</div>
<div class="form-group">
<label asp-for="Sets.First().Weight" class="control-label"></label>
<input asp-for="Sets.First().Weight" class="form-control" />
<span asp-validation-for="Sets.First().Weight" class="text-danger" />
</div>
<div class="form-group">
<button class="btn btn-remove-set" data-toggle="tooltip" title="Remove Set"><span class="glyphicon glyphicon-minus"></span></button>
</div>
</div>
</div>
<button class="btn btn-add-set">Add Set</button>
</div>
</fieldset>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Save" class="btn btn-primary" />
</div>
</div>
</div>
</form>
<div>
<a asp-action="Index"><span class="glyphicon glyphicon-arrow-left"></span> Back</a>
</div>
@section Scripts {
<script type="text/javascript">
$(document).ready(function () {
var wrapper = $('.add-sets');
$(".btn-add-set").click(function(e) {
e.preventDefault();
$('.add-set:first-child').clone(true).appendTo(wrapper);
$('.add-set .btn-remove-set').show();
});
$('.btn-remove-set').click(function (e) {
e.preventDefault();
$(this).parents('.add-set').remove();
removeButton();
});
function removeButton() {
if ($('.add-set').length == 1) {
$('.add-set .btn-remove-set').hide();
}
}
});
</script>
}
这是视图发布到的控制器操作:
And here is the controller action that the view posts to:
public async Task<IActionResult> Create([Bind("Id,Date,Description,Name")] Workout workout)
{
// do stuff
}
我的问题是:如何对表格进行编码,以便将"Sets"发布到锻炼模型中的Set集合中?
My question is this: How do I code the form so that the "Sets" post to the Set collection in the workout model?
推荐答案
从操作方法中删除[Bind("Id,Date,Description,Name")]
.
public async Task<IActionResult> Create(Workout workout)
{
// do stuff
}
然后像这样在您的Set
属性上应用索引.
Then apply indexing on your Set
properties like this.
<div class="form-inline add-set">
<div class="form-group">
<label class="control-label">Exercise</label>
<select name="Sets[0].ExerciseId" class="form-control"><option value="1">Push Up</option>
<option value="1">Set Up</option>
</select>
<div class="add-sets">
<div class="form-inline add-set">
<div class="form-group">
<label class="control-label">Exercise</label>
<select name="Sets[0].ExerciseId" class="form-control" asp-items="ViewBag.Exercises"></select>
</div>
<div class="form-group">
<label asp-for="Sets.First().Reps" class="control-label"></label>
<input asp-for="Sets.First().Reps" name="Sets[0].Reps" placeholder="Reps" class="form-control" />
<span asp-validation-for="Sets.First().Reps" class="text-danger" />
</div>
<div class="form-group">
<label asp-for="Sets.First().Weight" class="control-label"></label>
<input asp-for="Sets.First().Weight" name="Workout.Sets[0].Weight" class="form-control" />
<span asp-validation-for="Sets.First().Weight" class="text-danger" />
</div>
<div class="form-group">
<button class="btn btn-remove-set" data-toggle="tooltip" title="Remove Set"><span class="glyphicon glyphicon-minus"></span></button>
</div>
</div>
</div>
动态添加新行时,请确保索引编号必须是连续的,从0开始并且不要跳过任何迭代.
When you add new row dynamically make sure the indexing number must be sequential, start at 0 and not skip any iteration.
这篇关于在ASP.NET Core MVC中创建实体列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!