demoshop

NEWS

demo, trying to be the best.

站內搜尋載入中...

在GridView中呼叫FormVIew做新增、編輯

  • 16761
  • 1

雖然說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技術,那用這種方式會更好。

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