使用JQuery实现延迟加载UserControl

最新推荐文章于 2023-06-01 15:40:01 发布

WangPengAn

最新推荐文章于 2023-06-01 15:40:01 发布

阅读量732

点赞数

文章标签： jquery webservice listview stylesheet server reference

本文链接：https://blog.csdn.net/WangPengAn/article/details/7768376

版权

延迟加载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:  });

这样就实现了

关注