demoshop

demo, trying to be the best_

雖然說GridView也可以直接編輯,但是那小小的一格,有時候需要填入許多的資訊,使用者來用是很不方便的,所以我們利用傳送pk值的方式呼叫FormView來做編輯的動作,當然新增也就順便叫FormView處理囉。

?小鋪廢言:此範例使用北風資料庫的Territories資料表,為了畫面較短demo有加上top(5)

首先先製作一個基本的GridView出來,然後將UpdateCommand、InsertCommand兩個命令子句幹掉

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TerritoryID"
    DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。">
    <Columns>
        <asp:BoundField DataField="TerritoryID" HeaderText="TerritoryID" ReadOnly="True"
            SortExpression="TerritoryID" />
        <asp:BoundField DataField="TerritoryDescription" HeaderText="TerritoryDescription"
            SortExpression="TerritoryDescription" />
        <asp:BoundField DataField="RegionID" HeaderText="RegionID" SortExpression="RegionID" />
    </Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="" DeleteCommand="DELETE FROM [Territories] WHERE [TerritoryID] = @TerritoryID"
    ProviderName="" SelectCommand="SELECT top(5) [TerritoryID], [TerritoryDescription], [RegionID] FROM [Territories]">
    <DeleteParameters>
        <asp:Parameter Name="TerritoryID" Type="String" />
    </DeleteParameters>
</asp:SqlDataSource> 

然後我們按下GridView的智慧型標籤,選擇編輯資料行


點一下TemplateField加入→確定有加入→確定


回到GridView後按下智慧型標籤,選擇編輯樣板


到編輯樣板的模式後拉兩個LinkButton出來點選智慧型標籤


選擇編輯DataBindings...


我們要把CommandArgument繫結到該資料表的pk欄位(與圖說指令不同)


回到GridView樣板編輯模式後點一下LinkBotton1將右邊屬性視窗改成下方圖說


再點一下LinkBotton2將右邊屬性視窗改成下方圖說


♥小提醒:這有一點不同,因為我們在OnClientClick加了一個confirm視窗語法如下請複製貼上

  1. return confirm('刪除資料?'); 


然後你的GridView應該會變成這樣

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="TerritoryID"
    DataSourceID="SqlDataSource1" EmptyDataText="沒有資料錄可顯示。">
    <Columns>
        <asp:BoundField DataField="TerritoryID" HeaderText="TerritoryID" ReadOnly="True"
            SortExpression="TerritoryID" />
        <asp:BoundField DataField="TerritoryDescription" HeaderText="TerritoryDescription"
            SortExpression="TerritoryDescription" />
        <asp:BoundField DataField="RegionID" HeaderText="RegionID" SortExpression="RegionID" />
        <asp:TemplateField>
            <ItemTemplate>
                <asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="False" CommandArgument='<%# Eval("TerritoryID") %>'
                    CommandName="edit2" Text="編輯"></asp:LinkButton>
                <asp:LinkButton ID="LinkButton2" runat="server" CommandArgument='<%# Eval("TerritoryID") %>'
                    CommandName="Delete" ForeColor="Red" OnClientClick="return confirm('刪除資料?');">刪除</asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView> 


接者我們要來建立一個FormView,請注意要用不同的SqlDataSource唷,並且要勾選進階讓他支援編輯新增



然後點選FormView的智慧型標籤,選擇編輯樣板,將ItemTemplate樣板的內容全部幹掉(注意看我們是用不同的SqlDataSource)



然後把FormView加上ItemInserted和ItemUpdated事件,你的FormView就會變成這樣

<asp:FormView ID="FormView1" runat="server" DataKeyNames="TerritoryID" DataSourceID="SqlDataSource2" OnItemInserted="FormView1_ItemInserted" OnItemUpdated="FormView1_ItemUpdated">  
    <EditItemTemplate>  
        TerritoryID:  
        <asp:Label ID="TerritoryIDLabel1" runat="server" Text='<%# Eval("TerritoryID") %>'>  
        </asp:Label><br />  
        TerritoryDescription:  
        <asp:TextBox ID="TerritoryDescriptionTextBox" runat="server" Text='<%# Bind("TerritoryDescription") %>'>  
        </asp:TextBox><br />  
        RegionID:  
       <asp:TextBox ID="RegionIDTextBox" runat="server" Text='<%# Bind("RegionID") %>'>  
       </asp:TextBox><br />  
       <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" CommandName="Update"  
           Text="更新">  
       </asp:LinkButton>  
       <asp:LinkButton ID="UpdateCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"  
           Text="取消">  
       </asp:LinkButton>  
   </EditItemTemplate>  
   <InsertItemTemplate>  
       TerritoryID:  
       <asp:TextBox ID="TerritoryIDTextBox" runat="server" Text='<%# Bind("TerritoryID") %>'>  
       </asp:TextBox><br />  
       TerritoryDescription:  
       <asp:TextBox ID="TerritoryDescriptionTextBox" runat="server" Text='<%# Bind("TerritoryDescription") %>'>  
       </asp:TextBox><br />  
       RegionID:  
       <asp:TextBox ID="RegionIDTextBox" runat="server" Text='<%# Bind("RegionID") %>'>  
       </asp:TextBox><br />  
       <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"  
           Text="插入">  
       </asp:LinkButton>  
       <asp:LinkButton ID="InsertCancelButton" runat="server" CausesValidation="False" CommandName="Cancel"  
           Text="取消">  
       </asp:LinkButton>  
   </InsertItemTemplate>  
</asp:FormView>  

然後在頁面上新增一個HiddenField控制項,再把GridView加上RowCommand事件,在該事件中寫以下code

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
    //如果按下的命令名稱為edit2
    if (e.CommandName == "edit2")
    {
        //將HiddenField1的值填入該GridView_RowCommand的CommandArgument
        this.HiddenField1.Value = e.CommandArgument.ToString();
        //把FormView的模式換成編輯
        this.FormView1.ChangeMode(FormViewMode.Edit);
    }
} 



然後我們在FormView的SqlDataSource中的UpdateCommand語句改成以下

UpdateCommand="UPDATE [Territories] SET [TerritoryDescription] = @TerritoryDescription, [RegionID] = @RegionID WHERE [TerritoryID] = @TerritoryID"> 

再來把剛剛新增的兩個FormView的temUpdated、ItemInserted事件中都加入以下code

//如果新增或編輯沒有錯誤就把GridView重新繫結
        if (e.Exception == null)
            this.GridView1.DataBind(); 

?小鋪廢言:這樣子我們就完成了基本的GridView呼叫FormView來編輯的動作,新增也是一樣,就是抓到新增命令後把FormView的模式換成Inert而已,因為FormView比較靈活所以除非編輯的資料很短,不然都可以使用此方式,如果您結合了AJAX技術,那用這種方式會更好。

★注意事事項:北風資料庫無法新增刪除!!請注意

回應討論