ASP.NET AJAX -- 异步-动态生成简单样式栏目

最新推荐文章于 2019-04-24 15:24:17 发布

yzq124391

最新推荐文章于 2019-04-24 15:24:17 发布

阅读量978

点赞数

分类专栏： asp.net AJAX 文章标签： asp.net ajax div function class javascript

本文链接：https://blog.csdn.net/yzq124391/article/details/2218670

版权

asp.net AJAX 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

ASP.NET AJAX -- 异步-动态生成简单样式栏目

ASP.NET AJAX 是一個不受拘束的架构，可让您快速地在所有常见的浏览器上，建立更有效率、更互动式、更高度个人化的新一代网页经验。

使用 ASP.NET AJAX，您可以：

以可重复使用的 AJAX 元件建立新一代界面。
透过可支援所有現今浏览器的强大 AJAX 控制项，以加强現有网页。
持续使用 Visual Studio 2005，讓您的 ASP.NET 2.0 网站更上层楼。
直接从浏览器存取远端服务与资料，完全不需撰写复杂的指令码。
以 Microsoft 提供的技术支援，享受不受拘束架构的好处。

查看本文，您需要对一下技术有一定的了解：

C#编程，xhtml标准，css2.0标准，asp.net 页面模型， asp.net ajax library 类库对javascript 的封装（面向对象的javascript），JSON对象操作，UML基础。

示例简介：

一个能够在ie7，firefox及各种主流的浏览器上都能正确显示的栏目组件。

一为了你们能对我的程序设计有更清晰的认识，首先看一下我为你们展示的程序执行顺序图：

这个顺序图主要由五大对象组成：

AjaxPage（ajax页面，发出请求的主要对象），

webRequest（得到页面请求，组装一个请求，并服务器提出请求，再获得回应），

ServerHandler（服务器端的请求处理者，并回发一个请求），

json（javascript序列化对象，把一个服务器对象序列化为客户端识别的字符串），

caption （服务器端的实体对象）

二 AjaxPage页面

在<form runat="server"></form>标记中我们要放入一个

      <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Path="~/js/cap1.js" />
                <asp:ScriptReference Path="~/js/ajax.js" />
            </Scripts>
        </asp:ScriptManager>

这样我们就能用Microsoft的asp.net ajax 中提供的面向对象的javascript编写浏览器兼容的动态代码。里边的

<asp:ScriptReference Path="~/js/cap1.js" />
<asp:ScriptReference Path="~/js/ajax.js" />

分别引用的两个自己编写的javascript代码文件。

ajax.js中存放了两个函数，是为了处理AjaxPage异步回发请求。代码如下：

/// <reference name="MicrosoftAjax.js"/>
function sendRequest(handlerfile, verb, onCompletedString)
{
    ///<summery>异步请求发送函数</summery>
    ///<para name="handlerfile">服务器端处理文件路径</parm>
    ///<para name="verb">回传类型GET或POST</parm>
    ///<para name="onCompletedString">回传完成后的相应函数，如果为null我们将会提供一个默认的</parm>
    var webRequest = new Sys.Net.WebRequest();
    webRequest.set_url(handlerfile);
    //    var rebody = 'data=' + encodeURIComponent('这个是发送到的数据！');
    //    webRequest.set_body(rebody);
    //webRequest.get_handers()['content-length'] = rebody.length;
    webRequest.set_httpVerb(verb);
    //webRequest.set_timeout(3000);
    if(onCompletedString === null)
    {
        webRequest.add_completed(onCompleted);
    }
    else
    {
        webRequest.add_completed(onCompletedString);
    }
    webRequest.invoke();
}
function onCompleted(response, eventArgs)
{
    if(response.get_aborted())
    {
        alert('请求被取消！');
        return ;
    }
    if(response.get_responseAvailable())
    {
        var statusCode = response.get_statusCode();
        if(statusCode < 200 || statusCode > 300)
        {
            alert('没有得到正确的结果');
        }
        else
        {
            alert('正常执行结果，但是您没有指定完成后的处理函数');
            //response.get_responseData()
            //response.get_xml();
            //response.get_object();//jeson 对象字符串
        }
        return ;
    }
    if(response.get_timedOut())
    {
        alert('请求超时！');
        return ;
    }

    //如果上述条件都没有达到，说明请求出现错误
    alert('错误请求！');
    return ;
}
以上，我写了一个组装请求的函数sendRequest（）其中参数都有注释。还有一个就是

onCompleted(response, eventArgs)函数，这个函数表示异步请求完成后我们要做的一些事情，这里我提供给大家的只是个参考。在代码中你可以看到，如果你不提供自己的一个回调函数，就会执行我为您提供的这个回调函数。

cap1.js存放了我自己定义的一个简单的客户端类，主要是为了生成一个控件框架（见第一个图），代码如下：
/// <reference name="MicrosoftAjax.js"/>
Type.registerNamespace("OA");
//构造一个cap1需要一个标题和内容
OA.cap1 = function(tit,context) {
    if(tit === '' || context === '')
    {
        this._tit = '空白栏目';
        this._context = '没有相关内容！';
    }
    else
    {
        this._tit = tit;
        this._context = context;
    }

}

OA.cap1.prototype = {
    get_tit : function()
    {
        return this._tit;
    },
    get_context : function()
    {
        return this._context;
    },
    get_style : function()
    {
        return this._style;
    },
    set_tit : function(value)
    {
         this._tit = value;
    },
    set_context : function(value)
    {
        this._context = value;
    },
    set_style : function(cssfilepath)
    {
       var style = document.createElement('link');
       style.rel='stylesheet';
       style.type = 'text/css';
       style.href = cssfilepath;
       document.getElementsByTagName('head')[0].appendChild(style);
    },
    getCap1 : function(div)
    {
        if(div.toString().length < 1)
        {
            return ;
        }
         var frm = new Sys.StringBuilder( '<div class="cap1_top"><div class="cap1_top"><div class="left_top"></div><div id="'+ div +'_tit" class="mid_top"></div>');
              frm.append( '<div class="top_pic"></div><div class="rit_top"></div></div><div class="cap1_mid"><div id="'+div+'_mid_left" class="mid_left"></div>');
              frm.append('<div id="'+div+'_txt" class="cap1_txt"></div><div id="'+div+'_mid_rit" class="mid_left"></div></div><div class="cap1_btm"><div class="btm_left"></div>');
              frm.append('<div id="'+div+'_btm_mid" class="btm_mid"></div><div class="btm_rit"></div></div></div>');
         $get(div).innerHTML = frm;

         $get(div+"_tit").innerHTML=this.get_tit();
         $get(div+"_txt").innerHTML= this.get_context();
         var lineh = Sys.UI.DomElement.getBounds($get(div+"_txt")).height;
         $get(div+"_mid_left").style.height = lineh + "px";
         $get(div+"_mid_rit").style.height = lineh + "px";

         var cap_width = Sys.UI.DomElement.getBounds($get(div)).width;
         //调整cap1_top的宽度
         $get(div+"_tit").style.width = cap_width - 51 + "px";
         //调整cap1_mid的宽度
         $get(div+"_txt").style.width = cap_width - 10 + "px";
         //调整cap1_btm的宽度
         $get(div+"_btm_mid").style.width = cap_width - 17 + "px";
     }
}

OA.cap1.registerClass('OA.cap1');

if (typeof(Sys) !== 'undefined') Sys.Application.notifyScriptLoaded();
这样我们就可以在AjaxPage页面上调用这两个文件中的方法来实现异步回传了：首先我们在页面中放一个
<div id="capdemo" style="background:#eee;width:200px;height:400px;"οnclick="showCap1();"></div>

主要的是这个οnclick="showCap1();代码如下：

      function showCap1()
      {
         sendRequest('Handlers/Handler1.ashx', 'GET', onDivClick);
      }

      function onDivClick(response, eventArgs)
      {
          if(response.get_responseAvailable())
          {
              var obj = response.get_object();
              var cap = new OA.cap1(obj.Tit, obj.Text);
              cap.set_style('App_Themes/themeg/style1.css');
              cap.getCap1('capdemo');
          }
      }

请把这段代码放在AjaxPage页面的一个<script type="text/javascript"></script>里，这里我还要指出一段有意思的代码cap.set_style('App_Themes/themeg/style1.css');这段代码把我们预先设计好的一个样式表动态的添加到页面的

<head></head>里了（在文章的末尾，我会把样式表文件的代码贴上。）

三 ServerHandler事件处理程序

服务器端的事件处理程序很简单。更具webRequest中设置的url，请求传到我们的Handler1.ashx后，服务器会自动调用

    public void ProcessRequest (HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        string text = "<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf<br />adfasdfasdfasdfasdf";
        Caption caption = new Caption("测试控件",text);
        JavaScriptSerializer json = new JavaScriptSerializer();
        context.Response.Write(json.Serialize(caption));
        context.Response.End();
    }

方法。此方法的主要目的就是构造一个Response对象，里边有我们写好的一个json（JavaScriptSerializer ）序列化后的caption对象。Caption类是一个很普通的实体类，定义如下：

public class Caption
    {
        public Caption()
        { }

        public Caption(string tit, string text)
        {
            m_tit = tit;
            m_text = text;
        }

private string m_tit;
private string m_text;

        public string Tit
        {
            get { return m_tit; }
        }

        public string Text
        {
            get { return m_text; }
        }

}

这样，我们的代码几乎全部都已经展示完毕。运行程序，点击AjaxPage中的带颜色的层，我们的控件就会出现在上边。

谢谢看完！

css文件代码：

.cap1_top
{
    width:100%;
    }
.left_top
{
    float:left;
    width:7px;
    height:35px;
    background-image:url(sty1/left_top.gif);
    }

.mid_top
{
    font-size:14px;
    text-align:left;
    line-height:35px;
    float:left;
    height:35px;
    background-image:url(sty1/mid_top.gif);
    }
.top_pic
{
    float:left;
    width:39px;
    height:35px;
    background-image:url(sty1/top_pic.gif);
    }
.rit_top
{
    float:left;
    width:5px;
    height:35px;
    background-image:url(sty1/rit_top.gif);
    }
.cap1_mid
{
    width:100%;
    margin:0px;
    padding:0px;
    }
.mid_left
{
    float:left;
    width:5px;
    background-image:url(sty1/ver_line.gif);
    }

.cap1_txt
{
    float:left;
    line-height:24px;
    }

.cap1_btm
{
    width:100%;
    }
.btm_left
{
    float:left;
    width:7px;
    height:9px;
    background-image:url(sty1/btm_left.gif);
    }
.btm_mid
{
    float:left;
    height:9px;
    background-image:url(sty1/ali_line.gif);
    }
.btm_rit
{
    float:left;
    width:10px;
    height:9px;
    background-image:url(sty1/btm_rit.gif);
    }