Question

I am trying to understand how I should validate on the client sections of my MVC3 page independently and have come up with a simplyfied version of what I am trying to achieve.

If I use one form:
Pros: When I submit back to the “PostData” controller method I receive all data contained within the form. In this case both values “name” and “description”, which means that I can instantiate “PersonHobbyModel” and assign the data I have received. I can either store in the database or I can return the same view.

Cons: I cant validate independently. So if “name” isn’t completed and I complete “description” I can still submit the page. (This is a simplyfied version of what I am trying to do and I would have more fields than just “name” and “description”)

With two forms:
Pros: I can validate independently.

Cons: The controller method only receives the subitted forms data which, in this case either “Persons name” or “Hobby description” which means that I can’t recreate a full instance of “PersonHobbyModel”.

This is the model:

 public class Person {

    [Display(Name = "Person name:")]
    [Required(ErrorMessage = "Person name required.")]
    public string Name { get; set; }
}

public class Hobby {

    [Display(Name = "Hobby  description:")]
    [Required(ErrorMessage = "Hobby description required.")]
    public string Description { get; set; }
}

public class PersonHobbyModel {

    public PersonHobbyModel() {
        this.Person = new Person();
        this.Hobby = new Hobby();
    }

    public Person Person { get; set; }
    public Hobby Hobby { get; set; }
}

This is the controller:

 public class PersonHobbyController : Controller
{
    //
    // GET: /PersonHobby/

    public ActionResult Index()
    {
        var model = new PersonHobbyModel();
        return View(model);
    }


    public ActionResult PostData(FormCollection data) {
        var model = new PersonHobbyModel();

        TryUpdateModel(model.Person, "Person");
        TryUpdateModel(model.Hobby,"Hobby");

        return View("Index", model);
    }

}  

This is the view:

@model MultipleFORMStest.PersonHobbyModel
@{
    ViewBag.Title = "Index";
}
<h2>
    Index</h2>
@using (Html.BeginForm("PostData", "PersonHobby")) {
    <div>
        @Html.LabelFor(model => model.Person.Name)
        @Html.TextBoxFor(model => model.Person.Name)
        @Html.ValidationMessageFor(model => model.Person.Name)
        <input type="submit" value="Submit person" />
    </div>
}
@using (Html.BeginForm("PostData", "PersonHobby")) {
    <div>
        @Html.LabelFor(model => model.Hobby.Description)
        @Html.TextBoxFor(model => model.Hobby.Description)
        @Html.ValidationMessageFor(model => model.Hobby.Description)
        <input type="submit" value="Submit hobby" />
    </div>
    }

UPDATE 1
I didnt mention, as I wanted to keep the question as simple as possible, but for one of the sections I am using “jquery ui dialog”. I initially used a DIV to define the dialog, which I had inside my main form. This would of caused one problem as I wouldn’t have been able to validate on the client the “JQuery dialog form” independently from the rest of the form.

Saying this jquery did removed the “div jquery ui dialog” from the main form which made me include the dialog in it’s own form. For this reason I have ended up with two forms. The advantage is that I can now independently validate the “jquery dialog ui form”.

But I am confused as to how should I handle on the server data submited from various forms on the client as there is a chance that the user has JS disabled. If I submit from one form I can’t access the data in other forms.

UPDATE 2
Thanks for the replies. I believe I do need two forms and two entities as I want to validate them independently on the client, (apart from being kind of forced to by “Jquery UI Dialog”). For instance if I have, instead of one hobby I have a list of hobbies, which I could posible display in a grid in the same view. So I could not fill in the person name, but continue to add hobbies to the grid, If I do not complete the hobby description I’d get a validation error. (Sorry as I should of included both of my updates in the initial question but for the purpose of clarity I wanted to keep it as simple as posible)

Answer 1

From my perspective, you have a single view model that corresponds to two entity models. In your place I would use a single form and validate the view model and not really think about it as two (dependent) entities. Receive back the view model in your action, instead of a generic form collection, and use model-based validation via data annotation attributes. Once you have a valid, posted model you can then translate that into the appropriate entities and save it to the database.

Model

public class PersonHobbyViewModel {

    [Display(Name = "Person name:")]
    [Required(ErrorMessage = "Person name required.")]
    public string Name { get; set; }

    [Display(Name = "Hobby  description:")]
    [Required(ErrorMessage = "Hobby description required.")]
    public string Description { get; set; }
}

Controller

public class PersonHobbyController : Controller
{
    //
    // GET: /PersonHobby/
    [HttpGet] // mark as accepting only GET
    public ActionResult Create() // Index should probably provide some summary of people and hobbies
    {
        var model = new PersonHobbyViewModel();
        return View(model);
    }

    [HttpPost] // mark as accepting only POST
    public ActionResult Create(PersonHobbyViewModel model) {

        if (ModelState.IsValid) {
           var person = new Person { Name = model.Name };
           var hobby = new Hobby { Description = model.Description };
           person.Hobbies = new List<Hobby> { hobby };

           db.Persons.Add( person );
           db.SaveChanges();
        }

        return RedirectToAction( "details", new { id = person.Id } ); // view the newly created entity
    }
}

View

@model MultipleFORMStest.PersonHobbyViewModel
@{
    ViewBag.Title = "Create";
}
<h2>
    Create</h2>
@using (Html.BeginForm("Create", "PersonHobby")) {
    <div>
        @Html.LabelFor(model => model.Person.Name)
        @Html.TextBoxFor(model => model.Person.Name)
        @Html.ValidationMessageFor(model => model.Person.Name)
        <input type="submit" value="Submit person" />
    </div>

    <div>
        @Html.LabelFor(model => model.Hobby.Description)
        @Html.TextBoxFor(model => model.Hobby.Description)
        @Html.ValidationMessageFor(model => model.Hobby.Description)
        <input type="submit" value="Submit hobby" />
    </div>
}