ほとんど同じように見えるリスティングに別々の部分ビューを作成する必要がありますか？

Question

私たちは、私たちのウェブサイト上のさまざまな場所で異なる視点の自動車のリストを表示しています。たとえば、

1. https://jsfiddle.net/yxrveass/：画像と車の詳細を並べて表示します。
2. 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. 
    } 

ための2つの部分図を作成しました。明日、UI、つまり都市でもう1つのフィールドを表示する場合は、_Car1と_Car2の両方の部分ビューで同じ変更を行う必要があります。

これらの2つの部分ビューのコードをどうにか組み合わせて、すべての車の情報を1つのcshtmlファイルに入れることはできますか？ （微妙なデザインの違いはそのままに）

Answer 1

いずれもIMHOの部分表示ではありません。単一の表示テンプレートが必要です。レイアウトは、ビューのロジックではなくCSSに基づいて変更する必要があります。私はあなたが実際にテーブルにデータを持っていない限り、テーブルを使用するファンではありません（それはあなたのものではないように見えるでしょう）。

.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を追加すると、情報の位置を変更します。とても簡単です。

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：

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

あなたのモデルはIEnumerableをしてはならない、それは実際のモデルでなければなりません。

さらに、Razorエンジンが自動的にループするので、ディスプレイテンプレートを使用するときにループを使用する必要はありません。

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

Answer 2

オプションは、画像の部分表示と情報の部分表示を持つことです。次に、現在の2つの部分的なビューがあり、画像と情報の部分をそれぞれの場所にロードするだけです。

追加情報を追加したり、画像をスクロール可能なマルチ画像ビューアにして2つの異なる場所を更新しなければならないかどうかを解決します。

Answer 3

あなたは次にあなたがこれまでの方法あなたがそれを必要とするもので、後で程度の柔軟性を持つことができるよう...

などの詳細のための部分的な1以上を持っている。このようないくつかのことを行うことができます。

ケース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> 

後であなたが柔軟性を持つことになります任意のページを変更したい場合、私はこれを好みます。