Auto-filling addresses of existing customers

Auto-fill is an option found in web browsers and online applications that allows users to easily input commonly-entered information into a web form. 

You might wish to provide a similar functionality on your site to simplify the checkout process for your repeat customers. With some modifications, the method described on this page can be used to auto-fill any form in your live site application.

Implementing auto-fill functionality for existing addresses

To implement auto-filling of existing addresses for registered customers:

1. Open the controller class facilitating your checkout process in Visual Studio.

   This example uses the ShoppingService class initialized in the controller’s constructor. Learn more about IShoppingService and its default implementation, the ShoppingService, in Integrating the shopping cart.

2. To the DeliveryDetails action, add logic that loads addresses for existing customers.

   Copy

   
   
   
            /// <summary>
            /// Displays the customer details checkout process step with an address selector for known customers.
            /// </summary>
            public ActionResult DeliveryDetailsAddressSelector()
            {
                // Gets the current user's shopping cart
                ShoppingCartInfo cart = shoppingService.GetCurrentShoppingCart();
   
                // If the shopping cart is empty, redirects to the shopping cart view
                if (cart.IsEmpty)
                {
                    return RedirectToAction("ShoppingCart");
                }
   
                // Gets all countries for the country selector
                SelectList countries = new SelectList(countryInfo.Get(), "CountryID", "CountryDisplayName");
   
                // Gets the current customer
                CustomerInfo customer = shoppingService.GetCurrentCustomer();
   
                // Gets all customer billing addresses for the address selector
                IEnumerable<AddressInfo> customerAddresses = Enumerable.Empty<AddressInfo>();
                if (customer != null)
                {
                    customerAddresses = addressInfo.GetByCustomer(customer.CustomerID).ToList();
                }
   
                // Prepares address selector options
                SelectList addresses = new SelectList(customerAddresses, "AddressID", "AddressName");
   
                // Gets all enabled shipping options for the shipping option selector
                SelectList shippingOptions = new SelectList(shippingOption.GetBySite(SiteContext.CurrentSiteID, true).ToList(), "ShippingOptionID", "ShippingOptionDisplayName");
   
                // Loads the customer details
                DeliveryDetailsViewModel model = new DeliveryDetailsViewModel
                {
                    Customer = new CustomerViewModel(shoppingService.GetCurrentCustomer()),
                    BillingAddress = new BillingAddressViewModel(shoppingService.GetBillingAddress(), countries, addresses),
                    ShippingOption = new ShippingOptionViewModel(shippingOption.Get(shoppingService.GetShippingOption()), shippingOptions)
                };
   
                // Displays the customer details step
                return View(model);
            }
   
   
   
    

3. Add a new POST method to the controller. This method is called from the JavaScript file added in the next step. It retrieves an AddressInfo object based on the provided AddressID and serializes its select properties, allowing the JavaScript fuction to auto-fill the address form fields.

   Copy

   
   
   
            /// <summary>
            /// Loads information of an address specified by its ID.
            /// </summary>
            /// <param name="addressID">ID of the address.</param>
            /// <returns>Serialized information of the loaded address.</returns>
            [HttpPost]
            public JsonResult CustomerAddress(int addressID)
            {
                // Gets the address with its ID
                AddressInfo address = addressInfo.Get(addressID);
   
                // Checks whether the address was retrieved
                if (address == null)
                {
                    return null;
                }
   
                // Creates a response with all address information
                var responseModel = new
                {
                    Line1 = address.AddressLine1,
                    Line2 = address.AddressLine2,
                    City = address.AddressCity,
                    PostalCode = address.AddressZip,
                    CountryID = address.AddressCountryID,
                    StateID = address.AddressStateID,
                    PersonalName = address.AddressPersonalName
                };
   
                // Returns serialized information of the address
                return Json(responseModel);
            }
   
   
   
    

4. Add a JavaScript file that loads the selected AddressInfo object based on the AddressID provided from the address selector, and auto-fills the address form fields.

   Copy

   
   
   
    (function () {
        'use strict';
   
        // Fills address form fields with the selected address whenever 
        // an address is selected from the address selector drop-down element
        $('.js-address-selector-div').change(function () {
            var $selectorDiv = $(this),
                $addressDiv = $selectorDiv.parent(),
                $selector = $selectorDiv.find('.js-address-selector'),
                url = $selectorDiv.data('statelistaction'),
                postData = {
                    addressId: $selector.val()
                };
   
            // If the new address option is selected, clears all address form fields
            if (!postData.addressId) {
                eraseFields($addressDiv);
                return;
            }
   
            // Sends a POST request to the 'CustomerAddress' endpoint of the 'CheckoutController' 
            $.post(url, postData, function (data) {
                fillFields($addressDiv, data);
            });
        });
   
        function fillFields($addressDiv, data) {
            fillBasicFields($addressDiv, data);
            fillCountryStateFields($addressDiv, data);
        }
   
        // Fills the 'Address line 1' and '2', 'City', and 'Postal code'
        // address form fields from the selected address
        function fillBasicFields($addressDiv, data) {
            var basicFields = $addressDiv.data('fields'),
                addressType = $addressDiv.data('addresstype');
   
            $.each(basicFields, function (i, val) {
                var fieldId = '#' + addressType + '_' + val,
                    fieldVal = data[val];
   
                $(fieldId).val(fieldVal);
            });
        }
   
        // Fills the Country and State drop-down selectors from selected address data
        function fillCountryStateFields($addressDiv, data) {
            var $countryStateSelector = $addressDiv.find('.js-country-state-selector'),
                countryField = $countryStateSelector.data('countryfield'),
                stateField = $countryStateSelector.data('statefield'),
                $countrySelector = $countryStateSelector.find('.js-country-selector');
   
            // Sets id of the country's state for the 'countryStateSelector' script
            $countryStateSelector.data('stateselectedid', data[stateField]);
   
            // Raises the change event on the country selector drop-down element, 
            // This invokes the 'coutryStateSelector' script that shows the
            // states drop-down selector with the selected state
            $countrySelector.val(data[countryField]).change();
        }
   
        // Clears all address form fields
        function eraseFields($addressDiv) {
            var data = {};
            fillFields($addressDiv, data);
        }
    }());
   
   
    

   Add the JavaScript file to the view rendering the customer details form.

   Adding the JavaScript file

   Copy

   
   
   
    @Scripts.Render("~/Scripts/addressSelector.js")
   
   
   
    

5. Modify the customer details view to display the loaded addresses in a selector. For example:

   Adding the address selector

   Copy

   
   
   
            <div class="js-address-selector-div" data-statelistaction='@Url.Action("CustomerAddress", "Checkout")'>
   
                @Html.LabelFor(m => m.BillingAddress.AddressID)
                @Html.DropDownListFor(m => m.BillingAddress.AddressID, Model.BillingAddress.Addresses, "(new)", new { @class = "js-address-selector" })
   
                <div class="message message-error">
                    @Html.ValidationMessageFor(m => m.BillingAddress.AddressID)
                </div>
            </div>
   
   
   
    

Customers signed in on your website are now able to select from previously used addresses when entering billing or shipping data during checkout.