使用ASP.NET Ajax 和Web Service动态加载用户控件

在平时开发过程我们经常动态加载用户控件。今天我主要介绍如何在ASP.NET AJAX中使用WEB SERVICE加载用户控件。

我们首先新建一个WEBSERVICE文件，把WEB SERVICE引入到页面中

 

代码

  < div >
     < asp:ScriptManager ID = " ScriptManager1 "  runat = " server " >
       < Services >
         < asp:ServiceReference Path = " ~/WebService.asmx "   />
       </ Services >
     </ asp:ScriptManager >
   </ div >

注意在WebService添加[System.Web.Script.Services.ScriptService] 代码如下

 

代码

using  System;
using  System.Web;
using  System.Web.Services;
using  System.Web.Services.Protocols;
using  System.Web.UI;
using  System.IO;
using  System.Text.RegularExpressions;
using  System.Web.UI.HtmlControls;
[WebService(Namespace  =   " http://tempuri.org/ " )]
[WebServiceBinding(ConformsTo  =  WsiProfiles.BasicProfile1_1)]
// 若要允许使用 ASP.NET AJAX 从脚本中调用此 Web 服务，请取消对下行的注释。 
[System.Web.Script.Services.ScriptService]
public   class  WebService : System.Web.Services.WebService {

  [WebMethod]
   public   string  HelloWorld() {
     return   " Hello World " ;
  }

  [WebMethod(EnableSession  =   true )] //  EnableSession:XML Web services 方法启用会话状态，则为 true。默认为 false。 
   public   string  GetUserControlPath( string  UserControlPath) {
    Page ownerPage  =   new  Page();
    UserControl userControl  =  (UserControl)ownerPage.LoadControl(UserControlPath);
    userControl.EnableViewState  =   false ;

    HtmlForm form  =   new  HtmlForm();
    form.Controls.Add(userControl);

    ownerPage.Controls.Add(form);

    StringWriter writer  =   new  StringWriter();

    HttpContext.Current.Server.Execute(ownerPage, writer,  false );
     return  CleanHtml(writer.ToString());
  }

   ///   <summary>
   ///   Removes Form tags
   ///   </summary>
   ///   <param name="html"></param>
   ///   <returns></returns>
   private   string  CleanHtml( string  html) {
     return  Regex.Replace(html,  @" <[/]?(form)[^>]*?> " ,  "" , RegexOptions.IgnoreCase);
  }

 

接着新建一个用户控件WebUserControl.ascx，页面布局显示，代码可以自己喜欢

 

代码

< asp:TextBox ID = " TextBox1 "  runat = " server " ></ asp:TextBox >
< asp:Button ID = " Button1 "  runat = " server "  Text = " Button "   />
< asp:GridView ID = " GridView1 "  runat = " server "  BackColor = " LightGoldenrodYellow "  
  BorderColor = " Tan "  BorderWidth = " 1px "  CellPadding = " 2 "  ForeColor = " Black "  
  GridLines = " None " >
   < FooterStyle BackColor = " Tan "   />
   < PagerStyle BackColor = " PaleGoldenrod "  ForeColor = " DarkSlateBlue "  
    HorizontalAlign = " Center "   />
   < SelectedRowStyle BackColor = " DarkSlateBlue "  ForeColor = " GhostWhite "   />
   < HeaderStyle BackColor = " Tan "  Font - Bold = " True "   />
   < AlternatingRowStyle BackColor = " PaleGoldenrod "   />
</ asp:GridView >

 

后台代码如下

 

代码

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;
using  System.Web.UI.WebControls;

public   partial   class  WebUserControl : System.Web.UI.UserControl
{
     protected   void  Page_Load( object  sender, EventArgs e)
    {
         if  ( ! Page.IsPostBack) { 
        List < par >  parlist = new  List < par > ();
            parlist.Add( new  par( " 2009 " , " blue " ));
            parlist.Add( new  par( " 2010 " , " red " ));
            parlist.Add( new  par( " 2011 " , " yellow " ));
            parlist.Add( new  par( " 2012 " ,  " black " ));
             this .GridView1.DataSource = parlist;
             this .GridView1.DataBind();
        }
    }
}
public   class  par {
     private   string  year, color;

     public  par( string  _year, string  _color) {
        year  =  _year;
        color  =  _color;
    }
     public   string  Year {
         get  {  return  year; }
         set  { year  =  value; }
    }

     public   string  Color {
         get  {  return  color; }
         set  { color  =  value; }
    }
}

 

新建DEFAULT.ASPX页面加载用户控件，显示

 

代码

   < script  language ="javascript"  type ="text/javascript" >
//  <!CDATA[
     function  Button1_onclick() {
      WebService.GetUserControlPath( " ~/WebUserControl.ascx " , onSuccessed, onFailed);
    }
     function  onSuccessed(result) {
      $get( " TextArea1 " ).vaule  =  result;
       var  divResult  =  $get( " divShow " );
      divResult.innerHTML =  result;
    }
     function  onFailed(error) {
      alert(error);
    }
//  ]]>
   </ script >

</ head >
< body >
   < form  id ="form1"  runat ="server" >
   < asp:ScriptManager  ID ="ScriptManager1"  runat ="server" >
     < Services >
       < asp:ServiceReference  Path ="~/WebService.asmx"   />
     </ Services >
   </ asp:ScriptManager >< p >
     < input  id ="Button1"  type ="button"  value ="button"  onclick ="return Button1_onclick()"   /></ p >
   < div  id ="divShow" >
   </ div >
   </ form >
</ body >
</ html >

 

点击按钮就可以动态加载用户控件，大家可以自己动手弄下，如果有兴趣，我只是给自己留个记号