Partial Views are just Views that can be reused across your application. Partial Views can be thought of as pluggable reusable blocks that you can call from anywhere and have the content of the partial view displayed.
Consider the following structure of a web page—it's the same layout page that we used earlier, but with a couple of changes. The Latest News block is added to the Side Section and the Login block is added to the Top Section. These blocks are not restricted to the Top Section or Side Section and can be used anywhere in your application, including your Content Section as shown in the following figure:
These Partial Views are not restricted to static content and can contain form
elements. In the preceding screenshot, the Latest News Partial View contains the text content and the login Partial View contains form
elements to get the e-mail ID and password.
Location of Partial Views—Framework does not restrict the location of the Partial View. However, by convention, if your Partial View will be used only by your Controller, you can create that Partial View in the Controller-specific Views folder. For example, if your Partial View will only be used in HomeController
file, you can create that Partial View in the ViewsHome
folder.
Let's take look at how to create a Partial View and use it.
As discussed earlier, a Partial View is just like a normal View. So, we will create a Partial View in the same way we create normal View.
Right-click on the Shared
folder and select Add | New Item. By convention, like all shared content, the name of the Partial View will also start with "_
"(underscore), as shown in the following screenshot:
In the generated Partial View, I have added the following simple static content—a text and a simple table:
<b>This content and below table is coming from partial view</b> <table border="1"> <tr> <th>Employee No</th> <th>Employee Name</th> </tr> <tr> <td>10012</td> <td>Jon Skeet</td> </tr> <tr> <td>10013</td> <td>Scott Guthrie</td> </tr> </table>
A Partial View can be called using the @Html.Partial
HTML helper.
In our case, we will be calling the Partial View from Index2.cshtml
file. The parameter that you pass will be the name of the partial file. It will search for the Partial View by that name and render that complete content as part of the Index2.cshtml
file.
The content of Index2.html
file will now be as follows:
Hello. This text will be rendered in body of the layout page<br/> <br/> <br/> @Html.Partial("_PartialHelloWorld")
Now, run the application and access the URL http://localhost:50132/Home/Index2
. You'll see the following output: