How to display two partialviews in the same view in MVC? - asp.net

Question

How can I display two partial views in the same view? In my controller I have two methods that both returns partialview. I want these methods together in one view.
In my controller i have this:
public ActionResult CountCars()
{
var result = this.Data.Cars.All()
.Select(t => new CarsViewModel
{
CategoryName = t.Name,
CategoryCount = t.Category.Count()
});
return PartialView("_ChooseCarsPartialViewLayout", result.ToList());
}
public ActionResult ChooseCity()
{
var view = this.Data.Cities.All()
.Select(x => new CityViewModel
{
CityName = x.Name,
CountCities = x.City.Count()
});
return PartialView("_ChooseCarsPartialViewLayout", view.ToList());
}
_ChooseCarsPartialViewLayout
#model IEnumerable<Project.ViewModels.City.CityViewModel> <div class="container">
<div class="well">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<h4>?</h4>
<div class="checkbox checkbox-primary">
#for (int i = 0; i < Model.Count(); i++)
{
var cars = Model.ElementAt(i);
<label>#cars.CategoryName <span class="badge">#cars.CategoryCount</span></label>
#Html.RadioButton(cars.CategoryName,
cars.CategoryId,
new
{
id = "radio",
type = "checkbox"
})
}
</div>
</div>
<div class="form-group">
<h4>Hvor vil du jobbe?</h4>
<div class="checkbox checkbox-primary">
#for (int i = 0; i < Model.Count(); i++)
{
var city = Model.ElementAt(i);
<label>#city.CityName <span class="badge">#city.CountCities</span></label>
#Html.RadioButton(city.CityName,
city.CityId,
new
{
id = "radio",
type = "checkbox"
})
}
</div>
</div>
</div>
</div>
</div>
And when I run the solution it just display an error that says.
Value cannot be null or empty.
Parameter name: name
Line 18: #Html.RadioButton(cars.CategoryName,
But if I had two different partial views then it works great, but I want to have this in the same partialview.
Also I have this Html.Action in _Layout to render the partialviews
#Html.Action("ChooseCity", "Home")
Any suggestion?

Answer 1

Problem is with the partial view model which is strongly typed of IEnumerable<Project.ViewModels.City.CityViewModel> which does not contain the declaration of CategoryName. So, you should create a Composite Model which would return Cars and Citis to partial view.
public class CompositeModel
{
public IEnumerable<Project.ViewModels.City.CityViewModel> Cars { get; set; }
public IEnumerable<Project.ViewModels.City.CarsViewModel> Cities { get; set; }
}
Now change your view as
#model CompositeModel
<div class="container">
<div class="well">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<h4>?</h4>
<div class="checkbox checkbox-primary">
#for (int i = 0; i < Model.Cars.Count(); i++)
{
var cars = Model.Cars.ElementAt(i);
<label>#cars.CategoryName <span class="badge">#cars.CategoryCount</span></label>
#Html.RadioButton(cars.CategoryName,
cars.CategoryId,
new
{
id = "radio",
type = "checkbox"
})
}
</div>
</div>
<div class="form-group">
<h4>Hvor vil du jobbe?</h4>
<div class="checkbox checkbox-primary">
#for (int i = 0; i < Model.Cities.Count(); i++)
{
var city = Model.Cities.ElementAt(i);
<label>#city.CityName <span class="badge">#city.CountCities</span></label>
#Html.RadioButton(city.CityName,
city.CityId,
new
{
id = "radio",
type = "checkbox"
})
}
</div>
</div>
</div>
</div>
</div>

Answer 2

Since you have a ViewModel called CityViewModel (though I'll name it RadiosVM I would create a few EditorFor templates.
Use a composite model as user1672994 mentioned in his answer although it can be made more generic and reusable. A ViewModel should encapsulate all (there are exceptions) the data necessary to render a view.
public class RadiosVM
{
public string Name { get; set; }
public IEnumerable<RadioVM> Radios { get; set; }
}
public class RadioVM
{
public string Name { get; set; }
public int Count { get; set; }
}
public class SomePageVM // whatever
{
public RadiosVM CarRadios { get; set; }
public RadiosVM CityRadios { get; set; }
// ... other properties
}
Don't spin up another controller just to display a model (that is inefficient), unless the controller is doing things that have absolutely nothing to do with the current controller and/or you plan on caching that view.
public class SomeController
{
public ActionResult SomePage()
{
var model = new SomePageVM();
model.CarRadios = GetCarRadios;
model.CityRadios = GetCityRadios;
return View(model);
}
private RadiosVM GetCarRadios()
{
var result = new RadiosVM()
{
Name = "Cars",
Radios = this.Data.Cars.All()
.Select(t => new RadioVM
{
CategoryName = t.Name,
CategoryCount = t.Category.Count()
})
.ToList();
}
return result;
}
public RadiosVM ChooseCity()
{
var result = new RadiosVM ()
{
Name = "Cars",
Radios = this.Data.Cities.All()
.Select(t => new RadioVM
{
CategoryName = t.Name,
CategoryCount = t.Category.Count()
})
.ToList();
}
return result;
}
Views:
SomePage.cshtml
#Model SomePageVM
<div class="well">
<div class="row">
<div class="col-md-12">
#Html.EditorFor(m => m.CarRadios)
<div/>
<div class="col-md-12">
#Html.EditorFor(m => m.CityRadios)
<div/>
// ...
/Views/Shared/EditorTemplates/RadiosVM.cshtml
or
/Views/SomeController/EditorTemplates/RadiosVM.cshtml
#Model RadiosVM
<div class="form-group">
<h4>#Html.DisplayFor(m => m.Name)</h4>
<div class="checkbox checkbox-primary">
#Html.DisplayFor(m => m.Radios)
</div>
/Views/Shared/EditorTemplates/RadioVM.cshtml
or
/Views/SomeController/EditorTemplates/RadioVM.cshtml
#Model RadioVM
<label>#Html.DisplayFor(m => m.Name)
<span class="badge">#Html.DisplayFor(m => m.Count)</span>
</label>
#Html.RadioButton(model.Name,
model.Id, // You have no code that references this, I don't know...
new
{
id = "radio", // so **ALL** radios are named 'id'?? not valid
type = "checkbox"
})