How to access the Sharepoint control from Silverlight module through javascript

In the Previous post we accessed the public method inside the SIlverlight module from an .aspx page ,In this we are doing vice versa.

As per our objective we have a control inside a master page of a sharepoint site and a Silverlight control is hosted inside the webpart of a sharepoint page.So we need to access the sharepoint control when we click any button inside the Silverlight module through javascript.

So here are objective is to first access the control and then append a span tag to display some text inside the control on click of some button inside Silverlight control.

Followed Approach:

·          Go to the Page load event and include the below code snippet

--------------------------------------------------------------------------------------

HtmlPage.RegisterScriptableObject("page", this);

           

            HtmlDocument doc = HtmlPage.Document;

            strControlInnerHTMLGlobal = doc.GetElementById("SharepointControlID").GetProperty("innerHTML");

           

            strControlInnerHTML = strControlInnerHTMLGlobal + "<span >&gt;</span><span >Added in Sharepoint control through Silverlight button click </span>";

            doc.GetElementById("SharepointControlID").SetProperty("innerHTML", strControlInnerHTML);

           

--------------------------------------------------------------------------------------

In above code snippet "SharepointControlID” is the ClientId of sharepoint control.

 We are taking the object of control through its ClientId and then getting the innerHTML of the control which is in the form ‘span’ tags, and then we are appending the required span tag in the control.

Note: Here we are using GetProperty and SetProperty method through which we get the innerHTML of the control and then we can change the value as per our requirement.

Happy Coding J

How to access the silverlight method through javascript

Fisrt time I am writing anything about Silverlight part .

Here scenario is that we need to access a control inside silverlight application and then need to execute some operation on that control through javascript which is written outside the silverlight application ,now consider it inside the hosting .aspx page.

Since directly we cannot access the silverlight control in the javascript as on rendering of page ,silverlight control does not come in the viewsource of the page. So the approach to expose the control is to access the public method inside silverlight application and then perform the required operation.

To achieve this functionality we are following the below approach

• In the Loaded event or the constructor of the page we have to make call to the ( RegisterScriptableObject) method. It accepts two parameters:
• A name, which  is used to  make calls to the application.
• An object, which will be called.

Code snippet which is required to be added in the loaded event of the

HtmlPage.RegisterScriptableObject("page", this);

Note: Here ‘this’ is the page object.

We can call only public methods in Silverlight application from javascript . If we  want a method to be accessed from JavaScript, you have to add the ‘ScriptableMember’ attribute before the method declaration. Code Snippet which is to be added inside the xaml.cs of the control :

    [ScriptableMember]

        public void Start()

        {

// Do Something

        }

Now to access this public method from javascript .write this javascript method inside the .aspx page or the place from where you want to call the javascript.

<script type="text/javascript" language="javascript">

       function CallSilverLight() {

           var slControl = document.getElementById("_slControl");

           slControl.Content.page.Start();

         

       }

   </script>

1)       Here id is the control ID of Silverlight control .

2)       In this statement slControl.Content.page.Start();

‘page’ is the name which we have given while registering the Scriptable control in the loaded event of the page

HtmlPage.RegisterScriptableObject("page", this);

3)       ‘Start’ is the name of the public method which is used to select the tab on click of breadcrumb menu which is inside sharepoint

And finally call this javascript from any control or  on page load as per the requirement.

Initially this seems to be bit tricky ,but this is very usefull approach for interaction between Silverlight and .aspx page.

Please write to me if you face any problem while implementing it or if there is any other better approach.

Happy Coding J