My partial view is not passing the values to the model correctly

Question

I have a huge problem that I'm extremely confused on. I'll give you a little background first. I have two models, one that contains the other like

public class AccountViewModel
{   
    public ChargeViewModel chargeViewModel { get; set; }
    other public values
}

Now I have a view, that references the partial view like so.

@model MyModels.AccountViewModel

[[Block_Header]]
@{ Html.RenderPartial("Header"); }
[[/Block_Header]]

[[ValidationSummary]]
@Html.ValidationSummary(false)      
[[/ValidationSummary]]

[[Block_ReloadOptions]]
    <div data-role="fieldcontain">
        <fieldset data-role="controlgroup" data-type="horizontal" class="amount-bar">
            <legend>Select an amount</legend>
            @{
                List<int> PresetValues = Main.Denominations.Split(',').Select(x => Convert.ToInt32(x.Trim())).ToList();    
            }       
            @if (PresetValues.Count > 0){
                int i = 1;
                foreach (int value in PresetValues) {                    
                    <input type="radio" name="amount" id="amount@(i)" value="@value" @(Model.chargeViewModel.ChargeAmount == value ?　"checked" : "")>
                    <label for="amount@(i)">$@value</label>
                    i++;
                } 
            }           
            <label for="select-amount">Select Amount</label>
            <select name="select-amount" id="select-amount" class="select-amount" data-role="select">
                <option value="">Other</option>
                   @if (Model.chargeViewModel.OtherValues.Count > 0){                      
                        foreach (int value in Model.chargeViewModel.OtherValues)
                        {
                            <option value="@value" @(Model.chargeViewModel.ChargeAmount == value ? "selected" : "") >$@value</option>                           
                        }
                    }                   
            </select>
            @Html.HiddenFor(m => m.chargeViewModel.ChargeAmount, new { id="hiddenAmount", value="0" })
        </fieldset>
    </div>

Some more forms here that arent relevant and then my partial view at the bottom as follows

@Html.Partial("MobileModelView", Model.chargeViewModel)

Now my partial view looks something like

@model VirtualNext.Web.Models.ChargeViewModel
<div class="ui-block-a">
        <fieldset data-role="controlgroup" data-type="horizontal" class="field-margin validate expiry-select">
                <label for="select-expiry-month" class="ui-hidden-accessible">Month</label>
                @Html.DropDownListFor(m => m.ExpMonth, Model.ddlMonths, new { id = "select-expiry-month", @class= "validate"})
                <label for="select-expiry-year" class="ui-hidden-accessible">Year</label>
                @Html.DropDownListFor(m => m.ExpYear, Model.ddlYears, new { id = "select-expiry-year", @class= "validate validateExpiry validateYear" })
        </fieldset>
    </div>

So now I'm having a problem passing in the values of m.ExpMonth and m.ExpYear to my model in the controller. I have checked my Request.Form value and the values are populated, but not to the post method in my controller.

My controller looks like

public ActionResult MyAction(AccountViewModel model, ChargeViewModel chargeViewModel)

{}

Now I have all the data that I pass in directly through my main view, but nothing from the partial view is populating the model like I want it to. Now this is part of my mobile site I'm working on, and I actually have something extremely similar on my desktop side, so I'm really confused as to why it wont work. Any ideas/suggestions would be greatly appreciated.

Answer 1

You have wrong binding. You dont need 2 models in controller. You can bind you submodel with main model like

partial view

@model VirtualNext.Web.Models.ChargeViewModel
@{
    ViewData.TemplateInfo.HtmlFieldPrefix = "AccountViewModel"; //bind to main model
}

controller with 1 model

public ActionResult MyAction(AccountViewModel model)

Additionaly i recomend you to pass the Prefix by ViewData to make your view more flexible.

@model VirtualNext.Web.Models.ChargeViewModel
@{
    ViewData.TemplateInfo.HtmlFieldPrefix = ViewData["htmlprefix"];
}

With this option you can use this view in many controller actions. just pass the prefix and bind your submodel to any model you need.

Answer 2

Put your partial view in the Views/Shared/EditorTemplates folder.

Then, replace Html.Partial line in your View with this:

@Html.EditorFor(model => model.ChargeViewModel, "MobileModelView")

And, replace your Action with this:

public ActionResult MyAction(AccountViewModel model)
{
  // Some code...
}