延迟加载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: });
希望这篇POST对您有帮助.