如何在MVC中在同一视图中显示两个局部视图



如何在同一视图中显示两个局部视图?在我的控制器中,我有两个方法,它们都返回partialview。我想把这些方法放在一个视图中。

在我的控制器中,我有这个:

   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());                   
    }      

_选择CarsPartialViewLayout

@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>

当我运行解决方案时,它只显示一个错误,上面写着。

值不能为null或为空。参数名称:名称

第18行:@Html.RadioButton(cars.CategoryName,

但如果我有两个不同的局部视图,那么它很有效,但我希望在同一个局部视图中有这个。

此外,我在_Layout中有这个Html.Action来呈现部分视图

 @Html.Action("ChooseCity", "Home")

有什么建议吗?

问题在于强类型IEnumerable<Project.ViewModels.City.CityViewModel>的局部视图模型,该模型不包含CategoryName的声明。因此,您应该创建一个复合模型,将CarsCitis返回到局部视图。

public class CompositeModel
{
   public IEnumerable<Project.ViewModels.City.CityViewModel> Cars { get; set; }
   public IEnumerable<Project.ViewModels.City.CarsViewModel> Cities { get; set; }
}

现在将您的观点更改为

@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>

由于您有一个名为CityViewModel的ViewModel(尽管我将其命名为RadiosVM,但我会创建一些EditorFor模板。

使用一个复合模型,如他在回答中提到的user1672994,尽管它可以变得更通用和可重用。ViewModel应该封装渲染视图所需的所有数据(也有例外)。

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
}

不要为了显示模型而旋转另一个控制器(这是低效的),除非控制器正在做与当前控制器完全无关的事情和/或您计划缓存该视图。

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;
} 

视图:

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/>
// ...

/视图/Shared/EditorTemplates/RadiosVM.cshtml或/视图/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>

/视图/Shared/EditorTemplates/RadioVM.cshtml或/视图/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"
  })

最新更新