Grid implementation of ASP. NET Server control development (i)

When you use ASP. Web development, system-provided controls sometimes make it difficult to achieve the desired purpose. At this point, there are many ways to solve, such as the use of Html+js form, the front-end layout of the desired interface, and then through the Ajax and other ways to obtain data to achieve the purpose.

But it's hard to do this, especially if the layout of the interface needs to be reused. Someone will directly copy the code of the interface, but this would inevitably bring more problems for later maintenance. So consider whether there is a way to make the layout reusable and easy to maintain. The ASP. NET control can be conveniently laid out, and it can manipulate the control directly in the background to implement related data logic. So just want to borrow the technology of ASP, from the line encapsulates the control.

Some people will say that the direct use of ASP. NET user-defined control encapsulation, can not achieve the purpose? To a certain extent, it is indeed possible. But if we need more features, it's still hard to meet the requirements. Especially when we use some libraries on the mobile side to develop, the problem is more serious.

For example, when the mobile side uses jquerymobile for development, because Jquerymobile is based on the front-end, the use of the backend is tricky. In this case, we can consider asp.net+jquerymobile to achieve. (Use ASP. Mvc4 to combine Jquerymobile's non-attribute range)

We implement a grid control through a simple encapsulation. Look first.

The preceding code is as follows:

Front-end Code default.aspx

<%@ page language= "C #" autoeventwireup= "true" codebehind= "Default.aspx.cs" inherits= "Demo._default"%><! DOCTYPE html>The control with the S prefix is the encapsulated grid control.
The following code Default.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", "Pending Sale"}); Dt.            Rows.Add (new string[] {"H10003", "Fruit", "Pending Sale"}); Dt.            Rows.Add (new string[] {"H10004", "Appliance", "Sales"});        return DT; }    }}
Assigns a value to Grid_edit's datasource.
As you can see from the code, there is a columns inside the S:grid, a S:boundfield field in columns, and S:boundfield and HeaderText properties in the DataField field.
Where HeaderText is the column header, DataField is the bound field that corresponds to the DataSource field of the background code.
This operation is similar to the GridView for ASP.
So we have to encapsulate a grid, at least a few things:
1. Define a Grid class
2. Include the properties of the columns in the grid class.
3. In the columns attribute, you must be able to accommodate the BoundField field.
4. You must be able to tap <Columns> directly in the editor.
For implementation, see the grid implementation of the ASP. NET Server Control development (ii)



Grid implementation of ASP. NET Server control development (i)