ASP.NET:就是喜歡Web Form，就是喜歡拖控制項（六）

在網上有一篇來自CSDN清清月兒的文章叫GridView72般絕技，現在可謂廣為流傳。72般絕技乃是少林神功，講究循序漸進，是武林正道。然而對於一些不勤奮的人，比如我這種懶到什麼時候都想拖控制項的，還是不合適的。武功講究無招勝有招，那對程式員而言就是無碼勝有碼。我想大部分年輕程式員都是沒有女朋友的（奇怪，我為什麼要提這個），因此，我想不論從哪方面講都更喜歡無碼一些。

這一篇裡我們來挑其中一個複雜一點的絕技練練：GridView和CheckBox結合刪除表格中的多行。效果

首先我們從資料庫開始設計這個功能，要想一次性刪除沒有關聯的多行是必須用到預存程序的，所以我們不管三七二十一，先寫個刪除多行資料的預存程序：

 

ALTER PROCEDURE dbo.DelMultiLine 
    ( 
    @ids nvarchar(300) 
    ) 
AS 
    /*SET NOCOUNT ON */ 
    DECLARE @start INT 
    DECLARE @id INT 
    DECLARE @idtable TABLE(id INT) 
    SET @start = 0 
    while(@start< DATALENGTH(@ids)) 
    BEGIN 
        DECLARE @end INT 
        SET @end = CHARINDEX(',',@ids,@start) 
        IF @end = 0 SET @end = DATALENGTH(@ids) 
        SET @id = CAST(SUBSTRING(@ids, @start, @end-@start) AS INT) 
        INSERT INTO @idtable VALUES (@id) 
        SET @start = @end + 1 
    END 
    DELETE FROM [Commodity] WHERE (id IN (SELECT * FROM @idtable)) 

    /*SET NOCOUNT OFF*/ 
    RETURN

 

有人會問，為什麼不直接exec ('delete from [table] where ID in ('+@ids+')')，一句就搞定了?答案是為了安全。ids是使用者提交的字串，所以exec是非常危險的，一定要時刻謹記All inputs are evil。

有了預存程序一切都好辦了，下面我們要做的就是寫個FormView往這個預存程序裡面提交，並且讓FormView獲得GridView中所有選中行的Id就行了。建立FormView過程跟以前一樣，不過資料來源我們選擇預存程序：

其實選擇哪個語句無所謂，這裡我在Insert語句中綁定了刪除多行預存程序，我們只要在FormView中選擇和編輯對應模板就行了。之後會快顯視窗讓你選擇參數來源，我們的參數應該來自GridView但是它沒有"已選擇的行ID"這個屬性，所以我們稍後要做一些工作，我們現在可以決定把這個參數的資訊放進Cookie或者一個Hidden Field,這裡你看到的是Hidden Field。

很遺憾這裡VS2008有個bug，它只能識別Select語句的參數，所以要我們手動編輯一下ASP.NET代碼，把Select語句的參數挪給Insert： 

 

 

<asp:SqlDataSource ID="DeleteCommodityDataSource" runat="server" 
    ConnectionString="<%$ ConnectionStrings:ConnectionString %>" 
    InsertCommand="DelMultiLine" InsertCommandType="StoredProcedure" 
    SelectCommand="DelMultiLine" SelectCommandType="StoredProcedure"> 
    <SelectParameters> 
    </SelectParameters> 
    <InsertParameters> 
        <asp:ControlParameter ControlID="SelectedIDs" Name="ids" PropertyName="Value" 
            Type="String" /> 
    </InsertParameters> 
</asp:SqlDataSource>

 

到此為止，我們只差擷取GridView的選中資訊到Hidden Field了。不過首先我們要把含有Check Box的列加到Grid中，這應該是一個TemplateColumn。我們編輯TemplateColumn的模板，向其中添加CheckBox。

如何把CheckBox和Hidden Field聯絡起來呢？答案是JavaScript。我們要把商品ID綁定到CheckBox的代碼，然後作為參數傳給JavaScript處理：

<asp:TemplateField HeaderText="Select"> 
    <ItemTemplate> 
        <asp:CheckBox ID="CheckBox1" OnClick='<%# Eval("id","UpdateSelectedIds({0},this.checked)") %>' runat="server" /> 
    </ItemTemplate> 
</asp:TemplateField>

 

接下來我們只要在UpdateSelectedIds更新隱藏的SelectedIDs就可以了，代碼如下：

function UpdateSelectedIds(id, value) { 
    if (document.getElementById("SelectedIDs").value != "") 
        var ids = document.getElementById("SelectedIDs").value.split(","); 
    else 
        ids = []; 
    var table = []; 
    for (var i = 0; i < ids.length; i++) { 
        table[Number(ids[i])] = true; 
    } 

    table[id] = value; 
    ids = []; 
    for (var i = 0; i < table.length; i++) { 
        if (table[i]) ids.push(i) 
    } 
    document.getElementById("SelectedIDs").value = ids.toString(); 
    alert(document.getElementById("SelectedIDs").value); 
}

 

調試完成所有功能以後，運行一下看看效果吧。

感謝讀到最後的各位。祝大家聖誕快樂。

之後將繼續奉上一些無碼（特指無C#）小技巧。