我是MVC的新手，并决定从.net-core开始，所以我对核心版本与旧版本的差异没有多少了解。我确实找到了下面的问题，它提供了一些见解，但没有帮助我决定我是否可以基本上忽略部分观点。
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());
}
}
最后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>
答案 0 :(得分：15)
这是一个非常好的问题。是的，在某些情况下，您最好使用部分视图而不是使用View Component来实现代码。如果View Component没有任何可观的逻辑（如您的示例中的情况），那么您应该使用局部视图。
查看组件是划分逻辑的一种很好的方法，在某些方面可以被视为包含它自己的逻辑的局部视图。但是，如果没有任何逻辑需要与局部视图划分，那么最好不要使用View Component。在这种情况下，使用视图组件会增加编码复杂性（还有另一个地方可以查看代码是如何工作的）但是并没有提供任何真正的好处。一般而言，您应该只增加代码复杂性，使得从增加的复杂性中获得的收益大于＆＃34;成本＆＃34;这种复杂性。
我希望这听起来不太理论化。它基本上归结为：如果你想要用局部视图打包逻辑以便你可以反复使用该组件，那么使用View组件，但是如果你没有任何逻辑需要打包它然后使用局部视图。
答案 1 :(得分：0)
View Components仍然（截至2016年7月）有一些与javascript和css加载相关的未解决问题。请检查： https://blog.mariusschulz.com/2015/11/26/view-components-in-asp-net-mvc-6