Use @ renderpage in the front-end view of the bootstrap development framework to implement modular page content isolation, reducing complexity

In many development scenarios, we need to consider abstract, modular, and other aspects in many cases. The purpose is to reduce the number of changes that need to be paid attention to during development, the overall development process is simpler, reducing development complexity. During winform development, you can often achieve this by defining the basic class modules and user controls. During web development, can we also use these features? Can the HTML in the MVC view template use these features to isolate the changed part so as to reduce the complexity of the entire page and improve the reusability of the module? This article describes ASP. net mvc view processing. Use @ renderpage to implement modular page content isolation and reduce complexity.

1. Review winform interface processing methods

Taking workflow form processing as an example, the rules and processing logic for form processing are similar in most cases, therefore, you can extract the unchanged content from the base class interface. For the winform method, we can implement it by inheriting different business form objects, as shown in the following processing method.

Because the base class is determined and most processing rules are encapsulated, you only need to assign values or read values related to the business interface in the subclass interface, we can easily create different business forms. We only need to place the changed content in the subform.

For example, for forms for business trip applications and meeting room application, their form interface inheritance relationships are as follows.

This is how the winform interface is processed. In the front-end view of the bootstrap development framework, how can we process the separation operations of these interfaces with similar rules?

The answer is to use @ renderpage to implement modular isolation of page content.

 

2. Use @ renderpage to implement modular isolation of page content

At the beginning, we noticed that the same page layout has been isolated from the master operation in the MVC view, and the child form only needs to define the view code of different parts.

Furthermore, we can also use @ renderpage in subpages to differentiate the contents of different business interfaces.

For example, for the view content of the create form interface.

The preceding view is divided into several parts. One is to create a form interface for processing. The selection user interface is a pop-up user selection box, because user processing is a common operation, we need to extract it from a view page. When necessary, we can use @ renderpage to modularize the page content.

@RenderPage("~/Views/Apply/SelectUser.cshtml")

When the user clicks the select process handler button, a div layer is displayed, which is the selection User Interface we just implemented using @ renderpage. This processing method is more flexible, you can include the Code as needed. You do not need to duplicate the code of a large segment to facilitate code maintenance.

Similarly, for the form interface, although its interface content is much more complex than the interface for creating a business form, it uses the same processing method.

As we can see just now, in the winform interface, the following view inheritance method is used.

In the MVC View Interface, @ renderpage is used to modularize the page content.

In this way, although the primary view and subview have the same name, they are under different controller names, so that we can view the viewdetail in the parent page view. cshtml can encapsulate some common processing interface content, while leaving some of the presentation content related to the specific business form on the viewdetail of the subpage. cshtml.

In the page address, the complete page access path is:/Reimbursement/viewdetail? Id = 8f32231d-852e-9f16-6e5a-79031c8ec995. This URL actually accesses the content in the specific business view, but the business view has referenced the common parts of the parent page.

Let's take a look at the view page code in a specific business form, as shown below.

The unchanged business interface content (which can be understood as a parent form) can also be included through the reference page.

<! -- Place the data presentation of the business form here to facilitate isolation and reduce complexity --> @ renderpage ("~ /Views/apply/viewdetail. cshtml ", new {applyid = request [" ID "]})

In this way, they are maintained separately, and the common part is in the views/apply/viewdetail. cshtml view page.

The common part can encapsulate regular event processing and interface display. The following is a description of the interface view.

Here, we can also see the view layer interface for general-purpose users.

@RenderPage("~/Views/Apply/SelectUser.cshtml")

Finally, let's take a look at the effects of two different view interfaces, so that the isolation interface does not affect the overall effect, but it can reduce the complexity of code maintenance.

The following figure shows the new business flow form.

The following figure shows the details of a specific process form.

 

 

Use @ renderpage in the front-end view of the bootstrap development framework to implement modular page content isolation, reducing complexity