Question

I have a main View PersonEdit.cshtml bound to a Main class PersonEdit- it is internally a container class for Many Models like BasicInfo, EductaionalInfo, EmploymentInfo etc.
I save all the information on clicking on Submit on the PersonEdit.cshtml. The View is composed of many partial views which are loaded by different Action methods called asynchronously by AJAX.
The problem I am facing is the Model Binding does not happen on clicking on Submit on PersonEdit.cshtml as the names in the Partial views are not the same as expected for Model Binding.

class structure

public class PersonEdit
{
    BasicInfo basicInfo { get; set; }
    EducationalInfo eduInfo { get; set; }
    EmploymentInfo empInfo { get; set; }

}

Kindly suggest me as to how can i accomplish Model Binding in this situation.

I am loading the Partial Views like this:

//Basic Info
$(document).ready(function () {
    DisplayBasicInfo();
});

function DisplayBasicInfo() {

    var $MainContent = $("#divBasicInfo");
    var resourceURL = "/Home/Home/GetBasicInfo";
    var personID = $("#PersonEdit_PersonID").val();
    personID = 0;


    $MainContent.css("text-align", "center");
    $.ajax({
        cache: false,
        type: "GET",
        async: true,
        url: resourceURL,
        dataType: "text/html",
        data: { personID: personID },
        success: function (data) {
            $MainContent.html(data);
            $.validator.unobtrusive.parse($("#divBasicInfo"));
        },
        error: function (xhr) {

            $('#divBasicInfo').show().html("Unexpected Error in basic Info- Please contact administrator!");

            $("#divBasicInfo").dialog({

                modal: true,

                width: 'auto',

                opacity: 0.7,

                height: 'auto',

                position: 'center',

                title: 'Warning',

                buttons: {

                    'OK': function () { $(this).dialog("close"); }

                }

            });

        }
    });
}

Answer 1

I think you are using different partial views for BasicInfo,EducationInfo and EmploymentInfo.

Like

@Html.Partial("partialViewName",Model.basicInfo) in the main view.

Lets your BasicInfo class be like,

class BasicInfo
{
  public string FirstName{get;set;}
public string LastName{get;set;}
}

So, in the view (if you will see the source code) the name of properties for BasicInfo will be displayed like “FirstName” or “LastName” instead of “basicInfo.FirstName” and “basicInfo.LastName”.So Model binder will not be able to bind it to PersonEdit class.

The solution will be to EditorFor instead of Partial

use,

@Html.EditorFor(m=>m.basicInfo,"editorFileName")

Editor files are same as partial views but will be placed under “EditorTemplates” folder structure.In this the base object property name will be added to property names of BasicInfo properties.