Partial Views
Information on working with partial views in Umbraco
A Partial View (.cshtml
file) is a regular view that can be used multiple times throughout your site. A Partial View is used to break up large markup files into smaller components such as header, footer, navigation menu, etc. It helps to reduce the duplication of code. A partial view renders a view within the parent view.
Partial Views in the Backoffice
You can create and edit partial views in the Partial Views folder from the Settings section of the Backoffice.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-f2db936d6586978d6ad59b5d1be5f14bbaa0c3f2%252Fcreate-partial.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=645d498&sv=1)
In the Create menu, there are three options available:
New empty partial view
New partial view from snippet
Folder (for keeping the partial views organized)
Creating a Partial View
To create a partial view:
Go to the Settings section in the Umbraco backoffice.
Click ... next to the Partial Views folder.
Choose Create.
Select New empty partial view.
Enter a partial view name.
Click the Save button. You will now see the partial view markup in the backoffice editor.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252Fgit-blob-9f38a626f45c059f86248f826dc0a378e27b1f2c%252Fcreated-partial-view.png%3Falt%3Dmedia&width=768&dpr=4&quality=100&sign=e31744bc&sv=1)
![Created partial view](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252FG90TPSgGkOimN0S4yz25%252Fimage.png%3Falt%3Dmedia%26token%3Da61ec928-1832-4bcf-8314-2d5edef3927e&width=768&dpr=4&quality=100&sign=54722f90&sv=1)
By default, the partial view is saved in the Views/Partials
folder in the solution.
Creating a Partial View from Snippet
To create a partial view from the snippet:
Go to the Settings section in the Umbraco backoffice.
Click ... next to the Partial Views folder.
Choose Create.
Select New empty partial view from snippet.
Select the snippet you want to create a partial view for and enter a partial view name. The code snippet you selected is displayed in the backoffice editor.
Click the Save button.
![](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252FyLB4nKySO9M5BLgRvTTC%252Fimage.png%3Falt%3Dmedia%26token%3D19524146-710c-4028-83fd-41e3101c5c5c&width=768&dpr=4&quality=100&sign=7d624e1&sv=1)
By default, the partial view is saved in the Views/Partials
folder in the solution. Umbraco provides the following partial view snippets:
Empty - Creates an empty partial view file.
Breadcrumb - Creates a breadcrumb of parents using the
Ancestors()
method to generate links in an unordered HTML list. It displays the name of the current page without a link.Edit Profile - Creates a Member profile model that can be edited.
List Ancestors From Current Page - Displays a list of links to the parents of the current page using the
Ancestors()
method to generate links in an unordered HTML list. It displays the name of the current page without a link.List Child Pages From Current Page - Displays a list of links to the children of the current page using the
Children()
method to generate links in an unordered HTML list.List Child Pages Ordered By Date - Displays a list of links to the children of the current page using the
Children()
method to generate links in an unordered HTML list. The pages are sorted by the creation date in a descending order using theOrderByDescending()
method.List Child Pages Ordered By Name - Displays a list of links to the children of the current page using the
Children()
method to generate links in an unordered HTML list. The pages are sorted by the page name using theOrderBy()
method.List Child Pages With DocType - Displays only the children of a certain Document Type.
List Descendants From Current Page - Displays a list of links for every page below the current page in an unordered HTML list.
Login - Displays a login form.
Login Status - Displays the user name if the user is logged in.
Multinode Tree-picker - Lists the items from a Multinode tree picker using the picker's default settings.
Navigation - Displays a list of links of the pages under the top-most page in the Content tree. It also highlights the currently active page/section in the navigation menu.
Register Member - Displays a Member registration form. It will only display the properties marked as Member can edit on the Info tab of the Member Type.
Site Map - Displays a list of links of all the visible pages of the site using the
Traverse()
method to select and display the markup and links as nested unordered HTML lists.
Creating a Folder
To create a folder:
Go to the Settings section in the Umbraco backoffice.
Click ... next to the Partial Views folder.
Choose Create.
Select Folder.
Enter a folder name.
Click the Create button.
![Created folder](https://docs.umbraco.com/~gitbook/image?url=https%3A%2F%2F3701346516-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FG1Byxw7XfiZAj8zDMCTD%252Fuploads%252FzqqkFeWU32iIkaXEPir0%252Fimage.png%3Falt%3Dmedia%26token%3Da7abe95c-d46b-4b33-b3cf-b89769280005&width=768&dpr=4&quality=100&sign=adaeaadf&sv=1)
Rendering a Partial View
To render the created partial view into any template, use any of these helper methods: @Html.PartialAsync
, @Html.Partial()
, or @Html.RenderPartial()
Related Articles
Video Materials
Last updated