Controller Interaction (Part 5 of 6)

This part of the tutorial will show how to invoke code on the page controller from the UI.

Adding a second button to the Overview page

Just like the OpenPage button we added in a previous part of the tutorial, this is completely up to you on how you do this. If you completed the steps back then, you can go ahead and do the following to add the button:

1. Open the XAML view of the Overview page, Overview.xaml.
2. Wrap the Edit button in a StackPanel with Orientation set to Horizontal, and add a second button:
   
   

   <StackPanel HorizontalAlignment="Right" Height="30" Margin="0, 10, 0, 0" 

               Orientation="Horizontal">

       <Button Width="75" Content="Edit" 

              Command="{vi:OpenPage CustomerEdit}" 

              CommandParameter="{Binding SelectedItem,ElementName=PART_2}"
                               />

       <Button Width="125" Content="Make phonecall" 

              Command="{vi:HandledByController MakePhonecall}" 

              CommandParameter="{Binding SelectedItem, ElementName=PART_2}"
                               />

   </StackPanel>

   Note: Notice the HandledByController extension. This will invoke the MakePhonecall method on the Overview pagecontroller. Passing the selected customer as argument.

3. Implement a MakePhonecall on the Overview pagecontroller by opening the Overview.cs file in the AdventureWorksDemo.Module project (under Customers\PageControllers):



public void MakePhonecall(Customer entity)

 {

 // PhoneHelper.StartCall(entity.Phone);

 }



4. Optionally, you can set a breakpoint at the beginning of this method to verify that the code is called.

Launching the application

1. Run the application by pressing CTRL+F5 or the Play button on the toolbar.
2. In the application, click the Customers module.
3. Select a customer from the list and click Make phonecall at the bottom. This will invoke the code in the MakePhonecall method.