ViewModel not binding when using in a new view - asp.net-mvc

Question

I am able to pass a view model initially on a form on my index.cshtml page to an editor template page. On the index page I have a submit button that post the form results (radio button groups in the editor template) back to the controller and within the HttpPost method its passing this model to a partial view which is displayed in a modal popup. All this does is show the form elements that were selected but it disables the radio buttons to the user. From here the user can either go back (close the window) or confirm the form results. When the user clicks the confirm button it should pass the viewmodel back to the controller to another HttpPost method which will then process the form results and return the final confirmation view. But when I try to pass the viewmodel back to the controller from the modal popup it does not keep the binding. I tried making sure all were binded through Hidden inputs but I must be missing something somewhere. Maybe I am going about this the wrong way. I just need to basically keep the viewmodel binding from the initial post and be able to process that after the user confirms the selection from the modal popup. What would be the best way to accomplish this without having to put a session hack in there?
Index
#using (Html.BeginForm("Index", "Home", FormMethod.Post, new { id = "ballotForm" }))
{
#Html.AntiForgeryToken()
#(Html.EditorFor(m => m.BallotViewModel, new ViewDataDictionary(ViewData)
{
TemplateInfo = new System.Web.Mvc.TemplateInfo
{
HtmlFieldPrefix = "BallotViewModel"
}
}))
<table class="col-sm-12">
<tr>
<td class="pull-right">
<button type="submit" class="btn btn-primary" data-target="#modal-container" data-toggle="modal">Vote Management Ballot</button>
</td>
</tr>
</table>
}
Controller - Initial Post to Modal Popup
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(HomeViewModel bModel)
{
if (ModelState.IsValid)
{
//set property to identity view
bModel.BallotViewModel[0].IsVoteConfirmationView = true;
return PartialView("ViewVoteConfirmation", bModel);
}
}
Controller - Post after Confirm submit from modal popup
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult ConfirmVote(HomeViewModel cModel)
{
//Process form results here but model is null
//Go to Thank You View
return View();
}
ViewVoteConfirmation:
#model Ballot.WebUI.Models.HomeViewModel
<div class="row">
#(Html.EditorFor(m => m.BallotViewModel, new ViewDataDictionary(ViewData) { TemplateInfo = new TemplateInfo { HtmlFieldPrefix = "BallotViewModel" } }))
</div>
#using (Html.BeginForm("ConfirmVote", "Home", FormMethod.Post, new { id = "ballotConfirmVoteForm" }))
{
#Html.AntiForgeryToken()
<div class="row">
#Html.EditorFor(m => m.BallotViewModel[0].Proposals, "Proposals", new ViewDataDictionary(ViewData)
{
TemplateInfo = new TemplateInfo
{
HtmlFieldPrefix = "Proposals"
}
})
</div>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<button type="button" class="btn btn-default"
data-dismiss="modal">
Cancel
</button>
<button type="submit" id="approve-btn"
class="btn btn-danger">
Confirm
</button>
</div>
</div>
}
ProposalViewModel:
public class ProposalViewModel
{
public int ProposalItemID { get; set; }
public string ProposalItemTitle { get; set; }
public string Option0_Name { get; set; }
public string Option1_Name { get; set; }
public string Option2_Name { get; set; }
public string Option3_Name { get; set; }
public string PercOfShare { get { return "% of Share"; }}
public bool IsHeader { get; set; }
public int TagOrder { get; set; }
public int SelectedVoteOption { get; set; }
public bool IsVoteConfirmationView { get; set; }
public bool IsCumulative { get; set; }
public int SharePercentage { get; set; }
public List<VoteOptionViewModel> lVoteOptions { get; set; }
}
Proposals:
#model List<Ballot.WebUI.Models.ProposalViewModel>
#for (int i = 0; i < Model.Count; i++)
{
#Html.HiddenFor(m => m[i].ProposalItemID)
#Html.HiddenFor(m => m[i].ProposalItemTitle)
#Html.HiddenFor(m => m[i].Option0_Name)
#Html.HiddenFor(m => m[i].Option1_Name)
#Html.HiddenFor(m => m[i].Option2_Name)
#Html.HiddenFor(m => m[i].Option3_Name)
#Html.HiddenFor(m => m[i].PercOfShare)
#Html.HiddenFor(m => m[i].IsHeader)
#Html.HiddenFor(m => m[i].TagOrder)
#Html.HiddenFor(m => m[i].SelectedVoteOption)
#Html.HiddenFor(m => m[i].IsVoteConfirmationView)
#Html.HiddenFor(m => m[i].IsCumulative)
#Html.HiddenFor(m => m[i].lVoteOptions)
#Html.HiddenFor(m => m[i].SharePercentage)
}
jquery script to change the value of the SharePercentage label
$(function () {
//When 'For' is Selected
$('[class$=PercOfShareFor]').on('click', function (e) {
if ($(this).is(':checked')) {
var forMatches1 = 0;
$('[class$=PercOfShareFor]').each(function (i, val) {
if ($(this).is(':checked')) {
//check how many 'For' Vote Options are selected
forMatches1++;
//select the Share Percentage value label in the same row, and change the class to ForSelected (used as selector)
$(this).closest('td').next('td').next('td').find('.SharePercentage')
.removeClass("SharePercentage")
.addClass("SharePercentageForSelected");
//if the Share Percentage class (used as selector) was previously WithholdSelected then change to ForSelected
$(this).closest('td').next('td').next('td').find('.SharePercentageWithholdSelected')
.removeClass("SharePercentageWithholdSelected")
.addClass("SharePercentageForSelected");
}
});
//divide total 'For' Selections by number of Director Proposals
var forPercent1 = 100 / forMatches1;
//format the percentage to display 2 decimal places if not a whole number
var forPercent2 = Math.round(forPercent1 * 100) / 100;
//Update 'For' Percentages
$('[class$=SharePercentageForSelected]').text(forPercent2);
}
});
//When 'Withhold' is Selected after initially selecting 'For'
$('[class$=PercOfShareWithhold]').on('click', function (e) {
if ($(this).is(':checked')) {
var forMatches = 0;
$('[class$=PercOfShareFor]').each(function (i, val) {
if ($(this).is(':checked')) {
//check how many 'For' Vote Options are still selected
forMatches++;
}
});
var withholdMatches = 0;
$('[class$=PercOfShareWithhold]').each(function (i, val) {
if ($(this).is(':checked')) {
//check how many 'Withhold' Vote Options are still selected
withholdMatches++;
//set the class to WithholdSelected
$(this).closest('td').next('td').find('.SharePercentageForSelected')
.removeClass("SharePercentageForSelected")
.addClass("SharePercentageWithholdSelected")
.text("0"); //Set 'Withhold' Percentage back to 0
}
});
//divide total 'For' Selections by number of Director Proposals
var forPercent1 = 100 / forMatches;
//format the percentage to display 2 decimal places if not a whole number
var forPercent2 = Math.round(forPercent1 * 100) / 100;
//Update 'For' Percentages
$('[class$=SharePercentageForSelected]').text(forPercent2);
}
});
});

Answer 1

You can't do what you are trying to through form Posts. The browser sees the return from the Post as a full HTML page (even if you are saying it is a Partial server side). You will need to use some form of javascript to accomplish it or you will need to make your confirmation page an actual page instead of a modal popup.
The basic premise is that you need to trap the submit (or the button click) via javascript then display the modal. You can fill the modal with the results of the first action but you will need to submit the form via ajax instead of a standard form post. Then based on their selection in the modal you can submit the form or not.
There are a variety of resources available already that might help you. Here is one that show how to display a confirmation for a delete action. You could then alter that javascript to load the result of your first action via ajax as in this (admittedly older) article about loading MVC partial views using AJAX or maybe this one about using jQuery dialog for CRUD operations.

Answer 2

The model binding fix was to add a hidden field to the EditorTemplate for BallotViewModel so that when a radio button is selected, not only will the label change values but the hidden field would change values as well.
Editor Template
#Html.HiddenFor(m => Model.Proposals[i].SharePercentage, new { #class = "hdnSharePercentage" })
#Html.LabelFor(m => Model.Proposals[i].lVoteOptions[j].SharePercentage, Model.Proposals[i].lVoteOptions[j].SharePercentage, new { #class = "SharePercentage" })
jQuery
$(this).closest('td').next('td').next('td').find('.hdnSharePercentageWithholdSelected')
.removeClass("hdnSharePercentageWithholdSelected")
.addClass("hdnSharePercentageForSelected");