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

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

 

使用ASP.NET Ajax 和Web Service动态加载用户控件_ajax使用ASP.NET Ajax 和Web Service动态加载用户控件_ASP.NET_02代码
 <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
      <Services>
        <asp:ServiceReference Path="~/WebService.asmx" />
      </Services>
    </asp:ScriptManager>
  </div>

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

 

使用ASP.NET Ajax 和Web Service动态加载用户控件_ajax_03使用ASP.NET Ajax 和Web Service动态加载用户控件_ASP.NET_02代码
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.NET Ajax 和Web Service动态加载用户控件_ajax_03使用ASP.NET Ajax 和Web Service动态加载用户控件_ASP.NET_02代码
<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>

 

后台代码如下

 

使用ASP.NET Ajax 和Web Service动态加载用户控件_ajax_03使用ASP.NET Ajax 和Web Service动态加载用户控件_ASP.NET_02代码
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页面加载用户控件，显示

 

使用ASP.NET Ajax 和Web Service动态加载用户控件_ajax_03使用ASP.NET Ajax 和Web Service动态加载用户控件_ASP.NET_02代码
  <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>

 

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