Question

I have a Silverlight application with some maps, and in the same page this application is running, I have a table that describe the values related to the map. I want to create a way that when I put the mouse over some icon in the map, the row with the correspondent ID get highlighted. Is that even possible? I’m using simple asp tables, on ASP MVC.

Following AnthonyWJones’s instructions, I made this:

Silverlight

        private void MapClick(object sender, RoutedEventArgs e)
        {
            for (int i = 0; i < 4; i++)
            {
                System.Windows.Controls.Primitives.ButtonBase button = (System.Windows.Controls.Primitives.ButtonBase)VisualTreeHelper.GetChild(RegionCanvas, i);
                if (button.IsPressed)
                    HtmlPage.Window.Invoke("highlightRow",(int)button.DataContext);



            }
        }

aspx

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<script type="text/javascript">
    function highlightRow(id) {
        id = "porto" + id;
        document.getElementById(id).setAttribute("bgColor", "#123456");
    }
</script>


<%try{ %>
         <h2><%:(String) Model.FirstOrDefault().estado%></h2>   
          <%} %>
    <%catch (Exception e) { }%>


   <table id="tblLayout">
   <tr>
   <td><div style="height:300px"> 

        <object data="data:application/x-silverlight-2," 
            type="application/x-silverlight-2" height="300px" style="width: 400px">


          <param name="source" value="/ClientBin/MiniSIG.xap"/>

          <param name="onError" value="onSilverlightError" />
          <param name="background" value="white" />
          <param name="minRuntimeVersion" value="3.0.40818.0" />
          <%try{ %>
            <param name="initParams" value="startPage=<%:(String) Model.FirstOrDefault().estado%>" />
          <%} %>

          <%catch (Exception e) { }%>


          <%finally{
                if(Model.FirstOrDefault() == null){%>
            <param name="initParams" value="startPage=main" /> 
          <%} }%>
          <param name="autoUpgrade" value="true" />
          <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40818.0" style="text-decoration:none">
              <img src="http://go.microsoft.com/fwlink/?LinkId=161376" alt="Get Microsoft Silverlight" style="border-style:none"/>
          </a>
        </object>

    </div> </td>
   <td><table>
        <tr>
            <th>
                ID do Porto
            </th>
            <th>
                Nome
            </th>

            <th>
            Cidade
            </th>
            <th>
                ID da Cidade
            </th>
            <th>
                Tipo
            </th>
        </tr>

    <% foreach (var item in Model) { %>

        <tr id="porto<%: item.idporto %>">

            <td>
                <%: item.idporto %>
            </td>
            <td>
                <%: Html.ActionLink(item.nome, "../Portos/Details/"+item.idporto)%>
            </td>

            <td>
                <%: item.municipio %>
            </td>
            <td><%: item.idcidade %></td>
            <td>
                <%: item.tipo %>
            </td>
        </tr>

    <% } %>

    </table></td>
   </tr>

    </table>

    <p>
        <%: Html.ActionLink("Voltar", "Index") %>
    </p>

</asp:Content>

Can you tell me if I’m doing something wrong? I tried to run it, but it didn’t work.

Answer 1

There are a couple of ways to do this. The easiest would be to simply use HtmlPage.Window :-

HtmlPage.Window.Invoke("someJSFuncName", myID);

The containing page can contain a the Javascript:-

function someJSFuncName(theID)
{
    // Do Stuff with theID

}

Of course this creates a tight coupling between the Silverlight app and the page that may not be desirable. The other option is more complex using HtmlPage.RegisterScriptableObject. Its quite messy so I would only recommend it if you really need to de-couple the XAP from the host page.