第五章发表新留言页的制作

发布者: hinet 2010年01月21日围观次点赞:1

第五章    发表新留言页的制作           post.aspx发新留言本页

          操作步骤：

          1、插入表单，切换到代码视图，给表单添加runat="server"属性：

<form id="form1" method="POST" runat="server" >
</form>           2、按下图页面样式在表单内插入表格,宽度为730px：

          所有的文本域、单选框均与相应的字段名称相同，并且加上runat="server" 属性使其成为服务器控件。代码清单：

留言标题：<input name="title" type="text" id="title6" runat="server" >
昵       称：<input name="MessageName" type="text" id="MessageName" runat="server" >
个人主页：<input name="PageUrl" type="text" id="PageUrl" runat="server" >
电子邮箱：<input name="Email" type="text" id="Email" runat="server" >
QQ号码：    <input name="Qicq" type="text" id="Qicq" runat="server" >
留言内容：<textarea name="MessageBook" cols="70" rows="10" id="MessageBook" runat="server" ></textarea>
IP地址：<input name="UserIP" type="hidden" id="UserIP" value="<%= Request.ServerVariables("REMOTE_ADDR")%>" >
发表按扭：<asp:button ID="button1" runat="server" Text="发表" />
重写按扭：<input type="reset" name="Submit2" value="重写" runat="server" >     选择头像的隐藏域及头像初始值代码：

<a href=### onClick=window.open("face.aspx","face","width=400,height=400,resizable=1,scrollbars=1") title=点击选择头像>
<img src="<% if session("face")="" then
response.write("face/face14.GIF")
else
response.write(session("face"))
end if%>" width="82" height="90" border=0 id="faceImg"></a>
<input name="face" type="hidden" id="face" value="<% if session("face")="" then
response.write("face/face14.GIF")
else
response.write(session("face"))
end if%>" >     选择表情单选按扭组：

<table width="550" border="0" cellpadding="0" cellspacing="0" >
<tr align="Center" valign="Middle" >
<td width="595"> <input type=radio name=Miange value=Miange/FIL1.GIF checked >
<img src="Miange/FIL1.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL7.GIF>
<img src="Miange/FIL7.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL8.GIF>
<img src="Miange/FIL8.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL11.GIF>
<img src="Miange/FIL11.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL12.GIF>
<img src="Miange/FIL12.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL14.GIF>
<img src="Miange/FIL14.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL17.GIF>
<img src="Miange/FIL17.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL38.GIF>
<img src="Miange/FIL38.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL32.GIF>
<img src="Miange/FIL32.GIF" border="0" ><span> <input type=radio name=Miange value=Miange/FIL28.GIF>
<img src="Miange/FIL28.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL8.GIF>
<img src="Miange/FIL8.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL5.GIF>
<img src="Miange/FIL5.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL39.GIF>
<img src="Miange/FIL39.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL42.GIF>
<img src="Miange/FIL42.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL50.GIF>
<img src="Miange/FIL50.GIF" border="0" > <input type=radio name=Miange value=Miange/FIL47.GIF>
<img src="Miange/FIL47.GIF" border="0" ></td>
</tr>
</table>     单选按扭组不用添加runat="server" 属性。

       在未添加插入记录行为前，先做好头像选择，用户点击头像后，弹出另一个face.aspx浏览器窗口，以便从中选择头像。这里就不介绍face.aspx的详细制作了，给出整页源代码，你把它复制做成一个页面。

       face.aspx文件整页代码清单：

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>
<html>
<head>
<title>选择头像</title>
<script>
window.focus()
function chg(url)
{
window.opener.document.form1.face.value=url;
window.opener.document.form1.faceImg.src=url;
}
</script>
</head>
<body>
<table align=center width=95% class="table004" cellpadding=5>
<tr>
<td class=table003 align=center >选择形象（单击即可）</td>
<tr>
<td class="table001"> <%
dim y as integer
for y=1 to 37
response.write ("<img src=''''face/face"&(y)&".gif'''' border=0 onclick=""chg(''''face/face"&(y)&".gif'''') "" style=cursor:hand> ")
next
%> </td>
</tr>
</table>
</body>
</html>     然后，在存放留言本程序的目录下新建一个face文件夹，定制你自己的头像图标，图像文件名从face1至face37。

    预览页面，可以弹开图像选择窗口，当单击新窗口上的图像时，post.aspx页上的图像也随之改变。

       3、添加“插入记录”服务器行为

       点击服务器行为面板左边的加号，选择“插入记录”，如果文本域和隐藏域名称与数据库字段名称对相，则DW MX自动匹配好列，如下图，你应该再仔细检一下，各项列和值是否有不匹配的，有的话就将其改正。如下图：



    按“确定”按扭保存设置。插入记录成功后，自动转到index.aspx首页。预览页面，输入留言本标题、昵称和留言内容，这三项是必填项。然后提交，如果记录插入成功，会转到首页。看看？输入中文时会显示“??? ”，原来是编码问题，ASP.NET不支持gb2312编码传输，那就用缺省值吧。切换到源代码视图，找到：

<%@ Page Language="VB" ContentType="text/html" ResponseEncoding="gb2312" %>     把它改成：

<%@ Page Language="VB" ContentType="text/html"%>     即把 ResponseEncoding="gb2312" 这句代码去掉就OK了。

    4、添加窗体验证控件

       留言标题、昵称和留言内容是不允许为空的，个人主页网址格式要正确，电子邮箱格式要正确，QQ号码必须是数字，因此必须添加验证控件。这个要在代码视图下的标签编辑器中操作。切换到代码视图，将光标定位在“留言标题”文本框“必填”文字后，打开“插入”面板，点击“”（更多标签），打开标签选择器。展开“ASP.NET标签——》验证服务器控件”在右窗架中选中“asp:RequiredFieldvalidator”，单击“插入”按扭，如下图：



    弹出标签编辑器，填写各项如下：



    记得钩选“启用客户端脚本”。现在，可以试试效果了，什么也不填，单击提交按扭，如下图：



    表单表被禁止提交，并显示出错信息。
依照以上方法，分别为MessageName、MessageBook添加验证控件。以下提供截图：





          因为title、MessageName、MessageBook这三个字段仅仅是不允许为空，用RequiredFieldvalidator控件非常方便。但是对于主页网址格式、电子邮箱、QQ号码的验证就显得麻烦些，须要写比较表达式，就不能用RequiredFieldvalidator控件了，须要用到另外两个控件即regularexpressionvalidator和rangevalidator控件。

          个人主页网址验证：

       用regularexpressionvalidator控件，如下：



       验证表达式为：http://([\w-]+\.)+[\w-]+(/[\w- ./?%&=]*)?

           电子邮箱地址验证：

       用regularexpressionvalidator控件，如下：



       验证表达式为：\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*

       QQ号码验证：

       用rangevalidator控件，如下：



    都做好了吗？试试效果，如下：

       还可以加入validationsummary控件，显示总的验证错误信息，并以消息框弹出。设置如下图：



       弹出的消息框样式如下：



       仅仅用了几个验证控件就能轻轻松松完表单窗体检验，不用像在ASP中那样地编写一大堆函数了。ASP.NET的魅力就在它的强大功能、好用。

          务必注意：验证控件只能对HTML控件或WEB控年进行验证，HTML文本框是不能起作用的，还会报错。另一个重要之处就是，你的站点根目录中必须复制有JavaScript脚本库，这个在你安装.NET框架的时候，安装程序已经为你复制在aspnet_client目录中。否则，验证控件会不起作用，还会弹出一个窗口提示你安装脚本库：



    如果出现此种情况，请检查根目录下是否有aspnet_client这个文件夹，没有的话可在这儿下载：

       http://www.ieasp.net/aspnet/aspnet_client.rar

       至此，制作发表新留言页完毕。