#眉標=ASP.NET MVC、AJAX、Silverlight
#副標=ASP.NET網站開發與應用(6)
#大標=為ASP.NET網站引入Silverlight
#作者=文／圖 王寧疆



===<反灰>=============
using MVCWithSilverlight.Web.Models;
public ActionResult List()
{
  NorthwindDataContext db = new NorthwindDataContext(); //建立DataContext類別物件
  var customers = from customer in db.Customers
   select new
   {
    customer.CustomerID,
    customer.CompanyName
   }; //取出欄位內容值
   return Json(customers); //將內容轉換成JSON格式後傳回
}

public ActionResult Orders(string id)
{
  NorthwindDataContext db = new NorthwindDataContext(); //建立DataContext類別物件
   var orders = from order in db.Orders
    where(order.CustomerID == id)
    select new
    {
     order.OrderID,
     order.OrderDate,
     order.RequiredDate,
    }; //取出訂單記錄的欄位內容
  return Json(orders); //內容轉換成JSON格式後傳回
}
==<end>==============



===<反灰>=============
using MVCWithSilverlight.Web.Models;
public ActionResult Detail(int id)
{
  NorthwindDataContext db = new NorthwindDataContext(); //建立DataContext類別物件
   var orders = from order in db.Orders
    where order.OrderID == id
    select new
    {
     OrderID = order.OrderID,
     Name = order.OrderDate,
     Price = order.RequiredDate
    }; //取出OrderID的欄位內容值
 return Json(orders); 
}
==<end>==============




===<反灰>=============
<object data="data:application/x-silverlight-2," type="application/x-silverlight-2" 
  width="100%" height="100%">
  <param name="source" value="ClientBin/MVCWithSilverlight.xap"/>
  <param name="onError" value="onSilverlightError" />
  <param name="background" value="white" />
  <param name="minRuntimeVersion" value="3.0.40624.0" />
  <param name="autoUpgrade" value="true" />
  <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0" 
    style="text-decoration:none">
  <img src="http://go.microsoft.com/fwlink/?LinkId=108181" 
    alt="取得 Microsoft Silverlight" style="border-style:none"/>
  </a>
</object>
==<end>==============





===<反灰>=============
<StackPanel Orientation="Horizontal">
  <StackPanel Orientation="Vertical" Margin="0,0,25,0" x:Name="CustomerPanel">
    <TextBlock Text="請選擇客戶..." FontWeight="Bold" />
    <ListBox Width="200" Height="150" x:Name="CustomerList" ItemsSource="{Binding}" 
 	SelectionChanged="CustomerList_SelectionChanged" />
  </StackPanel>
  <StackPanel Orientation="Vertical" Margin="0,0,25,0" x:Name="OrderPanel" 
   Visibility="Collapsed">
    <TextBlock Text="請選擇訂單..." FontWeight="Bold" />
    <ListBox Width="200" Height="150" x:Name="OrderList" 
     SelectionChanged="OrderList_SelectionChanged" />
  </StackPanel>
  <StackPanel Orientation="Vertical" x:Name="OrderContent" Visibility="Collapsed">
    <TextBlock Text="訂單內容:" FontWeight="Bold" />
    <Grid>
     <Grid.RowDefinitions>
      <RowDefinition Height="Auto" />
      <RowDefinition Height="Auto" />
     </Grid.RowDefinitions>
    <Grid.ColumnDefinitions>
     <ColumnDefinition Width="Auto" />
     <ColumnDefinition Width="Auto" />
    </Grid.ColumnDefinitions>
    <TextBlock Grid.Column="0" Grid.Row="0" Text="訂購日期: " />
    <TextBox Width="200" Grid.Column="1" Grid.Row="0" Text="{Binding Path=OrderDate, 
Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" HorizontalAlignment="Left" VerticalAlignment="Top" />
    <TextBlock Grid.Column="0" Grid.Row="1" Text="交貨日期: " />
    <TextBox Width="200" Grid.Column="1" Grid.Row="1" 
     Text="{Binding Path=RequiredDate, 
Mode=TwoWay, NotifyOnValidationError=True, ValidatesOnExceptions=True}" HorizontalAlignment="Left" VerticalAlignment="Top" />
    </Grid>
  </StackPanel>
</StackPanel>
==<end>==============




===<反灰>=============
using System.Runtime.Serialization.Json;
Loaded += new RoutedEventHandler(Page_Loaded);
==<end>==============





===<反灰>=============
void Page_Loaded(object sender, RoutedEventArgs e)
{
  WebClient CustomerClient = new WebClient(); //建立WebClient類別物件
  CustomerClient.OpenReadCompleted += new OpenReadCompletedEventHandler(
  CustomerClient_OpenReadCompleted);//處理物件的OpenReadCompleted事件
  CustomerClient.OpenReadAsync(new Uri("http://localhost:8826/Customer/List"));//非同步瀏覽資料庫查詢客戶記錄的網頁
}
==<end>==============





===<反灰>=============
void CustomerClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
  DataContractJsonSerializer json = new DataContractJsonSerializer(
typeof(List<Customer>));//建立類別物件，負責解析型態為Customer類別的元素集合
  List<Customer> customers = (List<Customer>)
  json.ReadObject(e.Result); //取得傳回的JSON格式資料
  CustomerList.DisplayMemberPath = "CompanyName"; //設定CustomerList控制項繫結的資料庫記錄欄位
  CustomerPanel.DataContext = customers; //命令CustomerPanel控制項繫結至網站傳回內容
}
==<end>==============




===<反灰>=============
private void CustomerList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
  if (CustomerList.SelectedIndex > -1) //如果使用者有選擇客戶
  {
    OrderContent.Visibility = Visibility.Collapsed;	//顯示OrderContent
    Customer c = CustomerList.SelectedItem as Customer;	//取得使用者選取的記錄
    WebClient OrderClient = new WebClient(); //建立WebClient類別物件
    OrderClient.OpenReadCompleted += new OpenReadCompletedEventHandler(
OrderClient_OpenReadCompleted);	//處理物件的OpenReadCompleted事件
    OrderClient.OpenReadAsync(new  Uri(string.Format("http://localhost:8826/Customer/Orders/{0}", c.CustomerID.ToString()))); //以非同步的技巧瀏覽查詢網頁
  }
}
==<end>==============




===<反灰>=============
void OrderClient_OpenReadCompleted(object sender, OpenReadCompletedEventArgs e)
{
  DataContractJsonSerializer json = new DataContractJsonSerializer(
typeof(List<Order>)); //建立類別物件解析型態為Order類別的元素集合
  List<Order> orders = (List<Order>)
  json.ReadObject(e.Result); //取得網站傳回的JSON格式資料
  OrderList.DisplayMemberPath = "OrderID"; //設定OrderList控制項繫結的資料庫欄位
  OrderList.ItemsSource = orders; //命令CustomerPanel繫結至網站傳回的內容
  OrderPanel.Visibility = Visibility.Visible; //內容顯示在OrderPanel
}
==<end>==============



===<反灰>=============
private void OrderList_SelectionChanged(object sender, SelectionChangedEventArgs e)
{
if (OrderList.SelectedIndex > -1) //判斷是否有使用者選擇顯示的訂單記錄
  {
    Order p = OrderList.SelectedItem as Order; //取得該訂單記錄
    OrderContent.DataContext = p; //命令OrderContent繫結至訂單記錄
    OrderContent.Visibility = Visibility.Visible; //紀錄顯示在OrderContent
    }
}
==<end>==============





===<反灰>=============
public class Customer //描述客戶記錄
{
  public string CustomerID { get; set; } //管理欄位內容屬性
  public string CompanyName { get; set; } //管理CompanyName內容屬性
}

public class Order //描述訂單記錄
{
    public int OrderID { get; set; } //管理OrderID欄位屬性
    public DateTime OrderDate { get; set; } 
    public DateTime RequiredDate { get; set; }
}
==<end>==============





===<反灰>=============
<li><%= Html.ActionLink("客戶", "Index", "Customer")%></li>

//修改好的頁籤內容：
<div id="menucontainer">
  <ul id="menu">              
   <li><%= Html.ActionLink("Home", "Index", "Home")%></li>
   <li><%= Html.ActionLink("客戶", "Index", "Customer")%></li>
   <li><%= Html.ActionLink("About", "About", "Home")%></li>
  </ul>
</div>
==<end>==============