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

浏览数：37 / 时间：2015年06月09日

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

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

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

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

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

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

前端代码default.aspx

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <S:Grid runat="server" ID="Grid_Edit">
                <Columns>
                    <S:BoundField runat="server" ID="BoundField1" HeaderText="货号" DataField="NO" />
                    <S:BoundField runat="server" ID="BoundField2" HeaderText="类型" DataField="Type" />
                    <S:BoundField runat="server" ID="BoundField3" HeaderText="状态" DataField="Status" />
                </Columns>
            </S:Grid>
        </div>
    </form>
</body>
</html>

其中带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.必须在编辑器中能够直接敲出<Columns>。

具体实现，请看《Asp.Net服务器控件开发的Grid实现(二)》

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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