动态添加控件初体验——GridView
最近对GridView的印象越来越不好，所以最近经常在想有什么控件可以替代它，看了不少文章，似乎Repeater是个不错的选择。
——————————坏印象的小由来————————————
前段时间在查系统访问速度过慢的问题的时候，不经意的注意到自己做的页面生成的HTML体积过大的问题。粗略的看了一下生成的HTML源文件,只见一块巴掌大ViewState和一个数百行的Table,为什么会这样呢？首先GridView的ViewState我没有禁用，我想禁用来着，可是有模板列在，模板列上有排序用Button,禁用了按钮就失效了。这让我很郁闷，一个模板列引发的血案嘛。不过最后我很幸运的看到园子里的一篇的文章：发现原来可以对某行某列禁用ViewState。
比如：
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.DataItem == null)
return;
e.Row.EnableViewState = false;
}
然后那个数百行的Table又是怎么回事，实际可只有十几行的数据。仔细一琢磨发现这又是模板列引发的血案。比如一个默认生成的模板列：
<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;" rowspan ="1" >疫苗名称</th><th rowspan ="1" style="width:70px;">规格</th><th rowspan ="1">系统批号</th><th rowspan ="1" style="width:70px;">
可用库存</th><th rowspan ="1" style="width:70px;">有效时间</th><th>接收单位</th><th >数量</th><th >单价</th><th >下拨时间</th>
</tr>
<%if (!IsPostBack)
{ %>
<% IList<Iview_Stock> stocks = GetSource(); %>
<%for (int i = 0; i < stocks.Count; i++) %>
<%{
Iview_Stock stock = stocks[i];%>
<tr id="tr<%=i %>" >
<td ><%=stock.Name%><input type ="hidden" id ="HDstock<%=i %>0" name ="HDstock<%=i %>0" value ="<%=stock.Id %>" /> </td>
<td ><%=stock.Model+" "+stock .unit+"/"+stock .ModelName%></td>
<td ><%=stock.Lot%></td>
<td ><%=stock.Amount1 + stock .ModelName%></td><td ><%=stock.EffectDate.ToShortDateString()%></td>
<td id ="ddl" style='text-align:left;'> <%=GetDepart(i)%> <a id ="LBadd<%=i %>" class ="button " href ="javascript:addNewDepart(<%=i %>)" style="width:15px;">+</a><a id ="A1" class ="button " href ="javascript:reduceNewDepart(<%=i %>)" style="width:15px;">-</a> </td>
<td ><input type ="text" id ="TBamount<%=i %>0" name ="TBamount<%=i %>0" style ="width:30px" /><%=stock .ModelName%></td>
<td ><input type ="text" id ="TBprice<%=i %>0" name ="TBprice<%=i %>0" value="<%=stock.Price %>" disabled ="disabled" style ="width :40px" /><%=" 元/"+stock .ModelName%> </td><td ><input type ="text" id="TBsell<%=i %>0" name ="TBsell<%=i %>0" class ="date_input" style ="width :70px" value ="<%=DateTime.Now.ToShortDateString() %>" /> </td>
</tr>
<%}
}%>
</table>
以及部分Jquery脚本：
//以下是增加行
function addNewDepart(index) {
var tr = $("#tr" + index);
var newTr = "";
//拼凑新行的HTML。。。。
newTr += "<TD style='text-align:left;'> " + tr.children().eq(5).children().eq(0).outerHTML() + "</TD>";
newTr += tr.children().eq(6).outerHTML();
newTr += tr.children().eq(7).outerHTML();
newTr += tr.children().eq(8).outerHTML();
var rowSpan = tr.children().eq(0).attr("rowSpan");
rowSpan = Number(rowSpan) + 1;
tr.children().eq(0).attr("rowSpan", rowSpan);
tr.children().eq(1).attr("rowSpan", rowSpan);
tr.children().eq(2).attr("rowSpan", rowSpan);
tr.children().eq(3).attr("rowSpan", rowSpan);
tr.children().eq(4).attr("rowSpan", rowSpan);
//替换控件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);
//以下省略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;
}
