2012年6月21日 星期四

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

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

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

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

image

image


控制項上的編輯、刪除、新增等等按鈕,是我們在資料繫結過程中就設定好的…這是控制項裡制式化的標籤,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…變化可以很多的。

沒有留言:

張貼留言

Related Posts Plugin for WordPress, Blogger...
// Dnow Function