摘要:作者在设计这个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

评论