我們應該爲看起來幾乎相似的房源創建單獨的部分視圖嗎？

我們在不同的地方在我們的網站上顯示不同視圖的汽車列表。例如：我們應該爲看起來幾乎相似的房源創建單獨的部分視圖嗎？

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文件中的所有汽車信息？（同時保持細微的設計差異，因爲它是）

來源

2017-08-01 maverick

你可以合併它們（例如，通過在.cshtml中使用策略性的'@ if'語句），但我不會。兩個地方添加一個字段並不是「高成本」，而是維持一個「完成所有事情」的複雜性。 –

這裏有太多的選擇，雖然有幾種最佳實踐方法可用於重構視圖，但這些方法只會鬆散地應用於這樣的自定義視圖，並且會因實現的更多細節而發生很大變化。對於這麼小的事情，只要做一些有用的事情，如果事情失控了，就會重構。 –

他們都不應該是部分意見恕我直言。應該有單個顯示模板。佈局應該基於CSS而不是視圖中的邏輯進行更改。我不喜歡使用表格，除非你真的在表格中有數據（那麼它看起來像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。

此外，使用顯示模板時不需要使用循環，因爲剃刀引擎會自動循環。

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

來源

2017-08-01 21:38:17

優秀的建議。在MVC中，顯示和編輯模板被嚴重利用不足，而且它們非常強大，模型導向且合乎邏輯。 –

一個選項是具有圖像的局部視圖和信息的局部視圖。然後你有你目前的2個部分視圖，只是將圖像和信息部分加載到它們各自的位置。

解決添加附加信息的問題，或者如果您想使圖像成爲可滾動的多圖像查看器並且必須更新2個不同的位置。

來源

2017-08-01 20:52:40 WindRaven

圖像元素的局部視圖是浪費。假設它的佈局在將來沒有變化，對信息進行局部視圖可能是有意義的，但是，即使* if *是這種情況（如果你有部分信息）你仍然保留兩個對於兩種不同佈局的部分視圖，現在另外還有你的建議引入了第三種局部視圖來支持它們。 –

你可以做一些這樣的事情多了一個局部的細節如...

然後，你可以稍後程度上具有靈活性，什麼都這樣，你需要它。

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

如果以後要更改的任何頁面，你將有靈活性，我更喜歡這個。

來源

2017-08-01 21:45:57

我們應該爲看起來幾乎相似的房源創建單獨的部分視圖嗎？

回答

相關問題