巧用异步通信与如何获得服务端控件输出的html代码

    这个题目看上去可能有点怪，一下子也想不出什么好名字，个人感觉这个小例子包括了这两个点，就写上去了，请朋友们多多指教，有什么 不对的地方就指出来！！！

 

---

    首先我要说为什么要举这样的例子呢，因为在web开发时，会遇到一些效果非常好的css、js等，特效非常漂亮，爱不释手，比如：导航菜单、用层实现等一些效果，可效果虽好，但不能动态管理，有点不爽！所以松子儿举了这个例子，希望能给遇到这样问题的朋友一点帮助！

 

    例子概要：通过异步通信请求服务器，服务端把需要的控件输出代码响应给客户端。注：服务端控件以datagrid为例,也不考虑通信时浏览器兼容方面的问题；

页面代码段（data.aspx）：

<form id="Form1" method="post" runat="server">
            <asp:hyperlink onmouseover="divlist('data.aspx?ajax=datagrid')" onmouseout="ViewSet()" id="HyperLink1"
                style="Z-INDEX: 101; LEFT: 24px; POSITION: absolute; TOP: 40px" runat="server" NavigateUrl="/WebTest/upfile/tohtml.htm">鼠标经过这里</asp:hyperlink><asp:datagrid id="DataGrid1" style="Z-INDEX: 104; LEFT: 136px; POSITION: absolute; TOP: 488px"
                runat="server" ShowHeader="False" AutoGenerateColumns="False" GridLines="None">
                <Columns>
                    <asp:TemplateColumn>
                        <ItemTemplate>
                            <asp:Image id="Image1" runat="server" ImageUrl="img/bell11.gif"></asp:Image><A title='<%# DataBinder.Eval(Container, "DataItem.title") %>' href='<%# DataBinder.Eval(Container, "DataItem.title") %>'><%# DataBinder.Eval(Container, "DataItem.title") %></A>
                        </ItemTemplate>
                    </asp:TemplateColumn>
                </Columns>
                <PagerStyle Mode="NumericPages"></PagerStyle>
            </asp:datagrid>
            <DIV id="divgrid" style="DISPLAY:none;Z-INDEX:105;LEFT:16px;OVERFLOW:auto;WIDTH:200px;POSITION:absolute;TOP:64px;HEIGHT:400px"></DIV>
        </form>
        <script language="javascript">
<!--
        function divlist(fileurl)
        ...{
            //处理的页面
            var strUrl = fileurl;
            //设置参数
            var strResult = "";
            //创建xmlhttp对象
            var xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

            //请求要处理的页面
            xmlHttp.open("POST", strUrl, false);
            xmlHttp.send("");
            //获取处理页面的html代码
            strResult = xmlHttp.responseText;
            
            if(strResult !=null && strResult != "")
            ...{
                document.getElementById("divgrid").innerHTML = strResult;
                document.getElementById('divgrid').style.display = "inline";
            }
            else
            ...{
                alert("获取数据失败");
            }
            
        }
        function ViewSet()
        ...{
            document.getElementById('divgrid').style.display = "none";
        }
        

//-->
        </script>

源文件代码片段（cs）：

private void Page_Load(object sender, System.EventArgs e)
        ...{
            if(!IsPostBack)
            ...{
                this.GridBind();
                if(this.Request.QueryString["ajax"]=="datagrid")
                ...{
                    this.Response.Write(this.GetControlHtml());
                    this.Response.End();
                }
            }
        }

        Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码
        override protected void OnInit(EventArgs e)
        ...{
            //
            // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
            //
            InitializeComponent();
            base.OnInit(e);
        }
        
        /**//// <summary>
        /// 设计器支持所需的方法 - 不要使用代码编辑器修改
        /// 此方法的内容。
        /// </summary>
        private void InitializeComponent()
        ...{    
            this.Button1.Click += new System.EventHandler(this.Button1_Click);
            this.Load += new System.EventHandler(this.Page_Load);

        }
        #endregion


        protected void GridBind()
        ...{
            DataTable table1 = new DataTable();
            table1.Columns.Add("title",System.Type.GetType("System.String"));
            table1.Columns.Add("url",System.Type.GetType("System.String"));
            for(int i=1;i<=5;i++)
            ...{
                DataRow dr = table1.NewRow();
                dr["title"] = "title"+i.ToString();
                dr["url"] = "#";
                table1.Rows.Add(dr);
            }
            this.DataGrid1.DataSource=table1;
            this.DataGrid1.DataBind();
        }

        /**//// <summary>
        /// 获得服务器控件输出的html
        /// </summary>
        /// <returns></returns>
        protected string GetControlHtml()
        ...{
            System.IO.StringWriter sw = new System.IO.StringWriter();
            System.Web.UI.HtmlTextWriter hw = new System.Web.UI.HtmlTextWriter(sw);
            this.GridBind();
            this.DataGrid1.AllowPaging = false;
            this.DataGrid1.Style.Clear();
            this.DataGrid1.RenderControl(hw);
            return sw.ToString();
        }