MVC4 issue with showing multiple partial views on a single View

Question

I have been struggling with this problem to no avail. Using MVC4 I have 3 models I wish to show on a single view via partial views. The Single View is comprised of 3 partial views (3 numerated list tables). I can get one model to display in the view, but can't figure out how to display the other 2.

Here is what I have for The View Controller:

[AllowAnonymous]
    public ActionResult Dashboard()
    {
        //Database.SetInitializer<AlertsContext>(null);
        Database.SetInitializer<MemberUsersContext>(null);
        //Database.SetInitializer<ClubsContext>(null);

        //AlertsContext db = new AlertsContext();
       MemberUsersContext db = new MemberUsersContext();
        //ClubsContext db = new ClubsContext();
        //db.MemberUsers.ToList()
        return View(db.MemberUsers.ToList());
    }

This is what I have as the model for the View itself (to compile I remove the two that aren't under the @model IENumerable statement:

    @model IEnumerable<GMC.Models.MemberUsers>

    <div class="dashboard_alerts">    
      @Html.Partial("DashboardAlerts")
   </div>

    <div class="dashboard_pending_clubs">    
       @Html.Partial("DashboardClubs")
    </div>

    <div class="dashboard_verified_members">    
       @Html.Partial("DashboardMembers")
     </div>

In each partial View the headers are as follows:

DashboardClubs

    @model IEnumerable<GMC.Models.Clubs>

DashboardMembers

    @model IEnumerable<GMC.Models.MemberUsers>

DashboardAlerts

    @model IEnumerable<GMC.Models.Alerts>

Now my question is how do I pass the three database contexts into the Dashboard? I am thoroughly confused and am struggling.

AaronLS · Accepted Answer · 2013-04-08 20:43:36Z

3

Lots of ways you could do this and make it generic, but they will mostly all have a ViewModel. A class you create specifically to support your Dashboard view:

public class DashboardViewModel {   
  public IEnumerable<GMC.Models.Clubs> Clubs {get;set;}
  public IEnumerable<GMC.Models.MemberUsers> MemberUsers {get;set;}
  public IEnumerable<GMC.Models.Alerts> Alerts {get;set;}
}

If these are just different tables in a database, they should all be accessed through the same context, because the context manages your connection and other resources. However, without seeing that code I will not go on that tangent.

[AllowAnonymous]
    public ActionResult Dashboard()
    {
        //populate data into our view model(vm)
        var vm = new DashboardViewModel{
           Clubs = db.Clubs.ToList(),
           MemberUsers = db.MemberUsers.ToList(),
           Alerts = db.Alerts.ToList()
        };
        return View(vm);
    }

Dashboard view:

    @model DashboardViewModel

    <div class="dashboard_alerts">    
      @Html.Partial("DashboardAlerts", Model.Alerts)
   </div>

    <div class="dashboard_pending_clubs">    
       @Html.Partial("DashboardClubs", Model.Clubs)
    </div>

    <div class="dashboard_verified_members">    
       @Html.Partial("DashboardMembers", Model.MemberUsers)
     </div>

Personally, instead of using Html.Partial I would use Action/RenderAction, as these will allow you to actually call another action that returns a PartialViewResult, and thus each action is responsible for retrieving its own data. I don't always do it this way, but if it is appropriate, then the action/partial view is more reusable that way.

This would look more like this:

    public ActionResult Dashboard()
    {
        return View();
    }

    public PartialViewResult Clubs()
    {
       ....
        return PartialView(db.Clubs.ToList());//this assumes the partial view is named Clubs.cshtml, otherwise you'll need to use the overload where you pass the view name
    }

    public PartialViewResult Alerts()
    {
       ....
        return PartialView(db.Alerts.ToList());
    }

...

Dashboard.cshtml

    <div class="dashboard_alerts">    
      @Html.Action("Alerts")
   </div>

    <div class="dashboard_pending_clubs">    
       @Html.Action("Clubs")
    </div>

    <div class="dashboard_verified_members">    
       @Html.Action("Members")
     </div>

answered Apr 8, 2013 at 20:43

AaronLS

38.6k24 gold badges151 silver badges217 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

C0L.PAN1C Over a year ago

both of your answers seemed to work, but i went the second route. very clean, very awesome. +100 if I could.

C0L.PAN1C Over a year ago

What exactly does Action do as opposed to RenderPartial and Partial? I should know this. But ASP.NET MVC4 is relatively new to me.

AaronLS Over a year ago

@AmitApollo .Partial() will use the Clubs.cshtml directly, so you have to pass the model data to it as I did in the second parameter. .Action() instead will call an action method, and that action can do whatever is needed to query for data and pass it to return Partial(myDataHere).

Andy T · Accepted Answer · 2013-04-08 20:39:42Z

2

You would need to create a ViewModel specific for the Dashboard page.

public class DashboardViewModel
{
  public IEnumerable<GMC.Models.Clubs> Clubs { get; set; }
  public IEnumerable<GMC.Models.MemberUsers> Users  { get; set; }
  public IEnumerable<GMC.Models.Alerts> Alerts  { get; set; }
}

Then, in the Dashboard action method, you would populate each list:

myModel.Users = db.MemberUsers.ToList();
...

You would then need to update the view to take in this new ViewModel

 @model DashboardViewModel

Finally, from within the view, you would need to pass in the data to each partial:

@Html.Partial("DashboardAlerts", Model.Alerts)

@Html.Partial("DashboardClubs", Model.Clubs)

answered Apr 8, 2013 at 20:39

Andy T

9,9315 gold badges56 silver badges97 bronze badges

1 Comment

C0L.PAN1C Over a year ago

This works, too. I just went with AaronLS's second solution, but +1 regardless.

Collectives™ on Stack Overflow

MVC4 issue with showing multiple partial views on a single View

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related