延迟加载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
分类:
ASP.NET 2.0
, JQuery
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· 【.NET】调用本地 Deepseek 模型
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库
· 上周热点回顾(2.17-2.23)