12
私はMVCを初め、.net-coreから始めることを決めました。そのため、コアと旧バージョンの違いをあまり理解していません。私はいくつかの洞察を提供する以下の質問を見つけましたが、私が基本的に部分的な見解を無視できるかどうかを判断する助けにはなりませんでした。コアMVCでパーシャルビューではなくViewComponentを使用しないでください。
Why should we use MVC 6 Feature View Components over Partial View: What is the difference?
私の質問は単純です - 私は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());
}
}
そして最後にカミソリページの両方で同じです：
@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>
あなたに質問したところ、StackOverflowにはあまり適していません。しかし、ViewComponentはインスタンス化される必要があり、通常は依存関係（IoCコンテナ経由で注入される）を含み、したがってロジックを含みます。パーシャルビューは単なるテンプレートであり、既にモデルが作成され、レンダリングされている場所で使用する必要があります。アプリケーションロジックなしでは、要求ごとに割り当てやオブジェクトのインスタンス化が少なくなります。 – Tseng