ASP.NET AJAX RSS 阅读器

• 下载源代码 - 199 Kb

引言

有一天，我正在给我的一个项目添加一个“新闻页面”，觉得这是一个很好的机会来尝试使用一些其他 RSS 提要，这些提要与我正在做的事情有相关信息。所以，我开始寻找，找到了 RSS Toolkit，它有一个 RSS 数据源控件，非常适合使用 RSS 提要 – 实际上，Toolkit 可以做更多的事情，你应该阅读 Dmitry 的博客（他编写了 Toolkit，并且是 ASP.NET 团队的成员），并在这里下载 Toolkit 这里。

我还使用了 ASP.NET AJAX Toolkit（如果你不知道，它是一组用于 ASP.NET AJAX 的控件，这是一个开源项目，有来自微软和社区的贡献者）。我使用的控件是 Collapsible Panel control，因此你可以看到博客列表，并点击每个博客来显示文本。

背景

你需要安装 ASP.NET AJAX RC1 扩展，你可以从 这里 获得。

使用代码

使用 CSS 的简单页面布局，右侧面板包含一个 DataList 控件，该控件绑定到 RssDataSource 以显示博客项目，DataList 控件被包装在 asp:UpdatePanel 中。 DataList 中的项目模板有一个来自 AjaxControlToolkit 的 collapsiblepanelextender 来显示博客项目的描述。

更改要查看文件的博客选择，将设置 asp:UpdateProgress 面板以显示，并加载和显示博客项目。 你可以在博客列表中看到，我只是给 <li> 元素着色以显示活动博客。

ASPX 标记

<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>

博客角色面板...

<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;">
                <span style="float: left;">
                    <%# Eval("title") %>
                </span>
                <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# 后台代码

正如你所看到的，每个 LinkButton 都连接到 OnCommand 事件处理程序，并且参数标识了要绑定到数据源的哪个博客 Feed。

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 类以指示哪个是活动的。 如果 ele (<li> 元素) 是 null，我假设这是第一次调用，因此该元素将是 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>

关注点

你应该看看 codeplex 上的 AjaxControlToolkit。 Dmitry - RSS Toolkit 的作者正在寻找共同的协调者来帮助他将 Toolkit 放在 CodePlex 上；如果你有兴趣，请看一下；如果不是，他有一个 很棒的博客，非常值得一读。 这是我在 CodeProject 上的第一篇文章，但请订阅我的 博客，我在那里经常发布类似这样的小东西！