mootools框架【一】-Element篇:高级应用举例 - 面向对象网,web开发,Mootools,学习,对象 - 面向对象技术开发

面向对象技术开发

会员投稿 投稿指南 站长资讯通告:
您的位置: 首页 > Web开发 > Mootools > 正文

mootools框架【一】-Element篇:高级应用举例

来源: www.bianceng.cn 阅读:

前台:

<%@ 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;">请输入您的网名:&nbsp;&nbsp;&nbsp;&nbsp;<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();
      }
    }
  }
}

文章来源: http://www.cnblogs.com/ziyiFly/tag/Ajax/

Tags:
相关文章列表: