how to have two forms in one View, working separately and well, in ASP.NET MVC 3?

Question

I have two action methods. One of them submits the inserted data of a "new product", and the other form must upload the photos of that product. Each one has it's own Model, View, and each one calls it's own Action from controllers, which are completely separate.

But I need to have the forms both in just one view.

I've done this by using @html.action() to render the "Upload" action's View in the "Insert New Product" action's View.

The problem is, both of the submit buttons call the same "Insert New Product" action :|

Take a look. Here's the first View:

@using (Html.BeginForm("Insert_New_Product", "Admin", FormMethod.Post))
{
// Inputs, Validation Messages and all those stuff ...
   <input type="submit" name="Insert_New_Product" value="Add New Product" />

// Here, I render the "Upload" View :
   @Html.Action("Upload", "UploadImage")
 }

The "Upload" View looks like this :

@using (Html.BeginForm("Upload", "UploadImage", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
// Inputs and stuff ... 

  <input type="submit" value="Upload" name="Upload"/>
}

So how is this possible to have two (or more) forms, each one calling it's own ActionResult on submit? I'd appreciate your help.

Answer 1

I think this @Html.Action("Upload", "UploadImage") is the problem. You're essentially rendering the second form inside of the first one. That's not going to work. Try changing it to this:

@using (Html.BeginForm("Insert_New_Product", "Admin", FormMethod.Post)) 
{ 
    // Inputs, Validation Messages and all those stuff ... 
    <input type="submit" name="Insert_New_Product" value="Add New Product" />
} 

// Here, I render the "Upload" View : 
@Html.Action("Upload", "UploadImage")

Also, you should really be using Html.RenderAction instead of Html.Action as it writes directly to the response stream. See here for more information. Like so:

@{ Html.RenderAction("Upload", "UploadImage"); }