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

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

2004-7-19 6:17:00　　作者：李飞　　来源：未知　网友评论 0 条　论坛

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

          操作步骤：

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

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%>" >

选择表情单选按扭组：

    单选按扭组不用添加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”，单击“插入”按扭，如下图：

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

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

表单表被禁止提交，并显示出错信息。

共分2页 [1] [2]

>> 相关文章