How to call multiple partials in parent view in MVC4? - asp.net-mvc

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">
<i class="fa fa-trash-o"></i>
<i class="glyphicon glyphicon-pencil"></i> Edit
<i class="glyphicon glyphicon-eye-open"></i> View
<i class="glyphicon glyphicon-trash"></i> Delete
</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>