2

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; }
}

The form looks like this:

enter image description here

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
}

My question is this: How do I code the form so that the "Sets" post to the Set collection in the workout model?

1 Answer 1

4

Remove the [Bind("Id,Date,Description,Name")] from your action method.

public async Task<IActionResult> Create(Workout workout)
{
    // do stuff
}

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>

When you add new row dynamically make sure the indexing number must be sequential, start at 0 and not skip any iteration.

Sign up to request clarification or add additional context in comments.

1 Comment

how can i iterate a new index for the naming if i am creating the div using clone?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.