Devrions-nous créer des vues partielles séparées pour les listes qui semblent presque similaires?

Question

Nous affichons la liste des voitures dans différents points de vue à différents endroits sur notre site Web. Par exemple:

1. https://jsfiddle.net/yxrveass/: Détails de l'image et de la voiture côte à côte.
2. https://jsfiddle.net/sa44zaz2/: Les détails de voiture viennent juste au-dessous de l'image de voiture.

Nous avons actuellement créé deux vues partielles pour ces savoir

@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. 
    } 

Le problème que je vois ici est le coût élevé de maintenance. Demain, si nous voulons afficher un champ de plus dans l'interface utilisateur, c'est-à-dire la ville, nous devrons faire les mêmes changements aux vues partielles _Car1 et _Car2. Pouvons-nous combiner le code de ces deux vues partielles afin que nous ayons toutes les informations de voiture dans un fichier cshtml? (tout en conservant les différences de conception subtiles telles quelles)

Answer 1

Aucune d'entre elles ne devrait être vue partielle à mon humble avis. Il devrait y avoir un seul modèle d'affichage. La mise en page doit changer en fonction de CSS non logique dans la vue. Je ne suis pas un fan de l'utilisation de tables, à moins que vous ayez des données dans une table (alors cela ressemblerait à Excel, ce qui n'est pas le cas).

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

simplement en ajoutant car-container-landscape change la position de l'info. Tellement plus simple.

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

Votre modèle ne doit pas être un IEnumerable, il devrait être un modèle réel:

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.

En outre, il n'est pas nécessaire d'utiliser une boucle lors de l'utilisation de modèles d'affichage, car le moteur Razor boucle automatiquement.

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

Answer 2

Une option consiste à avoir une vue partielle pour l'image et une vue partielle pour l'information. Ensuite, vous avez vos 2 vues partielles actuelles qui chargent juste l'image et les partiels d'information dans leurs endroits respectifs.

Résout le problème de l'ajout d'informations supplémentaires ou si vous vouliez faire de votre image une visionneuse multi-images avec défilement et devoir mettre à jour 2 endroits différents.

Answer 3

vous pouvez faire quelque chose de ce genre ont une plus partielle pour les détails comme le montre ...

Ensuite, vous pouvez avoir la flexibilité plus tard à mesure dans ce que jamais comme vous en avez besoin.

Cas1:

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

Je préfère cela si plus tard vous souhaitez modifier la page, vous aurez la flexibilité.