I had a requirement to send few parameters to silverlight from aspx
page. One of the option I had was to send the parameters as initparams, but initparams
are visible in the page source. Another one was to send the parameters using
JQuery or simple javascript. To go with approach, there is a problem. The problem is not with writing a javascript but
is to send parameters to the silverlight function or to call a javascript function
from silverlight.
To use JQuery we need to add a small javascript file to your
project. Once it is done the rest of the things become very easy. You can
get the
JQuery file here.
Calling Silverlight function from JQuery functionCalling Silverlight
function from JQuery function
A function in silverlight cannot be understood by a jquery function directly.
now to call the JQuery or to trigger an event we will make a hyperlink, and on click of that we will call the JQuery that will in turn call the silverlight function
. We will write a small script that would be called on this hyperlink's
click.
<head>
<script language="javascript" type="text/javascript">
$(function() { $("#_time").click(callGetTimeFunc); });
function callGetTimeFunc() {
document.getElementById("SLinteractionXapMarker").Content.MainPage.GetTime();
}
</script>
</head>
<a id="_time" href="default.aspx">Get Time</a>
page. One of the option I had was to send the parameters as initparams, but initparams
are visible in the page source. Another one was to send the parameters using
JQuery or simple javascript. To go with approach, there is a problem. The problem is not with writing a javascript but
is to send parameters to the silverlight function or to call a javascript function
from silverlight.
To use JQuery we need to add a small javascript file to your
project. Once it is done the rest of the things become very easy. You can
get the
JQuery file here.
Calling Silverlight function from JQuery functionCalling Silverlight
function from JQuery function
But we can always make it understand a silverlight function using a simple
[ScriptableMember] tag which indicates that a particular function or
event is accessible to a javascript function. We can add it on a function or
event in silverlight like this
[ScriptableMember] tag which indicates that a particular function or
event is accessible to a javascript function. We can add it on a function or
event in silverlight like this
namespaceJQuerySLinteraction
{
public partial class MainPage : UserControl
{
string time;
publicMainPage( )
{
InitializeComponent( );
HtmlPage.RegisterScriptableObject("MainPage", this);
}
[ScriptableMember]
public void GetTime( )
{
time = DateTime.Now.ToShortTimeString( );
time_txt.Text = time;
}
}
}
{
public partial class MainPage : UserControl
{
string time;
publicMainPage( )
{
InitializeComponent( );
HtmlPage.RegisterScriptableObject("MainPage", this);
}
[ScriptableMember]
public void GetTime( )
{
time = DateTime.Now.ToShortTimeString( );
time_txt.Text = time;
}
}
}
...and in the aspx page you first need to give an id to your silverlight objcet
tag. In the example I have given the id as SLinteractionXapMarker.
You will have to add the source of the .js file which you downloaded to support
the JQery and make your work easier and efficient. The code with the id and
source of js would look like this..
tag. In the example I have given the id as SLinteractionXapMarker.
You will have to add the source of the .js file which you downloaded to support
the JQery and make your work easier and efficient. The code with the id and
source of js would look like this..
<head> <script src="../Scripts/jquery.min.js" type="text/javascript"></script> </head> <body> <div id="silverlightControlHost"> <object data="data:application/x-silverlight-2," id="SLinteractionXapMarker" type="application/x-silverlight-2" width="100%" height="100%"> <param name="source" value="ClientBin/JQuerySLinteraction.xap" /> <param name="onError" value="onSilverlightError" /> <param name="background" value="white" /> <param name="minRuntimeVersion" value="3.0.40624.0" /> <param name="autoUpgrade" value="true" /> <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" style="text-decoration: none"> <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none" /> </a> </object> <iframe id="_sl_historyFrame" style="visibility: hidden; height: 0px; width: 0px; border: 0px"></iframe> </body>
now to call the JQuery or to trigger an event we will make a hyperlink, and on click of that we will call the JQuery that will in turn call the silverlight function
. We will write a small script that would be called on this hyperlink's
click.
<head>
<script language="javascript" type="text/javascript">
$(function() { $("#_time").click(callGetTimeFunc); });
function callGetTimeFunc() {
document.getElementById("SLinteractionXapMarker").Content.MainPage.GetTime();
}
</script>
</head>
<a id="_time" href="default.aspx">Get Time</a>
Note that the #_time is identifying which hyperlink is clicked. The
SLinteractionXapMarker is identifying
which xap has to be addressed, MainPage
is with which we have registered the scriptable object. We can pass any
parameters as well in this way.
Happy Coding!
SLinteractionXapMarker is identifying
which xap has to be addressed, MainPage
is with which we have registered the scriptable object. We can pass any
parameters as well in this way.
Happy Coding!
Twitter
Facebook
Digg
Delicious
Stumble
5 comments:
Hi,
You also need to define the class as [ScriptableType]. right?
Hi Nishikant Kotgire,
Defining the class as [ScriptableType] is true if I want the entire class to be exposed to the JS function. Since in this particular example I just wanted one of my methods to be exposed,I have made only that method as ScriptableMember.
Hi Ramya,
Please provide the option for downloading the source code also, that will help much better.
Thanks :)
Hello,
I am stuck with this issue for many days....
Please provide the source code or elaborate the steps in detail...
Waiting for your reply,
Please reply soon
Regards,
Rasika
Hey Rasika,
What is it that you are stuck in
Post a Comment