Learn More





DNN Community Blog

The Community Blog is a personal opinion of community members and by no means the official standpoint of DNN Corp or DNN Platform. This is a place to express personal thoughts about DNNPlatform, the community and its ecosystem. Do you have useful information that you would like to share with the DNN Community in a featured article or blog? If so, please contact .

The use of the Community Blog is covered by our Community Blog Guidelines - please read before commenting or posting.

Learning Razor 1 - RSS-App Part 3: Integrate Image and JavaScript

In my previous posts of the series Learn Razor 1 with an RSS App you've learned to create a redistributable App built with Razor offering all the basic functionality. In this post, you'll learn how to create functions in Razor (to clean up your code) and you'll learn about some of the difficulties of thumbnails in RSS and how to cope with that.

What we'll Add In Part 3

We want to add the following:

  1. A preview Image
  2. …but don't show an image if the RSS doesn't have one
  3. Handle different formats of RSS - because there are two ways to include an image
  4. Also add a bit of JavaScript effects to learn how to package JavaScript and how to make sure the IDs of the show-buttons match up with the area it's supposed to show

So let's get started!

Preparation: Install Everything

Again, install 2sxc and everything just like in Post #2, but in this case:

If you need help, just watch the video of post #2 in this series.

Integrating JavaScript and CSS - with Client-Dependency

First we need a small JavaScript. You'll find it in the /assets folder of the App, so in the [Portal]/2sxc/[AppName]/assets. We could easily just add a fixed reference to it, but there's a helper Method in 2sxc to make sure the path is always right. There is also another feature ensure client-dependency (to bundle / zip / include-once-only). So you'll find this line very early in the template:

Of course you could also do this with a bunch of code - but it's ugly and is not sexy to edit for web designers. So we prefer this solution.  Note that the @App.Path ensures that the path is correct, no matter what portal it's in and no matter what the app-folder is (it could change...).

Note: there is a bug in the DNN Client-Dependency: the order of files included changes depending on if you're logged in. If you have a reason to specify the sort-order, just use data-enableoptimizations="207" or whatever instead of data-enableoptimizations="true".

Now Let's Show/Hide

Now we'll add a hidden DIV-section to show on-demand when the user needs it. We'll add it below each item, so that the show-click can then activate it, like this:

This DIV with the details is hidden , but will be shown when needed because of this bit of code on the "more" button:

This is all simple HTML, CSS and JavaScript. To make things a bit easier though, we're using a counter-variable in Razor to link these together. See the variable feedCount? It's used a few times, and in the last iteration, it has a ++ attached to ensure that it will become larger after being used. Pretty neat huh?

Getting the Feed-Thumbnail

Here is where the problems will start: There are at least 2 ways to include a thumbnail in an RSS-Feed. Here's one using media:thumbnail:

And here's another using enclosure:

My understanding is that the media:thumbnail is the more popular version today, but the other one is very common as well. So we need a bit of code like this to try both versions:

What you must understand:

  1. If you want to use functions, you MUST put them in a @functions { … } section. They don't work anywhere else.
  2. Just FYI: Any variable you declare in the @functions is also available in the whole view - but you must use the typed declaration like
    string myName = "Daniel";
    var myName = "Daniel"; // this would fail

Now we'll integrate the picture - with an @if() condition to check if it even has one…

See the Code and Live Result But it's even better to just download the App and work with it.

Now Try a bit yourself…

Go ahead and mess about with the code. You can do it in Visual Studio or with the edit-template functionality. And don't worry: you can always uninstall the App and install it again when you mess it up :).

Wrapping up Phase 3 - Good and Bad

So now we have a much improved Razor-based App. A lot of the last shortcomings are fixed:

  1. No image support on the RSS-feed
  2. No cool animations like light-boxes
  3. Looks better (thanks to CSS)

…but it still has many shortcomings like the following:

  1. It's not multi-language capable - so if you needed a different feed in another language, again you would have to create a new script - or additional fields for each language
  2. It's not integrated in the DNN-Search yet
  3. The admin can't control the presentation (like decide to show/hide images or reduce the amount of items)
  4. The admin couldn't easily switch to another view like a 2-column look instead of a table
  5. The in-html placeholders still look pretty ugly: @feed.Element("title").Value

All these shortcomings will be handled in the following lessons :). Stay tuned!

With love from Switzerland


Daniel Mettler grew up in the jungles of Indonesia and is founder and CEO of 2sic internet solutions in Switzerland and Liechtenstein, an 20-head web specialist with over 600 DNN projects since 1999. He is also chief architect of 2sxc (2SexyContent - see forge), an open source module for creating attractive content and DNN Apps.


There are currently no comments, be the first to post one.

Comment Form

Only registered users may post comments.


2sic Daniel Mettler (124)
Aderson Oliveira (15)
Alec Whittington (11)
Alex Shirley (10)
Andrew Nurse (30)
Anthony Glenwright (5)
Antonio Chagoury (28)
Ash Prasad (21)
Ben Schmidt (1)
Benjamin Hermann (25)
Benoit Sarton (9)
Beth Firebaugh (12)
Bill Walker (36)
Bob Kruger (5)
Brian Dukes (2)
Brice Snow (1)
Bruce Chapman (20)
Bryan Andrews (1)
cathal connolly (55)
Charles Nurse (163)
Chris Hammond (203)
Chris Paterra (55)
Clinton Patterson (28)
Cuong Dang (21)
Daniel Bartholomew (2)
Dave Buckner (2)
David Poindexter (3)
David Rodriguez (2)
Doug Howell (11)
Erik van Ballegoij (30)
Ernst Peter Tamminga (74)
Geoff Barlow (6)
Gifford Watkins (3)
Gilles Le Pigocher (3)
Ian Robinson (7)
Israel Martinez (17)
Jan Blomquist (2)
Jan Jonas (3)
Jaspreet Bhatia (1)
Jenni Merrifield (6)
Joe Brinkman (269)
John Mitchell (1)
Jon Henning (14)
Jonathan Sheely (4)
Jordan Coopersmith (1)
Joseph Craig (2)
Kan Ma (1)
Keivan Beigi (3)
Ken Grierson (10)
Kevin Schreiner (6)
Leigh Pointer (31)
Lorraine Young (60)
Malik Khan (1)
Matthias Schlomann (15)
Mauricio Márquez (5)
Michael Doxsey (7)
Michael Tobisch (3)
Michael Washington (202)
Mike Horton (19)
Mitchel Sellers (28)
Nathan Rover (3)
Navin V Nagiah (14)
Néstor Sánchez (31)
Nik Kalyani (14)
Peter Donker (52)
Philip Beadle (135)
Philipp Becker (4)
Richard Dumas (22)
Robert J Collins (5)
Roger Selwyn (8)
Ruben Lopez (1)
Ryan Martinez (1)
Salar Golestanian (4)
Sanjay Mehrotra (9)
Scott McCulloch (1)
Scott S (11)
Scott Wilkinson (3)
Scott Willhite (97)
Sebastian Leupold (80)
Shaun Walker (237)
Shawn Mehaffie (17)
Stefan Cullmann (12)
Stefan Kamphuis (12)
Steve Fabian (31)
Timo Breumelhof (24)
Tony Henrich (3)
Torsten Weggen (2)
Vicenç Masanas (27)
Vincent Nguyen (3)
Vitaly Kozadayev (6)
Will Morgenweck (37)
Will Strohl (163)
William Severance (5)
Try Evoq
For Free
Start Free Trial
a Demo
See Evoq Live
Need More Information?