问题描述
我是MVC的新手，因此决定从.net-core开始，因此我对内核与旧版本之间的差异了解不多.我确实找到了以下问题，该问题可以提供一些见解，但并没有帮助我确定我是否可以基本忽略部分视图.
I'm new to MVC and decided to start with .net-core, so I don't have much understanding of the differences in core vs. older versions. I did find the below question which offers some insight but hasn't helped me to decide whether I can basically ignore partial views.
我的问题很简单-如果我可以使用ViewComponent进行某些操作，是否有充分的理由不这样做?
My question is simply - if I can do something with a ViewComponent, is there any good reason not to?
非常感谢！
下面提供了上下文示例.
Example provided below for context.
主视图调用:
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是部分视图/视图组件中的一种表单):
Javascript (personCreateForm is a form within the partial view/view component):
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代码:
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());
}
}
最后是与Razor相同的页面:
And finally the Razor page which is the same for both:
@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>
推荐答案
这是一个非常好的问题.是的，在某些情况下，最好使用部分视图而不是使用视图组件来实现代码.如果视图组件"将不具有任何数量的逻辑(如您的示例中的情况)，则应改用部分视图.
It's a really good question. Yes, there are cases where you are better off implementing your code with a partial view than with a View Component. If the View Component isn't going to have any appreciable amount of logic (as is the case in your example) then you should use a partial view instead.
视图组件是划分逻辑的一种好方法，并且在某些方面可以被认为是包含其自身逻辑的部分视图.但是，如果没有任何逻辑需要与局部视图区分开，那么最好不要使用视图组件".在这种情况下，使用视图组件会增加编码的复杂性(还有另一个地方可以查看代码的工作原理)，但并不能带来任何真正的好处.通常，仅应将代码复杂性增加到一定程度，以使从增加的复杂性中获得的收益大于该复杂性的成本".
View Components are a great way to compartmentalize logic, and in some ways can be thought of as a partial view that contains it's own logic. But if there isn't any logic that needs to be compartmentalized with the partial view then it's probably best to not use a View Component. In such a case using a View Component increases the coding complexity (there is another place to look to see how the code works) but doesn't provide any real benefit. In general, you should only increase code complexity to the extent that the benefits received from that added complexity are greater than the "cost" of that complexity.
我希望听起来不要太理论化.基本上可以归结为这一点:如果存在要与部分视图打包的逻辑，以便可以一遍又一遍地使用该组件，则可以使用视图组件"，但是如果没有任何逻辑需要打包，然后使用局部视图.
I hope that doesn't sound too theoretical. It basically boils down to this: if there is logic that you want to package up with the partial view so that you can use that component over and over, then use a View Component, but if there isn't any logic that you need to package up with it then use a partial view.
这篇关于是否有充分的理由不在核心MVC中不使用ViewComponent而不是Partial View?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！