asp.net ajax 1.0中detailview与updatepanel混合使用的例子

    在asp.net ajax 1.0中，如果有一个detailview控件，想做到每点detailview中的每行，在旁边显示出这条记录的detail情况（master-detail的效果的话），可以使用updatepanel控件实现
　　首先，创建一个自定义web控件webusercontrol,ascx,把detailviw控件放到updatepanel控件内，detailview控件如下:

 

1. <asp:UpdatePanel ID="UpdatePanel1" runat="server" >
2.     <ContentTemplate>
3.         <asp:Label ID="Label1" runat="server" Text="作者的详细信息"></asp:Label><br />
4.         <asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="False" DataKeyNames="au_id"
5.             DataSourceID="SqlDataSource1" Height="50px" Width="438px">
6.             <Fields>
7.                 <asp:BoundField DataField="au_id" HeaderText="au_id" ReadOnly="True" SortExpression="au_id" />
8.                 <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
9.                 <asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" />
10.                 <asp:BoundField DataField="phone" HeaderText="phone" SortExpression="phone" />
11.                 <asp:BoundField DataField="address" HeaderText="address" SortExpression="address" />
12.                 <asp:BoundField DataField="city" HeaderText="city" SortExpression="city" />
13.                 <asp:BoundField DataField="state" HeaderText="state" SortExpression="state" />
14.                 <asp:BoundField DataField="zip" HeaderText="zip" SortExpression="zip" />
15.                 <asp:CheckBoxField DataField="contract" HeaderText="contract" SortExpression="contract" />
16.             </Fields>
17.         </asp:DetailsView>
18.         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>"
19.             SelectCommand="SELECT * FROM [authors] where au_id=@authid">
20.             <SelectParameters>
21.                 <asp:Parameter Name="authid" />
22.             </SelectParameters>
23.         </asp:SqlDataSource>
24.     </ContentTemplate>
25. </asp:UpdatePanel>

其中用的是pubs数据库，这里用detailview控件根据主(master)gridview的author ID来显示其详细信息，还要为此控件加两个属性和一个方法，

 

1. public partial class WebUserControl : System.Web.UI.UserControl
2. {
3.     
4.     private string _authorID;
5.     //定义主键属性
6.     public string AuthorID
7.     {
8.         get { return _authorID; }
9.         set
10.         {
11.             _authorID = value;
12.             this.SqlDataSource1.SelectParameters["authid"].DefaultValue = _authorID;
13.             SqlDataSource1.DataBind();
14.         }
15.     }
16.     //定义UpdatePanel的更新模式
17.     public UpdatePanelUpdateMode UpdateMode
18.     {
19.         get { return this.UpdatePanel1.UpdateMode; }
20.         set { this.UpdatePanel1.UpdateMode = value; }
21.     }
22.     //定义更新方法
23.     public void Update()
24.     {
25.         //调用内容方法
26.         this.UpdatePanel1.Update();
27.     }
28. }

然后在default.aspx中添加一个updatepanel和gridview，显示所有的作者

 

1. <asp:ScriptManager ID="ScriptManager1" runat="server" />
2.         <div>
3.             <table style="width: 481px">
4.                 <tr>
5.                     <td style="width: 240px">
6.                         <asp:UpdatePanel ID="UpdatePanel1" runat="server">
7.                             <ContentTemplate>
8.                         <asp:GridView ID="GridView1" runat="server" AllowPaging="True" AutoGenerateColumns="False"
9.                             DataSourceID="SqlDataSource1" OnSelectedIndexChanged="GridView1_SelectedIndexChanged"
10.                             Width="243px" DataKeyNames="au_id">
11.                             <Columns>
12.                                 <asp:CommandField ShowSelectButton="True" />
13.                                 <asp:BoundField DataField="au_lname" HeaderText="au_lname" SortExpression="au_lname" />
14.                                 <asp:BoundField DataField="au_fname" HeaderText="au_fname" SortExpression="au_fname" />
15.                             </Columns>
16.                         </asp:GridView>
17.                         <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:pubsConnectionString %>"
18.                             SelectCommand="SELECT [au_lname], [au_fname], [au_id] FROM [authors]"></asp:SqlDataSource>
19.                             </ContentTemplate>
20.                         </asp:UpdatePanel>
21.                     </td>
22.                     <td>
23.                         <uc1:WebUserControl id="WebUserControl1" runat="server">
24.                         </uc1:WebUserControl></td>

并且要写gridview的selectedindexchanged事件，当用户选择了某位作者后，可以马上在webusercontrol控件中显示出其详细信息

1. protected void GridView1_SelectedIndexChanged(object sender, EventArgs e)
2.     {
3.         //判断是否选中了GridView
4.         if (GridView1.SelectedIndex == -1)
5.         {
6.             WebUserControl1.AuthorID = GridView1.DataKeys[0].Value.ToString();
7.         }
8.         else
9.         {
10.             WebUserControl1.AuthorID = GridView1.DataKeys[GridView1.SelectedIndex].Value.ToString();
11.         }
12.         //必须将更新控件的模式设置为"conditional"
13.         WebUserControl1.UpdateMode = UpdatePanelUpdateMode.Conditional;
14.         //更新数据
15.         WebUserControl1.Update();
16.     }