Silverlight: Interaction With ASP.NET and HTML elements

So, here I am back again… exploring silverlight this time.

The first kind of interaction I’m going to talk about is by using the HtmlElement & HtmlDocument classes. If you are well versed in html, and I’m going on a limb and assuming that most web developers are, the possibilities are enormous of making a really rich UI leveraging the processing power of the client machine and at the same time interacting at a root level with the page.

The following example illustrates a way of doing this. In the below example, using the mentioned classes, the testing1Div div is accessed and modified in the TextChanged event of the textbox in the Silverlight control. Thus, whatever you type in the TextBox would also appear in the div.

Preview of the Silverlight control: -

XAML: -

<UserControl x:Class="SilverlightExperiments.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
  <Grid x:Name="grdLayoutRoot" Width="350" Height="40" Background="White" VerticalAlignment="Center">
    <Grid.RowDefinitions>
      <RowDefinition Height="40"></RowDefinition>
      <RowDefinition Height="40"></RowDefinition>
    </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
      <ColumnDefinition Width="80"></ColumnDefinition>
      <ColumnDefinition Width="*"></ColumnDefinition>
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Row="0" Grid.Column="0" Text="Silverlight : " HorizontalAlignment="Center" VerticalAlignment="Center"></TextBlock>
    <TextBox x:Name="texting1TextBox" Grid.Row="0" Grid.Column="1" Width="260" Height="20" HorizontalAlignment="Left" VerticalAlignment="Center" TextChanged="TextBox_TextChanged" MouseEnter="texting1TextBox_MouseEnter" MouseLeave="texting1TextBox_MouseLeave" Background="LightGoldenrodYellow"></TextBox>
  </Grid>
</UserControl>

Code-behind in control: -

private void TextBox_TextChanged(object sender, TextChangedEventArgs e)
{
    HtmlElement element = HtmlPage.Document.GetElementById("testing1Div");
    element.SetProperty("innerText", texting1TextBox.Text);
}

HTML in the page using this control: -

<div>
  <asp:Silverlight ID="Silverlight1" runat="server" Source="~/ClientBin/SilverlightExperiments.xap" MinimumVersion="2.0.31005.0" Width="400" Height="40" />
  <br />
  <div>
    <div style="float: left; font-family: Calibri; font-size: 12px;">&nbsp;&nbsp;&nbsp;&nbsp;HTML Division : &nbsp;&nbsp;&nbsp;&nbsp;</div>
    <div id="testing1Div" style="font-family: Calibri; font-size: 12px; padding-left: 5px;"></div>
  </div>
</div>

The next example I’d like to show you is an interaction of Silverlight control and an ASP.NET control. So, yeah Silverlight runs on the client side. So, no server-side code. However, that doesn’t stop us from making server calls using some of the ASP.NET controls on the page does it? well, let’s see then.

The below example shows how by clicking on the Silverlight button, the click event of a normal ASP.NET button on the same page is invoked. Again, if you think in the right direction, the possibilities are endless.

Preview of the Silverlight control: -

XAML: -

<UserControl x:Class="PostbackUsingSilverlight.Page"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             Width="160"
             Height="40">
  <Grid x:Name="LayoutRoot" Background="White">
    <Button x:Name="postbackButton" Click="postbackButton_Click" Content="Silverlight Button"></Button>
  </Grid>
</UserControl>

Code-behind in control: -

private void postbackButton_Click(object sender, RoutedEventArgs e)
{
    HtmlPage.Document.GetElementById("Button2").Invoke("Click", null, null);
}

HTML in the page using this control: -

<div style="text-align: center;">
  <asp:Silverlight ID="Silverlight2" runat="server"
                   Source="~/ClientBin/PostbackUsingSilverlight.xap"
                   MinimumVersion="2.0.31005.0" Width="160" Height="40" />
  &nbsp;&nbsp;&nbsp;
  <asp:Button ID="Button2" runat="server" Text="ASP.NET Button"
              Width="160" Height="40"
              OnClick="Button2_Click" />
  <br />
  <asp:Label ID="postbackPopulatedLabel" runat="server" Text="Default Value">
  </asp:Label>
</div>

Since I’m still a noob to Silverlight, that’s it for now. More to come as I continue my exploits.

Till then, Cya.