ASP.NET 使用者控制項

為了可以簡化程式,並且符合物件導向的程式設計方式,所以我們在ASP.NET中會使用ASCX(使用者控制項)

下面的例子為建立使用者控制項的範本:

在主頁中使用控制項方式如下:

<%@ Register TagPrefix="uc" TagName="ubtn_Group"  Src="~/admin/controls/btn_Group.ascx" %>

<asp:Panel ID="pnl_control" runat="server" CssClass="BTN_GROUP">
    <uc:ubtn_Group ID="uc1" runat="server" />
</asp:Panel>

呼叫控制項的event方式

Protected Sub lnk_find_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles uc1.bg_lnk_find_Click

End Sub

現在來看看如何撰寫 btn_Group.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="btn_Group.ascx.vb" Inherits="admin_controls_btn_Group" %>
<asp:Panel ID="pnl_control" runat="server" CssClass="BTN_GROUP">
    <asp:LinkButton ID="lnk_find" runat="server">查詢</asp:LinkButton> |
    <asp:LinkButton ID="lnk_Result" runat="server">結果</asp:LinkButton> |
    <asp:LinkButton ID="lnk_DTL" runat="server">明細</asp:LinkButton>
</asp:Panel>

btn_Group.ascx.vb 內容

Partial Class admin_controls_btn_Group
    Inherits System.Web.UI.UserControl
    Public Event bg_lnk_find_Click As EventHandler
    Public Event bg_lnk_Result_Click As EventHandler
    Public Event bg_lnk_DTL_Click As EventHandler
    Private _set_btn As String = "lnk_find"

    Public Property set_btn() As String
        Get
            set_btn = _set_btn
        End Get
        Set(ByVal value As String)
            _set_btn = value
            '設定
            Set_Lnk_btn(value)
        End Set
    End Property

    Protected Sub lnk_find_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnk_find.Click
        Set_Lnk_btn("lnk_find")
        RaiseEvent bg_lnk_find_Click(New Object(), New EventArgs())
    End Sub

    Protected Sub lnk_Result_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnk_Result.Click
        Set_Lnk_btn("lnk_Result")
        RaiseEvent bg_lnk_Result_Click(New Object(), New EventArgs())
    End Sub

    Protected Sub lnk_DTL_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles lnk_DTL.Click
        Set_Lnk_btn("lnk_DTL")
        RaiseEvent bg_lnk_DTL_Click(New Object(), New EventArgs())
    End Sub

    Private Sub Set_Lnk_btn(ByVal p_id As String)
        lnk_find.CssClass = ""
        lnk_Result.CssClass = ""
        lnk_DTL.CssClass = ""
        Select Case p_id
            Case "lnk_find"
                lnk_find.CssClass = "active"
            Case "lnk_Result"
                lnk_Result.CssClass = "active"
            Case "lnk_DTL"
                lnk_DTL.CssClass = "active"
        End Select
    End Sub
End Class

 

CSS:

.BTN_GROUP{
    background-color: #eafff7;
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 6px;
    display: block;
    border-radius: 10px;
}
.BTN_GROUP a{
    padding-top: 6px;
    padding-left: 8px;
    padding-right: 8px;
    padding-bottom: 6px;
    width:20px
   display: block;
   border-radius: 4px;
}

.BTN_GROUP a:hover{
    background-color: yellow;
}

.BTN_GROUP .active{
    background-color: #2e8b57;
    color: white;
}