Grid implementation for Asp. Net Server Control Development (1)

Grid implementation for Asp. Net Server Control Development (1)

When Asp. Net is used for Web development, the control provided by the system is sometimes difficult to achieve the desired goal. At this time, there are multiple ways to solve the problem, such as using html + js to layout the desired interface on the front end, and then obtaining data through ajax to achieve the goal.

However, this is very difficult, especially when the layout of the interface needs to be reused, it is more difficult. Some people will directly copy the code on the interface, but this will inevitably cause greater problems for later maintenance. Therefore, there is no way to reuse and maintain the layout. Asp. Net controls can be easily laid out, and controls can be directly operated on the background to implement relevant data logic. So I want to use asp.net technology to encapsulate controls from rows.

Some people will say that the use of asp.net's user-defined control encapsulation can not achieve the goal? To a certain extent, it does. However, if we need more features, it is still difficult to meet the requirements. Especially when we use some libraries on the Mobile End for development, the problem will be more serious.

For example, when JqueryMobile is used for development on the Mobile End, JqueryMobile is based on the frontend, so it may be tricky to use the backend. In this case, we can consider asp.net + jquerymobile. (Use asp.net mvc4 to combine the non-attribute range of jquerymobile)

We implement a Grid control through simple encapsulation. Take a look.

The Code is as follows:

Front-end code default. aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Demo._default" %>    
         

The control with the S prefix is the encapsulated Grid control.

The following code defaults. aspx. cs

Using System; using System. collections. generic; using System. data; using System. linq; using System. web; using System. web. UI; using System. web. UI. webControls; namespace Demo {public partial class _ default: System. web. UI. page {protected void Page_Load (object sender, EventArgs e) {if (! IsPostBack) {InitLoad () ;}} private void InitLoad () {Grid_Edit.DataSource = GenerateData ();} private DataTable GenerateData () {DataTable dt = new DataTable (); dt. columns. add ("NO"); dt. columns. add ("Type"); dt. columns. add ("Status"); dt. rows. add (new String [] {"H10001", "food", "sold out"}); dt. rows. add (new String [] {"H10002", "Vegetables", "to be Sold"}); dt. rows. add (new String [] {"H10003", "Fruit", "to be Sold"}); dt. rows. add (new String [] {"H10004", "appliance", "sales"}); return dt ;}}}

Assign a value to the DataSource of Grid_Edit.

From the code, we can see that S: Grid has a column in it, and there is also the S: BoundField field in Columns, which has the HeaderText and DataField attributes in the S: BoundField field.

HeaderText is the column header, and DataField is the bound field, which corresponds to the DataSource field of the background code.

This method is similar to Asp. Net's GridView.

Therefore, to encapsulate a Grid, we must at least do the following:

1. Define a Grid class

2. the Grid class contains Columns attributes.

3. Columns attributes must be able to accommodate BoundField fields.

4. You must be able to directly extract .

For more information, seeGrid Implementation of Asp. Net Server Control Development (II)