Does the model maintain its structure when data arrives at the controller?

Question

I am not sure whether the question was formulated correctly in the topic, but I will try to explain everything that I have.

I have below ContactUsModel , which is part of HomeViewModel , better say that Nested Model Class in one model

 public class ContactUsDataModel { public string ContactName { get; set; } public string ContactEmail { get; set; } public string ContactMessage { get; set; } public string ContactPhone { get; set; } } 

and I get this model specified in HomeViewModel as below:

 public class HomeViewModel { /*My other models goes here*/ public ContactUsDataModel CUDModel { get; set; } } 

Now in the Index.cshtml I strongly create the form view, as shown below:

 @model ProjectName.Models.HomeViewModel <!--I have other views for other models--> @using (Html.BeginForm("ContactPost", "Home", FormMethod.Post, new { id = "contactform" })) { @Html.TextBoxFor(m => m.CUDModel.ContactName, new { @class="contact col-md-6 col-xs-12", placeholder="Your Name *" }) @Html.TextBoxFor(m => m.CUDModel.ContactEmail, new { @class = "contact noMarr col-md-6 col-xs-12", placeholder = "E-mail address *" }) @Html.TextBoxFor(m => m.CUDModel.ContactPhone, new { @class = "contact col-md-12 col-xs-12", placeholder = "Contact Number (optional)" }) @Html.TextAreaFor(m=>m.CUDModel.ContactMessage, new { @class = "contact col-md-12 col-xs-12", placeholder = "Message *" }) <input type="submit" id="submit" class="contact submit" value="Send message"> } 

I am doing ajax Publish as below:

 $('#contactform').on('submit', function (e) { e.preventDefault(); var formdata = new FormData($('.contact form').get(0)); $.ajax({ url: $("#contactform").attr('action'), type: 'POST', data: formdata, processData: false, contentType: false, //success success: function (result) { //Code here }, error: function (xhr,responseText,status) { //Code here } }); }); 

and in the controller I tried to get it as shown below:

 public JsonResult ContactPost(ContactUsDataModel model) { var name=model.ContactName; //null /*Fetch the data and save it and return Json*/ //model is always null } 

For some reason, the above model is always null . But it works if I attribute the model as HomeViewModel model instead of HomeViewModel model ContactUsDataModel model to the controller parameter, as shown below:

 public JsonResult ContactPost(HomeViewModel model) { var name=model.CUDModel.ContactName; //gets value /*Fetch the data and save it and return Json*/ //Model is filled. } 

My question is here, although I populate a model type ContactUsDataModel in the view, I get it as null if I refer directly, but the HomeViewModel that is inside the HomeViewModel gets populated. This is not the type of model. Is the hierarchy required when assembling in the controller?

Answer 1

Well, if your generated name <input> is CUDModel.ContactName instead of just ContactName , Model-Binder will not be able to bind it by default.

Fortunately, you can use the [Bind] attribute with the prefix:

 public JsonResult ContactPost([Bind(Prefix="CUDModel")]ContactUsDataModel model) { // ... } 

See MSDN

Answer 2

Using your web browser, check each "name" property of the DOM input element. MVC automatically displays the properties from your inputs to the class using the input property "name".

To solve this problem, you can create your own mediator or create input manually by specifying the name property so that the model automatically binds to their class properties.

However, there is nothing wrong with the action of your controller taking a HomeViewModel as an argument.

Details found here .

Answer 3

In your view, the type that you refer to in the view is @model ProjectName.Models.HomeViewModel - @model ProjectName.Models.HomeViewModel - CUDModel is just a HomeViewModel property.