動態添加控制項初體驗——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;}