使用JQuery实现延迟加载UserControl
生活随笔
收集整理的這篇文章主要介紹了
使用JQuery实现延迟加载UserControl
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
延遲加載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
總結
以上是生活随笔為你收集整理的使用JQuery实现延迟加载UserControl的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Information Theory,
- 下一篇： 查看锁表进程SQL语句