Thứ năm, ngày 24 tháng 4 năm 2014

ASP.NET – Sử dụng một số Extender trong Ajax Control Toolkit

Ngày đăng: 4/4/2012, 8:38:58AM | Lượt xem: 5,842
Hot!

Extender là một control dùng để gắn vào những control khác trên trang, tên của chúng được kết thúc bằng từ bằng hậu tố Extender. Khi được gắn với control khác, extender cung cấp cho control đó những chức năng mới rất hữu dụng. Phần lớn các control trong Ajax Control Toolkit là extender.

AjaxControlToolkit - CollapsiblePanelExtenderExtender là một control dùng để gắn vào những control khác trên trang, tên của chúng được kết thúc bằng từ bằng hậu tố Extender. Khi được gắn với control khác, extender cung cấp cho control đó những chức năng mới rất hữu dụng. Phần lớn các control trong Ajax Control Toolkit là extender.

CollapsiblePanel Extender

Đây là một extender dùng để mở rộng hoặc thu nhỏ một panel khác, giống như việc kết hợp hai panel lại tạo thành một panel chứa nội dung.

        <act:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="CollapsibleCustomersPanelContent"
            ExpandControlID="CollapsibleCustomersPanel" CollapseControlID="CollapsibleCustomersPanel"
            Collapsed="true" ExpandDirection="Vertical" ImageControlID="ToggleImage" ExpandedImage="~/images/selected.png"
            ExpandedText="Collapse" CollapsedImage="~/images/notselected.png" CollapsedText="Expand" />

Thuộc tính TargetControlID là ID của panel đích sẽ dùng để điểu khiển việc mở rộng / thu nhỏ. ExpandControlID và CollapseControlID chỉ ra panel sẽ được mở rộng và thu nhỏ. Thông thường hai thuộc tính thường chỉ về cùng một panel.

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<act:CollapsiblePanelExtender ID="cpe" runat="server" TargetControlID="CollapsibleCustomersPanelContent"
    ExpandControlID="CollapsibleCustomersPanel" CollapseControlID="CollapsibleCustomersPanel"
    Collapsed="true" ExpandDirection="Vertical" ImageControlID="ToggleImage" ExpandedImage="~/images/selected.png"
    ExpandedText="Collapse" CollapsedImage="~/images/notselected.png" CollapsedText="Expand" />

<asp:Panel ID="CollapsibleCustomersPanel" runat="server">
    <asp:Image ID="ToggleImage" runat="server" ImageUrl="~/images/notselected.png" />
    <b>Click Me</b>
</asp:Panel>

<div style="color: Blue">
    <asp:Panel ID="CollapsibleCustomersPanelContent" runat="server">
        <b>Ảnh một</b><br />
        <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/penguin.png" />
    </asp:Panel>
    <b>Ảnh hai</b><br />
    <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/network.png" />
</div>

Minh họa:

AjaxControlToolkit - CollapsiblePanelExtender

DragPanel Extender

Đây là một trong những extender đơn giản nhất của Ajax Control Toolkit. Nó chỉ bao gồm hai thuộc tính: một để chi ra panel chứa nội dung sẽ di chuyển khi kéo và một chỉ ra panel làm tay cầm để di chuyển. Xem ví dụ dưới đây để hiểu rõ hơn.

<div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>

    <act:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="ContentPanel"
        DragHandleID="DragHandlePanel" />

    <asp:Panel ID="ContentPanel" runat="server">
        <asp:Panel ID="DragHandlePanel" runat="server" BorderStyle="Ridge">
            <div style="background-color: ActiveCaption">
                <asp:Image ID="Image2" runat="server" ImageUrl="~/Images/Selected.png" />
                Chim cánh cụt</div>
        </asp:Panel>
        <asp:Panel ID="Panel1" runat="server" BorderStyle="Solid">
            <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/penguin.png" />
        </asp:Panel>
    </asp:Panel>
</div>

Đoạn mã trên ta thêm hai panel vào một panel chính với ID là ContentPanel mô phỏng một cửa sổ con. Trong hai panel con, panel đầu tiên sẽ được dùng làm thanh tiêu đề giả, panel còn lại để hiển thị nội dung.

AjaxControlToolkit - DragPanelExtender

TextBoxWatermark Extender


Đây là một extender được sử dụng khá phổ biến trong các trang web chẳng hạn như các textbox đăng nhập, đăng kí thành viên và tìm kiếm. Extender này cho phép tạo dòng chữ hiển thị mặc định trên textbox để gợi ý nội dung cần nhập vào cho textbox. Khi nhấn chuột vào textbox này để nhập liệu, dòng chữ sẽ tự động biến mất và trở thành một textbox trống bình thường. Ngoài việc hiển thị văn bản, bạn còn có thể tùy chỉnh màu sắc, các định dạng thông qua thuộc tính WatermarkCssClass. Bạn thêm một style class mới tên là watermarked định dạng màu nền và màu chữ rồi dòng lệnh này phía sau control AutoCompleteExtender trong đoạn mã:

<cc1:TextBoxWatermarkExtender runat="server" ID="TextBoxWatermark1" TargetControlID="txtInput"
    WatermarkText="Nhập từ cần tra" WatermarkCssClass="watermarked" />

Kết quả hiển thị tùy thuộc vào nội dung của style class watermarked của bạn và giá trị của thuộc tính WatermarkText.

AjaxControlToolkit - TextBoxWaterMarkExtender

DropShawdow Extender

Đây là một extender dùng để tạo hiệu ứng bóng đổ cho các Panel, bạn có thể gán độ mờ đục và kích thước của bóng. Trong ví dụ này để tạo bóng cho TextBox, bạn cần dùng một Panel bao bên ngoài và làm hiệu ứng trên Panel này.

<asp:Panel ID="Panel2" runat="server" BackColor="White" Width="300px">
    <div style="margin-left: 2px">
        <asp:TextBox ID="txtInput" runat="server" AutoPostBack="True" BorderWidth="0px" OnTextChanged="txtInput_TextChanged"
            Width="280px"></asp:TextBox>
    </div>
    <cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" Opacity=".65" Rounded="true"
    TargetControlID="Panel2" Width="5" />
</asp:Panel>

Đây là minh họa sau khi sử dụng extender này:

AjaxControlToolkit - DropShadow Extender

Kết luận

Nhìn chung thì cách sử dụng các extender này khá đơn giản, chỉ việc copy và paste. Tuy nhiên đa số các lập trình viên thích tự viết cho mình các chức năng tương tự thay vì sử dụng control hoặc thư viện có sẵn, trừ phi chúng tương đối phức tạp. Một đặc điểm nữa là sử dụng phương pháp này không cho phép bạn thấy được cơ chế thực hiện bên dưới và hiệu suất của nó cũng là một vấn đề cần quan tâm.

 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.