Multiple model binding in single view MVC

Question

I'm new to MVC, please help me out for this.

I have to manage the profile of Employee in my application.So i created 3 model

DetailPersonal(contain field- First Name,Middle Name, Last Name, DOB)

DetailAddress(contain field- AddressLine1,AddressLine2,City,State,etc)

DetailContact(contain field-Primary Mobile no.,Secondary Mobile No, Off. No. etc)

Can i create a single view for these models and do ajax posting.

I want to display these in tabs Like Personal || Address || Contact

score 0 · Answer 1 · answered Jan 19 '16 at 17:06

The cleanest way would be to create a new class with three properties, and use that as your model.

Or, if you don't want to do that, you could use a list of objects:

@model List<object>
@{
  var detailPersonal = Model[0] as DetailPersonal;
  var detailAddress = Model[1] as DetailAddress;
  var detailContact = Model[2] as DetailContact;
}

And pass all three from the controller:

View(new object[] {MyDetailPersonal, MyDetailAddress, MyDetailContact})

But it could be more prone to error.

score 0 · Answer 2 · edited May 23 '17 at 10:27

This situation is very common where you have defined classes that need to be combined before being presented to the user.

Typically, this is handled by using a View Model to consolidate separate classes into something that can be modified by the end user. Translating between your entity objects and your view models can be done in the constructor for a simple application.

I would look at this: What is ViewModel in MVC?

Also, if you want to introduce more sophistication, I would read up on the repository pattern, and also look up domain layer. Those two subjects deal with the situation you are facing.

AdamStone · Answer 3 · 2016-01-19T19:14:44.680

Will the user submit the contents of all three models using a single form (a shared submit button)? I think that makes the most sense, unless there are circumstances that make AJAX necessary. If I'm right about that, here's what you would do.

Create a new model with three model-typed properties. Let's call it CustomerModel.

public class CustomerModel
{
    [DisplayName("Address")]
    public DetailAddress AddressDetails { get; set; }

    [DisplayName("Contact information")]
    public DetailContact ContactDetails { get; set; }

    [DisplayName("Personal information")]
    public DetailPersonal PersonalDetails { get; set; }
}

Then create the editor templates in the framework-defined folder. These contain the editable fields for each model.

~/Views/Shared/EditorTemplates/DetailAddress.cshtml
~/Views/Shared/EditorTemplates/DetailContact.cshtml
~/Views/Shared/EditorTemplates/DetailPersonal.cshtml

Then add the editors to your main form. Something like...

@using (Html.BeginForm())
{
    <div id="addressDetailsTab">
        @Html.LabelFor(model => model.AddressDetails)
        @Html.EditorFor(model => model.AddressDetails)
    </div>
    <div id="contactDetailsTab">
        @Html.LabelFor(model => model.ContactDetails)
        @Html.EditorFor(model => model.ContactDetails)
    </div>
    <div id="personalDetailsTab">
        @Html.LabelFor(model => model.PersonalDetails)
        @Html.EditorFor(model => model.PersonalDetails)
    </div>
    <input type="submit" value="Submit" />
}

Multiple model binding in single view MVC

3 Answers3