延迟加载UserControl这个需求，我们有时保证组件灵活性，需要动态加态UserControl．其实这实现并不难．此处我们用JQuery调用WebService来实现延迟加载UserControl．
有一个UserControl是读取CNN的Rss，然后展示出来：
1: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="RSSReaderControl.ascx.cs" Inherits="RSSReaderControl" %>2: <asp:ListView runat="server" ID="PostList">3: <LayoutTemplate>4: <ul>5: <asp:PlaceHolder runat="server" ID="itemPlaceholder" />6: </ul>7: </LayoutTemplate>8: <ItemTemplate>9: <li><a href='<%# Eval("Link") %>'><%# Eval("Title") %></a><br />10: <%# Eval("Description") %>11: </li>12: </ItemTemplate>13: </asp:ListView>
Cs:
1: protected void Page_Load(object sender, EventArgs e)
2: { 3: XDocument feedXML =4: XDocument.Load("http://rss.cnn.com/rss/cnn_world.rss");
5: 6: var feeds = from feed in feedXML.Descendants("item")
7: select new
8: {9: Title = feed.Element("title").Value,
10: Link = feed.Element("link").Value,
11: Description = feed.Element("description").Value
12: }; 13: 14: PostList.DataSource = feeds; 15: PostList.DataBind();16: }
WebService的实现，关键部分:
1: [WebService(Namespace = "http://tempuri.org/")]
2: [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 3: [System.Web.Script.Services.ScriptService]4: public class RSSReader : System.Web.Services.WebService {
5: 6: /// <summary>
7: /// Gets the RSS reader.
8: /// </summary>
9: /// <returns>result html</returns>
10: [WebMethod]11: public string GetRSSReader()
12: {13: Page page = new Page();
14: UserControl ctl = 15: (UserControl)page.LoadControl("~/RSSReaderControl.ascx");
16: 17: page.Controls.Add(ctl); 18: 19: StringWriter writer = new StringWriter();
20: HttpContext.Current.Server.Execute(page, writer, false);
21: 22: return writer.ToString();
23: } 24: }然后，放在一个Page中：
1: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
2: 3: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
4: <html xmlns="http://www.w3.org/1999/xhtml">
5: <head runat="server">
6: <title>Delay Load User Control Example</title>
7: <link href="Default.css" rel="stylesheet" type="text/css" />
8: </head>
9: <body>
10: <form id="form1" runat="server">
11: <div id="Container">
12: <div id="RSSBlock">
13: <div id="RSSContent" class="loading">
14: </div>
15: </div>
16: </div>
17: </form>
18: 19: <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js"></script>
20: 21: <script type="text/javascript" src="Default.js"></script>
22: 23: </body>
24: </html>
关键的Js:
1: /// <reference path="http://ajax.microsoft.com/ajax/jquery/jquery-1.3.2.min.js" />
2: $(document).ready(function() {
3: $.ajax({4: type: "POST",
5: url: "RSSReader.asmx/GetRSSReader",
6: data: "{}",
7: contentType: "application/json; charset=utf-8",
8: dataType: "json",
9: success: function(msg) {
10: // Hide the fake progress indicator graphic.
11: $('#RSSContent').removeClass('loading');
12: // Insert the returned HTML into the <div>.
13: $('#RSSContent').html(msg.d);
14: } 15: }); 16: });这样就实现了．后期我会将实现Asp.net MVC的．
希望这篇POST对您有帮助．
Author: Petter Liu http://wintersun.cnblogs.com