Submitting a form with multiple partial views

Question

User1396448631 posted

Please consider the scenario

public class EventViewModel
{
  public Logistics Logistics;
  public Contact Contact;
}

Index.cshtml

@model  EventApp.Models.EventViewModel
@using (Html.BeginForm("Index", "Event"))
    {
        @Html.AntiForgeryToken()
        @Html.Partial("~/Views/Event/_Logistics.cshtml", Model.Logistics)
        @Html.Partial("~/Views/Event/_Contact.cshtml", Model.Contact)
        <input type="submit" value="Submit" />
}

Both _Logistics.cshtml and _Contact.cshtml have respective textboxes/dropdown lists but they are not inside form element. My assumption is that Index.cshtml's form is sufficient?

EventController

public class EventController : Controller
{
  // GET: Event
  public ActionResult Index()
  {
     var model = new EventViewModel();
     var logistics = new Logistics();
     var contact = new Contact();
     model.Logistics = logistics;
     model.Contact = contact;
     return View(model);
  }

  [HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Index(EventViewModel vm)
  {
   // Here vm.Logistics and vm.Contact are null
  }
}

Can you please tell why are they null? How can I resolve it?

Thank you

Answer 1

User475983607 posted

Can you please tell why are they null?

The most common reason for null action arguments is the HTML form input names do not match the view model property names.  

How can I resolve it?

The community needs the partial view markup to provide assistance.  Otherwise use your browser's dev tools (F12) to verify what name/values are submitted to the action and adjust the markup accordingly. 

Answer 2

User1396448631 posted

I replaced 

[HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Index(EventViewModel vm)
  {
   // Here vm.Logistics and vm.Contact are null
  }

with 

[HttpPost]
  [ValidateAntiForgeryToken]
  public ActionResult Index(Logistics logistics, Contact contact)
  {
   // logistics and contact are populated
  }

Can you please tell me why the form is not able to map to EventViewModel but able to map to Logistics and Contact?

Answer 3

User475983607 posted

Can you please tell me why the form is not able to map to EventViewModel but able to map to Logistics and Contact?

Again, the common cause is the HTML form input names do not match the view model property names.  When you do this...

        @Html.Partial("~/Views/Event/_Logistics.cshtml", Model.Logistics)
        @Html.Partial("~/Views/Event/_Contact.cshtml", Model.Contact)

... the partial views are are missing the fully qualified type name.  If you are using HTML helpers, the helpers will not know there is a view model.

This construct should work with the posted action but you'll need to adjust any HTML helper expressions.

        @Html.Partial("~/Views/Event/_Logistics.cshtml", Model)
        @Html.Partial("~/Views/Event/_Contact.cshtml", Model)

Do you really need partials?  Are you reusing the partials in other Views?

Answer 4

User1724605321 posted

Hi dbqasp ,

Please provide more details such partial view markups to help reproduce . Normally the values submitted from form are bind to properties of the model based on the names of the properties of the model and names of the fields in HTML .

Best Regards,

Nan Yu