摘要:作者在设计这个Rss阅读器,主要涉及到三个技术亮点: ASP.NET AJAX的组件UpdatePanel和UpdateProgress , ASP.NET AJAX ControlToolkit的组件collapsiblepanelextender,还有Rss Toolkit的Rss Data Source。 背景知识:你必须安装ASP.NET AJAX RC1 extensions ,ASP.NET AJAXControlkit以及Rss Toolkit。 实现过程: 使用Css来布局一下页面,在右边的面板(panel)包含一个用来绑定RssDataSource的DataList控件来显示Blog的每一项,DataList控件被包含在asp:UpdatePanel。Datalist的item模板含有一个来自AjaxControlToolkit的collapsiblepanelextender组件来显示Blog每一项的描述。 改变blog的选择来查看文件,asp:UpdateProgress面板被设置来显示,Blog每项被加载和显示。你能够在Blog列表看到,我简单地隐藏了<li>元素的背景来显示被激活的内容。 ASPX markup <div id="content-side1">    <ul class="list-of-links">        <li id="list1" class="current">            <asp:LinkButton ID="LinkButton1" runat="server"                 CommandArgument="1" OnCommand="lnkOptions_Command"                OnClientClick="linklist_onclick(1);">ASP.NET Latest            </asp:LinkButton></li>        <li id="list2">            <asp:LinkButton ID="LinkButton2" runat="server"                 CommandArgument="2" OnClientClick="linklist_onclick(2);"                OnCommand="lnkOptions_Command">C# Latest            </asp:LinkButton></li>        <li id="list3">            <asp:LinkButton ID="LinkButton3" runat="server"                 CommandArgument="3" OnClientClick="linklist_onclick(3);"                OnCommand="lnkOptions_Command">Vista Latest            </asp:LinkButton></li>        <li id="list4">            <asp:LinkButton ID="LinkButton4" runat="server"                 CommandArgument="4" OnClientClick="linklist_onclick(4);"                OnCommand="lnkOptions_Command">ASP.net AJAX Latest            </asp:LinkButton></li>        <li id="list5">            <asp:LinkButton ID="LinkButton5" runat="server"                 CommandArgument="5" OnClientClick="linklist_onclick(5);"                OnCommand="lnkOptions_Command">Dmitryr's Latest            </asp:LinkButton></li>    </ul></div> Blog Role Panel... <asp:panel id="BlogPanel1" runat="server">    <rss:rssdatasource id="RssDataSource1" runat="server"         maxitems="0" Url="http://www.asp.net/News/rss.ashx">    </rss:rssdatasource>    <asp:DataList ID="BlogList1" runat="server" DataSourceID="RssDataSource1">        <ItemTemplate>            <asp:Panel ID="panelHeader" runat="server"                    Style="cursor: pointer; color: #d61719;                   width: 100%; display: block;">                                    <%# Eval("title") %>                                <asp:Image ID="Image1" runat="server"                     Style="float: right;" ImageUrl="~/images/expand_blue.jpg" />            </asp:Panel>            <asp:Panel ID="Panel1" runat="server"                 Style="margin-top: 3px; background: transparent url                      (images/blogBack.gif) no-repeat text-top left;">                <%# Eval("description") %>                (<asp:HyperLink ID="hlMore" runat="server"                     NavigateUrl='<%# Eval("link") %>' Target="_blank"                    Text="read more"></asp:HyperLink>)            </asp:Panel>            <ajaxt:collapsiblepanelextender id="cpe1"                 runat="server" targetcontrolid="Panel1"                expandcontrolid="panelHeader"                 collapsecontrolid="panelHeader" suppresspostback="true"                imagecontrolid="Image1" collapsed="true"                 expandedimage="~/images/collapse_blue.jpg"                collapsedimage="~/images/expand_blue.jpg" />            <hr style="border-bottom: 1px dotted #B2B2B2; margin: 0px;" />        </ItemTemplate>    </asp:DataList></asp:panel> C# code-behind 正如你所见到,每一个LinkButton跟随着一个OnCommand处理事件,以及参数确定那个Blog获取数据源的绑定。 protected void lnkOptions_Command(object sender, CommandEventArgs e) {    int command = Convert.ToInt32(e.CommandArgument);     switch (command) {        case 1:            RssDataSource1.Url = "http://www.asp.net/News/rss.ashx";            BlogList1.DataBind();            lblHeader.Text = "ASP.NET News";            break;        case 2:            RssDataSource1.Url =                "http://msdn.microsoft.com/vcsharp/rss.xml";            BlogList1.DataBind();            lblHeader.Text = "C# News";            break;        case 3:            RssDataSource1.Url =                "http://windowsvistablog.com/blogs/MainFeed.aspx";            BlogList1.DataBind();            lblHeader.Text = "Windows Vista News";            break;        case 4:            RssDataSource1.Url =                "http://weblogs.asp.net/atlas-team/rss.aspx";            BlogList1.DataBind();            lblHeader.Text = "ASP.net AJAX News";            break;        case 5:            RssDataSource1.Url =               "http://blogs.msdn.com/dmitryr/rss.xml";            BlogList1.DataBind();            lblHeader.Text = "Dmitryr's blog";            break;        default:            break;    }} 在页面的最后,我还添加了一些javascript来操纵css的类,而css的类用于Blog列表每一项指定那个被激活。如果变量ele(<li>元素)为null,我假设这是第一次调用(call),因此这个元素可能是list1。 <script language="javascript" type="text/javascript">    var ele;    function linklist_onclick(itemNumber) {        if(ele == null) ele = $get("List1");                ele.className = "";        ele = ele = $get("list" + itemNumber);        ele.className = "current";        return true;    }</script> 本人翻译的文章,若有不好,恳请大家指点,谢谢!参考代码:http://www.codeproject.com/Ajax/AspNetAJAXRssReader/RssReader_src.zip  

评论