Есть ли веская причина НЕ использовать ViewComponent вместо частичного просмотра в основном MVC?

Я новичок в MVC и решил начать с .net-core, поэтому у меня нет большого понимания различий в основных и старых версиях. Я нашел следующий вопрос, который дает некоторое представление, но не помог мне решить, могу ли я в принципе игнорировать частичные представления.

Почему мы должны использовать компоненты компонента MVC 6 для частичного просмотра: в чем разница?

Мой вопрос просто - если я могу что-то сделать с ViewComponent, есть ли веская причина не делать этого?

Большое спасибо!

Пример ниже для контекста.

Вызов главного просмотра:

ViewComponent:

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

В сравнении с частичным представлением:

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

Javascript (personCreateForm - это форма в частичном представлении/представлении):

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

Код контроллера:

  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:

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

    }

И, наконец, страница Razor, которая одинакова для обоих:

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

Ответы

Ответ 1

Это действительно хороший вопрос. Да, бывают случаи, когда вам лучше реализовать свой код с частичным представлением, чем с помощью компонента "Просмотр". Если компонент View не будет иметь сколько-нибудь заметной логики (как в случае вашего примера), вы должны использовать частичное представление.

View Components - отличный способ разделить логику и в некотором смысле можно рассматривать как частичное представление, содержащее его собственную логику. Но если нет никакой логики, которая должна быть разделена с частичным представлением, то, вероятно, лучше не использовать компонент View. В таком случае использование компонента View увеличивает сложность кодирования (есть еще одно место, чтобы посмотреть, как работает код), но не дает никакой реальной выгоды. В общем, вы должны только увеличить сложность кода в той мере, в какой преимущества, получаемые от этой дополнительной сложности, больше, чем "стоимость" этой сложности.

Надеюсь, это не слишком теоретично. В основном это сводится к следующему: если есть логика, которую вы хотите упаковать с частичным представлением, чтобы использовать этот компонент снова и снова, используйте компонент "Просмотр", но если нет никакой логики, упакуйте вместе с ним, затем используйте частичный вид.