我是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());
}
}
最后的剃刀页面是相同的两个：
@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>
解决方法
这是一个很好的问题.是的,有些情况下,您最好使用部分视图实现代码,而不是使用View Component.如果View组件不会有任何明显的逻辑(如您的示例所示),则应该使用部分视图.
视图组件是区分逻辑的好方法,在某些方面可以被认为是包含其自身逻辑的局部视图.但是如果没有任何需要使用部分视图进行区分的逻辑,那么最好不要使用View Component.在这种情况下,使用View Component会增加编码复杂性(还有另一个地方看看代码如何工作),但并没有提供任何实际的好处.一般来说,您应该只增加代码复杂性,从而增加复杂性所带来的好处大于复杂性的“成本”.
我希望这听起来不太理论.它基本上归结为：如果有逻辑要包装部分视图,以便您可以一遍又一遍地使用该组件,那么使用一个View Component,但是如果没有任何你需要的逻辑打包,然后使用部分视图.
