We love to show off our work from time to time, and we’re especially proud of this recent website…
Building on their enormous growth in recent years Horizon Estates decided it was time to upgrade their website to match their status. As the leading estate agents in their area, they needed a website that would automatically update to reflect the properties they have for sale on RightMove. They also required the ability to manage their own content, so we opted to create them a dynamic website using WordPress as the content management system.
The website was redesigned from the ground up, which allowed us to take advantage of new branding Horizon had recently created for their promotional material. Wordpress also provided an excellent platform for Horizon’s employees to update their news.
RightMove integration ensured that the property information displayed on the Horizon Estates website was always up to date. Horizon Estates’ customers are now able to effortlessly browse sales and rental property listings, and arrange viewings at the click of a button.
To understand instantly what AsyncSections are all about, check out the comparison demo.
What problem does AsyncSections solve?
Some serverside functions take a while to complete, this can cause IIS thread starvation, which is addressed by MVC’s AsyncController. Great!
However, from a user’s perspective nothing changes. They still have to wait x seconds for the page to respond and are are usually stuck on a white page that looks like the server isnt doing anything
That’s where AsyncSections come in! Imagine if you could seperate your view into sections which contain the results of your long running functions. Now you can! These are seperated from normal document rendering to allow the page to load first, then load in the results when they are ready.
When would I use an AsyncSection
Whenever you are doing something on the server that takes a few seconds but you dont want to make the user wait before allowing them to use the site. For example…
- Processing an imported spreadsheet
- Waiting for 3rd party APIs to respond
- Doing some processing on all records in the database
- Generating documents
- Bulk functions like emailing all users or creating notification records
- Updating the database schema of the site using an EF 4.3 data migration
- Use your imagination
In theory, any page that accesses the database could use an AsyncSection, especially if it runs multiple different queries that display their results in different areas of the page, like a KPI dashboard
How do AsyncSections work?
AsyncSections are standard MVC sections which are suffixed with “Async” but they dont get rendered to the page in the standard way.
There is a new AsyncSectionController which contains the new AsyncView() and AsyncSection() methods. These combined with the new RenderBodyAsync() helper will split the page into multiple render stages.
- MasterPage is rendered up to the call to RenderBodyAsync()
- The body is rendered excluding anything in an AsyncSection
- A number of AsyncSections are rendered
- The last half of the MasterPage is rendered after the call to RenderBodyAsync()
In the example above, you will see that the element in the Task1Async section will be rendered after the example footer
But wait… what if I want my section to load into a specific part of the page?
jsTransform checks the page for new elements every 100ms until the document is ready. If the element has one of the transform attributes (transform-append, transform-replace or transform-removeClass) then it will act on the element and remove the attributes.
In the example above you can see that there is an unordered list with an id of consoleList and the AsyncSection contains a list item that has a transform-append attribute with a value of consoleList. This will take the list item and append it to the unordered list as soon as the list item arrives on the page.
Because AsyncSections arrive after the page has first rendrered, they will appear to blink at the bottom of the page until jsTransform moves them to their desired position in the DOM. To get arround this, I have added a hidden class to the list item that gets removed once the item element is transformed. There are many different ways to solve this problem, but this is a quick way to get you started.
AsyncSections is a research project that contains a lot of reflection on the internals of MVC4 and should not really be used in a production environment. The idea was to show what was possible with a few small tweaks of the Rendering system and with a bit of luck, get something similar added to a roadmap for MVC5+
For this reason, this project will probably only ever have a pre release NuGet package
Please show your support for this project by sharing it with others and letting the MVC team know you would like a feature like this in the future. Fingers crossed