自己做的数据绑定控件-.NET教程,组件控件开发

很久都没有写一点东西了，最近一直在学习.net，前两天看到椰子林写的一篇《asp.net分页组件学与用》，于是自己就跟着做了一遍，一次成功，在此向他表示感谢，也向他那种共享的精神致敬！可是后来我发觉这个组件用起来有点麻烦，在page_load里面不但要得到记录集，还要写sql语句分页，最后还要自己写代码将包含数据的<table></table>输出到客户端，于是我就想呀要是可以像datagrid那样只是简单的绑定一下就可以用就好，分页，显示数据呀这些都交给组件去完成，正是这灵光一现，我就开始冲动了，没办法程序就是有这么大的魅力！结果，我昨天晚上失眠了，哎！冲动的惩罚呀！今天早上，我带着红肿的眼睛走进了机房，开始实现我昨天晚上梦见的那个东东，幸运的是–我实现了，呵呵，一个字爽！忘了告诉大家，我还是一个学生，做出来我很高兴了，技巧谈不上，高手们看了莫怪。下面我把基本的做法说一下！

如何做自定义控件，以及如何实现分页在这里我就不多说了，大家可以看一下椰子林写的相关文章，我要说说我的做法：

首先定义一个datasource属性，如下：

private datatable dt; //数据源

/// <summary>

/// 数据源

/// </summary>

public datatable datasource

{

get

{

return dt;

}

set

{

if (value == null)

throw new exception("数据源不可为空");

else

dt = value;

}

}

该属性用于接受前端传进来的datatable对象。我们可以在前端使用ado.net获得数据并将数据填充到一个datatable中，再将此包含数据的datatable赋于组件的datasource属性，接下来的工作就是由组件向客户端输出包含数据的<table></table>标签了，怎么样简单吧！其实没有做多少改进，只是简单的扩展了一下，如下：

/// <summary>

/// 创建数据表

/// </summary>

/// <returns>表格的html表示字符串</returns>

protected string createdatatable()

{

string table = null; //表格，显示了所有的字段和记录

string tablehead = null; // 表头用于显示字段名的<tr>

string tdhead = null; // 表头用于显示字段名的<td>包含在tablehead中

string tablebody = null; // 表主体用于显示记录的<tr>

// 为了实现分页定义min和max两个变量

// min代表从那一条记录开始显示

// max代表到那一条记录结束

// 如果当前是第2页每页显示10条记录的话，那么min的值就是10，max的值就是20

int min = 0;

int max = 0;

// for循环用于产生表头，即字段名

for (int i = 0; i < this.dt.columns.count; i++)

{

tdhead = tdhead + "<td>" + this.dt.columns[i].columnname + "</td>";

}

// 判断当前页是否最后一页

if (this.currentpage == this.pagecount)

{

min = (this.currentpage – 1) * this.count;

max = this.dt.rows.count;

}

else

{

min = (this.currentpage – 1) * this.count;

max = this.currentpage * this.count;

}

// for循环用于产生表主体,即提取记录

for (int j = min; j < max; j++)

{

tablebody = tablebody + "<tr bgcolor=#ffffff>";

for (int k = 0; k < this.dt.columns.count; k++)

{

tablebody = tablebody + "<td>" + this.dt.rows[j][k].tostring() + "</td>";

}

tablebody = tablebody + "</tr>";

}

tablehead = "<tr bgcolor=#ffffff>" + tdhead + "</tr>";

table = "<table border=0 cellpadding=0 cellspacing=1 width=100% height=100% bgcolor=#000000 style=font-size:9pt>" + tablehead + tablebody + "</table>";

return table;

}

这样就得到了包含数据的表格的html字符串，跟着就是做分页部分，最后重写render(htmltextwriter output)方法将整个组件输出到客户端！这里我不一一详述步骤，我把代码帖出来，有兴趣的可以将代码拷贝到本机上运行一下！

组件源代码如下：（调试通过）

public class mydatagrid : system.web.ui.webcontrols.webcontrol

{

private int currentpage; //当前页

private int count; //每页显示的记录条数

private int navigcount; //导航连接的个数

private datatable dt; //数据源

private const string scriptstring = "<script language=javascript>\n" +

" function go(ctrl,max)\n" +

"{\n" +

"if(ctrl.value >= 1 && ctrl.value <= max)\n" +

"{\n" +

"var url;\n" +

"var index;\n" +

"url = location.href;\n" +

"index = url.indexof(?);\n" +

"if(index == -1)\n" +

"{\n" +

"}\n" +

"else\n" +

"{\n" +

"url = url.substring(0,index);\n" +

"}\n" +

"location.href = url + ?currentpage= + ctrl.value;\n" +

"}\n" +

"else\n" +

"{\n" +

"alert(您输入的页码必须是符合页面要求的数字,最大值是： + max);\n" +

"return false;\n" +

"}\n" +

"}\n" +

"</script>\n";

/// <summary>

/// 当前页

/// </summary>

public int currentpage

{

get

{

return currentpage;

}

set

{

if (value <= 0)

currentpage = 1;

else

currentpage = value;

}

}

/// <summary>

/// 每页显示的记录条数

/// </summary>

public int count

{

get

{

return count;

}

set

{

if (value <= 0)

count = 10;

else

count = value;

}

}

/// <summary>

/// 导航连接的个数

/// </summary>

public int navigcount

{

get

{

return navigcount;

}

set

{

if (value <= 0)

navigcount = 10;

else

navigcount = value;

}

}

/// <summary>

/// 总页数

/// </summary>

public int pagecount

{

get

{

if (this.dt.rows.count % count > 0)

return ((int)this.dt.rows.count / count) + 1;

else

return ((int)this.dt.rows.count / count);

}

}

/// <summary>

/// 数据源

/// </summary>

public datatable datasource

{

get

{

return dt;

}

set

{

if (value == null)

throw new exception("数据源不可为空");

else

dt = value;

}

}

protected override void render(htmltextwriter output)

{

string table = createdatatable();

string pagecontrol = createpagecontrol();

string result = string.format("<table border=0 cellpadding=0 cellspacing=1 width=724 height=93 bgcolor=#000000 style=font-size: 9pt>\n" +

"<tr bgcolor=#ffffff>\n" + "<td width=724 height=68 valign=top>{0}</td>\n" + "</tr>\n" +

"<tr bgcolor=#ffffff>\n" + "<td width=724 height=25 valign=top>{1}</td>\n" + "</tr>\n" + "</table>\n",table.tostring(),pagecontrol.tostring());

output.write(result.tostring());

}

/// <summary>

/// 创建数据表

/// </summary>

/// <returns>表格的html表示字符串</returns>

protected string createdatatable()

{

string table = null; //表格，显示了所有的字段和记录

string tablehead = null; // 表头用于显示字段名的<tr>

string tdhead = null; // 表头用于显示字段名的<td>包含在tablehead中

string tablebody = null; // 表主体用于显示记录的<tr>

// 为了实现分页定义min和max两个变量

// min代表从那一条记录开始显示

// max代表到那一条记录结束

// 如果当前是第2页每页显示10条记录的话，那么min的值就是10，max的值就是20

int min = 0;

int max = 0;

// for循环用于产生表头，即字段名

for (int i = 0; i < this.dt.columns.count; i++)

{

tdhead = tdhead + "<td>" + this.dt.columns[i].columnname + "</td>";

}

// 判断当前页是否最后一页

if (this.currentpage == this.pagecount)

{

min = (this.currentpage – 1) * this.count;

max = this.dt.rows.count;

}

else

{

min = (this.currentpage – 1) * this.count;

max = this.currentpage * this.count;

}

// for循环用于产生表主体,即提取记录

for (int j = min; j < max; j++)

{

tablebody = tablebody + "<tr bgcolor=#ffffff>";

for (int k = 0; k < this.dt.columns.count; k++)

{

tablebody = tablebody + "<td>" + this.dt.rows[j][k].tostring() + "</td>";

}

tablebody = tablebody + "</tr>";

}

tablehead = "<tr bgcolor=#ffffff>" + tdhead + "</tr>";

table = "<table border=0 cellpadding=0 cellspacing=1 width=100% height=100% bgcolor=#000000 style=font-size:9pt>" + tablehead + tablebody + "</table>";

return table;

}

/// <summary>

/// 创建分页控件

/// </summary>

/// <returns>返回分页控件的html表示字符串</returns>

protected string createpagecontrol()

{

string leftinfo = string.format("页：{0}/{1}"+"&nbsp;&nbsp"+"每页{2}条"+"&nbsp;&nbsp"+"共{3}条",

this.currentpage.tostring(),this.pagecount.tostring(),this.count.tostring(),this.dt.rows.count.tostring());

int min = 0;

int max = 0;

if (this.currentpage > this.pagecount)

{

this.currentpage = this.pagecount;

}

if (this.currentpage % this.count == 0)

{

min = this.currentpage + 1;

max = this.currentpage + this.count;

}

else if (this.currentpage % this.count == 1&& this.currentpage > this.count)

{

min = (((int)this.currentpage / this.count) – 1) * this.count + 1;

max = this.currentpage – 1;

}

else

{

min = ((int)this.currentpage / this.count) * this.count + 1;

max = (((int)this.currentpage / this.count) + 1) * this.count;

}

string numberstr = "&nbsp;";

string url = this.context.request.url.tostring();

if (url.indexof("?") == -1)

{

}

else

{

url = url.substring(0,url.indexof("?"));

}

for (int i = min; i <= max; i++)

{

if (i <= this.pagecount)

{

if (i == this.currentpage)

{

numberstr = numberstr + "<a href=" + url + "?currentpage=" + i.tostring() + ">" + "<i style=color:red>" + i.tostring() + "</i>" +"</a>" + "\n";

}

else

{

numberstr = numberstr + "<a href=" + url + "?currentpage=" + i.tostring() + ">" + i.tostring() +"</a>" + "\n";

}

}

}

string first,prev,next,last;

first = url + "?currentpage=" + 1;

if (this.currentpage == 1)

{

prev = url + "?currentpage=1";

}

else

{

prev = url + "?currentpage=" + (this.currentpage – 1).tostring();

}

if (this.currentpage == this.pagecount)

{

next = url + "?currentpage="+ this.pagecount;

}

else

{

next = url + "?currentpage=" + (this.currentpage + 1).tostring();

}

last = url + "?currentpage=" + this.pagecount;

string centerinfo = string.format("<font face=webdings style=font-size:14px><a href={0}>7</a><a href={1}>3</a></font>{2}<font face=webdings style=font-size:14px><a href={3}>4</a><a href={4}>8</a></font>",first,prev,numberstr,next,last);

string result = string.format("<table border=0 cellpadding=0 cellspacing=0 width=100% style=font-size:9pt>\n" +

"<tr><td width=25% align=left>{0}</td>\n" +

"<td width=61% align=right>{1}</td>" +

"<td width=14% align=right><input type=text name=t1 size=4 style=border-bottom:solid 1pt gray;border-top :solid 1pt gray; border-left:solid 1pt gray;border-right:solid 1pt gray;> \n <input type=button name=b1 size=6 value=go style=border-bottom:solid 1pt gray;border-top :solid 1pt gray; border-left:solid 1pt gray;border-right:solid 1pt gray; onclick=go(t1,{2})></td>\n" +

"</tr></table>",leftinfo,centerinfo,this.pagecount);

return result;

}

protected override void onprerender(eventargs e)

{

base.onprerender (e);

if(!page.isclientscriptblockregistered("werew-332dfaf-fdafdsfdsafd"))

{

page.registerclientscriptblock("werew-332dfaf-fdafdsfdsafd",scriptstring);

}

}

}

测试工程代码：

public class testmydatagrid : system.web.ui.page

{

protected mycontrollibrary.mydatagrid mydatagrid1;

private void page_load(object sender, system.eventargs e)

{

// 在此处放置用户代码以初始化页面

int currentpage;

if (this.request.params["currentpage"] == null)

{

currentpage = 1;

}

else

{

currentpage = convert.toint32(this.request.params["currentpage"].tostring());

}

this.mydatagrid1.currentpage = currentpage;

this.mydatagrid1.count = 10;

this.mydatagrid1.navigcount = 10;

sqlconnection conn = new sqlconnection("server=localhost; database=northwind; uid=sa");

sqlcommand cmd = new sqlcommand("select * from [order details]",conn);

sqldataadapter da = new sqldataadapter();

da.selectcommand = cmd;

dataset ds = new dataset();

conn.open();

da.fill(ds,"table");

conn.close();

this.mydatagrid1.datasource = ds.tables["table"];

}

#region web form designer generated code

override protected void oninit(eventargs e)

{

//

// codegen：该调用是 asp.net web 窗体设计器所必需的。

//

initializecomponent();

base.oninit(e);

}

/// <summary>

/// 设计器支持所需的方法 – 不要使用代码编辑器修改

/// 此方法的内容。

/// </summary>

private void initializecomponent()

{

this.load += new system.eventhandler(this.page_load);

}

#endregion

}

页面版排的不好，只好劳动一下你，呵呵！