Example of mixed use of detailview and updatepanel in Asp.net Ajax 1.0

In Asp.net Ajax 1.0, if there is a detailview control, to achieve each row in the detailview, the detail of this record (the effect of master-detail) is displayed next to it.
Can be implemented using the updatepanel control.
First, create a custom web control webusercontrol and ascx, and put the detailviw control in the updatepanel control. The detailview control is as follows:
<Asp: updatepanel id = "updatepanel1" runat = "server">
<Contenttemplate>
<Asp: Label id = "label1" runat = "server" text = "detailed information of the author"> </ASP: Label> <br/>
<Asp: detailsview id = "detailsview1" runat = "server" autogeneraterows = "false" datakeynames = "au_id"
Datasourceid = "sqldatasource1" Height = "50px" width = "438px">
<Fields>
<Asp: boundfield datafield = "au_id" headertext = "au_id" readonly = "true" sortexpression = "au_id"/>
<Asp: boundfield datafield = "au_lname" headertext = "au_lname" sortexpression = "au_lname"/>
<Asp: boundfield datafield = "au_fname" headertext = "au_fname" sortexpression = "au_fname"/>
<Asp: boundfield datafield = "phone" headertext = "phone" sortexpression = "phone"/>
<Asp: boundfield datafield = "Address" headertext = "Address" sortexpression = "Address"/>
<Asp: boundfield datafield = "city" headertext = "city" sortexpression = "city"/>
<Asp: boundfield datafield = "state" headertext = "state" sortexpression = "state"/>
<Asp: boundfield datafield = "Zip" headertext = "Zip" sortexpression = "Zip"/>
<Asp: checkboxfield datafield = "contract" headertext = "contract" sortexpression = "contract"/>
</Fields>
</ASP: detailsview>
<Asp: sqldatasource id = "sqldatasource1" runat = "server" connectionstring = "<% $ connectionstrings: pubsconnectionstring %>"
Selectcommand = "select * from [authors] Where au_id = @ authid">
<Selectparameters>
<Asp: parameter name = "authid"/>
</Selectparameters>
</ASP: sqldatasource>
</Contenttemplate>
</ASP: updatepanel>
The pubs database is used. Here, the detailview control is used to display detailed information based on the Author ID of the master (master) gridview. Two attributes and a method are also added to the control,
Public partial class webusercontrol: system. Web. UI. usercontrol
{

Private string _ authorid;
// Define primary key attributes
Public String authorid
{
Get {return _ authorid ;}
Set
{
_ Authorid = value;
This. sqldatasource1.selectparameters ["authid"]. defaultvalue = _ authorid;
Sqldatasource1.databind ();
}
}
// Define the updatepanel update mode
Public updatepanelupdatemode updatemode
{
Get {return this. updatepanel1.updatemode ;}
Set {This. updatepanel1.updatemode = value ;}
}
// Define the update Method
Public void Update ()
{
// Call the Content Method
This. updatepanel1.update ();
}
}

Then add an updatepanel and gridview in default. aspx to display all the authors.
<Asp: scriptmanager id = "scriptmanager1" runat = "server"/>
<Div>
<Table Style = "width: 481px">
<Tr>
<TD style = "width: 240px">
<Asp: updatepanel id = "updatepanel1" runat = "server">
<Contenttemplate>
<Asp: gridview id = "gridview1" runat = "server" allowpaging = "true" autogeneratecolumns = "false"
Performanceid = "sqlperformance1" onselectedindexchanged = "gridview1_selectedindexchanged"
Width = "243px" datakeynames = "au_id">
<Columns>
<Asp: commandfield showselectbutton = "true"/>
<Asp: boundfield datafield = "au_lname" headertext = "au_lname" sortexpression = "au_lname"/>
<Asp: boundfield datafield = "au_fname" headertext = "au_fname" sortexpression = "au_fname"/>
</Columns>
</ASP: gridview>
<Asp: sqldatasource id = "sqldatasource1" runat = "server" connectionstring = "<% $ connectionstrings: pubsconnectionstring %>"
Selectcommand = "select [au_lname], [au_fname], [au_id] from [authors]"> </ASP: sqldatasource>
</Contenttemplate>
</ASP: updatepanel>
</TD>
<TD>
<Uc1: webusercontrol id = "webusercontrol1" runat = "server">
</Uc1: webusercontrol> </TD>
And you want to write the selectedindexchanged event of the gridview. After you select an author, you can immediately display its details in the webusercontrol control.
Protected void gridview1_selectedindexchanged (Object sender, eventargs E)
{
// Determine whether the gridview is selected
If (gridview1.selectedindex =-1)
{
Webusercontrol1.authorid = gridview1.datakeys [0]. value. tostring ();
}
Else
{
Webusercontrol1.authorid = gridview1.datakeys [gridview1.selectedindex]. value. tostring ();
}
// You must set the update control mode to "Conditional"
Webusercontrol1.updatemode = updatepanelupdatemode. Conditional;
// Update data
Webusercontrol1.update ();
}