Silverlight JSON Example

The object below with the coral-colored background is a Silverlight object. It features two controls, a datagrid above and a textbox below. Data from a JSON object fills both on the loading of this HTML page.

Click the headings of the datagrid "FirstName", "LastName", etc. to sort the column contents. You can also drag the columns of the datagrid left and right, as well as resize the columns' width.

Selected entries in the textbox below evoke a JavaScript alert.

The JSON object

[{"City":"Queen Creek","FirstName":"Tim","LastName":"Heuer",
"Website":"http:\/\/timheuer.com\/blog\/"},
{"City":"Portland","FirstName":"Scott","LastName":"Hanselman",
"Website":"http:\/\/hanselman.com\/blog\/"},
{"City":"Redmond","FirstName":"Scott","LastName":"Guthrie",
"Website":"http:\/\/weblogs.asp.net\/scottgu"},
{"City":"New Hampshire","FirstName":"Joe","LastName":"Stagner",
"Website":"http:\/\/joestagner.net"},
{"City":"Boston","FirstName":"Jesse","LastName":"Liberty",
"Website":"http:\/\/silverlight.net\/blogs\/jesseliberty"}]		
		

This JSON object resides in the ClientBin subdirectory beside the SilverlightJSON.xap file for this application. Thus the Silverlight object is making a HTTPRequest back to its server of origin.

XAML

<UserControl xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"  
    x:Class="SilverlightJSON.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml">
    <Grid x:Name="LayoutRoot" Background="White">
        <StackPanel Background="Coral" Width="800" Orientation="Vertical">
  
            <TextBlock Text="Display all data with datagrid" Margin="10"></TextBlock>
            
            <data:DataGrid 
                x:Name="myDataGrid"                               
                Background="White"
                AlternatingRowBackground="Aquamarine"
                Width="700">                
            </data:DataGrid>
           
            <TextBlock x:Name="heading" 
			   Text="Display LastName with ListBox" Margin="10"></TextBlock>
            
            <ListBox x:Name="myListBox" 
			   DisplayMemberPath="LastName" 
			   Width="150" 
			   SelectionChanged="myListBox_SelectionChanged"></ListBox> 
            
        </StackPanel>
              
    </Grid>
</UserControl>

Page.xaml.cs

using System;
using System.Collections.Generic;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.IO;
using System.Xml.Linq;
using System.Linq;
using System.Runtime.Serialization.Json;
using System.Windows.Browser;

namespace SilverlightJSON
{
    public partial class Page : UserControl
    {
        public Page()
        {
            InitializeComponent();
			
            // Make HttpRequest in page load
			
            WebClient proxy = new WebClient();
            proxy.OpenReadCompleted += new OpenReadCompletedEventHandler(proxy_OpenReadCompleted);
            proxy.OpenReadAsync(new Uri("people.js", UriKind.Relative));
        }
  
        // Unpack the server response
        void proxy_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
        {            
    
            Stream strm = e.Result;
            DataContractJsonSerializer ser = new DataContractJsonSerializer(typeof(Person[]));
            Person[] ppl = (Person[])ser.ReadObject(strm);

            if (ppl.Length > 0)
            {

               myDataGrid.SelectedIndex = -1;
               // Give the Person array to the datagrid
               myDataGrid.ItemsSource = ppl;
               // Give the Person array to the textbox
               myListBox.ItemsSource = ppl; 
            
            };
             
        }

        // User event on the textbox
        private void myListBox_SelectionChanged(object sender, SelectionChangedEventArgs e)
        {
            Person p = (Person)myListBox.SelectedItem;
            HtmlPage.Window.Invoke("showLastName", p.LastName.ToString());
            
        }

   
    }
    
    public class Person
    {
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string City { get; set; }
        public string Website { get; set; }
    }
}

HTML

   <script type="text/javascript">

        function showLastName(inStr) {

            alert("You selected " + inStr);

        }
    
    </script>