Create Custom Editor in ASP.NET Core

Question

I am in need of some advice. I am wanting to implement my own custom editor for a specific object type, Address. I started by reading the documentation for Tag Helpers on the .NET Core website and then read about View Components on the Core site and neither really made since for my exact scenario.

I have a model Address:

public class Address
{
    public Guid Id { get; set; }
    public string AddressLine1 { get; set; }
    public string AddressLine2 { get; set; }
    public string City { get; set; }
    public string StateCode { get; set; }
    public string PostalCode { get; set; }
}

I want to create either a custom editor template, tag helper, or view component that will allow me to do something like this (In my "Edit" View):

@model TestApplication.Models.Customer

<h2>Edit Customer</h2>

<form asp-action="Edit">
    <div class="form-horizontal">
    <h4>Edit Customer</h4>
    <hr />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Name" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input asp-for="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
    <address-editor asp-for="HomeAddress" />
    <address-editor asp-for="WorkAddress" />
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</form>

I would like the HTML to be rendered like so:

Edit Customer

<form asp-action="Edit">
    <div class="form-horizontal">
    <h4>Edit Customer</h4>
    <hr />
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <input type="hidden" asp-for="Id" />
    <div class="form-group">
        <label asp-for="Name" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="Name" name="Name" class="form-control" />
            <span asp-validation-for="Name" class="text-danger"></span>
        </div>
    </div>
    <h4>Home Address</h4>
    <input type="hidden" asp-for="HomeAddress_Id" />
    <div class="form-group">
        <label asp-for="HomeAddress_AddressLine1" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_AddressLine1" name="HomeAddress_AddressLine1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_AddressLine2" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_AddressLine2" name="HomeAddress_AddressLine2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_City" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_City" name="HomeAddress_City" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_StateCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_StateCode" name="HomeAddress_StateCode" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="HomeAddress_PostalCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="HomeAddress_PostalCode" name="HomeAddress_PostalCode" class="form-control" />
        </div>
    </div>
    <h4>Work Address</h4>
    <input type="hidden" asp-for="WorkAddress_Id" />
    <div class="form-group">
        <label asp-for="WorkAddress_AddressLine1" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_AddressLine1" name="WorkAddress_AddressLine1" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_AddressLine2" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_AddressLine2" name="WorkAddress_AddressLine2" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_City" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_City" name="WorkAddress_City" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_StateCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_StateCode" name="WorkAddress_StateCode" class="form-control" />
        </div>
    </div>
    <div class="form-group">
        <label asp-for="WorkAddress_PostalCode" class="col-md-2 control-label"></label>
        <div class="col-md-10">
            <input id="WorkAddress_PostalCode" name="WorkAddress_PostalCode" class="form-control" />
        </div>
    </div>

    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="submit" value="Save" class="btn btn-default" />
        </div>
    </div>
</form>

Am I on the right direction by looking into Editor Templates? If so, how do I prefix the control names with the Model.PropertyName (i.e. HomeAddress_)?

So far, I've only been able to "hack" my way into a view component that sets the id and name attributes based on a string I pass in (wish I could determine that automatically). — clockwiseq
– clockwiseq, Commented Sep 4, 2017 at 23:36

clockwiseq · Accepted Answer · 2017-09-05 14:10:16Z

2

I believe my answer came about by researching view components a bit more. I could have gone the direction of a tag helper, view component, or editor template. I decided on view component and needed to know how to pass the entire model information into the view component, well, this question helped me get there. The issue I was having (or question) was that I needed to know about ModelExpression. That class contains everything that I need (name and model), so I was able to do like the following:

<vc:address-editor asp-for="@Model.HomeAddress"></vc:address-editor>

Then, in my AddressEditor ViewComponent, I simply used the two properties that I needed:

 public IViewComponentResult Invoke(ModelExpression aspFor)
 {
     ViewBag.AspFor = aspFor.Name;

     return View(aspFor.Model);
 }

answered Sep 5, 2017 at 14:10

clockwiseq

4,2299 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create Custom Editor in ASP.NET Core

Edit Customer

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Edit Customer

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related