As web development and architecture matures so does the way we need to structure our projects. For me that means single page applications. And while I have not had time to write on the topic yet I have been developing my approach to focus on performance and extensibility. Because a single page applications require all the views or pages of an application be available at anytime it means the applications needs to receive all the content up front. Whether you want to actually pull all the applications views at once or utilize a deferred strategy the need to include all the views from a single URL is required.
Managing all these views would be extremely confusing and over complicated using a single page or view. Instead all these views should be some form of individual files, either a shared view or specific cshtml file. But the main page or what I call the deferred content page actually returns all the views in a structured manor.
For MVC I like to include the views in a structured way under the Shared folder. This makes it easier to reference, well at least it gives you the freedom to not include the file extension. In MVC razor these views are included using the following syntax:
@Html.Partial("ViewName")
The Html.Partial method uses the Html helper class and renders the content of the view as an HTML encoded string. Additionally you can pass extra data as an object to the Partial method. You can read more about implementing Html.Partial and Html.PartialView on my friend Rachel Appel's blog.
More and more I find myself developing web applications in using WebMatrix, which also uses the Razor view engine. Unlike ASP.NET MVC WebMatrix does not have the Html helper class available, and instead just uses the Razor view engine directly. Instead of the above syntax, WebMatrix razor looks like the following:
@RenderPage("Viewname.cshtml")
Notice you have to include the explicit file extension. Besides the file path parameter you can also pass additional data as extra parameters to the RenderPage method. This can be a series of parameters or an object. These extra parameters can be retrieved in the view itself by accessing the PageData property.
The output rendered using these methods ultimately looks something like the following:
<
section
id
="View1"
class
="content-pane"
>
<
h1
>
View1</
h1
>
<!-- content here -->
</
section
>
<
section
id
="View2"
class
="content-pane"
>
<
h1
>
View2</
h1
>
<!-- content here -->
</
section
>
<
section
id
="View3"
class
="content-pane"
>
<
h1
>
View3</
h1
>
<!-- content here -->
</
section
>
Obviously using this technique does not have to be limited to a single page web application, but can be used in many scenarios. Its a great technique to leverage when you have common content that can be included in multiple pages in your site or just to break down a large page into more manageable chunks.
