MVC3 .net Multiple Model or a Single View Model

Question

I want to build a webpage which has 3 tabs (and thus 3 divs): Tab 1 - Update Personal Details Tab 2 - Check Order Tab 3 - Change logon details

There are 2 ways to implement this as far as I can tell, but would like to know best practice.

First would be to have 3 Partial Views that implement a separate Model each Second would be to have 3 Partial Views that implement a single ViewModel

The first option if using Partial Views will cause an error of "Expect Model A but got Model B" I believe you can use RenderAction to get around this, but is that best practice?

Opinions welcome.

Thanks

Answer 1

Looking at the names of the tabs, 'Update Personal Details', 'Check Order' and 'Change logon details' - it seems that these are fairly different, but related options that a user could do.

To me, it would make sense to split these up into three different actions with three different views, meaning that you only render the action for the visible tab. This way, if the user only wanted to, say, update their details, the server isn't doing up the DB queries to check the order

You would use some css to style it up so that it looks like three tabs, but each tab really would be a link which which did a new request, just making it look like there were three tabs.

e.g.

<div id="content">
    <ul>
       <li class="active">Update Personal Details</li>
       <li>@Html.ActionLink("Check Order","CheckOrder")</li>
       <li>@Html.ActionLink("Update Logon Details","UpdateLogonDetails")</li>
    </ul>
    <div id="tab1" />
     ... Update Personal Details Tab... etc
    </div>
    ... tab2 and tab 3 not included...
</div>

The actions for CheckOrder and UpdateLogonDetails would render essentially the same view, but a different tab would be showing.

This would create the illusion that it was all run using tabs, even though it wasn't.

Then, when you had that all running, you could update those links using JQuery to fire the requests via AJAX, returning the results as Partial Views and updating the content div with the result. This means that people with Javascript enabled get the proper 'ajax' experience, but that it still works OK for those with javascript disabled.

Answer 2

user1079925,

As you say, there are a variety of ways to do this and it will all depend on how 'related' the data is. if it all derives from the same controller, then it would make sense to have a single viewmodel to encapsulate the data. Here's a quick scribble as to how that might look:

public class SubViewModelA
{
    public string SpecialProperty { get; set; }
}

public class SubViewModelB
{
    public string SpecialProperty { get; set; }
}

public class SubViewModelC
{
    public string SpecialProperty { get; set; }
}

public class TabbedViewModel
{
    public SubViewModelA TabA {get; set; }
    public SubViewModelB TabB {get; set; }
    public SubViewModelC TabC {get; set; }
}

this would be referenced in your view as:

@model TabbedViewModel

<div id="taba">@Html.EditorFor(model => model.TabA.SpecialProperty )</div>
<div id="tabb">@Html.EditorFor(model => model.TabB.SpecialProperty )</div>
<div id="tabc">@Html.EditorFor(model => model.TabC.SpecialProperty )</div>

now, this isn't pretty (i'll leave that part for you), but would allow you to populate your 'tabs' from a single viewmodel. the other alternative, as you mention, is to have 3 @RenderAction() blocks inside the tab divs if the data is totally unrelated in any way.