FeedEk jQuery RSS, ATOM Feed Plugin in ASP.NET MVC


In this article, let’s see an example of jQuery’s one of the popular plugin – FeedEk.

About FeedEk jQuery Plugin

FeedEk is a jQuery RSS/ATOM Feed Reader/Importer/Parser. You can obtain feeds easily from any domain.

Example:

1. Create a new project, name it as “FeedEkPluginExample”.

2. Select the empty MVC template and click ok.

3. Download the FeedEk plugin here. Include the FeedEk files in the solution.

4. Now let’s add a controller and view. Right click on “Controllers” folder in the solution and select Add >> Controller, you will see following window.

Select MVC 5 Controller – Empty option and click on “Add” button.

5. Name it as “HomeController” as shown in the following screen and click “Add”.

6. Now let’s add a view for this controller. Right click on “Views” folder in the solution and select Add >> View, you will see following window and click “Add”.

7. Include the following Javascript resources into _Layout.cshtml page’s <head> section.


<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/FeedEk/js/FeedEk.js"></script>

8. Include the FeedEk css file reference in Index.cshtml file.


<link href="~/Scripts/FeedEk/css/FeedEk.css" rel="stylesheet" />

9. Add a placeholder for the widget to your page.


<div id="divRss">
</div>

10. Add the following javascript that will populate the placeholder.


<script type="text/javascript">
$(function () {
$('#divRss').FeedEk({
FeedUrl: 'http://www.asp.net/rss/spotlight',
MaxCount: 5,
ShowDesc: true,
ShowPubDate: true,
DescCharacterLimit: 150,
TitleLinkTarget: '_blank'
});
});
</script>

There are different options which you can try. Take a look here for documentation.

11. Now if you run the application, you will see following output on the page

Live Demo

Source Code Download:

Github [Repository Link]

Box.com [Direct Download Link]

Advertisements

One thought on “FeedEk jQuery RSS, ATOM Feed Plugin in ASP.NET MVC

  1. Pingback: jQuery IP Location Plugin – jqIpLocation Example | A Programming Blog

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s