说明:关于Element类更全面的实例会有后续补充, 请关注.
前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>mootools [一]--Element篇高级应用举例</title>
<script type="text/javascript" language="javascript" src="mootools-1.2-core-jm.js"></script>
<script type="text/javascript">
//为页添加操作事件-domready.
window.addEvent("domready",function(){
//为 btnSent 添加 单击事件 .
$('btnSent').addEvent('click',function(){
if($('txtContent').innerText==''){
alert('发送内容不能空！');
return;
}
//Default2.aspx虚构一个页面, 其实是将数据暂存, 然后提取并显示在 messageBox中.
var url='Default2.aspx';
var postData=$("postMessage").toQueryString();
new Ajax(url,{method:'post',onComplete:function(){
$('messageBox').innerHTML += this.response.text;
//这里的 innerHTML 方法可以用 setHTML 代替, 因为 innerHTML 是DOM操作中用到的, setHTML是mootools框架中新定义的.
}
}).request(postData);
});
});
</script>
</head>
<body>
<div style="margin:auto;text-align:center; ">
<div style=" width:650px; height:700px;">
<div id="messageBox"></div>
<hr />
<form id="postMessage" method="post" name="postMessage" runat="server">
<div>
<ul>
<li style="list-style-type: none;">请输入您的网名： <input ID="txtName" runat="server" value="填写网名"/>
</li>
</ul>
<ul>
<li style="list-style-type: none;">请输入要发送的内容：<textarea ID="txtContent" runat="server" cols="20" rows="4"></textarea></li>
</ul>
<ul>
<li style="list-style-type: none;"><input type="button" ID="btnSent" runat="server" value="发送" onserverclick="btnSent_ServerClick" /></li>
</ul>
</div>
</form>
</div>
</div>
</body>
</html>
后台:
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
if (!String.IsNullOrEmpty(txtName.Value) && !String.IsNullOrEmpty(txtContent.Value.Trim()))
{
string name = txtName.Value.Trim();
string content = txtContent.Value.Trim();
string msg = "<div><ul><li>" + name + "说：" + content + "</li></ul></div>";
Response.Clear();
Response.Write(msg);
Response.End();
}
else if (!String.IsNullOrEmpty(txtContent.Value.Trim()) && String.IsNullOrEmpty(txtName.Value))
{
string name = "游客";
string content = txtContent.Value.Trim();
string msg = "<div><ul><li>" + name + "说：" + content + "</li></ul></div>";
Response.Clear();
Response.Write(msg);
Response.End();
}
}
}
}