动态添加控件初体验——GridView

最近对GridView的印象越来越不好，所以最近经常在想有什么控件可以替代它，看了不少文章，似乎Repeater是个不错的选择。

——————————坏印象的小由来————————————

前段时间在查系统访问速度过慢的问题的时候，不经意的注意到自己做的页面生成的HTML体积过大的问题。粗略的看了一下生成的HTML源文件,只见一块巴掌大ViewState和一个数百行的Table,为什么会这样呢？首先GridView的ViewState我没有禁用，我想禁用来着，可是有模板列在，模板列上有排序用Button,禁用了按钮就失效了。这让我很郁闷，一个模板列引发的血案嘛。不过最后我很幸运的看到园子里的一篇的文章：发现原来可以对某行某列禁用ViewState。

比如：

                <asp:TemplateField>
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("OrderID") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("OrderID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>

运行后：

</tr><tr>
<td>
<span id="GridView1_ctl02_Label1">10258</span>
</td><td>
<span id="GridView1_ctl02_Label2">ERNSH</span>
</td>
</tr>

Label被解析成了span，还有无数的空格、回车。。。

几次尝试，改成这样，似乎好多了

1：置顶：一个空格一个字节啊

2：扔掉Label

3：写在同一行

<asp:TemplateField>
<ItemTemplate><%# Eval("OrderID")%></ItemTemplate>
</asp:TemplateField>

——————————坏印象的大由来————————————

几天前来了个需求，实现方式是动态的添加表单。

在这之前从没尝试过ASP.NET中动态添加控件。所以我所能想到的：

1.在客户端实现，即用Javascript添加表单，一次性提交到服务端。

2.在服务端实现，回传一次，添加一批，回传一次，添加一批。。。

两者我都没做过，但后者我十分不喜欢：回传一次刷新一次页面，以及必不可少的ViewState。。。可是考虑到时间比较紧的因素，还是选择了后者（我以为后者比较简单）。

要实现的效果是这样的：





GOOGLE上一番搜索后，知道了大致的做法，便开始尝试。可是，我随即意识到了一个很头疼的问题：GridView动态添加行貌似需要从数据源上做手脚。这意味着用户点一次添加行的按钮，就需要查询数据库，重新绑定数据。

就这我也忍了，咬着牙继续搞。然而悲剧的是3个小时后仍然没搞出来，无奈的放弃了。

最后开始尝试用脚本实现，于是Gridview又成了障碍：我需要自定义单元格中的控件Id，以便取值的时候对控件进行分组（如上图所示，同一条库存信息的多行表单为同一组）。我不知道Gridview能否实现，最终我觉得还是直接在ASPX页面中拼凑表格算了。

以下是代码：有需要的同学可以借鉴一下。

<table id="Tsell" class ="list_tbl" >
<tr >
<th style="width:120px]

以及部分Jquery脚本：

//以下是增加行
function addNewDepart(index) {
var tr = $("#tr" + index);
var newTr = "";

//替换控件ID
var DDLid = new RegExp("DDLdepart" + index + "0", "g");
var TBamountid = new RegExp("TBamount" + index + "0", "g");
var TBpriceid = new RegExp("TBprice" + index + "0", "g");
var TBeffectid = new RegExp("TBsell" + index + "0", "g");
var DataCss = new RegExp("date_input");
newTr = newTr.replace(DDLid, "DDLdepart" + index + dic.Get(index));
newTr = newTr.replace(TBamountid, "TBamount" + index + dic.Get(index));
newTr = newTr.replace(TBpriceid, "TBprice" + index + dic.Get(index));
newTr = newTr.replace(TBeffectid, "TBsell" + index + dic.Get(index));
// newTr = newTr.replace(DataCss, "date_inputC" + index + dic.Get(index));
//var table = $("#Tsell");
tr.after("<tr id=tr" + index + dic.Get(index) + ">" + newTr + "</tr>");
var old = dic.Get(index) + 1;
dic.Put(index, old);
}

//以下是提交
function sellSubmit() {
var selList = new Array();
for (i = 0; i < dic.GetSize(); i++) {
var tr = $("#tr" + i);
var stockAmount = parseInt(tr.children().eq(3).text());
var amounts = $("input[name^=TBamount" + i + "]");
var sum = 0;
for (j = 0; j < amounts.length; j++) {
var stockId = $("#HDstock" + i + "0").val();
var ddl = $("#DDLdepart" + i + j);[/code]

　　　　　//以下省略N行数据验证代码

var buyRangeId = $("#DDLdepart" + i + j).val();
var amount = $("#TBamount" + i + j).val();
var price = $("#TBprice" + i + j).val();
var selldate = $("#TBsell" + i + j).val();
var sellInfo = new Object();
sellInfo.Amount = amount;
sellInfo.BuyRangeId = buyRangeId;
sellInfo.SotckId = stockId;
sellInfo.Raport = null;
sellInfo.SellDate = selldate;
sellInfo.SellPrice = price;
selList.push(sellInfo);
}
}
Pigs.Bacter.BacterService.BacterSell(selList, user, BacterSellSucceed, OnAjaxFailded);
return false;
}