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

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

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

解决了添加额外信息的问题，或者如果您想让图像成为可滚动的多图像查看器并且必须更新 2 个不同的地方。

Answer 2

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

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

}

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

只需添加 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 3

你可以做一些像这样的事情，如图所示再增加一个细节...

然后您以后可以根据需要灵活地扩展。

案例 1：

<table>
<tr>
  <td>
    <img src="https://imgd.aeplcdn.com/370x208/cw/ucp/stockApiImg/1ZYKEUY_1104072_1_8199668.jpg" />
  </td>

  <td>
    // call partial view here with the particular record.
  </td>
</tr>

<tr>
  <td>
    <img src="https://imgd.aeplcdn.com/370x208/cw/ucp/stockApiImg/1ZYKEUY_1104072_1_8199668.jpg" />
  </td>

  <td>
          // call partial view here with the particular record.
  </td>

</tr>

</table>




<table>
<tr>
<tr>
  <td>
    <img src="https://imgd.aeplcdn.com/370x208/cw/ucp/S938430/2001-marutisuzukizen19962003vx-8120905.jpg" />
  </td>
</tr>

  <td>
          // call partial view here with the particular record.
  </td>


<tr>
<tr>
    <td>
    <img src="https://imgd.aeplcdn.com/370x208/cw/ucp/S938430/2001-marutisuzukizen19962003vx-8120905.jpg" />
  </td>
</tr>  
  <td>
           // call partial view here with the particular record. 
  </td>

</tr>

</table>

我更喜欢这个，如果你以后想更改任何页面，你将有灵活性。

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

Should we create separate partial views for listings that look almost similar?

c#

asp.net

asp.net-mvc

partial-views

asp.net-mvc-4