Question

我们在网站上的不同地方显示不同视图的汽车列表。例如：

https://jsfiddle.net/yxrveass/：图片和车辆细节并排。
https://jsfiddle.net/sa44zaz2/：汽车详细信息位于汽车图片下方。

我们目前为这些创建了两个部分视图，即

    @model IEnumerable<MVCDemo.Models.Cars>
    @foreach (var car in Model)
    {
      @Html.Partial("_Car1", car); //Partial view when Image and car details side by side.
    }

    @model IEnumerable<MVCDemo.Models.Cars>
    @foreach (var car in Model)
    {
      @Html.Partial("_Car2", car); //Partial view when Car details come just below the car image.
    }

我在这里看到的问题是维护成本高。明天如果我们想要在UI中显示另外一个字段，即城市，我们将不得不在_Car1和_Car2部分视图中进行相同的更改。

我们可以以某种方式组合这两个部分视图的代码，以便我们将所有汽车信息都放在一个cshtml文件中吗？（同时保持细微的设计差异）

Answer 1

他们俩都不应该是部分观点恕我直言。应该有单一的显示模板。布局应根据CSS而不是视图中的逻辑进行更改。我不喜欢使用表，除非你实际上在表中有数据（然后它看起来像excel，你的不是）。

＆＃13;

.car-titles{
  display: inline-block;
   font-weight: bold;
}

.car-details{
  display: inline-block;
}

.car-container-landscape .car-info{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.car-container{
  position: relative;
}

.car-container.car-container-landscape .car-picture,
.car-container.car-container-landscape .car-info {
  display: inline-block;

}

＆＃13;

<div>
<div class="car-container">
  <div class="car-picture">
    <img src="https://imgd.aeplcdn.com/370x208/cw/ucp/stockApiImg/1ZYKEUY_1104072_1_8199668.jpg" />
  </div>
  <div class="car-info">
    <div class="car-titles">
      <div>Name: </div>
      <div>Price: </div>
      <div>Fuel: </div>
    </div>
    <div class="car-details">
      <div>BMW</div>
      <div>100$</div>
      <div>Petrol</div>
    </div>
  </div>
</div>
</div>

＆＃13;

只需添加car-container-landscape即可更改信息的位置。这么简单。

<div class="car-container @(Model.IsLandscape ? "car-container-landscape" : string.empty)">

你的模型不应该是IEnumerable，它应该是一个真实的模型：

public class CarDetailsViewModel // or CarDetailsVM
{
  public IEnumerable<Cars> Cars { get; set; }
  public bool IsLandscape { get; set; }
}

You can add the namespace to the web.config

此外，使用显示模板时无需使用循环，因为Razor引擎会自动循环。

@Html.DisplayFor(m => m.Cars)

Answer 2

选项是具有图像的部分视图和信息的部分视图。然后你有了当前的2个局部视图，只是将图像和信息部分加载到它们各自的位置。

解决了添加其他信息的问题，或者您是否想要使图片成为可滚动的多图像查看器并且必须更新2个不同的位置。

Answer 3

你可以做一些这样的事情，如图所示，还有一个更为局部的......

然后，您可以稍后灵活地扩展您需要的任何方式。

案例1：

git checkout

如果您以后想要更改任何页面，我会更喜欢这个。

我们应该为看起来几乎相似的列表创建单独的部分视图吗？

3 个答案: