ASP.NET+XML打造留言薄
你当前的位置:烁空 --> 技术文档全集

  一.概述:

  留言簿是网站的一个重要组成部分,是访问者发表意见的场所,也是网站管理员了解网站基本运行情况的有力工具,所以留言簿在现在的网站中扮演了十分重要的角色。

  不过在以前开发一个留言簿并不是一件容易的事,开发者的工作量往往会很大。而现在随着微软推出VS.NET,相应的技术也推陈出新。特别是XML技术在.NET FRAMEWORK中的广泛运用,使得整个.NET构架具有十分优越的基础。而ASP.NET中推出的崭新的编程模型更使得开发WEB应用程序变得非常容易。本文就结合ASP.NET技术和XML技术的优点向大家介绍如何打造一个属于自己的留言簿。

  二.实现方法:

  一个基本的留言簿应至少包括两个功能:接受用户输入的信息并保存该信息到后台数据库;显示用户输入的信息。用户输入的信息一般包括用户名、EMAIL地址、QQ号码、用户主页、留言信息等,这些信息通常是保存在后台数据库的某个表中的,不过本文要运用一个XML文件来存储这些信息。显示用户输入的信息时一般得把所有的信息都显示出来,这里的方法就是从XML文件中读取数据并运用XSLT技术对其进行格式转换,最后以HTML的形式显示在浏览器中。

  这样,我们的留言簿就需要两个WEB页面,一个用于接受用户的输入信息,另一个用于显示用户已经输入过的信息。而存储信息的XML文件(GUESTBOOK.XML)则需具有如下的结构:

<XML VERSION="1.0" ENCODING="GB2312">
<GUESTBOOK>
<GUEST>
<NAME>令狐冲</NAME>
<EMAIL>DOOSE@ETANG.COM</EMAIL>
<QQ>10102350</QQ>
<HOMEPAGE>WWW.DOOSE.COM</HOMEPAGE>
<COMMENT>本留言簿由"令狐冲"创建,希望你能喜欢哦:)要知道如何创建一个属于自己的留言簿,那么就请仔细阅读《运用ASP.NET和XML技术打造留言簿》一文!</COMMENT>
</GUEST>
</GUESTBOOK>

  下面我们先来创建用于接受用户输入信息的WEB页面-GUESTBOOK.ASPX。根据前面所提的基本要求,该WEB页面包括了以下几个部分:留言簿标题、"用户名:"标签及输入框、"EMAIL地址:"标签及输入框、"QQ号码:"标签及输入框、"个人主页:"标签及输入框、"留言信息:"标签及输入框、一个"确定"按钮、一个"重置"按钮、一个"查看留言簿"按钮,同时该页面还包括了两个验证按钮,分别用于验证用户名以及EMAIL地址是否为空,若为空,则提醒用户输入。同时,为使留言簿具有良好的用户界面,我运用了表格进行页面布置,这样留言簿中的各个成分就能有条有理,层次分明了。有关该WEB页面的详细代码请参考文后附带的源代码,这里就不给出了。页面布置的图示如下:

图1

  完成了该WEB页面的布置,我们仅仅是完成了一部分的工作,到此为止我们并没有进行过真正的编码。我想大家对ASP.NET中的代码后置技术肯定是了解或熟悉的,它将WEB页面的布置工作和后端的编码工作区分开来,达到了良好的分离效果。下面我们就为该WEB页面中的三个按钮分别编写消息相应函数:

PRIVATE VOID BTNOK_CLICK(OBJECT SENDER, SYSTEM.EVENTARGS E)
{
SAVEXMLDATA();

NAME.TEXT = "";
EMAIL.TEXT = "";
QQ.TEXT = "";
HOMEPAGE.TEXT = "";
COMMENT.TEXT = "";
}

PRIVATE VOID BTNRESET_CLICK(OBJECT SENDER, SYSTEM.EVENTARGS E)
{
NAME.TEXT = "";
EMAIL.TEXT = "";
QQ.TEXT = "";
HOMEPAGE.TEXT = "";
COMMENT.TEXT = "";
}

PRIVATE VOID BTNVIEW_CLICK(OBJECT SENDER, SYSTEM.EVENTARGS E)
{
// 显示所有用户的留言信息
RESPONSE.REDIRECT( "VIEWGUESTBOOK.ASPX" );
}

  其中,第一个按钮是最重要的,它能将用户的输入信息存储到XML文件中,调用的方法就是SAVEXMLDATA();而第二个按钮仅仅完成文本框的重置清空工作;第三个按钮的作用是运用另一个WEB页面显示所有的用户输入信息。同时,第一个按钮在成功保存信息后也会将浏览器导向到显示所有用户输入信息的页面。
  下面我们来详细分析一下SAVEXMLDATA()方法,其实现如下:

PRIVATE VOID SAVEXMLDATA()
{
TRY
{
// 创建一个XMLDOCUMENT对象,用于载入存储信息的XML文件
XMLDOCUMENT XDOC = NEW XMLDOCUMENT();
XDOC.LOAD( SERVER.MAPPATH( "GUESTBOOK.XML" ));

// 创建一个新的GUEST节点并将它添加到根节点下
XMLELEMENT PARENTNODE = XDOC.CREATEELEMENT( "GUEST" );
XDOC.DOCUMENTELEMENT.PREPENDCHILD( PARENTNODE );

// 创建所有用于存储信息的节点
XMLELEMENT NAMENODE = XDOC.CREATEELEMENT( "NAME" );
XMLELEMENT EMAILNODE = XDOC.CREATEELEMENT( "EMAIL" );
XMLELEMENT QQNODE = XDOC.CREATEELEMENT( "QQ" );
XMLELEMENT HOMEPAGENODE = XDOC.CREATEELEMENT( "HOMEPAGE" );
XMLELEMENT COMMENTNODE = XDOC.CREATEELEMENT( "COMMENT" );

// 获取文本信息
XMLTEXT NAMETEXT = XDOC.CREATETEXTNODE( NAME.TEXT );
XMLTEXT EMAILTEXT = XDOC.CREATETEXTNODE( EMAIL.TEXT );
XMLTEXT QQTEXT = XDOC.CREATETEXTNODE( QQ.TEXT );
XMLTEXT HOMEPAGETEXT = XDOC.CREATETEXTNODE( HOMEPAGE.TEXT );
XMLTEXT COMMENTTEXT = XDOC.CREATETEXTNODE( COMMENT.TEXT );

// 将上面创建的各个存储信息的节点添加到GUEST节点下但并不包含最终的值
PARENTNODE.APPENDCHILD( NAMENODE );
PARENTNODE.APPENDCHILD( EMAILNODE );
PARENTNODE.APPENDCHILD( QQNODE );
PARENTNODE.APPENDCHILD( HOMEPAGENODE );
PARENTNODE.APPENDCHILD( COMMENTNODE );

// 将上面获取的文本信息添加到与之相对应的节点中
NAMENODE.APPENDCHILD( NAMETEXT );
EMAILNODE.APPENDCHILD( EMAILTEXT );
QQNODE.APPENDCHILD( QQTEXT );
HOMEPAGENODE.APPENDCHILD( HOMEPAGETEXT );
COMMENTNODE.APPENDCHILD( COMMENTTEXT );

// 保存存储信息的XML文件
XDOC.SAVE( SERVER.MAPPATH( "GUESTBOOK.XML" ));

// 显示所有用户的留言信息
RESPONSE.REDIRECT( "VIEWGUESTBOOK.ASPX" );
}
CATCH( EXCEPTION E ) {}
}

  该方法主要运用了XMLDOCUMENT类、XMLELEMENT类以及XMLTEXT类等,这些类都是包含在SYSTEM.XML命名空间中的,所以请在代码文件的开头处添加USING SYSTEM.XML的语句。该方法运用了一个TRY-CATCH语句块,在TRY部分首先通过创建一个XMLDOCUMENT对象来载入XML文件,然后创建根节点的儿子-GUEST节点并在GUEST节点下添加存储信息所必须的五个子节点。所有这些子节点都是XMLELEMENT对象,它们是通过XMLDOCUMENT对象的CREATEELEMENT()方法来获取的。同时,XMLDOCUMENT对象还通过CREATETEXTNODE()方法来获取文本信息并在后面将其添加到相对应的节点中。在合理的添加GUEST节点及其子节点以及文本信息后,XMLDOCUMENT对象通过SAVE()方法将用户输入的信息保存到XML文件中。最后,浏览器会导向到显示所有用户输入信息的页面。这样,该WEB页面运行的效果如图2所示:

图2

  下面我们来创建用于显示所有用户输入信息的页面-VIEWGUESTBOOK.ASPX。在该WEB页面中,我们要运用到XSLT技术,它能将前面创建的XML文件中的数据以HTML的形式显示出来。由于是运用XSLT技术显示用户输入信息的,所以在设计该WEB页面时我们无需添加任何WEB控件,只要重载该WEB页面的LOAD()方法即可。

PRIVATE VOID PAGE_LOAD(OBJECT SENDER, SYSTEM.EVENTARGS E)
{
// 创建一个XMLDOCUMENT对象以载入存储信息的XML文件
XMLDOCUMENT XDOC = NEW XMLDOCUMENT();
XDOC.LOAD( SERVER.MAPPATH( "GUESTBOOK.XML" ));

// 创建一个XSLTRANSFORM对象并导入XSL文件
XSLTRANSFORM XSLT = NEW XSLTRANSFORM();
XSLT.LOAD( SERVER.MAPPATH( "GUESTBOOK.XSL" ));

STRING XMLQUERY = "//GUESTBOOK";
XMLNODELIST NODELIST = XDOC.DOCUMENTELEMENT.SELECTNODES( XMLQUERY );

MEMORYSTREAM MS = NEW MEMORYSTREAM();
XSLT.TRANSFORM( XDOC, NULL, MS );
MS.SEEK( 0, SEEKORIGIN.BEGIN );

STREAMREADER SR = NEW STREAMREADER( MS );

// 显示输出结果
RESPONSE.WRITE( SR.READTOEND() );
}

  该方法首先创建一个XMLDOCUMENT对象用于载入前面创建的XML数据文件,之后创建一个XSLTRANSFORM对象并导入相应的XSL文件。通过该XSL文件中的内容它能将原来的XML文件中的数据格式化为HTML的形式并显示在浏览器中。因为其中运用到了XSLT转换,所以我们还得在代码文件的开头处添加USING SYSTEM.XML.XSL的语句。

  下面便是XSL文件的源代码,其中最重要的部分是<XSL:TEMPLATE MATCH="NAME">……</XSL:TEMPLATE>一块。

<XSL:STYLESHEET XMLNS:XSL="HTTP://WWW.W3.ORG/1999/XSL/TRANSFORM" VERSION="1.0">
<XSL:TEMPLATE MATCH="/">
<TABLE BORDER="1" STYLE="BORDER-COLLAPSE: COLLAPSE" BORDERCOLOR="TEAL" ALIGN="CENTER" WIDTH="505" HEIGHT="34">
<TR>
<TD VALIGN="MIDDLE" ALIGN="CENTER" BGCOLOR="TEAL" COLSPAN="2" WIDTH="505" HEIGHT="85">
<FONT STYLE="COLOR:WHITE;BACKGROUND-COLOR:TEAL;FONT-FAMILY:华文行楷;FONT-SIZE:X-LARGE;FONT-WEIGHT:BOLD;">欢迎访问"令狐冲"的留言簿!</FONT>
</TD>
</TR>
<TR><TD WIDTH="505" HEIGHT="26" ALIGN="LEFT" COLSPAN="2"></TD></TR>
<XSL:FOR-EACH SELECT="//GUEST">
<XSL:APPLY-TEMPLATES SELECT="NAME"/>
</XSL:FOR-EACH>
<TR>
<TD VALIGN="MIDDLE" ALIGN="CENTER" COLSPAN="2" WIDTH="505">
<FONT>
本留言簿由<A HREF="MAILTO:0024108@FUDAN.EDU.CN">王凯明</A>开发! </FONT>
</TD>
</TR>
</TABLE>
</XSL:TEMPLATE>
<XSL:TEMPLATE MATCH="NAME">
<TR>
<TD WIDTH="95" HEIGHT="26" ALIGN="RIGHT">
<FONT>用户名:</FONT>
</TD>
<TD WIDTH="400" HEIGHT="26" VALIGN="MIDDLE" ALIGN="LEFT">
<FONT><XSL:VALUE-OF SELECT='.'/></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="95" HEIGHT="26" ALIGN="RIGHT" BGCOLOR="E0E0E0">
<FONT>EMAIL地址:</FONT>
</TD>
<TD WIDTH="400" HEIGHT="26" VALIGN="MIDDLE" ALIGN="LEFT" BGCOLOR="#E0E0E0">
<FONT><A HREF="MAILTO:{../EMAIL}"><XSL:APPLY-TEMPLATES SELECT="../EMAIL"/></A></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="95" HEIGHT="26" ALIGN="RIGHT">
<FONT>QQ号码:</FONT>
</TD>
<TD WIDTH="400" HEIGHT="26" VALIGN="MIDDLE" ALIGN="LEFT">
<FONT><XSL:APPLY-TEMPLATES SELECT="../QQ"/></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="95" HEIGHT="26" ALIGN="RIGHT" BGCOLOR="#E0E0E0">
<FONT>个人主页:</FONT>
</TD>
<TD WIDTH="400" HEIGHT="26" VALIGN="MIDDLE" ALIGN="LEFT" BGCOLOR="#E0E0E0">
<FONT><A HREF="HTTP://{../HOMEPAGE}" TARGET="_BLANK"><XSL:APPLY-TEMPLATES SELECT="../HOMEPAGE"/></A></FONT>
</TD>
</TR>
<TR>
<TD WIDTH="95" HEIGHT="26" VALIGN="TOP" ALIGN="RIGHT">
<FONT>留言信息:</FONT>
</TD>
<TD WIDTH="400" HEIGHT="26" VALIGN="TOP" ALIGN="LEFT">
<FONT><XSL:APPLY-TEMPLATES SELECT="../COMMENT"/></FONT>
</TD>
</TR>
<TR><TD WIDTH="505" HEIGHT="26" ALIGN="LEFT" COLSPAN="2"></TD></TR>
</XSL:TEMPLATE>
</XSL:STYLESHEET>

  这样,当用户点击"查看留言簿"按钮或是成功输入信息后浏览器便导向到该显示所有用户输入信息的WEB页面,其运行效果图示如下:

图3

  三.总结:

  这样,一个具有基本功能的留言簿就完成了,从中我们可以体会到运用ASP.NET技术开发WEB应用程序是相当容易的,同时在结合了XML技术之后,ASP.NET可以变得更加强大。还有文章中介绍的XSLT技术是非常有用的,你可以参考其它相关的更多资料以使它成为你开发过程中的一个有力工具。