Nowadays, with the increasing adoption of Silverlight, it is not uncommon to integrate one or more Silverlight controls in an existing asp.net website. More or less, it utilizes the integration logic demonstrated in this Telerik TV entry - http://tv.telerik.com/watch/silverlight/webinar/radcontrols-silverlight-aspnet and Manol’s blogpost - http://blogs.telerik.com/manoldonev/posts/09-03-17/silverlight_radchart_interoperability_with_asp_net.aspx . If you want to know how RadMap for Silverlight can be bound to RadGrid in ASP.NET go ahead and keep reading.
The most important steps are as follows:
1. Prepare the Silverlight application, adding references to the dlls of the controls it contains. In our case, this is a simple XAML page, containing a RadMap control:
Code Snippet
- <UserControl x:Class="RadChartInASP.NET.Page"
- xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
- xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
- xmlns:telerikMap="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.DataVisualization"
- Width="700" Height="400">
- <Grid>
- <telerikMap:RadMap x:Name="radMap">
- </telerikMap:RadMap>
- </Grid>
- </UserControl>
2. The next important segment is the aspx page, which will host the SL object. Again, this is pretty straightforward. In our case, it contains a RadGrid component, along with the mandatory ScriptManager. There are two interesting details:
- The Silverlight object, which is directly embedded in the aspx page contains the map control.
- The pluginLoaded event handler - here you can obtain a reference to the Silverlight plugin that secures the interaction between the ASP.NET Grid control and the Silverlight RadMap.
The code below demonstrates this:
As evident from the code above, once we have a reference to the SL plugin in the pluginLoaded event handler, we can communicate with the Map control:
Code Snippet
- silverlightControl.content.slChartPage.MyMapCenter(latitude, longitude);
The last piece of the puzzle is how the JavaScript method call is handled, as well as how it is correlated with the xaml page. This is done in the xaml codebehind via the following methods:
Code Snippet
- [ScriptableMember]
- public void MyMapCenter(string latitude, string longitude)
- {
- this.radMap.Center = new Location(double.Parse(latitude), double.Parse(longitude));
- this.radMap.ZoomLevel = 7;
- }
-
- [ScriptableMember]
- public void CommandBarVisibility(bool isChecked)
- {
- if (isChecked)
- {
- this.radMap.CommandBarVisibility = System.Windows.Visibility.Collapsed;
- }
- else this.radMap.CommandBarVisibility = System.Windows.Visibility.Visible;
- }
-
- [ScriptableMember]
- public void ZoomBarVisibility(bool isChecked)
- {
- if (isChecked)
- {
- this.radMap.ZoomBarVisibility = System.Windows.Visibility.Collapsed;
- }
- else this.radMap.ZoomBarVisibility = System.Windows.Visibility.Visible;
- }
-
- [ScriptableMember]
- public void ScaleVisibility(bool isChecked)
- {
- if (isChecked)
- {
- this.radMap.ScaleVisibility = System.Windows.Visibility.Collapsed;
- }
- else this.radMap.ScaleVisibility = System.Windows.Visibility.Visible;
- }
-
- [ScriptableMember]
- public void MouseLocationIndicatorVisibility(bool isChecked)
- {
- if (isChecked)
- {
- this.radMap.MouseLocationIndicatorVisibility = System.Windows.Visibility.Collapsed;
- }
- else this.radMap.MouseLocationIndicatorVisibility = System.Windows.Visibility.Visible;
- }
-
- [ScriptableMember]
- public void NavigationVisibility(bool isChecked)
- {
- if (isChecked)
- {
- this.radMap.NavigationVisibility = System.Windows.Visibility.Collapsed;
- }
- else this.radMap.NavigationVisibility = System.Windows.Visibility.Visible;
- }
The [ScriptableMember] attribute indicates that a specific method is accessible to JavaScript callers. The Page_Loaded event handler registers the script key, and the MyMapCenter method handles the centering of the Map control, based on the latitude and longitude coordinates.
Voila – the result:
You can download the full source code from
here
We hope you find this article useful - if you have any feedback, drop us a line here!
Happy coding!