Please have a look at my previous post which handles the communication in a easy way.Better use that technique whenever required.But Of course as per your requirements it may vary.
As I told in the earlier post we need to have understanding about Scriptable attribute,ScriptObject etc.I have listed some links which I feel explains the concept well.
- ScriptableType attribute: This tells that the type is accessible from script.Usually we decorate the Page class with this attribute.(See what MSDN tells)
- ScriptableMember attribute : Tells that this member is accessible from script.(See what msdn tells)
This uses the RegisterScriptableObject () method of HtmlPage class.(See what msdn says)
HtmlPage.RegisterScriptableObject("mainpage", this);//mainpage is the name in which DOM should access the object
Now we completed works in C#.Lets put that all together
[ScriptableType]
public partial class Page : UserControl {
public Page(){
InitializeComponent();
HtmlPage.RegisterScriptableObject("mainpage", this);
}
[ScriptableMember]
public void SetData(double val){
sldr.Value = val;//sldr is an object of Slider
}
}
At the javascript side we just need to get the object of plug in to invoke the method which is scriptable.
var Host = document.getElementById("Xaml1");//Xaml1 is id of Silverlight Control
Once we get the plug in just call
Host.content.mainpage.SetData(val);
Putting altogether
<head runat="server">
<title>Test Page For SilverlightApplication1title>
<script language="javascript">1: function setvalue() {2: var v=document.getElementById("txt");3: var val=parseFloat(v.value);4: var Host = document.getElementById("Xaml1");5: Host.content.mainpage.SetData(val);6: }</script>
</head>
<body style="height:300;margin:0;">
<form id="form1" runat="server" style="height:300;">
<asp:ScriptManager ID="ScriptManager1" runat="server">asp:ScriptManager>
<div style="height:300;">
<asp:Silverlight ID="Xaml1" runat="server" Source="~/ClientBin/SilverlightApplication1.xap" Version="2.0" Width="300" Height="300" />
</div>
<br />
<a href="#">HTML Areaa><br />
<input type="text" id="txt" /> <button onclick="setvalue()">Update Sliderbutton>
</form>
</body>
Sample available here.
No comments:
Post a Comment