Add an Action Method to a Controller - Visualforce

In this lesson you add an action method, a method that is invoked when the user of your Visualforce page clicks on a button or link. You previously used such a method,save(), on the standard controller—now you’ll write your own. The goal is to modify the page to dynamically display a selected account record’s list of contacts.

1. Click MyController to edit the controller for your Visualforce page.
2. Below the line public class MyController { add the following two lines:

   public Id selectedAccount { get; set; }  
   public List<Contact> contactsInformation { get; set; }

   This creates two properties. The first, selectedAccount, is an identifier, while the second, contactsInformation, is a list of Contact records.
3. Click AccountWithContacts to edit the Visualforce page, and add the following snippet just below the </apex:form> line:

   <apex:outputPanel id="ContactDetail">
       <apex:repeat value="{! contactsInformation}" var="contact">
           <p>{! contact.FirstName & ' ' & contact.LastName}</p>
       </apex:repeat>
   </apex:outputPanel>

   This iterates over the list of contacts (remember, contactsInformation is defined to return List<Contact>), displaying their first and last names.
   At this point, you can save the page and you’ll notice no change. What you need to do now is ensure that when an account name is clicked, thecontactsInformation property is populated with that account record’s contacts.
4. Modify your controller by clicking MyController and adding the following before the final brace:

   public void accountClicked() {
       contactsInformation = [SELECT FirstName, LastName FROM Contact 
               WHERE AccountID = :selectedAccount];
   }

5. Replace the line <apex:outputTextvalue="{! acct.name}"/> in your Visualforce page with the following:

   <apex:commandlink action="{! accountClicked}" rerender="ContactDetail"> <apex:outputText value="{! acct.name}"/>
       <apex:param name="id" value="{! acct.Id}" assignTo="{!selectedAccount}"/>
   </apex:commandLink>

   This uses the rerender attribute to ensure that the output panel is refreshed using an Ajax update.
6. Click Save.
   Now when you select an account record with related contacts, the contacts for that record are dynamically displayed below the list of accounts.

A lot happens when you click the name of an account:

• Because an <apex:param> component is supplied, the ID of the current account is first assigned to the property selectedAccount in the controller. So now the controller knows which account you selected.
• Because the account name is wrapped in an <apex:commandLink> component, the method indicated in the action attribute, accountClicked(), is invoked.
• When the accountClicked() method runs, it performs a simple query, using the selectedAccount identifier, and assigns the result to thecontactsInformation property.
• Because the <apex:commandLink> component has a rerender attribute, the output panel dynamically renders, which in turn iterates over thecontactsInformation and displays the contacts’ names.

That’s a lot to digest! Take your time, experimenting by removing attributes, modifying the methods, and noting what changes occur. Also, refer back to Tutorial #11: UpdatingVisualforce Pages with Ajax to learn more about the Ajax effect.