JQuery Carousel Control in ASP.NET

In this article we will explore how to build Carousel control. To start with first we will build Static HTML carousel control & then we will integrate with our .NET Repeater control to show data & work similar to Static HTML content.
It is expected you have basic knowledge on what is JQuery.

Below are steps to be followed to build Carousel control
1. Open new web site & start scratching default.aspx as mentioned below
2. Download below JQuery java script files from http://jquery.com site
a. jquery-latest.pack.js
b. jcarousellite_1.0.1.js
3. Add above JS script reference in default.aspx under head tags as shown below
<script type=”text/javascript” src=” jquery-latest.pack.js”></script>
<script type=”text/javascript” src=” jcarousellite_1.0.1.js”></script>

4. Now we will add a div, which will contain Unordered list tag & image tags. This div should be assigned with some class name. In our instance we are using class name as “anyClass” & image should be assigned with proper image source path

<div class=”anyClass”>
<li><img src=” sample-logo.png” alt=”” width=”100″ height=”100″ ></li>
<li><img src=” sample-logo.png” alt=”” width=”100″ height=”100″ ></li>
<li><img src=” sample-logo.png” alt=”” width=”100″ height=”100″ ></li>
<li><img src=” sample-logo.png” alt=”” width=”100″ height=”100″ ></li>

5. Now for navigation of images, we need 2 buttons for forward & backward navigation.
<button class=”prev”><<</button>
<button class=”next”>>></button>

6. In the head section, add JS script tag & add the following code.
<script type=”text/javascript”>
$(function() {
btnNext: “.next”,
btnPrev: “.prev”


/*  Comment : div class name & following  and name in this line of code should match $(”.anyClass”).jCarouselLite( */

7. Now run the page & see the output.
8. So far so good, till now we have seen static HTML works fine.  Let’s say we have image list which comes from DB source or any other source & you want to bind it to grid view or any list control. But when you use these control you would not be able to add UnOrdered list <ul> and the HTML as same as above static. If you have similar HTML, JQuery carousel will not work properly. I mean you need to have <div>, followed by <ol> then followed by <li> & finally <img> tag.
9. So to get out of this & generate similar stuff, we need to Repeater control instead of GridView, DataGrid and DataList
10. First lets add Repeater control to webpage, inside our DIV & css class should be “anyClass”

<div class=”anyClass”>
<asp:Repeater ID=”myRepeater” runat=”server”>
<td><img src=”<%# DataBinder.Eval(Container.DataItem, “ImageURL”)%>” alt=”” width=”100″ height=”100″ />



11. To bind this repeater with source, we will generate static list as following

var list = (new[] { new { ImageURL = “images/sample-logo.png”, Text = “The Sun” } }).ToList();
list.Add(new { ImageURL = “images/sample-logo.png”, Text = “New York” });
list.Add(new { ImageURL = “images/sample-logo.png”, Text = “Office Meeting” });
list.Add(new { ImageURL = “images/sample-logo.png”, Text = “A Beach” });
list.Add(new { ImageURL = “images/sample-logo.png”, Text = “Global Technology” });
list.Add(new { ImageURL = “images/sample-logo.png”, Text = “My Global Technology” });
list.Add(new { ImageURL = “images/sample-logo.png”, Text = “Our Global Technology” });

Hope above code is simple enough to understand, is yes then let’s move on

12. Finally add this list to our repeater control

myRepeater.DataSource = list;

13. Now run the application & have a look at the output.
Happy Kooding… Hope this helps!


Read RSS FEED data (blogspot.com)

Hi All,

In this article we will see how to read RSS Feed data & show it on our web site.
To start with on we need to know from where we are going read RSS feed data. In this example, we will read RSS feed data from blogger.com site, where recent posts are available.
Let’s say there is a blog spot as http://xxxxxx.blogspot.com then RSS feed data would be available at http://xxxxx.blogspot.com/rss.xml. So this is the source data for us to work with.
Now start with code part:

1. First lets add DataGrid to our web page, with one template column as shown below

<asp:DataGrid runat=”server” ID=”myPosts” AutoGenerateColumns=”False”>
<asp:TemplateColumn HeaderText=”My Posts”>
<a href=”<%# DataBinder.Eval(Container.DataItem, “link”)%>”>
<%# DataBinder.Eval(Container.DataItem, “title”) %>
2. In our page load, lets declare XMLTextReader object with & this will take RSS FEED URL. In this example I am using my blogspot url
XmlTextReader reader = new XmlTextReader(”http://bgsuryablog.blogspot.com/rss.xml“);
3. We will declare Dataset
DataSet ds = new DataSet();

4. To read XML data & read into DS lets use below code

5. As we have dataset object filled up with RSS feed data. Lets assign Dataset to datagrid as below
myPosts.DataSource = ds;

6. Dataset object would contain properties in the form of Link & Title, which we have used in our .aspx code i.e. step1

7. Now execute the code & see the output

Happy Kooding… Hope this helps!

Find No of Lines in Files (In a directory & sub directory)

Hi All,

In this article, we will perform below tasks & this code base is window forms

1.       Find  list of files present in a directory & sub directory without calling function(s) recursively i.e. avoid recursive function

2.       Calculate no of lines of code available in all files under a directory & sub directory

This code is Window Form code:

1.       Open a new windows form application

2.       Add following  controls to the form1,assign controls NAME & TEXT properties respectively

a.       Label  à Name: lblPath, Text: Files Path

b.      Label à Name: lblFileTypes, Text: File Types

c.       Label à Name: lblLinesCount, Text : No of Lines

d.      Label à Name: lblFilesCount, Text : No of Files

e.      Textbox à Name : txtPath, Text:

f.        Button à Name: btnCalculate, Text: Calculate Lines

3.       Declare below global variable inside the form1 class

int linesCount = 0;

4.       Add below code in btnCalculate click event with inline comments to each code statement

private void btnCalculate_Click(object sender, EventArgs e)


/* below code, declares array list object & call GetAllFiles which will take folder path which is to be crawled & this function returns all files in the directory & sub directories */

ArrayList filesList = GetAllFiles(txtPath.Text.ToString());

/* below code, for loop is to read each file from filesList object & sum no of files present in each file */

foreach (string fileName in filesList)


/* below code, find all lines present in a files */

string[] lines = File.ReadAllLines(fileName);

/* below code, finds lines count & add it to global linesCount variable*/

linesCount += lines.Length;


/* below code, assigns not of lines present in all files to label  */

lblLinesCount.Text += Convert.ToString(linesCount.ToString());

/* below code, assigns total files crawled by our code */

lblFilesCount.Text += Convert.ToString(filesList.Count.ToString());


5.       Now let’s add GetAllFiles function, with inline comments to each code statements

/* below function takes director path to be crawled */

private ArrayList GetAllFiles(string directory)


/* below code, declares Arraylist object */

ArrayList totalFilesList = new ArrayList();

/* below code, does a preliminary checks to see if the directory path is not empty, if it is empty simply returns i.e. exit the function execution*/

if (directory == string.Empty)

return totalFilesList;

/* below code, creates search option object to crawl all sub directories in a parent directory. The beauty of this is, by using this we can avoid calling of function recursively to find sub directories */

SearchOption sop = SearchOption.AllDirectories;

/* below code, get all files in a directories & sub directories with the extensions .cs

Directory.GetFiles returns files list & take 3 parameters 1. Root directory path 2. Files to be read with extension .cs 3. SearchOption object */

string[] files = Directory.GetFiles(directory, “*.cs”, sop);

/* below code, add up the filesList to main arraylist object */


/* below code, return arraylist with list of files */

return totalFilesList;


6.       Now execute & the output

Happy Kooding… Hope this helps!