系列文章导航:
稳扎稳打Silverlight(1) - 1.0实例之电子表
稳扎稳打Silverlight(2) - 1.0实例之支持录音和回放的钢琴(Silverlight+ASP.NET AJAX+DLINQ)
稳扎稳打Silverlight(3) - 2.0控件之Border, Button, Calendar, Canvas, CheckBox, ComboBox
Default.aspx

<%
@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs"
Inherits="_10_Piano_Default" Title="支持录音和回放的钢琴" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">

<script type="text/javascript" src="../Silverlight.js"></script>

<script type="text/javascript" src="Default.aspx.js"></script>

<script type="text/javascript" src="Piano.xaml.js"></script>

<script type="text/javascript" src="Piano.js"></script>


<style type="text/css">
.silverlightHost

{
}{
height: 500px;
width: 1024px;
}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div id="SilverlightControlHost" class="silverlightHost">


<script type="text/javascript">
var txtInput = '<%= txtInput.ClientID %>';
var txtName = '<%= txtName.ClientID %>';
createSilverlight();
</script>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<div style="position: absolute; top: 0px; background-color: Red; color: White; z-index: 999">
Loading</div>
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView1" runat="server" Style="position: absolute; top: 0px;
width: 1024px" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
DataKeyNames="ID" DataSourceID="LinqDataSource1" RowStyle-HorizontalAlign="Center"
PageSize="2" OnSelectedIndexChanged="GridView1_SelectedIndexChanged">
<Columns>
<asp:CommandField ShowSelectButton="True" HeaderText="选择" ItemStyle-Width="40px"></asp:CommandField>
<asp:CommandField ShowDeleteButton="True" HeaderText="删除" ItemStyle-Width="40px"></asp:CommandField>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True"
SortExpression="ID" ItemStyle-Width="40px"></asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="名称" SortExpression="Name"></asp:BoundField>
<asp:TemplateField HeaderText="乐谱" SortExpression="Details" ItemStyle-Width="700px">
<ItemTemplate>
<div style="overflow: hidden; width: 666px">
<asp:Label ID="lblDetails" runat="server"
Text='<%# Bind("Details") %>'></asp:Label>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:TextBox ID="txtInput" runat="server" Style="position: absolute; left: 200px;
top: 434px; width: 300px" />
<asp:TextBox ID="txtName" runat="server" Style="position: absolute; left: 566px;
top: 434px;" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnAdd" />
</Triggers>
</asp:UpdatePanel>
<asp:LinqDataSource ID="LinqDataSource1" runat="server"
ContextTypeName="Data.MusicBookDataContext"
EnableDelete="True" TableName="MusicBook">
</asp:LinqDataSource>
<asp:Button ID="btnAdd" runat="server" Text="添加" Style="position: absolute; left: 710px;
top: 434px;" OnClick="btnAdd_Click" />
</div>
</asp:Content>

Default.aspx.cs
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;

public partial class _10_Piano_Default : System.Web.UI.Page


{
protected void Page_Load(object sender, EventArgs e)

{

}

protected void btnAdd_Click(object sender, EventArgs e)

{
Data.MusicBookDataContext mbdc = new Data.MusicBookDataContext();
Data.MusicBook mb = new Data.MusicBook();

mb.Name = txtName.Text;
mb.Details = txtInput.Text;

mbdc.MusicBook.Add(mb);
mbdc.SubmitChanges();

txtName.Text = "";
txtInput.Text = "";

GridView1.DataBind();
}

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)

{
txtName.Text = GridView1.Rows[GridView1.SelectedIndex].Cells[3].Text;
txtInput.Text = ((Label)GridView1.Rows[GridView1.SelectedIndex].Cells[4].FindControl("lblDetails")).Text;
}
}

Default.aspx.js
function createSilverlight()


{
var scene = new Webabcd.Piano();

Silverlight.createObjectEx(
{
source: "Piano.xaml",
parentElement: document.getElementById("SilverlightControlHost"),
id: "SilverlightControl",

properties:
{
width: "100%",
height: "100%",
version: "1.0",
isWindowless: "true"
},

events:
{
onLoad: Silverlight.createDelegate(scene, scene.handleLoad)
}
});
}


if (!window.Silverlight)

window.Silverlight =
{};


Silverlight.createDelegate = function(instance, method)
{

return function()
{
return method.apply(instance, arguments);
}
}