MVC4 Passing Complex Object from View to Controller, new View is not rendering

Question

I'm very new to MVC and have run into this issue while trying to port an existing site to MVC4.

We're using models where much of the data is populated by service calls, so obviously we'd like to keep the calls to a minimum. The problem is that when I try to pass the model back to the controller, the complex objects within the model invariably become null. I have been able to persist the data on a call back to the controller using ajax; however, I need the action to return a new view, and after the action completes, the code for the view executes, but there is no redirect (which I believe is the point of ajax, I think what I'm asking for is a solution that will persist the data in the same way but actually redirect).

Here is my model:

public class DistributionModel
{
    public string typeOfDistribution { get; set; }
    public Document document { get; set; }
    public string thumbnailUrl { get; set; }
    public MergeFieldModel mergeFields { get; set; }
}

public class MergeFieldModel
{
    public MergeFields documentMergeFields { get; set; }
}

Here is the controller action I am using:

        public ActionResult Index(DistributionModel distributionModel)
    {
        distributionModel.mergeFields = new MergeFieldModel() { documentMergeFields = MergeFieldsHelper.GetDocumentMergeFields(distributionModel.document.Id) };
        return View("Index", distributionModel);
    }

I tried using a [email protected]("Index", Model) instead of the button in the block below to call the controller and perform the redirect (the redirect itself did work, but I then had to perform another service call within the controller to retrieve the same document as I was working with from the calling view) because the Document object within the model kept returning as NULL to the controller.

Here is the portion of the view that is calling the controller and actually returns the complete model: I think what I am looking for is a way to accomplish this without ajax so that I can get the redirect to the Distribution/Index page (this is fired from Distribution/DocumentDetails page)

        <button id="EmailDistribution" data-corners="false" data-theme="a">EMAIL</button>

         $('#EmailDistribution').click(function () {
              var model = @Html.Raw(Json.Encode(Model));
              $.ajax({
              url: '@Url.Action("Index", "Distribution")',
              type: 'POST',
              contentType: 'application/json; charset=utf-8',
              data: JSON.stringify(model),     
              processData: false,                 
              });                
         });

Thanks, any help would be very much appreciated.

Answer 1

I'm not sure if I understood your problem exactly but I can tell you that you will need to put every single value of your model in a form posted to a controller action that you want not to be null.

This is exactly what you do in your ajax call: You currently transform the whole model to json and use the jQuery ability to transform it again to post data. Assuming that you have the following model for example:

public class TestModel {
    public string A { get; set; }
    public string B { get; set; }
}

Your javascript code will create a string similar to { A: 'Value for a', B: 'Value for B' } which will be transformed to a HTTP POST request using jQuery:

POST /Controller/Index HTTP/1.1
Host: demo.loc
User-Agent: Mozilla/5.0 whatever
Content-Type: application/x-www-form-urlencoded; charset=utf-8

A=Value+for+a&B=Value+for+B

As a result your Index action will be called and the DefaultModelBinder binds the values to your model properties. This works for primitive types like integers as well as for complex types like collections for example. The DefaultModelBinder handles the transformation of these types.

Let's have a look at a more complex model:

public class ComplexSubModel {
    public ICollection<string> StringList { get; set; }
}

public class ComplexModel {
    public ComplexSubModel SubModel { get; set; }
}

The DefaultModelBinder is also able to bind models like those:

POST /Controller/Index HTTP/1.1
Host: demo.loc
User-Agent: Mozilla/5.0 whatever
Content-Type: application/x-www-form-urlencoded; charset=utf-8

ComplexModel.SubModel.StringList[0]=First+entry&ComplexModel.SubModel.StringList[1]=Second+entry&ComplexModel.SubModel.StringList[2]=Third+entry

This will result in a new instance of ComplexModel with its SubModel property set to a new instance of ComplexSubModel with its property StringList set to a new instance of System.Collection.Generic.List<string> containing three strings First entry, Second entry and Third entry.

Now what you have to do is render your model properties to hidden fields for example so that they are included in a postback:

@using (Html.BeginForm()) {
    @Html.HiddenFor(m => m.SubModel.StringList[0])
    @Html.HiddenFor(m => m.SubModel.StringList[1])
    @Html.HiddenFor(m => m.SubModel.StringList[2])
}

Every property included in the postback will then not be null but could have been forged by the user because they are simple re-transmitted to the server assuming that they were rendered in hidden fields. In fact you cannot be sure that the re-transmitted values are those you fetched by a service call previously.

Another possibility would be to save the results of a service call in the TempData-dictionary which in fact stores the values in a user-session and destroys them as soon as they are re-read in the postback action or else directly store the values in a session:

public ActionResult Index() {
    // Do service calls

    #region Variant a
    TempData["ServiceResultA"] = foo;
    TempData["ServiceResultB"] = bar;
    #endregion

    #region Variant b
    Session["ServiceResultA"] = foo;
    Session["ServiceResultB"] = bar;
    #endregion

    var model = new DistributionModel();
    // Set properties and stuff

    return View("Index", model);
}

[HttpPost]
public ActionResult Index(DistributionModel model) {
    // Read "cached" service calls

    #region Variant a
    var foo = (TResultA)TempData["ServiceResultA"];
    var bar = (TResultB)TempData["ServiceResultB"];
    #endregion

    #region Variant b
    var foo = (TResultA)Session["ServiceResultA"];
    var bar = (TResultB)Session["ServiceResultB"];
    #endregion

    // Do stuff

    return RedirectToAction(...);
}

Both of the variants have pros and contras, like they can be problematic when browsing in two tabs within one browser session for example or the need for the classes to be serializable when you are using a session state server. Nevertheless the procedure is always the same: You will either have to

• fetch the data everytime you need it from the services (what is expensive) or
• save them anywhere on the server (TempData, Session and stuff) or else
• submitting them with the form (can be forged by the user, is not always easy).

Choose your poison. ;-)