如何在MVC中的同一视图中显示两个部分视图?

时间:2015-11-21 17:23:09

标签: asp.net asp.net-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());                   
    }      

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

当我运行解决方案时,它只会显示错误信息。

  

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

     

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

但如果我有两个不同的局部视图,那么它的效果很好,但我希望在相同的部分视图中使用它。

此外,我在_Layout中有这个Html.Action来渲染偏见视图

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

有什么建议吗?

2 个答案:

答案 0 :(得分:1)

问题在于部分视图模型是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>

答案 1 :(得分:0)

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

将复合模型用作user1672994 mentioned in his answer,尽管它可以更通用且可重复使用。 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
}
除非控制器正在做与当前控制器完全无关的事情和/或你计划缓存该视图,否则不要只是为了显示模型(效率低下)而启动另一个控制器。 / p>
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/>

// ...

/Views/Shared/EditorTemplates/RadiosVM.cshtml 要么 /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 要么 /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"
  })