Manage addresses

Manage user addresses in frontend

The Manage Addresses app handles the managing of user addresses in the frontend:

View user

It is possible to set the number of addresses listed per page, the sorting and handle editing or creating an address from frontend.

Here you must:

Decide how to display a list of addresses
Provide a List Addresses template and/or an Edit Address template

List Addresses Template

When creating a List Addresses template inherit the AddressListViewModel and use the Dynamicweb.Rendering and Dynamicweb.Frontend namespaces. Then it is possible to loop through each address and list them as in this simple example:

@inherits ViewModelTemplate<AddressListViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend

<!-- Create a link to load the Edit Address template with the AddressID parameter being 0 in order to create a new address -->
@{
    string newAddressLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;AddressId=0";
}
<div>
    <a href="@newAddressLink" id="NewAddress">New address</a>
</div>

<!--Loop through the Addresses-->
@if (Model.Addresses.Count() > 0)
{
    <table>
        <tr>
            <th>Name</th>
            <th>Address</th>
            <th>Zip & City</th>
        </tr>
        @foreach (var address in Model.Addresses)
        {
            <!-- Create a link to load the Edit Address template with the AddressID parameter of the specific address -->
            string addressLink = $"/Default.aspx?ID={Pageview.Page.ID}&amp;AddressId={address.Id}";
            <tr>
                <td>@address.Name</td>
                <td>@address.Address @address.HouseNumber</td>
                <td>@address.Zip @address.City</td>
                <td> 
                    <a href="@addressLink"> Edit address </a> 
                </td>
            </tr>
        }
    </table>
}
else
{
    <div> No addresses found </div>
}

Pagination can also be implemented:

@if (Model.PageCount > 1)
{
    <ul>
        @for (int i = 1; i <= Model.PageCount; i++)
        {
            var css = (i == Model.CurrentPage) ? "page-item active" : "page-item";
            <li class="@css">
                @string.Format("<a class=\"page-link\" href=\"javascript:goToPage({0});\">{0}</a>", i)
            </li>
        }
    </ul>
}
else
{
    <div> No addresses found </div>
}

Edit Address Template

The Edit Address template should inherit the AddressViewModel and use the Dynamicweb.Rendering and Dynamicweb.Frontend namespaces. The Edit Address template is loaded when the parameter AddressId is present in the URL with the appropriate ID of the address. When the ID is 0, a new address is created. To display the correct title check the Id:

@inherits ViewModelTemplate<AddressViewModel>
@using Dynamicweb.Rendering
@using Dynamicweb.Frontend

<!-- Display the correct title depending on the Id -->
@{
    string title = @Model.Id == 0 ? "New address" : "Edit address";
}
<h1>@title</h1>

To execute either an edit or deletion of an address submit an URL with the AddressCmd parameter and a set of other parameters and values appropriate for the address command:

<!-- Create the URLs for deleting an address or saving an edited address -->
@{
    string deleteAddressLink = $"?ID={Pageview.Page.ID}&amp;AddressCmd=deleteaddress&amp;AddressId={Model.Id}";
    string saveAddressLink = $"?ID={Pageview.Page.ID}&amp;AddressCmd=saveaddress&amp;AddressId={Model.Id}";
}
<form action="@saveAddressLink" method="post">
    <input type="hidden" name="ID" value="@Pageview.ID">
    <div>
        <label for="Name">Name</label>
        <input type="text" name="Name" id="Name" value="@Model.Name" required>

        <label for="Address" >Address</label>
        <input type="text" name="Address" id="Address" value="@Model.Address" required />

        <label for="HouseNumber">House number</label>
        <input type="text" placeholder="House number"" name="HouseNumber" id="HouseNumber" value="@Model.HouseNumber" />

        <label for="Zip">Zip code</label>
        <input type="text" placeholder="Zip code" name="Zip" id="Zip" value="@Model.Zip" required />

        <label for="City">City</label>
        <input type="text" placeholder="City" name="City" id="City" value="@Model.City" required />

        <input type="checkbox" name="IsDefault" id="IsDefault"
        @(Model.IsDefault ? "checked" : "")>
        <label for="IsDefault" class="form-check-label">Default address</label>
    </div>
    <div>
        <button type="submit" id="SaveAddressButton">Save</button>
        <a href="@deleteAddressLink" id="DeleteUserButton">Delete</a>
    </div>
</form>

Table of Contents

Manage addresses

List Addresses Template

Edit Address Template