Existe-t-il une bonne raison de NE PAS utiliser un ViewComponent au lieu d'une vue partielle dans le noyau MVC?
Je suis nouveau dans MVC et j'ai décidé de commencer par .net-core. Je ne comprends donc pas très bien les différences entre les versions de base et les versions plus anciennes. J'ai trouvé la question ci-dessous qui offre une idée, mais ne m'a pas aidé à décider si je pouvais fondamentalement ignorer les vues partielles.
Ma question est simplement la suivante: si je peux faire quelque chose avec un ViewComponent, y a-t-il une bonne raison de ne pas le faire?
Merci beaucoup!
Exemple fourni ci-dessous pour le contexte.
Appels de vue principale:
ViewComponent:
<div class="modal-body" ID="modalPersonInner">
@await Component.InvokeAsync("CreatePerson", new Person())
</div>
Vue partielle ou partielle:
<div class="modal-body" ID="modalPersonInner">
@{ await Html.RenderPartialAsync("People/CreatePartialView", new Person());}
</div>
Javascript (personCreateForm est un formulaire dans le composant vue partielle/vue):
var submitPersonCreate = function(evt) {
evt.preventDefault();
if ($(this).valid())
{
$.ajax({
type: "POST",
url: '@Url.Action("CreatePartial", "People")',
data: $('#personCreateForm').serialize(),
success(data) {
if (data === true)
window.location.reload();
else
$('#modalPersonInner').html(data);
}
});
}
return false;
}
$('#personCreateForm').submit(submitPersonCreate);
Code du contrôleur:
public async Task<IActionResult> CreatePartial(
[Bind("AddressLine1,AddressLine2,AddressLine3,AddressLine4,City,Country,Email,Forename,MobileNumber,Postcode,Region,Surname,TelephoneNumber")] Person person)
{
if (ModelState.IsValid)
{
_context.Add(person);
await _context.SaveChangesAsync();
return Json(true);
}
//PARTIAL VIEW VERSION
//return PartialView("People/CreatePartialView",person);
//VIEWCOMPONENT VERSION
return ViewComponent("CreatePerson", person);
}
Code ViewComponent:
public class CreatePersonViewComponent : ViewComponent
{
private readonly AppDbContext db;
public CreatePersonViewComponent(AppDbContext context)
{
db = context;
}
public async Task<IViewComponentResult> InvokeAsync(Person person )
{
return View(person ?? new Person());
}
}
Et enfin la page Razor qui est la même pour les deux:
@model Person
<form ID="personCreateForm">
<div class="form-horizontal">
<h4>Customer</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="form-group">
<label asp-for="Forename" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Forename" class="form-control" />
<span asp-validation-for="Forename" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Surname" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Surname" class="form-control" />
<span asp-validation-for="Surname" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Country" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Country" class="form-control" Value="UK" />
<span asp-validation-for="Country" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Region" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Region" class="form-control" />
<span asp-validation-for="Region" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="City" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="City" class="form-control" />
<span asp-validation-for="City" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="AddressLine1" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="AddressLine1" class="form-control" />
<span asp-validation-for="AddressLine1" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="AddressLine2" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="AddressLine2" class="form-control" />
<span asp-validation-for="AddressLine2" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Postcode" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Postcode" class="form-control" />
<span asp-validation-for="Postcode" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Email" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="Email" class="form-control" />
<span asp-validation-for="Email" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="MobileNumber" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="MobileNumber" class="form-control" />
<span asp-validation-for="MobileNumber" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="TelephoneNumber" class="col-md-2 control-label"></label>
<div class="col-md-10">
<input asp-for="TelephoneNumber" class="form-control" />
<span asp-validation-for="TelephoneNumber" class="text-danger" />
</div>
</div>
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
C'est une très bonne question. Oui, il est parfois préférable d'implémenter votre code avec une vue partielle qu'avec un composant View. Si le composant Vue ne doit pas avoir une quantité appréciable de logique (comme c'est le cas dans votre exemple), utilisez plutôt une vue partielle.
Les composants de vue sont un excellent moyen de compartimenter la logique et peuvent, à certains égards, être considérés comme une vue partielle contenant sa propre logique. Toutefois, si aucune logique ne doit être compartimentée avec la vue partielle, il est probablement préférable de ne pas utiliser un composant View. Dans un tel cas, l'utilisation d'un composant de vue augmente la complexité du codage (il existe un autre endroit où regarder pour voir comment fonctionne le code), mais ne procure aucun avantage réel. En général, vous ne devriez augmenter la complexité du code que dans la mesure où les avantages découlant de cette complexité supplémentaire sont supérieurs au "coût" de cette complexité.
J'espère que cela ne semble pas trop théorique. En gros, il s’agit de ceci: s’il existe une logique que vous souhaitez empaqueter avec la vue partielle afin que vous puissiez utiliser ce composant encore et encore, utilisez un composant View, mais si aucune logique n’est nécessaire emballez avec ensuite utiliser une vue partielle.
Il semble que View Components ait encore (en juillet 2016) des problèmes non résolus liés au chargement de javascript et de css. Veuillez vérifier: https://blog.mariusschulz.com/2015/11/26/view-components-in-asp-net-mvc-6