SharePoint: Invoke server side code on SharePoint ribbon click using javascript submit

In this series we will look at three different ways of achieving this.

1. Invoke server side code on SharePoint ribbon click using javascript submit

2. Invoke server side code on SharePoint ribbon click using javascript _dopostback

3. Invoke server side code on SharePoint ribbon click using SharePoint Page dialog

Solution:

Invoke server side code on SharePoint ribbon click using javascript submit

Create a SharePoint 2010 Empty project and an empty element to it. Then add Layouts mapped folder and add application page and javascript file inside it as shown in the following project snapshot.

Paste the following in the elements file:

<?xml version="1.0" encoding="utf-8"?>

<CustomAction

Id="RibbonDemo"

RegistrationType="List"

RegistrationId="100"

Location="CommandUI.Ribbon.ListView">

<CommandUIDefinition

Location="Ribbon.ListItem.Manage.Controls._children">

<Button

Id="Ribbon.ListItem.Manage.Controls.RibbonDemo"

Alt="Ribbon Demo"

Sequence="999"

Image16by16="/_layouts/images/placeholder32x32.png"

Image32by32="/_layouts/images/placeholder32x32.png"

Command="RibbonDemo"

LabelText="Ribbon Demo"

TemplateAlias="o1"

ToolTipTitle="Ribbon Demo"

ToolTipDescription="Ribbon Demo example."/>

</CommandUIDefinition>

</CommandUIDefinitions>

<CommandUIHandler

Command="RibbonDemo"

CommandAction="javascript:RibbonDemo();"

EnabledScript="javascript:RibbonDemoEnable();"/>

</CommandUIHandlers>

</CommandUIExtension>

</CustomAction>

<CustomAction Id="RibbonDemo.Scripts"

Location="ScriptLink"

ScriptSrc="/_Layouts/SharePointRibbonDemo/RibbonDemoScript.js" />

</Elements>

Add the following code in the javascript file:

function RibbonDemo() {

var context = SP.ClientContext.get_current();

var selectedItems = SP.ListOperation.Selection.getSelectedItems(context);

var listId = SP.ListOperation.Selection.getSelectedList();

var itemIds = "";

for (var i = 0; i < selectedItems.length; i++) {

itemIds += selectedItems[i].id + ",";

}

var pageUrl = SP.Utilities.Utility.getLayoutsPageUrl(

'/SharePointRibbonDemo/RibbonDemo.aspx?ids=' + itemIds + '&listId=' + listId);

var form = document.createElement("form");

form.setAttribute("method", "post");

form.setAttribute("action", pageUrl);

document.body.appendChild(form);

form.submit();

context.executeQueryAsync(Function.createDelegate(this, this.Success), Function.createDelegate(this, this.Failed));

}

function Success() {

// Specify success statement

}

function Failed(sender, args) {

alert('request failed ' + args.get_message() + 'n' + args.get_stackTrace());

}

function RibbonDemoEnable() {

var context = SP.ClientContext.get_current();

return SP.ListOperation.Selection.getSelectedItems(context).length >= 1;

}

In the above javascript following code is used to call the layouts page, so that server side code inside it is executed:

var pageUrl = SP.Utilities.Utility.getLayoutsPageUrl(

'/SharePointRibbonDemo/RibbonDemo.aspx?ids=' + itemIds + '&listId=' + listId);

var form = document.createElement("form");

form.setAttribute("method", "post");

form.setAttribute("action", pageUrl);

document.body.appendChild(form);

form.submit();

Finally in the code behind of the aspx page, we can write the server side code:

protected void Page_Load(object sender, EventArgs e)

{

// Get Selected List ID and Item IDs

string listID = Request["listId"].ToString();

String[] itemIdArray = Request["ids"].ToString().Split(new Char[] { ',' }, StringSplitOptions.RemoveEmptyEntries);

// Perform some code action here...

}

SharePoint: Invoke server side code on SharePoint ribbon click using javascript submit

Share this