In Visual Studio, open the Customers project, which is located in the Microsoft PressVisual CSharp Step By StepChapter 27Web Service folder in your Documents folder.

This project contains a modified version of the Customers app from the set of exercises in Chapter 26. The ViewModel implements additional commands to skip to the first and last customers in the customers collection, and the app bar contains First and Last buttons that invoke these commands.

Additionally, this version of the project does not implement the Search contract. The reason behind this omission is that by doing so you can concentrate on the core elements of this exercise without the files and other elements that make up the Search contract getting in the way.

In Solution Explorer, right-click the Customers solution (not the Customers project), point to Add, and then click New Project.

In the Add New Project dialog box, in the left pane, click the Web tab. In the middle pane, click the ASP.NET Web Application template. In the Name box, type AdventureWorksService, and then click OK.

In the New ASP.NET Project dialog box, click Web API, and then click OK.

As mentioned at the start of this section, you cannot access a relational database directly from a Windows Store app, and this includes using the Entity Framework. Instead, you have created a web app (this is not a Windows Store app), and you will host the entity model that you create in this app. The Web API template provides wizards and tools with which you can quickly implement a web service, which is what you will do in the next exercise. This web service will provide remote access to the entity model for the Customers Windows Store app.

In Solution Explorer, right-click the Customers solution again, and then click Set Startup Projects.

In the Solution ‘Customers’ Property Pages dialog box, click Multiple Startup Projects. Set the Action for the AdventureWorksService project to Start without debugging, set the Action for the Customers project to Start, and then click OK.

This configuration ensures that the AdventureWorksService web app runs whenever you start the project from the Debug menu.

Right-click the AdventureWorksService project, and then click Properties.

On the properties page, click the Web tab in the left column.

On the Web page, click “Don’t open a page. Wait for a request from an external application.”

Normally, when you run a web app from Visual Studio, the web browser (Internet Explorer) opens and attempts to display the home page for the app. The AdventureWorksService app does not have a home page; the purpose of this app is to host the web service to which client apps can connect and retrieve data from the AdventureWorks database.

In the Project Url box, change the address of the web app to http://localhost:50000/ and then click Create Virtual Directory. In the Microsoft Visual Studio message box that appears, verify that the virtual directory was created successfully, and then click OK.

By default, the ASP.NET project template creates a web app that is hosted by using IIS Express, and it selects a random port for the URL. This configuration sets the port to 50000 so that the subsequent steps in the exercises in this chapter can be described more easily.

On the File menu, click Save All, and then close the properties page. In Solution Explorer, right-click the AdventureWorksService project, point to Add, and then click New Item.

In the Add New Item – AdventureWorksService dialog box, in the left column, click the Data tab. In the middle pane, Click the ADO.NET Entity Data Model template. In the Name box type AdventureWorksModel.edmx, and then click Add.

The Entity Data Model Wizard starts. You can use this wizard to generate an entity model from an existing database.

On the Choose Model Contents page of the wizard, click Generate From Database, and then click Next.

On the Choose Your Data Connection page, click New Connection.

In the Connection Properties dialog box, in the Server Name box, type (localdb)v11.0. Verify that Use Windows Authentication is selected. In the Select Or Enter A Database Name box, type AdventureWorks, and then click OK.

This action creates a connection to the AdventureWorks database that you configured in the previous exercise.

On the Choose Your Data Connection page, verify that Save Entity Connection Settings In Web.Config As is selected, confirm that the name of the connection string is AdventureWorksEntities, and then click Next.

On the Choose Your Version page, accept the default version of the Entity Framework and then click Next.

On the Choose Your Database Objects And Settings page, expand Tables, expand SalesLT, and then select Customer. Verify that the Pluralize Or Singularize Generated Object Names check box is selected (the other two options on this page will also be selected by default), observe that that Entity Framework generates the classes for the entity model in the AdventureWorksModel namespace, and then click Finish.

The Entity Data Model Wizard generates an entity model for the Customers table and displays a graphical representation in the Entity Model editor on the screen, like this:

If the following Security Warning message box appears, select the Do Not Show This Message Again check box, and then click OK. This security warning appears because the Entity Framework uses a technology known as T4 templates to generate the code for your entity model, and it has downloaded these templates from the web by using NuGet. The Entity Framework templates have been verified by Microsoft and are safe to use.

In the Entity Model editor, right-click the NameStyle column and then click Delete From Model. Using the same technique, delete the MiddleName, Suffix, CompanyName, SalesPerson, PasswordHash, and PasswordSalt columns from the entity model.

The Customers app does not use these columns, and there is no need to retrieve them from the database. However, you should not remove the rowguid and ModifiedDate columns. These columns are used by the database to identify rows in the Customers table and track changes to these rows in a multiuser environment. If you remove these columns, you will not be able to save data back to the database correctly.

On the Build menu, click Build Solution.

In Solution Explorer, expand AdventureWorksModel.edmx, expand AdventureWorksModel.tt, and then double-click Customer.cs.

This file contains the class that the Entity Data Model Wizard generated to represent a customer. This class contains automatic properties for each of the columns in the Customer table that you have included in the entity model:

public partial class Customer
{
    public int CustomerID { get; set; }
    public string Title { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EmailAddress { get; set; }
    public string Phone { get; set; }
    public System.Guid rowguid { get; set; }
    public System.DateTime ModifiedDate { get; set; }
}

In Solution Explorer, under AdventureWorksModel.edmx, expand AdventureWorksModel.Context.tt, and then double-click AdventureWorksModel.Context.cs.

This file contains the definition of a class called AdventureWorksEntities (it has the same name that you used when you generated the connection to the database in the Entity Data Model Wizard).

public partial class AdventureWorksEntities : DbContext
{
    public AdventureWorksEntities()
        : base("name=AdventureWorksEntities")
    {
    }
    protected override void OnModelCreating(DbModelBuilder modelBuilder)
    {
        throw new UnintentionalCodeFirstException();
    }
    public DbSet<Customer> Customers { get; set; }
}

The AdventureWorksEntities class is descended from the DbContext class, and this class provides the functionality that an app uses to connect to the database. The constructor passes a parameter to the base class constructor that specifies the name of a connection string to use to connect to the database. If you look in the Web.config file, you will find this string in the <ConnectionStrings> section. It contains the parameters (among other things) that you specified when you ran the Entity Data Model Wizard.

You can ignore the OnModelCreating method in the AdventureWorksEntities class. The only other item is the Customers collection. This collection has the type DbSet<Customer>. The DbSet generic type provides methods with which you can add, insert, delete, and query objects in a database; it works in conjunction with the DbContext class to generate the appropriate SQL SELECT commands necessary to fetch customer information from the database and populate the collection as well as create the SQL INSERT, UPDATE, and DELETE commands that run if Customer objects are added, modified, or removed from the collection. A DbSet collection is frequently referred to as an entity set.

In Visual Studio, in the AdventureWorksService project, right-click the Controllers folder, point to Add, and then click New Scaffold Item.

In the Add Scaffold Wizard, in the middle pane, scroll down and click the Web API 2 Controller with read/write actions, using Entity Framework template, and then click Add.

In the Add Controller dialog box, in the Controller Name box, type CustomersController. In the Model Class list, select Customer (AdventureWorksService), in the Data Context Class list, select AdventureWorksEntities (AdventureWorksService), and then click Add.

In a web service created by using the ASP.NET Web API template, all incoming web requests are handled by one or more controller classes, and each controller class exposes methods that map to each of the different types of REST requests for each of the resources that it exposes. For example, the CustomersController looks like this:

public class CustomersController : ApiController
{
    private AdventureWorksEntities db = new AdventureWorksEntities();
    // GET api/Customers
    public IEnumerable<Customer> GetCustomer()
    {
        return db.Customers.AsEnumerable();
    }
    // GET api/Customers/5
    public Customer GetCustomer(Int32 id)
    {
        Customer customer = db.Customers.Find(id);
        if (customer == null)
        {
            throw new HttpResponseException(
                Request.CreateResponse(HttpStatusCode.NotFound));
        }
        return customer;
    }
    // PUT api/Customers/5
    public HttpResponseMessage PutCustomer(Int32 id, Customer customer)
    {
        ...
    }
    // POST api/Customers
    public HttpResponseMessage PostCustomer(Customer customer)
    {
        ...
    }
    // DELETE api/Customers/5
    public HttpResponseMessage DeleteCustomer(Int32 id)
    {
        ...
    }
    ...
}

The first GetCustomer method handles requests to retrieve all customers, and it satisfies this request by simply returning the entire Customers collection from the Entity Framework data model that you created previously. Behind the scenes, the Entity Framework fetches all of the customers from the database and uses this information to populate the Customers collection. This method is invoked if an app sends an HTTP GET request to the api/Customers URL in this web service.

The GetCustomer method is overloaded, and the second version takes an integer parameter. This parameter specifies the CustomerID of a specific customer and this method uses the Entity Framework to find the details of this customer before returning it. This method runs when an app sends an HTTP GET request to the api/Customers/n URL, where n is the ID of the customer to retrieve.

The PutCustomer method runs when an app sends an HTTP PUT request to the web service. The request specifies a customer ID and the details of a customer, and the code in this method uses the Entity Framework to update the specified customer by using the detail information (the internal workings of this method are not shown in the preceding code sample).

The PostCustomer method responds to HTTP POST requests, and takes the details of a customer as its parameter. This method adds a new customer with these details to the database.

Finally, the DeleteCustomer method handles HTTP DELETE requests and removes the customer with the specified customer ID.

The ASP.NET Web API template automatically generates code that directs requests to the appropriate method in the controller classes, and you can add further controller classes if you need to manage other resources, such as Products or Orders.

You can also create controller classes manually by using the same pattern as that shown by the CustomersController class—you do not have to fetch and store data in a database by using the Entity Framework. The ASP.Net Web API template contains an example controller in the ValuesController.cs file that you can copy and augment with your own code.

In the Controllers folder, right-click the ValuesController.cs file, and then click Delete. In the Message box, click OK to confirm that you want to delete this file.

You will not be using the example ValuesController class in this exercise.

In Solution Explorer, check that you have correctly configured the web service. Right-click the AdventureWorksService project, and then, on the shortcut menu that appears, point to View, and then click View In Browser.

Your web browser will start, and it should display the following page:

On the title bar, click API.

Another page appears, summarizing the REST requests that an app can send to the web service:

On the address bar, type http://localhost:50000/api/Customers/1, and then press Enter. When the message “Do you want to open or save 1.json (223 bytes) from localhost?” appears, click Open.

This request is directed to the overloaded GetCustomer method in the CustomersController class, and the value 1 is passed as the parameter to this method. Note that the Web API uses routes that start with the path “api” after the address of the server.

The GetCustomer method retrieves the details of customer 1 from the database and returns it as a JSON-formatted object. The file 1.json contains this data, which you can open by using Notepad. The data looks like this:

{"CustomerID":1,"Title":"Mr","FirstName":"Orlando","LastName":"Gee","EmailAddress":
"[email protected]","Phone":"245-555-0173","rowguid":
"3f5ae95e-b87d-4aed-95b4-c3797afcb74f","ModifiedDate":"2001-08-01T00:00:00"}

Close Notepad, close the web browser and return to Visual Studio.

In Solution Explorer, in the Customers project, right-click the DataSource.cs file and then, on the shortcut menu, click Delete. In the message box, click OK to confirm that you want to delete the file.

This file contained the sample data used by the Customers app. You are going to modify the ViewModel class to fetch this data from the web service, so this file is no longer required.

In Solution Explorer, double-click ViewModel.cs to display the file in the Code and Text Editor window.

Add the following using directives to the list at the top of the file:

using System.Net.Http;
using System.Net.Http.Headers;

In the ViewModel class, add the following variables shown in bold before the ViewModel constructor:

public class ViewModel : INotifyPropertyChanged
{
    ...
    private const string ServerUrl = "http://localhost:50000/";
    private HttpClient client = null;

    public ViewModel()
    {
        ...
    }
    ...
}

The ServerUrl variable contains the base address of the web service. You will use the client variable to connect to the web service.

In the ViewModel constructor, initialize the customers list to null and add the following statements that configure the client variable:

public ViewModel()
{
    ...
    this.customers = null;
    this.client = new HttpClient();
    this.client.BaseAddress = new Uri(ServerUrl);
    this.client.DefaultRequestHeaders.Accept.
        Add(new MediaTypeWithQualityHeaderValue("application/json"));
}

The customers list contains the customers displayed by the app; it was previously populated with the data in the DataSource.cs file that you have removed.

The client variable is initialized with the address of the web server to which it will send requests. A REST web service can receive requests and send responses in a variety of formats, but the Customers app will use JSON. The final statement in the preceding code configures the client variable to submit requests in this format.

In Solution Explorer, double-click the Customer.cs file in the root folder of the Customers project to display it in the Code and Text Editor window.

Immediately after the Phone property, add the public properties shown in bold in the following code to the Customer class:

public class Customer : INotifyPropertyChanged
{
    ...
    public string Phone
    {
        ...
    }
    public System.Guid rowguid { get; set; }
    public System.DateTime ModifiedDate { get; set; }

    ...
}

The web service retrieves these fields from the database, and the Customers app must be prepared to handle them; otherwise, they will be lost if the user decides to modify the details of a Customer (you will add this capability to the Customers app later in this chapter).

Return to the ViewModel class. After the constructor, add the public GetDataAsync method shown here:

public async Task GetDataAsync()
{
    try
    {
        var response = await this.client.GetAsync("api/customers");
        if (response.IsSuccessStatusCode)
        {
            var customerData =
                await response.Content.ReadAsAsync<IEnumerable<Customer>>();
            this.customers = customerData as List<Customer>;
            this.currentCustomer = 0;
            this.OnPropertyChanged("Current");
            this.IsAtStart = true;
            this.IsAtEnd = (this.customers.Count == 0);
        }
        else
        {
            // TODO: Handle GET failure
        }
    }
    catch (Exception e)
    {
        // TODO: Handle exceptions
    }
}

This method is asynchronous; it uses the GetAsync method of the HttpClient object to invoke the api/customers operation in the web service. This operation fetches the details of the customers from the AdventureWorks database. The GetAsync method is itself asynchronous, and returns an HttpResponseMessage object wrapped in a Task. The HttpResponseObject contains a status code that indicates whether the request was successful, and if it is, the app uses the ReadAsAsync method of the Content property of the HttpResponseMessage object to actually retrieve the data returned by the web service. This data is assigned to the customers collection, the currentCustomer property of the ViewModel is set to point to the first customer in this collection, and the IsAtStart and IsAtEnd properties are initialized to indicate the state of the ViewModel.

Observe that currently the GetDataAsync method does not handle any exceptions or failures other than to consume them silently. You will see a technique for reporting exceptions in a Windows Store app later in this chapter.

Modify the get accessor for the Current property, as shown in the following:

public Customer Current
{
    get
    {
        if (this.customers != null)
        {
            return this.customers[currentCustomer];
        }
        else
        {
            return null;
        }
    }
}

The GetDataAsync method is asynchronous, so there is the possibility that the customers collection might not be populated when the controls on the MainPage form attempt to bind to a customer. In this situation, this modification prevents the data bindings from generating a null reference exception when they access the customers collection.

In the ViewModel constructor, update the conditions that make it possible for each of the commands to run as shown in bold in the following code:

public ViewModel()
{
    ...
    this.NextCustomer = new Command(this.Next,
        () => { return this.customers != null &&
                this.customers.Count > 0 && !this.IsAtEnd; });
    this.PreviousCustomer = new Command(this.Previous,
        () => { return this.customers != null &&
                this.customers.Count > 0 && !this.IsAtStart; });
    this.FirstCustomer = new Command(this.First,
        () => { return this.customers != null &&
                this.customers.Count > 0 && !this.IsAtStart; });
    this.LastCustomer = new Command(this.Last,
        () => { return this.customers != null &&
                this.customers.Count > 0 && !this.IsAtEnd; });
}

These changes ensure that the buttons on the app bar are not enabled until there is some data to display.

In Solution Explorer, expand MainPage.xaml and double-click MainPage.xaml.cs to open it in the Code and Text Editor window.

Add the following statement shown in bold to the MainPage constructor:

public MainPage()
{
    ...
    ViewModel viewModel = new ViewModel();
    viewModel.GetDataAsync();
    this.DataContext = viewModel;
}

This statement populates the ViewModel.

On the Debug menu, click Start Debugging to build and run the app.

The form will appear empty initially while the GetDataAsync method runs, but after a few seconds the details of the first customer, Orlando Gee, should appear:

Right-click the form to display the app bar. Use the navigation buttons to move through the list of customers to verify that the form works as expected.

Return to Visual Studio and stop debugging.

Display the VievModel.cs file in the Code and Text Editor window. After the GetDataAsync method, add the private _isBusy field and public IsBusy property to the ViewModel class, as illustrated here:

private bool _isBusy;
public bool IsBusy
{
    get { return this._isBusy; }
    set
    {
        this._isBusy = value;
        this.OnPropertyChanged("IsBusy");
    }
}

In the GetDatAsynca method, add the following statements shown in bold:

public async Task GetDataAsync()
{
    try
    {
        this.IsBusy = true;
        var response = await this.client.GetAsync("api/customers");
        ...
    }
    catch (Exception e)
    {
        // TODO: Handle exceptions
    }
    finally
    {
        this.IsBusy = false;
    }
}

The GetData method sets the IsBusy property to true prior to running the query to fetch the customer information. The finally block ensures that the IsBusy property is set back to false, even if an exception occurs.

Open the MainPage.xaml file in the Design View window.

In the XAML pane, add as the first item in the top-level Grid control the ProgressRing control shown in bold in the following code:

<Grid Style="{StaticResource GridStyle}">
    <ProgressRing HorizontalAlignment="Center"
VerticalAlignment="Center" Foreground="AntiqueWhite"
Height="100" Width="100" IsActive="{Binding IsBusy}"
Canvas.ZIndex="1"/>
    <Grid x:Name="customersTabularView" Margin="40,104,0,0" ...>
    ...

Setting the Canvas.ZIndex property to “1” ensures that the ProgressRing appears in front of the other controls displayed by the Grid control.

On the Debug menu, click Start Debugging to build and run the app.

Notice that when the app starts, the progress ring briefly appears before the first customer is displayed. If you find that the first customer appears too quickly, you can introduce a small delay into the GetData method just to satisfy yourself that the progress ring is working. Add the following statement which pauses the method for 5 seconds:

public async Task GetData()
{
    try
    {
        this.IsBusy = true;
        await Task.Delay(5000);
        this.connection = new AdventureWorksEntities(...);
        ...
    }
    ...
}

Be sure to remove this statement when you have finished testing the progress ring.

Return to Visual Studio and stop debugging.

In the ViewModel.cs file, expand the region named Properties For “Busy” And Error Message Handling.

After the IsBusy property, add the private _lastError string variable and public LastError string property shown here:

private string _lastError = null;
public string LastError
{
    get { return this._lastError; }
    private set
    {
        this._lastError = value;
        this.OnPropertyChanged("LastError");
    }
}

In the Methods For Fetching And Updating Data region, find the GetDataAsync method. This method contains the following exception handler:

catch (Exception e)
{
    // TODO: Handle exceptions
}

After the // TODO: Handle errors comment, add the following code shown in bold:

catch (Exception e)
{
    // TODO: Handle exceptions
    this.LastError = e.Message;
}

In the else block immediately preceding the exception handler, after the // TODO: Handle GET failure comment, add the following code shown in bold:

else
{
    // TODO: Handle GET failure
    this.LastError = response.ReasonPhrase;
}

The ReasonPhrase property of the HttpResponseMessage object contains a string indicating the reason for the failure reported by the web service.

At the end of the if block, immediately preceding the else block, add the following statement shown in bold:

if
{
    ...
    this.IsAtEnd = (this.customers.Count == 0);
    this.LastError = String.Empty;
}
else
{
    this.LastError = response.ReasonPhrase;
}

This statement removes any error messages from the LastError property.

Find the ValidateCustomer method, and add the following statement shown in bold immediately before the return statement:

private bool ValidateCustomer(Customer customer)
{
    ...
    this.LastError = validationErrors;
    return !hasErrors;
}

The ValidateCustomer method populates the validationErrors variable with information about any properties in the Customer object that contain invalid data. The statement that you have just added copies this information to the LastError property.

Find the SaveAsync method. In this method, add the following code shown in bold to catch any errors and HTTP web service failures:

private async void SaveAsync()
{
    // Validate the details of the Customer
    if (this.ValidateCustomer(this.Current))
    {
        ...
        try
        {
            // If the user is adding a new customer,
            // send an HTTP POST request to the web service with the details
            if (this.IsAdding)
            {
                ...
                if (response.IsSuccessStatusCode)
                {
                    ...
                    if (newCust.IsSuccessStatusCode)
                    {
                        ...
                        this.IsBrowsing = true;
                        this.LastError = String.Empty;
                    }
                    else
                    {
                        // TODO: Handle GET failure
                        this.LastError = response.ReasonPhrase;
                    }
                }
                // TODO: Handle POST failure
                else
                {
                    this.LastError = response.ReasonPhrase;
                }
            }
            // The user must be editing an existing customer,
            // so send the details by using a PUT request
            else
            {
                ...
                if (response.IsSuccessStatusCode)
                {
                    this.IsEditing = false;
                    this.IsBrowsing = true;
                    this.LastError = String.Empty;
                }
                // TODO: Handle PUT failure
                else
                {
                    this.LastError = response.ReasonPhrase;
                }
            }
        }
        catch (Exception e)
        {
            // TODO: Handle exceptions
            this.LastError = e.Message;
        }
        finally
        {
            this.IsBusy = false;
        }
    }
}

Find the Discard method, and add the statement shown here in bold to the end of this method:

private void Discard()
{
    ...
    this.LastError = String.Empty;
}

On the Build menu, click Build Solution and verify that the app builds without any errors.

Open the MainPage.xaml file in the Design View window.

The XAML markup for the MainPage form has already been modified, and the following TextBlock controls have been added to the Grid controls that display the data:

<Page
    x:Class="Customers.MainPage"
    ...>
    <Grid Style="{StaticResource GridStyle}">
        ...
        <Grid x:Name="customersTabularView" ...>
            ...
            <Grid Grid.Row="2">
                ...
                <TextBlock Grid.Row="3" Grid.RowSpan="4"
Grid.Column="7" Style="{StaticResource ErrorMessageStyle}"/>
            </Grid>
        </Grid>
        <Grid x:Name="customersColumnarView" Margin="20,10,20,110" ...>
            ...
            <Grid Grid.Row="1">
                ...
                <TextBlock Grid.Row="6" Grid.Column="0"
Grid.ColumnSpan="2" Style="{StaticResource ErrorMessageStyle}"/>
            </Grid>
        </Grid>
    ...
    </Grid>
    ...
</Page>

The ErrorMessageStyle referenced by these TextBlock controls is defined in the AppStyles.xaml file.

Set the Text property of both TextBlock controls to bind to the LastError property of the ViewModel, as shown here in bold:

...
<TextBlock Grid.Row="3" Grid.RowSpan="4" Grid.Column="7"
Style="{StaticResource ErrorMessageStyle}" Text="{Binding LastError}"/>
...
<TextBlock Grid.Row="6" Grid.Column="0" Grid.ColumnSpan="2"
Style="{StaticResource ErrorMessageStyle}" Text="{Binding LastError}"/>

The TextBox and ComboBox controls on the form that display customer data should only allow the user to modify this data if the ViewModel is in Adding or Editing mode; otherwise, they should be disabled. Add the IsEnabled property to each of these controls, and bind it to the IsAddingOrEditing property of the ViewModel as follows:

...
<TextBox Grid.Row="1" Grid.Column="1" x:Name="id"
IsEnabled="{Binding IsAddingOrEditing}" .../>
<ComboBox Grid.Row="1" Grid.Column="3" x:Name="title"
IsEnabled="{Binding IsAddingOrEditing}" ...>
</ComboBox>
<TextBox Grid.Row="1" Grid.Column="5" x:Name="firstName"
IsEnabled="{Binding IsAddingOrEditing}" .../>
<TextBox Grid.Row="1" Grid.Column="7" x:Name="lastName"
IsEnabled="{Binding IsAddingOrEditing}" .../>
...
<TextBox Grid.Row="3" Grid.Column="3" ... x:Name="email"
IsEnabled="{Binding IsAddingOrEditing}" .../>
...
<TextBox Grid.Row="5" Grid.Column="3" ... x:Name="phone"
IsEnabled="{Binding IsAddingOrEditing}" .../>
...
...
<TextBox Grid.Row="0" Grid.Column="1" x:Name="cId" />
IsEnabled="{Binding IsAddingOrEditing}" .../>
<ComboBox Grid.Row="1" Grid.Column="1" x:Name="cTitle"
IsEnabled="{Binding IsAddingOrEditing}" ...>
</ComboBox>
<TextBox Grid.Row="2" Grid.Column="1" x:Name="cFirstName"
IsEnabled="{Binding IsAddingOrEditing}" .../>
<TextBox Grid.Row="3" Grid.Column="1" x:Name="cLastName"
IsEnabled="{Binding IsAddingOrEditing}" .../>
...
<TextBox Grid.Row="4" Grid.Column="1" x:Name="cEmail"
IsEnabled="{Binding IsAddingOrEditing}" .../>
...
<TextBox Grid.Row="5" Grid.Column="1" x:Name="cPhone"
IsEnabled="{Binding IsAddingOrEditing}" .../>

Add an app bar to the bottom of the page, immediately after the top app bar, using the <Page.BottomAppBar> element. This app bar should contain buttons for the AddCustomer, EditCustomer, SaveChanges, and DiscardChanges commands, as follows:

<Page ...>
    ...
    <Page.TopAppBar >
        ...
    </Page.TopAppBar>
    <Page.BottomAppBar>
        <AppBar IsSticky="True">
            <Grid>
                <StackPanel Orientation="Horizontal"
HorizontalAlignment="Right">
                    <AppBarButton x:Name="addCustomer"
Icon="Add" Command="{Binding Path=AddCustomer}"/>
                    <AppBarButton x:Name="editCustomer"
Icon="Edit" Command="{Binding Path=EditCustomer}"/>
                    <AppBarButton x:Name="saveChanges"
Icon="Save" Command="{Binding Path=SaveChanges}"/>
                    <AppBarButton x:Name="discardChanges"
Icon="Undo" Command="{Binding Path=DiscardChanges}"/>
                </StackPanel>
            </Grid>
        </AppBar>
    </Page.BottomAppBar>
</Page>

Note that the convention for commands on the bottom app bar is to group them together, starting on the right side. The icons referenced by the buttons are the standard images provided with the Windows Store App template.

On the Debug menu, click Start Debugging to build and run the app.

When the Customers form appears, notice that the TextBox and ComboBox controls are disabled. This is because the view is in Browsing mode.

Right-click the form and verify that the upper and lower app bars both appear.

You can use the First, Next, Previous, and Last buttons in the upper app bar as before (remember that the First and Previous buttons will not be enabled until you move away from the first customer). In the lower app bar, the Add and Edit buttons should be enabled, but the Save and Discard buttons should be disabled. This is because the AddCustomer and EditCustomer commands are enabled when the ViewModel is in Browsing mode, and the SaveChanges and DiscardChanges commands are only enabled when the ViewModel is in Adding or Editing mode.

In the bottom app bar, click Edit.

The buttons in the top app bar become disabled because the ViewModel is now in Editing mode. Additionally, the Add and Edit buttons are also disabled, but the Save and Discard buttons should be enabled. Furthermore, the data entry fields on the form should now be enabled, and the user can modify the details of the customer.

Modify the details of the customer: blank out the first name, type Test for the email address, type Test 2 for the phone number, and then click Save.

These changes violate the validation rules implemented by the ValidateCustomer method. The ValidateCustomer method populates the LastError property of the ViewModel with validation messages, and they are displayed on the form in the TextBlock that binds to the LastError property:

Click Discard, and verify that the original data is reinstated on the form, the validation messages disappear, and the ViewModel reverts to Browsing mode.

Click Add. The fields on the form should be emptied (apart from the ID field, which displays the value 0). Enter the details for a new customer. Be sure to provide a first name and last name, a valid email address of the form [email protected], and a numeric phone number (you can also include parentheses, hyphens, and spaces).

Click Save. If the data is valid (there are no validation errors), your data should be saved to the database. You should see the ID generated for the new customer in the ID field, and the ViewModel should switch back to Browsing mode.

Experiment with the app and try adding and editing more customers. Notice that you can resize the view to display the columnar layout and the form should still work.

When you have finished, return to Visual Studio and stop debugging.