How to call a method from SLDS button class?

Question

How can I call a method from my controller by using an SLDS VF page. I am using a button icon, that is showing on each record returned from a search. I would like when clicked to call a method from my controller. This is what I have:

<td>
  <button class="slds-button slds-button_icon slds-button_icon-brand" title="Create Contact">
    <svg class="slds-button__icon slds-icon_small" aria-hidden="true">
        <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
    </svg>
    <span class="slds-assistive-text">Create Contact</span>
  </button>
</td>

I did try adding action="{!newContactButton}" inside the button class after the title, but I get an error:

Unknown Property controller.method.

Typically with VF pages we define actionfunction, but I wonder with SLDS if I should use a different tag. If I use apex:commandbutton, things seem to work, but I would like to use icon button with button class tag. Thanks

Answer 1

You can still do it using action function as below:

<a onclick="myActionFunction('{!record.Id}');" class="slds-button slds-button_icon slds-button_icon-brand" title="Create Contact">
        <svg class="slds-button__icon slds-icon_small" aria-hidden="true">
            <use xlink:href="{!URLFOR($Asset.SLDS, 'assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
        </svg>
        <span class="slds-assistive-text">Create Contact</span>
    </a>

    <apex:actionFunction name="myActionFunction" action="{!myApexAction}" reRender=""  >
        <apex:param name="recordId" value=""/>
</apex:actionFunction>

In Apex:

public void myApexAction(){

    //either of the next 2 lines will work, 
    string passedParam1 = Apexpages.currentPage().getParameters().get('recordId');
    string passedParam2 = system.CurrentPageReference().getParameters().get('recordId');
    system.debug(passedParam1);
    system.debug(passedParam2);

    // implement pagereference based on recordId
}