Expand the message board information using Ajax

ArticleDirectory

• Instance description
• Technical Points
• Implementation Process

Instance description

Message Board is a popular, convenient, and fast network tool for saving messages on the Internet. You can use the message board to send messages to website administrators or as a communication tool between users and administrators. Message boards are usually used on enterprise portal websites, e-commerce sales platform networks, and other websites. Message Board developed in this example.

 

Figure message board information

Technical Points

The dynamicpopulate control provides a dynamic effect that allows you to access the server through WebService orCodeGet a piece of HTML text and replace the original content on the target control. The main attributes and descriptions of the dynamicpopulate control are shown in the table,

Table attributes and descriptions of the dynamicpopulate Control

Attribute	Description
Targetcontrolid	The value of the panel control with "dynamic rendering" will be available.
Clearcontentsduringupdate	When updating, whether to clear the existing HTML content in the target element. If this parameter is not specified, HTML content is automatically cleared. The default value is true.
Serivcepath	The URL of the Web service to be called. If you call a page method, you do not need to set some attributes.
Serivcemethod	Name of the web service method or Page Method
Populatetriggercontrolid	A selected attribute that specifies the dynamic rendering of the target element when a control is clicked.
Updatingcssclass	When asynchronous call is called asynchronously, the CSS class attribute to be applied to the target Element
Customscript	Replace the Web service method or PAGE method to be called and call the specified script. The computer must be a string value.
Contextkey	Any string value passed to the web method. For example, to dynamically display a repeater bound to the data, the input string value can be the id value of the current row of data.

 

Implementation Process

(1) Create an Ajax website named 07. The default form is default. aspx.

(2) Add a scriptmanager control, an updatepanel control, and a gridview control in the default. aspx form to manage Ajax controls on the page, implement partial updates, and display message board information.

(3) edit the column of the gridview control and add a templatefield item.

(4) edit the gridview template. The template design code is as follows:

<Itemtemplate> <Table Style = "height: 1px" width = "100%" cellpadding = "0" cellspacing = "0"> <Tr> <TD colspan = "3"> <HR/> & Nbsp; </TD> </Tr> <Tr> <TD width = "80"> Message Title: </TD> <TD colspan = "2"> <% # Eval ("title") %> </TD> </Tr> <Tr> <TD style = "vertical-align: Top; Height: 11px" width = "80"> Message content: </TD> <TD colspan = "2" style = "height: 11px; Vertical-align: Top;"> <% # Eval ("message") %> </TD> </Tr> <Tr> <TD style = "height: 26px;" width = "80"> </TD> <TD colspan = "2" style = "height: 26px"> <Table cellpadding = "0" cellspacing = "0" width = "100%"> <Tr> <TD colspan = "3" style = "height: 17px" align = "right"> <A href = "# message"> I want to leave a message </a> <a href = 'reply. aspx? Messageid = <% # eval ("ID") %> '> I want to reply </a> <Asp: hyperlink id = "hlnkshow" runat = "server" navigateurl = "#"> Expand >></ASP: hyperlink> & nbsp; </TD> </Tr> <Tr> <TD colspan = "3"> <Asp: Panel id = "plreturn" runat = "server" Height = "0px" width = "100%"> </ASP: Panel> </TD> </Tr> <Tr> <TD colspan = "3"> <PC3: dynamicpopulateextender id = "dpereturn" runat = "server" servicepath = "return. asmx" Servicemethod = "getreplybymessage" contextkey = '<% # eval ("ID") %> 'clearcontentsduringupdate = "true" Populatetriggercontrolid = "hlnkshow" targetcontrolid = "plreturn"> </PC3: dynamicpopulateextender> </TD> </Tr> </Table> </TD> </Tr> <Tr> <TD width = "80"> </TD> <TD colspan = "2"> <Table Style = "width: 512px"> <Tr> <TD style = "width: 103px"> Contact person: </TD> <TD style = "width: 214px"> <A href = 'mailto: <% # eval ("email") %> '> <% # Eval ("email") %> </TD> <TD style = "width: 41px"> Time: </TD> <TD> [<% # Eval ("createdate") %>] </TD> </Tr> </Table> </TD> </Tr> /Table> </Itemtemplate>

(5) create a web service named return. asmx. Create the getreplybymessage method in the Web service to expand the information in the message board. The Code is as follows:

[Webmethod] Public String getreplybymessage (string contextkey) { Oledbconnection conn = new oledbconnection ("provider = Microsoft. Jet. oledb.4.0; Data Source =" + server. mappath ("ex18_07.mdb ")); Oledbdataadapter da = new oledbdataadapter ("select * From tb_reply where messageid =" + contextkey + "order by createdate DESC", Conn ); Dataset DS = new dataset (); Da. Fill (DS ); If (DS = NULL | Ds. Tables. Count <= 0 | Ds. Tables [0]. Rows. Count <= 0) { Return string. empty; } Stringbuilder returnhtml = new stringbuilder (); Foreach (datarow row in DS. Tables [0]. Rows) { Returnhtml. append ("<tabel> <tr> <TD> reply" + row ["createdate"]); Returnhtml. append ("</TD> <br/> <TD> "); Returnhtml. append (row ["reply"]); Returnhtml. append ("</TD> </tr> <br/> </tabel> "); } Return returnhtml. tostring (); }

(6) obtain the message in the database in the default. aspx. CS file. The implementation code is as follows:

Protected void page_load (Object sender, eventargs E) { If (! Ispostback) { Oledbconnection conn = new oledbconnection (@ "provider = Microsoft. Jet. oledb.4.0; Data Source =" + server. mappath ("ex18_07.mdb ")); Oledbdataadapter da = new oledbdataadapter ("select * From tb_message order by createdate DESC", Conn ); Dataset DS = new dataset (); Da. Fill (DS ); Gridview1.datasource = Ds; Gridview1.databind (); } }