ASP.NET MVC 5 best practise form submit

Question

Description: I have a form for user-friendly input:

But i can't submit form in this way, coz my model for this form action looks like:

    public string Title { get; set; }  // First input
    public string Description { get; set; }  // Second input
    public string SportsmanId { get; set; }  // Not used
    public List<WorkoutExerciseParam> WorkoutExerciseParams { get; set; }  // Items, combined from list items (show on form screenshot)
    public SelectList AvailableSportsmans { get; set; }  // Dropdown list

So, if I can't submit, I wrote JS code to construct and post consistent model:

$(document)
        .ready(function() {
            $("#submit").click(function() {
                var exerciseList = [];
                /* Assemble exerciseList from OL and UL items */
                var title = $("input#Title").val();
                var description = $("input#Description").val();
                var sportsmanId = $("select#SportsmanId").val();
                $.post('@Url.Action("Create", "Workout")',
                {
                    Title: title,
                    Description: description,
                    SportsmanId: sportsmanId,
                    WorkoutExerciseParams: exerciseList
                });
            });
        });

This code works fine, but I can't redirect after the action is done (like when I just submit the form):

Then, I rewrite JS code so, that it constructs a new hidden form with hidden input and submit it. But I don't know how to create the list of inputs (List from first code sample).

Question:

What is the best practice to submit data to ASP.NET Controller's Action throw JS that I can use RedirectToAction() and View() methods? Do I need construct form (how can I do a list of objects) or how handle RedirectToAction() and View() method in JS?

Answer 1

You should be making a normal submit rather that ajax if you want to redirect (or be able to return the view and display validation errors if ModelState is invalid. There is no point using ajax, since ajax calls do not redirect.

You have not shown how your dynamically generating the inputs associated with your WorkoutExerciseParam collection, but they just need to be named correctly with indexers so that they will be bound by the DefaultModelBinder. The format needs to be

<input name="WorkoutExerciseParams[0].SomeProperty" .... />
<input name="WorkoutExerciseParams[0].AnotherProperty" .... />
<input name="WorkoutExerciseParams[1].SomeProperty" .... />
<input name="WorkoutExerciseParams[1].AnotherProperty" .... />
....

Your can generate this using javascript, but a better solution which gives you string type binding, client side validation for the dynamically added items and the ability to also delete items is to use the BeginCollectionItem() method as discussed in the answers to

• Submit same Partial View called multiple times data to controller? and
• A Partial View passing a collection using the Html.BeginCollectionItem helper