| 0 comments ]

In this article, we will see how to read and filter the RSS Feed of codetechblog.blogspot.com using LINQ to XML. We will first read the RSS feed and populate the DropDownList with ‘Authors’ retrieved from the feed. We will then filter the feed results based on the Author selected in the DropDownList.
e will be reading and filtering the RSS feed of this site codetechblog.blogspot.com. The RSS feed can be obtained over here http://feeds.feedburner.com/codetechblog. Let us quickly jump to the solution.

Step 1: Create a new website (Open Visual Studio > File > New Website) called ‘FilterRSS.
Step 2: Drag and drop a GridView and a DropDownList control to the page.
Step 3: Once you visit the RSS Feed over here, right click on the page and View Source. You will find an XML file, since RSS is an XML file.
Let us now write a LINQ to XML query to read the Title, Link, Description and Author elements from our RSS Feed and filter the results. Add the following markup to the DropDownList and some template Columns to the GridView, to display content:

<div>
    <asp:DropDownList ID="DropDownList1" runat="server"
        onselectedindexchanged="DropDownList1_SelectedIndexChanged"
        AutoPostBack="True">
    </asp:DropDownList>
    <br /><br />
    <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
    <Columns>
        <asp:TemplateField HeaderText="Title">
         <ItemTemplate>
         <a href='<%# Eval("link") %>' target="_blank"><%# Eval("title") %></a>
         </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Author"
           HeaderText="Author" />
       <asp:BoundField DataField="description" HtmlEncode="false"
               HeaderText="Description" />
    </Columns>
    </asp:GridView>
</div>

Step 4: Now create an ArticlesList class which will act as a container for the items read from the feed
VB.NET
Public Class ArticlesList
      Private privateTitle As String
      Public Property Title() As String
            Get
                  Return privateTitle
            End Get
            Set(ByVal value As String)
                  privateTitle = value
            End Set
      End Property
      Private privateLink As String
      Public Property Link() As String
            Get
                  Return privateLink
            End Get
            Set(ByVal value As String)
                  privateLink = value
            End Set
      End Property
      Private privateDescription As String
      Public Property Description() As String
            Get
                  Return privateDescription
            End Get
            Set(ByVal value As String)
                  privateDescription = value
            End Set
      End Property
      Private privateAuthor As String
      Public Property Author() As String
            Get
                  Return privateAuthor
            End Get
            Set(ByVal value As String)
                  privateAuthor = value
            End Set
      End Property
End Class

We are using Generics to return a strongly typed collection of IEnumerable items. This collection can now be passed to any other part of the application or stored in a session object to be used during postbacks.
The code will look similar to the following:

VB.NET
 
Imports System
Imports System.Linq
Imports System.Xml.Linq
Imports System.Collections.Generic
 
Partial Public Class _Default
      Inherits System.Web.UI.Page
      Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
            If (Not IsPostBack) Then
                  Dim xFeed As XElement = XElement.Load("http://feeds.feedburner.com/netCurryRecentArticles")
 
                  Dim items As IEnumerable(Of ArticlesList) = From item In xFeed.Elements("channel").Elements("item") _
                                                              Select New ArticlesList
                                    item.Element("description").Value, Author = item.Element("author").Value
                                    item.Element("link").Value, Description = item.Element("description").Value, Author
                                    item.Element("title").Value, Link = item.Element("link").Value, Description
                                    Title = item.Element("title").Value, Link
 
                  'store items in a session
                  Session("feed") = items
 
                  Dim authors = items.Select(Function(p) p.Author).Distinct()
 
                  DropDownList1.DataSource = authors
                  DropDownList1.DataBind()
                  Dim selAuth As String = DropDownList1.SelectedValue
                  PopulateGrid(selAuth)
            End If
      End Sub
 
      Protected Sub DropDownList1_SelectedIndexChanged(ByVal sender As Object, ByVal e As EventArgs)
            Dim selAuth As String = DropDownList1.SelectedValue
            PopulateGrid(selAuth)
      End Sub
 
      Protected Sub PopulateGrid(ByVal author As String)
            Dim items = CType(Session("feed"), IEnumerable(Of ArticlesList))
 
            If items IsNot Nothing Then
                  Dim filteredList = From p In items _
                                     Where p.Author = author _
                                     Select p
 
                  GridView1.DataSource = filteredList
                  GridView1.DataBind()
            End If
      End Sub
End Class
In the code above, we load the Xml from the RSS feed using the XElement class. We then enumerate through all the Channel\Item elements and populate the items collection. This collection is stored in a Session object to be reused during postbacks.
Note: Observe the !IsPostBack which populates the collection only once, thereby saving the list from getting populated on every pageload.
We then apply a filter on this collection and select distinct authors and bind the result to a DropDownList. The selected author is passed to the PopulateGrid() method where the session object is casted back to IEnumerable. The list is then filtered based on the author passed and the results are bound to a GridView.
Similarly as and when the users selects a new author from the DropDownList, the list gets filtered and only the articles belonging to that author is displayed. Here are some screenshots:




I hope this article was useful and I thank you for viewing it

| 0 comments ]

This short article demonstrates how to rotate a group of Hyperlink Controls in the same position using jQuery.
Note that for demonstration purposes, I have included jQuery code in the same page. Ideally, these resources should be created in separate folders for maintainability.
People who have been monetizing their sites need no introduction to TextLinkAds. In simple words, Text Link Ads are Hyperlinks sponsored by Advertisers. When a user clicks on these hyperlinks, they are sent to the sponsor’s website. In this recipe, I will demonstrate how to rotate multiple hyperlinks or TextLinkAds on the same position.
Let us quickly jump to the solution and see how we can rotate a group of Hyperlink Controls using client-side code. This example uses the latest minified version of jQuery which is 1.3.2 that can be downloaded from here. This example assumes that you have a folder called "Scripts" with the jQuery file (jquery-1.3.2.min.js) in that folder

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Timer based toggling of hyperlink</title>
    <script type='text/javascript'
        src='../Scripts/jquery-1.3.2.min.js'>
    </script>
   
    <script type="text/javascript">
        $(function() {
            var anch = $("a.dev");
            $(anch).hide().eq(0).show();
            var cnt = anch.length;
 
            setInterval(linkRotate, 3000);
 
            function linkRotate() {
               $(anch).eq((anch.length++) % cnt).fadeOut("slow", function() {
                    $(anch).eq((anch.length) % cnt)
                    .fadeIn("slow");
                });
            }
        });
    </script>
 
</head>
<body>
    <form id="form1" runat="server">
    <div class="tableDiv">
        <h2>The Hyperlink and Text shown below changes after 3 seconds
        </h2><br />
        <asp:HyperLink ID="linkA" runat="server" class="dev"
            NavigateUrl="http://www.google.com">
            Google</asp:HyperLink>
        <asp:HyperLink ID="linkB" runat="server" class="dev"
            NavigateUrl="http://www.yahoo.com">
            Yahoo</asp:HyperLink>
        <asp:HyperLink ID="linkC" runat="server" class="dev"
            NavigateUrl="http://www.microsoft.com">
            Microsoft</asp:HyperLink>
    </div>
    </form>
</body>
</html>
We begin by hiding all the hyperlinks with class="dev" and then display the first one.

var anch = $("a.dev");
$(anch).hide().eq(0).show();
We then use the JavaScript setInterval() function to delay the execution of a function (linkRotate) for a specific time, in our case 3000 millisecond (3 seconds), as shown below:
setInterval(linkRotate, 3000);
The advantage of the setInterval() function is that it continues to repeat the process of triggering the function at the specified interval, thereby giving it a loop effect.
In the linkRotate() function, we use a simple expression (anch.length++) % cnt that calculates the index to be supplied to the eq() selector and applies the fadeout/fadeIn() animations on the current hyperlink. eq(0) refers to the first link, eq(1) to the second link and so on.
function linkRotate() {
    $(anch).eq((anch.length++) % cnt).fadeOut("slow"function() {
        $(anch).eq((anch.length) % cnt)
        .fadeIn("slow");
    });
}

| 2 comments ]

This short article demonstrates how to click and view a larger image when the thumbnail is clicked on.Note that for demonstration purposes, I have included jQuery and CSS code in the same page. Ideally, these resources should be created in separate folders for maintainability.

Let us quickly jump to the solution and see how we can view a larger image when an image is clicked on

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Click and Increase the Size of an Image</title>
    <style type="text/css">
        .imgthumb
        {
            height:100px;
            width:100px;
        }
        .imgdiv
        {
            background-color:White;
            margin-left:auto;
            margin-right:auto;
            padding:10px;
            border:solid 1px #c6cfe1;
            height:500px;
            width:450px;
        }
    </style>
    <script type="text/javascript"
     src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
    </script>
   
     <script type="text/javascript">
         $(function() {
             $("img.imgthumb").click(function(e) {
                 var newImg = '<img src='
                                + $(this).attr("src") + '></img>';
                 $('#ladiv')
                    .html($(newImg)
                    .animate({ height: '300', width: '450' }, 1500));
             });
         });    
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="imgdiv">
        <h2>Click on the thumbnail to view a large image</h2>
        <br />
        <asp:Image ID="imgA" class="imgthumb" runat="server"
            ImageUrl="../images/1.jpg" />
        <asp:Image ID="imgB" class="imgthumb" runat="server"
            ImageUrl="../images/2.jpg" />
        <asp:Image ID="imgC" class="imgthumb" runat="server"
            ImageUrl="../images/3.jpg" />
        <asp:Image ID="Image1" class="imgthumb" runat="server"
            ImageUrl="../images/4.jpg" />
        <hr /><br />
        <div id="ladiv"></div>
    </div>
    </form>
</body>
</html>
This recipe demonstrates how to increase the size of an image when it is clicked. To give it an Image gallery effect, when a thumbnail is clicked, we create a new image element and set its source, to the source of the clicked thumbnail.
var newImg = '<img src='
              + $(this).attr("src") + '></img>';
The next and final step is to set the html contents of a div element to the ‘newImg’ variable and then increase the image size, by animating the height and width of the image.
$('#ladiv')
         .html($(newImg)
         .animate({ height: '300', width: '450' }, 1500));
When you run the application, click on the thumbnail to see a large version of the image with animation, as shown below. Additionally, you can also preload the images for better performance..























I hope you found this article useful and I thank you for viewing it.