Re-draw the same UI? -Implement the ascx MVC Mode

[Abstract]

This article discusses how to improve the design and make the surface structure more flexible.

[Introduction]

A few days ago, I was talking to a friend who was also my technical manager and talked about the implementation of MVC in my ascx design. He said ASP. NET was originally separated by MVC. Aspx is V, code behind is C, and database is M. I don't think he really understands what I mean.

Specifically, I am not sure whether I understand MVC correctly. I think it is not necessary to understand the principles of mathematics or ry. A flexible and easy-to-maintain design that can solve practical problems is a good design.

[Instance]

To better understand the problem, or to reduce the length, I introduced a very common demand in practical applications: Managing members. Every member is registered in the system and we want to know his/her information as much as possible. We need a module to manage basic information about members, such as names, ages, hobbies, and contact methods. We need to collect the information. The administrator needs to query the information and the user may modify the information. In this case, we must provide several interfaces to assist users in operations.

V

Here V is the ascx diagram. As we all know, ascx can display HTML, directly query databases, and perform computation. It can accommodate any server-side controls. But the principle of good design is "High Cohesion and low coupling". ascx is actually a class. We cannot design it to make it omnipotent, or let it know our business logic too much. For example, how the database is designed and the underlying classes all have those methods. An object, no matter how complicated its internal logic is, the fewer features or methods it discloses, the better. The more common the better. So what functions are designed for ascx?

Here, we regard ascx as a "whiteboard" for displaying data negatively. Only passive to render data by setting its properties through the Controller. Data is not processed. Of course, our whiteboards are not necessarily white. In terms of format, it is still allowed to try its best. For our instances, we have designed an ascx to present basic member information. Memberinformation. ascx (memberinformation class ). We need to expose a series of features to the class memberinformation. For example, if we want to display the name, date of birth, phone number, email... on the whiteboard, We need to publish features such as name, birthdate, phonenumber, and emailaddress to memberinformation. In terms of the display chart, we need to present the data in centralized mode.

1. Read-only display during Query

2. New Member registration filling form

3. Form when the member changes his/her personal data

There may be at least the above situations. The data displayed in these views is exactly the same, and the presentation mode is significantly different. If we directly create the above interface on the ASPX page, we have to set the values of server objects that display a single piece of data. There are also complex verification of effectiveness.

Combine the preceding view.

Since data is consistent and used in multiple places, encapsulation is necessary. Let's sum up the above view. Nothing more: display data in HTML form and Report Form (read-only ). Whether it is new registration or old member change information. The V layer of ascx can present the same data scheme in two ways.

Two modes

We need to control the ascx expression mode in HTML attribute or programming mode. We set an attribute for the memberinformation class: Public String presentationmode. The reason why the string type is set is because it needs to be set in HTML attribte. Optional values include form (Form mode for data input) and report mode (read-only report mode ). In this way, we can control the expression mode as follows:

<XXX: memberinformation id = memberinformation1 runat = server presentationmode = form/>

You can also use the following method in programming:

This. memberinformation1.presentationmode = "form";



When you set the form value, ascx displays the form style.

How can we make ascx so obedient?

In ascx, place two <asp: Panel/> servers with an HTML table in order to control each server in the specified format. another installed form elements. when rendering (usually controlled by page_load), check your own presentationmode value. If it is form, the first panel is displayed and the second is hidden. If it is set to report, the opposite is true. In this way, the ascx interface can be switched.

Code Example (actual project extraction)

/// <Summary>

/// Key features: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

// Form: xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

/// Report: xxxxxxxxxxxxxxxxxxxxxxxxxx

/// Default value: Form

/// </Summary>

Private string representationmode = "form ";

Public String representationmode

{

Get

{

Return this. representationmode;

}

Set

{

This. representationmode = value;

If (value = "form ")

{

This. formpanel. Visible = true;

This. reportpanel. Visible = false;

}

Else

{

This. formpanel. Visible = false;

This. reportpanel. Visible = true;

}

}

}

Connection to public features

The public feature is the interface for its controller to access or set view data. It is usually set through programming. Since it is a public feature, get and set accessors must be available. The accessors of these features must be able to set the report data and access the form data. In short, the feature accessors generally have to clearly know which two names are in charge and which two are in charge of age. In this way, we only need to set memberinformation1.name = "Jay Xu" and memberinformation1.age = 23. You do not need to worry about where the control that displays the name is arranged, and what the name or ID is.

Sample Code for features (actual project extraction)

/// <Summary>

/// Xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

/// Xxxxxxxxxxxxxxxxxxxxxxxxxx

/// </Summary>

Public string name

{

Get

{

Return this. namebox. text;

}

Set

{

This. namebox. Text = value;

This. namelabel. Text = value;

}

}

Unified Data Models.

Here m is actually a combination of a series of common values. For example, name (string), age (integer), date of birth, and so on. In the actual project of the author, the data entity is a set of strongly typed objects derived from dataset. Therefore, the data is not packaged into a class.

Controller

A controller is a container that manages ascx. Write and read memberinformation data. From design to data, from the database to the front-end, and how the data is persisted to the database, the Controller should worry about it. Our V only displays data and follows the switch mode.

[Further enhancement]

Verify the validity of the get and set accessors. For example, the validity of a date. It can be computed during get access. If an error occurs, you can throw an exception or notify the user in some form. These logics should all be hidden in ascx.

To adapt to different scenarios, you can add multiple features for ascx to control styles. For example, the background color, Font, and so on.

[Notes]

If some values are obtained by selecting a finite item, you should assign the initial value to the Selection control through a certain channel. If some values are multiple choices, their values, such as arrays, should be expressed as appropriate data types.

When switching the display mode programmatically, make sure that the enableviewstate attribute of the control is set to true (the default value is true, as long as you disable it without displaying it ).

[Expansion of design ideas]

This design idea can be applied to other types of ascx. For example, when displaying list data, we can wrap the designed repeater or DataGrid into an ascx.

If you understand the intention of this article, you can try it in your next project. The coding workload may increase slightly, but in addition to solving the current problem, to a certain extent, it makes the design work more flexible and elegant, and brings about the possibility of reuse. it can also help future projects.