Asp.Net服务器控件开发的Grid实现(一)

使用asp.net做web开发时，提供的控件，有时难以达成所要的目的。这时，有多种方式可以解决，比如采用html+js的形式，在前端布局出所要的界面，然后再通过ajax等方式去获取数据，以达成目的。

但这样做，很是费劲，特别是当布局出来的界面需要重用的时候，更加费劲。有人，会直接将该界面的代码进行拷贝，但这对后来的维护必然带来更大的问题。所以就考虑，有没有一种方式可以让布局得到重用，又便于维护的。asp.net的控件可以很方便的布局，同时又能在后台中直接操作控件，实现相关的数据逻辑。所以就想借用.net的技术，来自行封装出控件。

有的人会说，直接使用asp.net的用户自定义控件封装，不也可以达到目的么？在一定程度上，确实是可以的。但是如果，我们需要更多的特性的时候，这个依然很难满足要求。特别是当我们在移动端使用一些库进行开发时，问题会更严重。

比如在移动端使用jquerymobile进行开发时，由于jquerymobile是基于前端的，所以对于后端的使用会有些棘手。这种情况，就可以考虑asp.net+jquerymobile来达成。(使用asp.net m4来结合jquerymobile的不属性该范围)

我们通过简单的封装，来实现一个grid控件。先看一下效果图。

该效果图的前后面代码如下：

前端代码default.aspx

其中带s前缀的控件就是封装的grid控件。

后面代码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", "食品", "已售完" });
            dt.rows.add(new string[] { "h10002", "蔬菜", "待销售" });
            dt.rows.add(new string[] { "h10003", "水果", "待销售" });
            dt.rows.add(new string[] { "h10004", "器具", "销售中" });

            return dt;
        }
    }
}

给grid_edit的datasource赋值。

从代码中可以看到，s:grid内部有一个columns，在columns中还有s:boundfield字段，在s:boundfield字段中有headertext和datafield属性。

其中headertext就是列头，datafield就是绑定的字段，与后台代码的datasource的字段对应。

这种操作方式与asp.net的gridview相似。

所以我们要封装出一个grid，至少需要做以下几件事：

1.定义一个grid类

2.在grid类中包含columns的属性。

3.在columns的属性中，必须能够容纳boundfield字段。

4.必须在编辑器中能够直接敲出。

具体实现，请看《asp.net服务器控件开发的grid实现(二)》