How to Pass Model to Partial view and other Model to View will display Part

Question

Ahmed_39 0 Newbie Poster

11 Years Ago

Hi

i have crate an Partial view with name "_Menu" it's view items as menu and sub menu in my website

_Menu Partial view Code:

@model IEnumerable<MainCats>
@using GoShope.Models.GoShopeDB;

@{
    IList<MainCats> mainList = Model.Where(id => id.IsCompany == true).ToList();
}

<div class="panel-group category-products" id="accordian">
    <div class="panel panel-default">
        @foreach (var item in mainList)
        {
            @* Check If Has Sub Categories Or Not *@
            IList<MainCats> hasChieldItem = Model.Where(id => id.mainCatId == item.SubCats.Select(mainCatId => mainCatId.mainCatId).FirstOrDefault()).ToList();

            <div class="panel-heading">
                <h4 class="panel-title">
                    @if (hasChieldItem.Count() > 0)
                    {
                        <a data-toggle="collapse" data-parent="#accordian" href="@item.Tabs.mainTabName">
                            <span class="badge pull-right"><i class="fa fa-plus"></i></span>
                            @item.mainCatName
                        </a>
                    }
                    else
                    {
                        <a data-toggle="collapse" data-parent="#accordian" href="@Url.Action("View", "MainCats", new { id = item.mainCatId })">
                            @item.mainCatName
                        </a>
                    }
                </h4>
            </div>

            if (hasChieldItem.Count() > 0)
            {
                @* Get SubCats By mainCatId *@
                var db = new GoShopDBContext();
                IList<SubCats> subCats = db.SubCats.Where(mainid => mainid.mainCatId == item.mainCatId && mainid.IsCompany == true).ToList();

                <div id="@item.Tabs.childTabName" class="panel-collapse collapse">
                    <div class="panel-body">
                        @foreach (var Citem in subCats)
                        {
                            <ul>
                                <li><a href="@Url.Action("View", "SubCats", new { id = Citem.subCatId })">@Citem.subCatName</a></li>
                            </ul>
                        }
                    </div>
                </div>
            }
        }
    </div>
</div>

it works fine in the First view i use it with the same Model of the Partial view "MainCats"

Home Index View Code:

@model IEnumerable<MainCats>
@using GoShope.Models.GoShopeDB;

@{
    ViewBag.Title = "View";
    IList<MainCats> ComapnyList = Model.Where(isCompany => isCompany.IsCompany == true).ToList();
    IList<MainCats> PersonList = Model.Where(isCompany => isCompany.IsCompany == false).ToList();
}

@section companyAds{
    <h2 class="title text-center">company ads</h2>
    @foreach (var comapnyItems in ComapnyList)
    {
        <div class="col-sm-4">
            <div class="product-image-wrapper">
                <div class="single-products" style="padding-top:0">
                    <div class="productinfo text-center">
                        <img src="@Url.Content(comapnyItems.MainCatsImg.Select(id => id.imgPath).FirstOrDefault())" alt="" />
                    </div>
                    <div class="product-overlay">
                        <div class="overlay-content">
                            <i class="@comapnyItems.mainCatIcon"></i>
                            <h2>@comapnyItems.mainCatName</h2>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <ul class="nav nav-pills nav-justified">
                        <li>
                            <a href="@Url.Action("Books", new { id = comapnyItems.mainCatId })">
                                <img src="~/images/home/book.png" alt="" class="ico2">
                            </a>

                            <a href="@Url.Action("Videos", new { id = comapnyItems.mainCatId })">
                                <img class="ico" src="~/images/home/video.png" alt="">
                            </a>
                        </li>
                        <li>
                            <a href="@Url.Action("More", new { id = comapnyItems.mainCatId })">
                                <i class="fa fa-plus-square"></i>
                                more
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    }
}

@section personAds{
    <h2 class="title text-center">person ads</h2>

    <div class="col-sm-12">
        <ul class="nav nav-tabs">
            @foreach (var item in PersonList)
            {
                @* Only If TabName == propertytab *@
                if (item.Tabs.mainTabName == "#propertytab")
                {
                    <li class="active">
                        <a href="@item.Tabs.mainTabName" data-toggle="tab">@item.mainCatName</a>
                    </li>
                }
                @* Only If TabName != propertytab *@
                else
                {
                    <li>
                        <a href="@item.Tabs.mainTabName" data-toggle="tab">@item.mainCatName</a>
                    </li>
                }
            }
        </ul>
    </div>

    <div class="tab-content">
        @foreach (var item in PersonList)
        {
            if (item.Tabs.childTabName == "propertytab")
            {
                @* Get propertytab Items In IList *@
                IList<MainCats> propertytabList = Model.Where(id => id.Tabs.childTabName == "propertytab").ToList();

                @* Loop Throw  propertytab Iist *@
                foreach (var propertytabListitem in propertytabList)
                {
                    <div class="tab-pane fade active in" id="@propertytabListitem.Tabs.childTabName">
                        <div class="col-sm-3">
                            <div class="product-image-wrapper">
                                <div class="single-products">
                                    <div class="productinfoslide text-center">
                                        <img src="~/images/home/akar.png" alt="" />
                                        <h4>@propertytabListitem.mainCatName</h4>
                                        <a href="#" class="btn btn-default plus-info">
                                            <i class="fa fa-plus-square"></i>
                                            more
                                        </a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            }
            else
            {
                <div class="tab-pane fade" id="@item.Tabs.childTabName">
                    <div class="col-sm-3">
                        <div class="product-image-wrapper">
                            <div class="single-products">
                                <div class="productinfoslide text-center">
                                    <img src="~/images/home/akar.png" alt="" />
                                    <h4>cars</h4>
                                    <a href="#" class="btn btn-default plus-info">
                                        <i class="fa fa-plus-square"></i>
                                        more
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            }
        }
    </div>
}

MainCats Controller Code:

  public ActionResult Index()
        {
            var mainCats = db.MainCats.Include(m => m.Tabs);
            return View(mainCats);
        }

now i try to use the same Partial view in other view , but this view work with other Model "SubCats" i try but it don't work and i got err:

The model item passed into the dictionary is of type 'System.Data.Entity.Infrastructure.DbQuery`1[GoShope.Models.GoShopeDB.SubCats]', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[GoShope.Models.GoShopeDB.MainCats]'.

Subcats Index View Code:

@model IEnumerable<SubCats>
@using GoShope.Models.GoShopeDB;

@{
    ViewBag.Title = "View";
}

@section CompanySubCats{

        <div class="col-sm-4">
            <div class="product-image-wrapper">
                <div class="single-products">
                    <div class="productinfo text-center">
                        <img src="~/images/home/product1.jpg" alt="" />
                        <h2>homes</h2>
                    </div>
                    <div class="product-overlay">
                        <div class="overlay-content">
                            <i class="fa fa-home"></i>
                            <h2>homes</h2>
                        </div>
                    </div>
                </div>
                <div class="choose">
                    <ul class="nav nav-pills nav-justified">
                        <li>
                            <a href="#"><img src="~/images/home/book.png" alt="" class="ico2"></a><a href="#">
                                <img class="ico" src="~/images/home/video.png" alt="">
                            </a>
                        </li>
                        <li><a href="#"><i class="fa fa-plus-square"></i> more </a></li>
                    </ul>
                </div>
            </div>
        </div>
}

SubCats Controller Code:

 public ActionResult Index()
        {
            var mainCats = db.SubCats.Include(m => m.MainCats);
            return View(mainCats);
        }

i try:

@Html.Partial("_Menu", new GoShope.Models.GoShopeDB.MainCats())

but i got err:

The model item passed into the dictionary is of type 'GoShope.Models.GoShopeDB.MainCats', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[GoShope.Models.GoShopeDB.MainCats]'.

so please how can i use Partial view with his Model "MainCats" and use the other view with his Model "SubCats" ?

html-css software-architecture

Edited 11 Years Ago by Ahmed_39

2 Contributors
1 Reply
710 Views
4 Days Discussion Span
Latest Post 11 Years Ago Latest Post by pritaeas

Dani AI

Generated 10 Months Ago

The error comes from a model-type mismatch: your _Menu partial expects a collection of MainCats but the SubCats view’s model is a collection of SubCats, and when you render a partial without an explicit model Razor forwards the current view model into the partial. That causes the exception. There are three clean ways to fix this—use whichever fits your app architecture.

Preferred (reusable) — child action that prepares the menu
Create a small controller action that queries the MainCats needed for the menu and returns the partial. Call that action from any view so the partial always receives the correct model:

// controller
public ActionResult Menu()
{
    var menuList = db.MainCats.Where(c => c.IsCompany).ToList();
    return PartialView("_Menu", menuList);
}

@Html.Action("Menu", "MainCats")

This keeps DB access out of views and makes the menu usable from any page.

Alternative — pass the collection explicitly from your current action
If you already load MainCats in the SubCats controller, pass them to the view (strongly-typed viewmodel or ViewBag) and then call the partial with that collection:

// controller
ViewBag.MenuCats = db.MainCats.Where(c => c.IsCompany).ToList();
return View(subCatsList);

@Html.Partial("_Menu", (IEnumerable<MainCats>)ViewBag.MenuCats)

Interface / DTO approach (as suggested)
If SubCats and MainCats expose the same properties the menu needs, define an interface or a small Menu DTO and either implement it on your entities or project into DTOs. Then make _Menu accept IEnumerable<IMenuItem> so it can be reused across types.

Troubleshooting tips

Never call @Html.Partial("_Menu") from a SubCats view unless you intend the SubCats model to be used; pass the correct model explicitly.
Don’t query the DbContext directly in views — prepare data in the controller or child action.
If you accidentally need to pass a single MainCats to a partial that expects a collection, wrap it: new[]{ item } or new List<MainCats>{ item }.

Best practice: prefer a child action or a dedicated view model for clarity and reuse.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

pritaeas 2,276 Most Valuable Poster Moderator Featured Poster · Answer 1 · 2015-01-20T08:59:44+00:00

Can't you use an interface (or a superclass) on both category classes? In either case, you can use one IEnumerable<ICategory> for both. As far as I can tell, both classes are using the same properties so generalizing your nested list can solve your issue.