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
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"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
       <CustomAction
         Id="RibbonDemo"
         RegistrationType="List"
         RegistrationId="100"
         Location="CommandUI.Ribbon.ListView">
              <CommandUIExtension>
                     <CommandUIDefinitions>
                           <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>
                     <CommandUIHandlers>
                           <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...
        }
profile for Nadeem Yousuf at SharePoint Stack Exchange, Q&A for SharePoint enthusiasts

+