web-dev-qa-db-de.com

Gibt es einen guten Grund, in Core MVC KEINE ViewComponent anstelle einer Partial View zu verwenden?

Ich bin neu bei MVC und habe beschlossen, mit .net-core zu beginnen. Daher verstehe ich die Unterschiede zwischen Core und älteren Versionen nicht sehr gut. Ich habe die folgende Frage gefunden, die einen Einblick bietet, aber mir nicht geholfen, zu entscheiden, ob ich Teilansichten grundsätzlich ignorieren kann.

Warum sollten wir MVC 6 Feature View-Komponenten über Teilansicht verwenden: Was ist der Unterschied?

Meine Frage ist einfach: Wenn ich etwas mit einer ViewComponent machen kann, gibt es einen guten Grund, dies nicht zu tun?

Danke vielmals!

Beispiel unten für den Kontext.

Hauptansicht Anrufe:

ViewComponent:

<div class="modal-body" ID="modalPersonInner">
       @await Component.InvokeAsync("CreatePerson", new Person())
</div>

Versus Teilansicht:

<div class="modal-body" ID="modalPersonInner">
    @{ await Html.RenderPartialAsync("People/CreatePartialView", new Person());}
</div>

Javascript (personCreateForm ist ein Formular innerhalb der Teilansicht/Ansichtskomponente):

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

Controller-Code:

  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);
    }

ViewComponent-Code:

 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());
        }

    }

Und zum Schluss die Razor-Seite, die für beide gleich ist:

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

Das ist eine wirklich gute Frage. Ja, es gibt Fälle, in denen Sie Ihren Code besser mit einer Teilansicht als mit einer Ansichtskomponente implementieren sollten. Wenn die Ansichtskomponente keine nennenswerte Logik aufweist (wie in Ihrem Beispiel), sollten Sie stattdessen eine Teilansicht verwenden.

Ansichtskomponenten eignen sich hervorragend zum Unterteilen von Logik und können in gewisser Weise als Teilansicht mit eigener Logik betrachtet werden. Wenn es jedoch keine Logik gibt, die in die Teilansicht unterteilt werden muss, ist es wahrscheinlich am besten, keine Ansichtskomponente zu verwenden. In einem solchen Fall erhöht die Verwendung einer Ansichtskomponente die Codierungskomplexität (es gibt einen anderen Ort, an dem Sie nachsehen können, wie der Code funktioniert), bietet jedoch keinen wirklichen Vorteil. Im Allgemeinen sollten Sie die Codekomplexität nur in dem Maße erhöhen, in dem die Vorteile dieser zusätzlichen Komplexität größer sind als die "Kosten" dieser Komplexität.

Ich hoffe, das klingt nicht zu theoretisch. Im Grunde läuft es so ab: Wenn Sie eine Logik mit der Teilansicht packen möchten, damit Sie diese Komponente immer wieder verwenden können, verwenden Sie eine Ansichtskomponente, aber wenn Sie keine Logik benötigen Packe es ein und benutze dann eine Teilansicht.

14
Ron C

Es scheint, dass View Components (Stand Juli 2016) noch einige ungelöste Probleme im Zusammenhang mit dem Laden von Javascript und CSS hat. Bitte überprüfen Sie: https://blog.mariusschulz.com/2015/11/26/view-components-in-asp-net-mvc-6

0
Dejan Petrovic