How to call multiple partials in parent view in MVC4?

Question

I am trying to call multiple partials in parent view. I have tried multiple way but could not succeed. I think there is something missing in View. Please guide me where i am going wrong.

Note: I have partials in the question. Please suggest me.

The following error:

System.InvalidOperationException: 'The model item passed into the dictionary is of type 'Aplication.Models.ABC.ClsA', but this dictionary requires a model item of type 'System.Collections.Generic.IEnumerable`1[Aplication.Models.ABC.first]'.'

Model

public class ClsA
{        
    public List<first> firsts{ get; set; }    
    public List<second> seconds{ get; set; }
}

public class first
{     
    public string Name { get; set; }
    public string Address { get; set; }

}

public class second
{
    public string Details{ get; set; }
    public string Age{ get; set; }             
}

Controller

 public ActionResult ABC()
    {
        SDetails sDetails=new SDetails();        
        var model = new ClsA();
        model.firsts = sDetails.Rst();            
        model.seconds = sDetails.Rs();           
        return View(model);
    }

View

 @model Aplication.Models.ABC.ClsA 

  @Html.Partial("_PartialA");           
  @Html.Partial("_PartialB.cshtml")

_PartialA

@model  IEnumerable<Aplication.Models.ABC.first>

    <table>
        <tr>
           <th>@Html.DisplayNameFor(m => m.Name)</th>
            <th>@Html.DisplayNameFor(m => m.Address)</th>            
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Name)
                </td>
                <td>                   
                    @Html.DisplayFor(modelItem => item.Address)                    
                </td>                

            </tr>
        }
    </table>

_PartialB

@model  IEnumerable<Aplication.Models.ABC.second>

    <table>
        <tr>
           <th>@Html.DisplayNameFor(m => m.Details)</th>
            <th>@Html.DisplayNameFor(m => m.Age)</th>            
        </tr>

        @foreach (var item in Model)
        {
            <tr>
                <td>
                    @Html.DisplayFor(modelItem => item.Details)
                </td>
                <td>                   
                    @Html.DisplayFor(modelItem => item.Age)                    
                </td>                

            </tr>
        }
    </table>

Answer 1

@Html.Partial() Takes a second parameter model. If you do not pass the parameter to @Html.Partial() it will automatically pass the model of the current view.

Parameters

htmlHelper Type: System.Web.Mvc.HtmlHelper The HTML helper instance that this method extends.

partialViewName Type: System.String The name of the partial view to render.

model Type: System.Object The model for the partial view.

You need to update your code from

@Html.Partial("_PartialA");           
@Html.Partial("_PartialB");

To

@Html.Partial("_PartialA", Model.firsts);           
@Html.Partial("_PartialB", Model.seconds)

You do not need to pass the file extension to the @Html.Partial method

Answer 2

This is an example of loading partial view. The controller has an action to load the data in a partial view.

public ActionResult List()
        {

            var movies = db.Movies;


            return PartialView("_list", movies.ToList());

        }

In the partial _list view, you can have something like -

 @model IEnumerable<WebApplication1.Models.Movie>


 <div class="row">
    <table class="table  table-bordered table-hover" id="moviesTable">
        <thead>
            <tr>
                <th>

                    @Html.DisplayNameFor(model => model.ID)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Title)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.ReleaseDate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Genre)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Price)
                </th>

                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.ID)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Title) 

                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.ReleaseDate)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Genre)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.Price)
                    </td>


                    <td>
                        <div class="btn-group btn-group-xs">
                            <a href="#" class="btn btn-danger delete-row" data-item="@item.ID"><i class="fa fa-trash-o"></i></a>
                            <a href="@Url.Action("Edit", new { id = item.ID } )" class="btn btn-info"> <i class="glyphicon glyphicon-pencil"></i> Edit </a>

                            <a href="@Url.Action("Details", new { id = item.ID } )" class="btn btn-success"> <i class="glyphicon glyphicon-eye-open"></i> View </a>

                            <a href="@Url.Action("DeleteInline", new { id = item.ID } )" class="btn btn-danger" onclick="return confirm('Are you sure to delete?')"> <i class="glyphicon glyphicon-trash"></i> Delete</a>


                        </div>
                    </td>
                </tr>
            }
        </tbody>
    </table>

</div>

Now you can render the partial view in the main view like below -

    <div class="row">
    <div class="col-md-12" id="replacetarget">
        @{ Html.RenderAction("List", "Movies"); }

    </div>

</div>