Mvc5+ef6 Getting Started complete tutorial Six

Let's talk about partial view in this article.

The previous article mentioned the two helpers for partial and action, and this article mainly combines these two helpers to illustrate the application of partial view.

article outline

• Theoretical basis
• Detailed steps
• Summarize

Theoretical basis – partial view

Partial view refers to a fragment (similar to the previous user control) that can be applied to a view as part of a view, and can be written once, like a class, and then reused in other view.

Generally put in the "views/shared" folder to share.

Create partial view: Generally right-click the "views/shared" folder to add partial views.

There are two types of helpers using partial view:

Html.partial/html.renderpartial

Html.action/html.renderaction

Detailed Steps

About five years ago I developed a iportal (similar to the previous igoogle, now igoogle has been closed), other similar reference sites: http://dropthings.omaralzabir.com/

There are widgets that can be customized, so let's develop a simple widget to illustrate the use of partial view.

Create a partial view

For example, create a _partialpagewidget.cshtml

We make a primitive widget.

Refer to the diagram below to define the HTML structure of the widget.

Borrowed the style of the panel in bootstrap, the structure is as follows.

Use with html.partial/html.renderpartial

Direct application of html.partial or Html.renderpartial assisted method is relatively simple.

Open the previously built views/mvcdemo/index.cshtml file and add the following:

Show Results:

Use with Html.action/html.renderaction

The use of html.action/html.renderaction is slightly more complicated and divided into two steps.

1. Add an action to the Controller Center for the view you want to display.

   Also use this page above, we add an action in the MVCDemoController.cs

   To do a simple explanation:

   1. [Childactiononly] indicates that the action should be called only as a child operation. This means that URLs that are not accessible directly through Controller/action will prompt for errors that can only be accessed by sub-requests.
   2. Must return a Partialview
2. Add related code to view

   Display results as in the previous method

Summary of two ways to use

When one or more partial views are referenced in view, this view defaults to the same data as the partial view, which means that view and all of its partial views share viewdata and ViewBag in view by default.

There is a need to make the view and the partial view introduced in it have different data, need to pass the Html.action/html.renderaction helper method, and set the corresponding data in the Action that is called.

There are a few additional points to note:

1. The difference between XXX and renderxxx is that one directly returns a string and the other is written directly to the corresponding output stream, so it cannot be placed directly in the code expression and must be placed in a code block.

   The two types of notation in the previous example are equivalent. Renderxxx has a slight performance advantage, which can be reflected in a large number of renderxxx runs.

2. Partial/renderpartial typically applies view markers in a separate folder to help view the part of the view rendering model.

   Action/renderaction performs an action in a separate controller to display results, providing more flexibility, such as passing different values with a separate controller. At the end of the article we will give an example.

3. The parameters of partial/renderpartial and action/renderaction are the names of Partialview and action respectively. Of course there are other overloaded functions, and we only say the most common ones. The application can be followed by the example we have previously cited.

examples of differences between html.partial and Html.action

Finally, let's give an example to illustrate the difference between the two usages.

2. Create a new partial View

4. A new two Action,shareddatedemo and Partialviewdate are created in the controller.

   Generate main view According to Shareddatedemo, Partialviewdate for Html.action call

6. main View:SharedDateDemo.cshtml display respectively

   time of the main view;

   The time to invoke partial view with Html.action.

   shows the result:

   1. view and all of the partial View shared view By default ViewData and ViewBag
   2. Different data can be passed by Html.action, with the called Action change

Summary

This time we mainly explain the use of the partial view of this useful function.

The html.partial is easy to use, and is very handy when you don't need to change the data content.

The html.action is more flexible and can be customized to the partial view display based on business requirements.

Please be fully aware of a few examples in this article.

All right, here we go today.

Welcome everyone to comment, let the next article better:)

Mvc5+ef6 Getting Started complete tutorial Six