动态添加控件初体验——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="120px;" rowspan ="1" >疫苗名称</th><th rowspan ="1"  style="70px;">规格</th><th rowspan ="1">系统批号</th><th rowspan ="1"  style="70px;">
        可用库存</th><th rowspan ="1" style="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="15px;">+</a><a id ="A1" class ="button " href ="javascript:reduceNewDepart(<%=i %>)" style="15px;">-</a> </td>
    <td ><input type ="text" id ="TBamount<%=i %>0" name ="TBamount<%=i %>0" style ="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;
}