I have a page in my C# Core project (MVC using Razor Pages) that I have duplicate types of information. In this case it is a Model that contains both delivery address information and also billing address information. So my model looks like this:

    [Display(Name = "Name")]
    [Required(ErrorMessage = "Required")]
    public string BillingName { get; set; }

    [Display(Name = "Address Line 1")]
    [Required(ErrorMessage = "Required")]
    public string BillingAddress1 { get; set; }

    [Display(Name = "Address Line 2")]
    public string BillingAddress2 { get; set; }

    [Display(Name = "Town")]
    [Required(ErrorMessage = "Required")]
    public string BillingTown { get; set; }

    [Display(Name = "County")]
    public string BillingCounty { get; set; }

    [Display(Name = "Postcode")]
    [Required(ErrorMessage = "Required")]
    public string BillingPostCode { get; set; }

    [Display(Name = "Name")]
    [Required(ErrorMessage = "Required")]
    public string DeliveryName { get; set; }

    [Display(Name = "Address Line 1")]
    [Required(ErrorMessage = "Required")]
    public string DeliveryAddress1 { get; set; }

    [Display(Name = "Address Line 2")]
    public string DeliveryAddress2 { get; set; }

    [Display(Name = "Town")]
    [Required(ErrorMessage = "Required")]
    public string DeliveryTown { get; set; }

    [Display(Name = "County")]
    public string DeliveryCounty { get; set; }

    [Display(Name = "Postcode")]
    [Required(ErrorMessage = "Required")]
    public string DeliveryPostCode { get; set; }

So when I render this on the page using

<input asp-for="BillingName " class="form-control" />

It renders the input fields fine and their corresponding id and name would be (in this case) BillingName.

<input class="form-control" type="text" data-val="true" data-val-required="Required" id="BillingName" name="BillingName" value="">

This is fine, but I need the chrome auto-fill / auto-complete to try and fill this BillingName with their Name. But because the field has an id and name of BillingName, Chrome knows nothing about this.

Is there a way to have the id="BillingName" and the name="Name"? So I could then have another field: id="DeliveryName" and the name="Name"

But, I need the model binding to still work to the ID when the form is posted back.

Any advice please?

Thank you.