Loading different models into partial views - asp.net-mvc

Question

My main view uses
#model IEnumerable<Ortund.Models.Reward>
I'm trying to allow the user to do several things on this view without having to navigate away.
Specifically, I want the user to be able to do the following:
View rewards he/she has already claimed (rewards that this user is eligible to redeem)
Claim a new receipt and in so doing, add the reward associated with that receipt to his/her current rewards
Redeem part of the rewards that he/she is eligible for, or all of them at once
I'm using partial views to achieve this as I can set a new model for each partial.
It looks something like this:
/Home/Index
if (Request.Cookies["Ortund"] == null)
{
// render a login form
}
else
{
<p>#String.Format("Welcome, {0}!", Convert.ToString(Request.Cookies["Ortund"]["username"])) <a id="claim-link">Claim New</a> | <a id="redeem-link">Redeem</a></p>
#Html.Partial("_RewardsView")
<!-- Render the new claim and redemption views as well -->
<div class="claim-new">
#Html.Partial("_ClaimsView")
</div>
<div class="redemption">
#Html.Partial("_RedemptionView")
</div>
_RewardsView
#model IEnumerable<Ortund.Models.Reward>
....
_ClaimsView
#model Ortund.Models.Receipt
....
_RedemptionView
#model IEnumerable<Ortund.Models.Reward>
....
I understand that view models are the preferred approach, but as I haven't yet worked out how to correctly use one, I'm going with this approach.
I've done this on another project, but this time I'm getting an error saying that the dictionary time that the view requires is different to the one being supplied (in this specific instance, we're getting confusion between Receipts and Rewards).
I'm not exactly sure what to do about this except to build the forms manually with no associations to the models, but rather to post to the correct controller...

Answer 1

What if you use one model, but build like this:
public class MainModel{
public fakeOneModel fakeModelOneView{get; set;}
public fakeTwomodel fakeModelTwoView{get; set;}
public fakeThreemodel fakeModelThreeView{get; set;}
}
public class fakeOneModel{
public string objectA1 {get; set;}
public string objectA2 {get; set;}
public string objectA3 {get; set;}
}
public class fakeTwoModel{
public string objectB1 {get; set;}
public string objectB2 {get; set;}
public string objectB3 {get; set;}
}
public class fakeThreeModel{
public string objectC1 {get; set;}
public string objectC2 {get; set;}
public string objectC3 {get; set;}
}
Then from your views, you can access all classes from one models like:
#Html.LabelFor(m=>m.fakeModelOneView.objectA1 )
#Html.TextBoxFor(m=>m.fakeModelOneView.objectA1 )
#Html.LabelFor(m=>m.fakeModelTwoView.objectB1 )
#Html.TextBoxFor(m=>m.fakeModelTwoView.objectB1 )
#Html.LabelFor(m=>m.fakeModelThreeView.objectC1 )
#Html.TextBoxFor(m=>m.fakeModelThreeView.objectC1 )

Answer 2

By default, a partial view rendered by calling #Html.Partial("PartialViewName") takes the view model of the parent view.
The model for your main page should include the models that you'll pass on to the partial views:
Model:
public class IndexModel
{
public Ortund.Models.Receipt Receipt { get; set; }
public IEnumerable<Ortund.Models.Reward> ClaimedRewards { get; set; }
public IEnumerable<Ortund.Models.Reward> EligibleRewards { get; set; }
}
View:
When you call the partial view, specify the model you'll pass to it, such as
#model IndexModel
#Html.Partial("_RewardsView", Model.ClaimedRewards)
#Html.Partial("_ClaimsView", Model.Receipt)
#Html.Partial("_RedemptionView", Model.EligibleRewards)
Having multiple forms on the single page is another issue. See
Multiple Forms in same page ASP.net MVC

Answer 3

So, in short: use a viewmodel?
Yes, essentially. There's so many times that view models will simply be required to achieve what you need that you might as well just learn to use them.
However, in this one circumstance, you can hold out just a bit longer as you can also achieve what you're looking for using child actions. Essentially, that would look something like this:
Controller
[ChildActionOnly]
public ActionResult Rewards()
{
// fetch rewards
return PartialView("_Rewards", rewards)
}
View
#Html.Action("Rewards")

Answer 4

If you want to use ajax to update the Views, then you can try MultiPartials. With the added benefit that they will update any elements you define with Ids, this means you can update multiple divs with data and not have to worry about managing complicated view Models.
#Ajax.ActionLink("ActionLink", "ActionLinkClick", new AjaxOptions { OnSuccess = "MultipartialUpdate" })
public ActionResult ActionLinkClick()
{
MultipartialResult result = new MultipartialResult(this);
result.AddView("_Div1", "Div1", new Div1Model("ActionLink clicked"));
result.AddView("_Div2", "Div2", new Div2Model("ActionLink clicked"));
result.AddContent("ActionLink", "LastClickedSpan");
result.AddScript("alert ('ActionLink clicked');");
return result;
}
Then in view
#using(Ajax.BeginForm("FormSubmit", new AjaxOptions { OnSuccess = "MultipartialUpdate" }))
{
<input type="submit" value="Submit">
}
This code snippet is from the above mentioned link, and you can create as many partials as possible without having to create complicated code to manage all of them.