c# - Is there any good reason NOT to use a ViewComponent instead of a Partial View in core MVC? -
i'm new mvc , decided start .net-core, don't have understanding of differences in core vs. older versions. did find below question offers insight hasn't helped me decide whether can ignore partial views.
why should use mvc 6 feature view components on partial view: difference?
my question - if can viewcomponent, there reason not to?
many thanks!
example provided below context.
main view calls:
viewcomponent:
<div class="modal-body" id="modalpersoninner"> @await component.invokeasync("createperson", new person()) </div> versus partial view:
<div class="modal-body" id="modalpersoninner"> @{ await html.renderpartialasync("people/createpartialview", new person());} </div> javascript (personcreateform form within 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); controller code:
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 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()); } } and razor page same 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 question. yes, there cases better off implementing code partial view view component. if view component isn't going have appreciable amount of logic (as case in example) should use partial view instead.
view components great way compartmentalize logic, , in ways can thought of partial view contains it's own logic. if there isn't logic needs compartmentalized partial view it's best not use view component. in such case using view component increases coding complexity (there place see how code works) doesn't provide real benefit. in general, should increase code complexity extent benefits received added complexity greater "cost" of complexity.
i hope doesn't sound theoretical. boils down this: if there logic want package partial view can use component on , over, use view component, if there isn't logic need package use partial view.
Comments
Post a Comment