Looping through model of RSS feeds in mvc razor

Question

I'm generating a list of rss links in my model that I want to show on my webpage. The model works fine and the display of the links works fine on the view. My question is this, I'd like to display the links in 2 side by side columns. The first 5 links in the first column and the next 5 links in the second column. Right now I'm showing all 10 links in each column. I'm sure there is an easy way to do this, but I'm just not sure how. Any help would be appreciated.

Here is my model:

namespace OA.Models
{
public class Rss1
{
    public string Link { get; set; }
    public string Title { get; set; }
    public string Description { get; set; }
}

public class Rss1Reader
{
   private static string _blogURL = "http://www.test.com/blogs/news/feed/";
    public static IEnumerable<Rss1> GetRss1Feed()
    {
        XDocument feedXml = XDocument.Load(_blogURL);
        var feeds = from feed in feedXml.Descendants("item")
                    select new Rss1
                    {
                        Title = feed.Element("title").Value,
                        Link = feed.Element("link").Value,
                        Description = Regex.Match(feed.Element("description").Value, @"^.{1,180}\b(?<!\s)").Value
                    };
        return feeds;
    }
}

}

Here is my view:

@model IEnumerable<OA.Models.Rss1>


        <table style="width: 80%;margin-left: auto;margin-right: auto;margin-top:10px;margin-bottom:25px;">

            <tr>
                <td>
                    <div id="RSSCOL1">
                            <span style="font-size:.9em;">
                                @foreach (var item in Model)
                                {
                                    <a href="@item.Link" target="_blank">@item.Title</a><br />
                                }
                            </span>

                    </div>
                </td>
                <td>
                    <div id="RSSCOL2">
                        <span style="font-size:.9em;">
                             @foreach (var item in Model)
                            {

                                <a href="@item.Link" target="_blank">@item.Title</a><br />
                            }
                        </span>
                    </div>
                </td>
            </tr>
         </table>

score 0 · Accepted Answer · edited May 23 '17 at 10:33

0

The quickest way to accomplish this is to update your first and second loops to this...

@foreach (var item in Model.Take(Model.Count()/2))
...
@foreach (var item in Model.Skip(Model.Count()/2))

However, you might want to consider one loop that displays an unordered list, then using css to lay it out into columns. What if someone is looking at your page on a phone vs a 27-inch screen? You may want the columns to display differently. Good luck! See this link: How to display an unordered list in two columns?

edited May 23 '17 at 10:33

Community

1
1

answered Dec 16 '14 at 18:06

Brad

314
1
2
10

That worked great. Thank you for the help. I'll look into the unordered list approach. – Brett Dec 16 '14 at 19:23
No problem Brett. If this solved your problem, please mark the answer as accepted. Thanks! – Brad Dec 16 '14 at 20:37

Looping through model of RSS feeds in mvc razor

1 Answers1