Embedding an RSS feed into a page after it's already loaded

I'm working on reworking our website from a WYSIWYG editor to MVC. I'm all right with server side code, but complete rubbish when it comes to client side Javascript, so I'd appreciate any/all feedback.

The goal

Embed this rss feed from our blog into a page on our main website.

So that it looks like this:

Design choices/rationale

I had originally written this code to go get the RSS feed in the News controller, and bind it to the News view. This caused unacceptable load times for the page. Obviously, the page couldn't render anything until it had gone across the network to a page, that may or may not be available, and retrieve the RSS feed. It took upwards of 5-6 seconds for anything at all to render my browser.

So, I decided to try my hand at retrieving this and loading it client side after allowing the "container" of the page to load. I extracted a BlogFeed partial view that is retrieved and inserted by an Ajax call after the page is ready. This allows initial rendering to happen quickly, only later filling in the content that takes time to retrieve.

I considered either creating a separate BlogFeedService class, a separate News controller, or both, but it felt like over engineering a simple site that could almost be served up as static HTML. If either the Home controller, or News code grows any more, I will likely extract a few classes.

I used MVC so that I could extend the site with more dynamic behavior later. I intend on adding a preview of some of our project's functionality through a webapp section of this site.

Questions

Is this a good approach? I'll admit that I basically copy/pasta'd the jquery code, then monkey patched it with a Url.Action to make sure I wasn't hardcoding Urls into it.

Did I do the async/await stuff correctly? I'm never quite sure I've gotten that correct either. Secondarily, was using async await here overkill? It felt right, because reaching out over the network is potentially blocking, but there's not much for

A couple of really quick comments:

jQuery provides a load function which simplifies your code. There's also a shorthand for $(document).ready(function() {}); which is simply $(function() {});

Putting that together:

$(function() {
    $('#blogFeed').load('@Url.Action("BlogFeed")');
});

That's a bit nicer!

I'd prefer Razor server side commenting. E.g.

becomes:

@* Id is the permalink *@

That way the comment is never sent to the client browser.

Your comment about async and await:


It felt right, because reaching out over the network is potentially blocking, but there's not much for the rest of the code to do while it waits.

By not blocking, the framework can respond to more client requests! It's definitely the right thing to be doing.

Update: String.Concat explanation:

$.get(@String.Concat(Url.Action("BlogFeed"), "/"),

This code will render the following js:

$.get(/BlogFeed/,

Which is a regex literal but being treated like a string. However, this only works because it's on the default controller and so doesn't have any slashes. If it had been on it's own controller e.g. 'News/BlogsFeed' it wouldn't have worked.

StackExchange Code Review Q#117258, answer score: 5