Question

I understand that nested <form> tags are not allowed, but I would like to achieve a similar functionality.

I have a form used to create a user profile, and within that form, I would like to allow the user to specify one or more schools that they have attended.

In my current setup (below), I can submit only one school per form. I’ve stripped validation and labels from my view in an effort to simplify the problem.

View:

<% using (Html.BeginForm())
   { %>
<div>
    <fieldset>
        <legend>Basic Information</legend>
        <%: Html.EditorFor(m => m.Name) %>
        <!-- more input fields-->
    </fieldset>
    <fieldset>
        <legend>Schools</legend>
        <%: Html.EditorFor(m => m.SchoolName) %>
        <!-- more input fields -->
    </fieldset>
    <p>
        <input type="submit" value="Create" />
    </p>
</div>
<% } %>

This view is strongly typed to a ProfileViewModel that holds all the property fields. My controller contains a very simple Create action that saves the inputs to a database. This works fine.

What I would like to do is allow the user to add multiple schools using this form. In asp.net, I would use an UpdatePanel to achieve what I want, but everything I’ve read suggests that in MVC, the standard is to use a PartialView and jQuery/ajax calls.

1. If I were to enclose the Schools section of my form in a PartialView, how do I get this PartialView that’s nested in another form to “submit” and “update” without affecting the main view?
2. How do I alter my view models to reflect this? Should I save a List<School> in ProfileViewModel that holds all the added schools or is there a better way? Should I be passing a SchoolViewModel to the PartialView?

Answer 1

You may take a look at the following article.