Ajax extension control accordion usage Summary

Shows the accordion control:

Nice style

<Style type = "text/CSS">
. Headerbg{Cursor: hand; text-align: center; width: 180px; Height: 21px; Background-image: URL (images/ajaxmenubg1.gif); font-size: 12px; line-height: 21px ;}
. Contentbg{Width: 180px; text-align: Left; Background-color: # d1ecc8; font-size: 12px; font-color: #669900; font-family: ""}
</Style>
</Head>

I. Static Loading:

The page code is as follows:

 <Form ID = "form1" runat = "server"> <br/> <div> <br/> <asp: scriptmanager id = "scriptmanager1" runat = "server"> <br/> </ASP: scriptmanager> <br/> <PC3: accordion id = "accordion1" runat = "server" Height = "329px" width = "198px" <br/> headercssclass = "accordionheader" <br/> contentcssclass = "accordioncontent" <br/> fadetransitions = "true" <br/> transitionduration = "300" <br/> framespersecond = "20" <br/> requireop Enedpane = "false" <br/> selectedindex = "-1" <br/> <panes> <br/> <PC3: accordionpane runat = "server"> <br/> <peader> Zhang Jiajia </peader> <br/> <content> attitude determines everything </content> <br/> </PC3: accordionpane> <br/> <PC3: accordionpane id = "accordionpane1" runat = "server"> <br/> <peader> * Jia * </peader> <br/> <content> the sun rose as usual </content> <br/> </PC3: accordionpane> <br/> <PC3: accordionpane id = "accordionpane2" runat = "Server"> <br/> <peader> I ++ </peader> <br/> <content> do what you should do! </Content> <br/> </PC3: accordionpane> <br/> <cc0: accordionpane id = "accordionpane3" runat = "server"> <br/> <peader> silly girl </peader> <br/> <content> if one day, we can't even talk anymore. We hope we can still live in the paradise of love. </content> <br/> </PC3: accordionpane> <br/> </panes> <br/> </PC3: accordion> <br/> </div> </P> <p> </form>

 

Dynamic Loading (querying data from the database to load)

Page code:

<Form ID = "form1" runat = "server"> <br/> <asp: scriptmanager id = "scriptmanager1" runat = "server"/> <br/> <div> <br/> <PC3: accordion id = "accordion1" runat = "server" Height = "382px" width = "200px" headercssclass = "headerbg" contentcssclass = "contentbg"> <br/> </C0: accordion> <br/> </div> <br/> </form>

 

Background code:

Protected void page_load (Object sender, eventargs e) <br/>{< br/> If (! Page. ispostback) <br/>{< br/> display (); // display Student Information <br/>}</P> <p> private void display () <br/>{< br/> // obtain information about all students <br/> List <student> List = getallstudent (); </P> <p> // cyclically Add the student ID to the title of the accordion control. <br/> foreach (student item in List) <br/>{< br/> accordionpane ap = new accordionpane (); // instantiate an accordionpane control. <br/> label lblstudentmenu = new label (); // instantiate a tag control to display the category name <br/> lblstudentmenu. TEXT = item. id. tostring (); // specify the text attribute of the tag as the classification name <br/> aP. headercontainer. controls. add (lblstudentmenu); // Add the label control to the accordionpane TITLE section </P> <p> hyperlink hlinkstudentmenu = new hyperlink (); <br/> hlinkstudentmenu. TEXT = "" + item. name + "<br>"; // specify the text attribute of Hyperlink as the student name <br/> hlinkstudentmenu. navigateurl = "#"; // specify the connection attribute <br/> aP. contentcontainer. controls. add (hlinkstudentmenu); // Add the Connection Control to the accordionpane content section </P> <p> accordion1.panes. add (AP); // append accordionpane to the panes set of Accordion <br/>}</P> <p>}