b

blu

Monday, 14 May 2012

How to Call Javascript Elements from Silverlight

Step 1) Create Silverlight Project
Step 2)  Add following element to Silverlight hosted page
           <p id="ID1">Hello SIlverlight from HTML</p>
Step 3) Add following code in Page_Load / button event handler.
Step 4) In order to access html content in Silverlight


             using System.Windows.Browser; //should be added
             HtmlElement ele=HtmlPage.Document.GetElementById("ID1");
            MessageBox.Show(ele.GetAttribute("innerHTML").ToString());


Sample Code:


XAML


<Grid x:Name="LayoutRoot" Background="White">
        <TextBox Height="36" HorizontalAlignment="Left" Margin="10,10,0,0" Name="textBox1" VerticalAlignment="Top" Width="364" />
        <Button Content="Button" Height="23" HorizontalAlignment="Left" Margin="12,87,0,0" Name="button1" VerticalAlignment="Top" Width="75" Click="button1_Click" />
    </Grid>

in MainPage.xaml.cs

private void button1_Click(object sender, RoutedEventArgs e)
        {
            HtmlElement ele=HtmlPage.Document.GetElementById("ID1");

            textBox1.Text=ele.GetAttribute("innerHTML").ToString();
        }


SilverlightHostedTestPage.aspx/html

    <form id="form1" runat="server" style="height:100%">
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight-2," type="application/x-silverlight-2" width="100%" height="100%">
 <param name="source" value="ClientBin/SilverlightApplication6.xap"/>
 <param name="onError" value="onSilverlightError" />
 <param name="background" value="white" />
 <param name="minRuntimeVersion" value="4.0.50826.0" />
 <param name="autoUpgrade" value="true" />
 <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=4.0.50826.0" style="text-decoration:none">
   <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
 </a>
   </object><iframe id="_sl_historyFrame" style="visibility:hidden;height:0px;width:0px;border:0px"></iframe></div>
        <p id="ID1">Hello SIlverlight from javascript</p>
    </form>

No comments:

Post a Comment