豬腦爸 D NOW BA: 修改 FormView 的「新增/刪除/修改模式」的樣式

資料繫結控制項，能快速的做資料庫與webform之間的互動
像formview、detailsview…等等的控制項用起來很快速
但若是對「畫面」很講究的人
那麼在外觀上略顯陽春的控制項就需要加以美化了
這是我最近在學的東西
慢慢的，單單只運用asp.net裡現成的控制項不大能滿足我了
偏偏這些控制項是不容易做大幅的修改
有點像是寫作文時，老師給你橫式格子的，你怎麼硬寫成直式…除非你自已畫格子
這些控制項就是一個制式的東西

我的夢想比較簡單一點
以前dnowba幾乎都是被控制項給「控制」…因為不大會程式語言
現在dnowba想要小小的「控制」一下控制項…因為慢慢學習了控制項裡的函式

這邊以FormView 為例
主題談談怎麼個別修改 FormView 的「新增/刪除/修改模式」的樣式

控制項上的編輯、刪除、新增等等按鈕，是我們在資料繫結過程中就設定好的…這是控制項裡制式化的標籤，dnowba學程式的過程，很愛在加入一個控制項後，看看html裡有什麼變化，這邊也順道的複習一下

<body>
    <form id="form1" runat="server">
    <div>
    
        <asp:Label ID="Msg_Label" runat="server"></asp:Label>
        <br />
        <asp:FormView ID="FormView1" runat="server" AllowPaging="True" 
            DataKeyNames="ProductID" DataSourceID="SqlDataSource1">
            <EditItemTemplate>
                ProductID:
                <asp:Label ID="ProductIDLabel1" runat="server" 
                    Text='<%# Eval("ProductID") %>' />
                <br />
                Name:
                <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                <br />
                ProductNumber:
                <asp:TextBox ID="ProductNumberTextBox" runat="server" 
                    Text='<%# Bind("ProductNumber") %>' />
                <br />
                SafetyStockLevel:
                <asp:TextBox ID="SafetyStockLevelTextBox" runat="server" 
                    Text='<%# Bind("SafetyStockLevel") %>' />
                <br />
                MakeFlag:
                <asp:TextBox ID="MakeFlagTextBox" runat="server" 
                    Text='<%# Bind("MakeFlag") %>' />
                <br />
                FinishedGoodsFlag:
                <asp:TextBox ID="FinishedGoodsFlagTextBox" runat="server" 
                    Text='<%# Bind("FinishedGoodsFlag") %>' />
                <br />
                <asp:LinkButton ID="UpdateButton" runat="server" CausesValidation="True" 
                    CommandName="Update" Text="更新" />
                &nbsp;<asp:LinkButton ID="UpdateCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="取消" />
            </EditItemTemplate>
            <InsertItemTemplate>
                Name:
                <asp:TextBox ID="NameTextBox" runat="server" Text='<%# Bind("Name") %>' />
                <br />
                ProductNumber:
                <asp:TextBox ID="ProductNumberTextBox" runat="server" 
                    Text='<%# Bind("ProductNumber") %>' />
                <br />
                SafetyStockLevel:
                <asp:TextBox ID="SafetyStockLevelTextBox" runat="server" 
                    Text='<%# Bind("SafetyStockLevel") %>' />
                <br />
                MakeFlag:
                <asp:TextBox ID="MakeFlagTextBox" runat="server" 
                    Text='<%# Bind("MakeFlag") %>' />
                <br />
                FinishedGoodsFlag:
                <asp:TextBox ID="FinishedGoodsFlagTextBox" runat="server" 
                    Text='<%# Bind("FinishedGoodsFlag") %>' />
                <br />
                <asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" 
                    CommandName="Insert" Text="插入" />
                &nbsp;<asp:LinkButton ID="InsertCancelButton" runat="server" 
                    CausesValidation="False" CommandName="Cancel" Text="取消" />
            </InsertItemTemplate>
            <ItemTemplate>
                ProductID:
                <asp:Label ID="ProductIDLabel" runat="server" Text='<%# Eval("ProductID") %>' />
                <br />
                Name:
                <asp:Label ID="NameLabel" runat="server" Text='<%# Bind("Name") %>' />
                <br />
                ProductNumber:
                <asp:Label ID="ProductNumberLabel" runat="server" 
                    Text='<%# Bind("ProductNumber") %>' />
                <br />
                SafetyStockLevel:
                <asp:Label ID="SafetyStockLevelLabel" runat="server" 
                    Text='<%# Bind("SafetyStockLevel") %>' />
                <br />
                MakeFlag:
                <asp:Label ID="MakeFlagLabel" runat="server" Text='<%# Bind("MakeFlag") %>' />
                <br />
                FinishedGoodsFlag:
                <asp:Label ID="FinishedGoodsFlagLabel" runat="server" 
                    Text='<%# Bind("FinishedGoodsFlag") %>' />
                <br />
                <asp:LinkButton ID="EditButton" runat="server" CausesValidation="False" 
                    CommandName="Edit" Text="編輯" />
                &nbsp;<asp:LinkButton ID="DeleteButton" runat="server" CausesValidation="False" 
                    CommandName="Delete" Text="刪除" />
                &nbsp;<asp:LinkButton ID="NewButton" runat="server" CausesValidation="False" 
                    CommandName="New" Text="新增" />
            </ItemTemplate>
        </asp:FormView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:dnowdbConnectionString %>" 
            DeleteCommand="DELETE FROM [Product] WHERE [ProductID] = @ProductID" 
            InsertCommand="INSERT INTO [Product] ([Name], [ProductNumber], [SafetyStockLevel], [MakeFlag], [FinishedGoodsFlag]) VALUES (@Name, @ProductNumber, @SafetyStockLevel, @MakeFlag, @FinishedGoodsFlag)" 
            SelectCommand="SELECT [ProductID], [Name], [ProductNumber], [SafetyStockLevel], [MakeFlag], [FinishedGoodsFlag] FROM [Product]" 
            UpdateCommand="UPDATE [Product] SET [Name] = @Name, [ProductNumber] = @ProductNumber, [SafetyStockLevel] = @SafetyStockLevel, [MakeFlag] = @MakeFlag, [FinishedGoodsFlag] = @FinishedGoodsFlag WHERE [ProductID] = @ProductID">
            <DeleteParameters>
                <asp:Parameter Name="ProductID" Type="Int32" />
            </DeleteParameters>
            <InsertParameters>
                <asp:Parameter Name="Name" Type="String" />
                <asp:Parameter Name="ProductNumber" Type="String" />
                <asp:Parameter Name="SafetyStockLevel" Type="Int16" />
                <asp:Parameter Name="MakeFlag" Type="String" />
                <asp:Parameter Name="FinishedGoodsFlag" Type="String" />
            </InsertParameters>
            <UpdateParameters>
                <asp:Parameter Name="Name" Type="String" />
                <asp:Parameter Name="ProductNumber" Type="String" />
                <asp:Parameter Name="SafetyStockLevel" Type="Int16" />
                <asp:Parameter Name="MakeFlag" Type="String" />
                <asp:Parameter Name="FinishedGoodsFlag" Type="String" />
                <asp:Parameter Name="ProductID" Type="Int32" />
            </UpdateParameters>
        </asp:SqlDataSource>
    
    </div>
    </form>
</body>

行1：整個form是在<body>裡面…= =?廢話
行8：formview標記開始…裡面就是formview自動生成的內容，要學的精華就在這啦
行9：DataKeyNames="ProductID" DataSourceID="SqlDataSource1"，一個網站連結的「資料庫」可能不只一個，DataSourceID用來紀錄使用過的資料庫，用字串的方式紀錄在web.config裡頭；DataKeyNames 很重要，SqlDataSource 要能自動產生刪除、編輯、更新等SQL指令，一定要設定主索引鍵(PK鍵/Primary Key)。行10：<EditItemTemplate>底下就是「編輯模式」時有哪些標記…自動產生的，制式的規格就是「配合資料表的欄位名稱」+ 「textbox 控制項」行45：<InsertItemTemplate>底下就是「新增模式」，後頭的標記也是自動產生，產生後是可以直接在html修改的。行75：<ItemTemplate> 就是一般「唯讀模式」行111：SQL指令，分別有DeleteCommand、InsertCommand、SelectCommand、UpdateCommand，對應的SQL指令就是刪除、新增、選取、修改的SQL陳述式，這也是系統自動生成的。行117-134：這也是很棒的學習，要在資料庫新增/改變哪些數值，用Parameters的方式比用字串組合方式來得容易修改，最重要的是比起字串組合，參數式的設計比較不容易被駭客攻擊(SQL Injection資料隱碼)，像dnowba 資安能力很弱的人，資料庫設計自已真的不大有能力防止，所以用現成的。

Formview 的 CommandName

資料繫結控制項使用後，背後的html都是自動生成的，而關聯到資料庫互動的ado.net也是一樣，聯結的方式就是透過CommandName屬性

上面的程式碼，行41、71、104中，自動生成了LinkButton，就也自動寫了CommandName屬性

插入：CommandName=”New”
編輯：CommandName=”Edit”
更新：CommandName=”Update”
刪除：CommandName=”Delete”
取消：CommandName=”Cancel”

其中的插入、更新、刪除就是對應了sql指令，會和sql資料表互動，編輯、取消觸發的則只是畫面的改變…比方說按下了編輯，就是啟動了<EditItemTemplate>，畫面會套用這個標記下的範本

為什麼呢？沒有為什麼。就好像作文紙500格就是25*20…買不到50*10的，除非你自已畫。像「新增」資料的功能，在控制項使用時它就是自動生成「插入」這個字串，是微軟翻譯機翻得太爛了嗎？又例如插入的commandname是「New」，可是在使用detailview這個控制項生成的commandname，對應的是「add」，怎麼都不是我們習慣的sql指令「insert」，是不同的團隊設計出來的控制項吧？沒有為什麼…一個蘿蔔一個坑…坑「一開始」長怎麼樣我們管不著…(意思就是說我們還是可以手動改

離題了…重點應該是說「控制項」應該是被我控制的，怎麼可以被它吃人夠夠怎麼個別修改 FormView 的「新增/刪除/修改模式」的樣式就是一個引門磚 dnowba沒有能力自已寫一個控制項就運用現成的，透過事件、物件的生命週期來加以變化我自已的學習心得就是，多留意每個元件會有的屬性和引發的事件

Protected Sub FormView1_ModeChanged(sender As Object, e As System.EventArgs) Handles FormView1.ModeChanged
        Select Case Me.FormView1.CurrentMode
            Case FormViewMode.Edit
                Me.FormView1.HeaderText = "您目前在編輯(Edit)模式"
                Me.FormView1.HeaderStyle.ForeColor = Drawing.Color.Blue
                Me.FormView1.HeaderStyle.BackColor = Drawing.Color.LightBlue
                Me.FormView1.FooterText = "   "
                Me.FormView1.FooterStyle.BackColor = Drawing.Color.LightBlue

            Case FormViewMode.Insert
                Me.FormView1.HeaderText = "您目前在新增(Insert)模式"
                Me.FormView1.HeaderStyle.ForeColor = Drawing.Color.Red
                Me.FormView1.HeaderStyle.BackColor = Drawing.Color.LightYellow
                Me.FormView1.FooterText = "   "
                Me.FormView1.FooterStyle.BackColor = Drawing.Color.LightYellow

            Case FormViewMode.ReadOnly
                Me.FormView1.HeaderText = "您目前在唯讀(ReadOnly)模式"
                Me.FormView1.HeaderStyle.ForeColor = Drawing.Color.Green
                Me.FormView1.HeaderStyle.BackColor = Drawing.Color.LightGreen
                Me.FormView1.FooterText = "   "
                Me.FormView1.FooterStyle.BackColor = Drawing.Color.LightGreen

            Case Else
                Me.FormView1.HeaderText = "還有別的模式嗎？"
        End Select
    End Sub

上面這個程式只是簡單的運用心得
真要美化formview的話，改linkbutton、個別的templete套用不同的cssclass…變化可以很多的。

豬腦爸 D NOW BA

2012年6月21日星期四

修改 FormView 的「新增/刪除/修改模式」的樣式

沒有留言:

張貼留言

文章一覽-按類別

搜尋此網誌

關於我自己

總網頁瀏覽量

標籤 Tags

2012年6月21日 星期四

修改 FormView 的「新增/刪除/修改 模式」的樣式

沒有留言:

張貼留言

2012年6月21日星期四

修改 FormView 的「新增/刪除/修改模式」的樣式