ASP.NET 控件开发系列之图片切换web控件

当开发ASP.NET网站时，我们常常需要实现图片切换效果。这时，我们可以使用ASP.NET控件开发系列之图片切换Web控件来方便地实现图片切换功能。下面是该控件的完整攻略：

控件的基本结构

• 控件的基类为 System.Web.UI.WebControls.WebControl，可以通过继承该类来创建自定义控件。
• 控件需要实现 System.Web.UI.IPostBackDataHandler 接口，以便在进行Postback时保存或加载控件的状态。
• 控件类中需要定义属性和方法，其中属性用于设置或获取控件的各种属性，方法用于控件的行为。
• 控件需要重载 System.Web.UI.WebControls.WebControl.RenderContents 方法，以便在网页中生成相应的HTML代码。

控件的具体实现

以下是一个简单的图片切换Web控件的示例：

namespace MyWebControls
{
    [DefaultProperty("ImageUrl")]
    [ToolboxData("<{0}:ImageSwitch runat=server></{0}:ImageSwitch>")]
    public class ImageSwitch : WebControl, IPostBackDataHandler
    {
        private string _imageUrl;
        private int _selectedIndex;

        [Bindable(true)]
        [Category("Appearance")]
        [DefaultValue("")]
        [Localizable(true)]
        public string ImageUrl
        {
            get
            {
                return _imageUrl;
            }
            set
            {
                _imageUrl = value;
            }
        }

        [Bindable(true)]
        [Category("Behavior")]
        [DefaultValue("")]
        [Localizable(true)]
        public int SelectedIndex
        {
            get
            {
                return _selectedIndex;
            }
            set
            {
                _selectedIndex = value;
            }
        }

        protected override void RenderContents(HtmlTextWriter writer)
        {
            writer.Write("<div class=\"image-switch\">");
            writer.Write("<img src=\"" + ImageUrl + "\" alt=\"\" />");
            writer.Write("<div class=\"switch\">");

            for (int i = 0; i < 5; i++)
            {
                if (i == SelectedIndex)
                {
                    writer.Write("<span class=\"selected\"></span>");
                }
                else
                {
                    writer.Write("<span></span>");
                }
            }

            writer.Write("</div></div>");
        }

        public bool LoadPostData(string postDataKey, NameValueCollection postCollection)
        {
            string selectedIndexStr = postCollection[ClientID + "_selectedIndex"];
            int selectedIndex;
            if (int.TryParse(selectedIndexStr, out selectedIndex))
            {
                SelectedIndex = selectedIndex;
                return true;
            }
            else
            {
                return false;
            }
        }

        public void RaisePostDataChangedEvent()
        {

        }

        protected override void OnInit(EventArgs e)
        {
            Page.RegisterRequiresPostBack(this);
            base.OnInit(e);
        }

        protected override void OnPreRender(EventArgs e)
        {
            string script = @"<script>
                var imageSwitch = document.querySelector('#" + ClientID + @"');
                imageSwitch.addEventListener('click', function(event) {
                    var target = event.target;
                    if (target.tagName.toLowerCase() == 'span') {
                        var selectedIndex = Array.prototype.indexOf.call(imageSwitch.querySelectorAll('span'), target);
                        var input = document.createElement('input');
                        input.type = 'hidden';
                        input.name = '" + ClientID + @"_selectedIndex';
                        input.value = selectedIndex;
                        imageSwitch.appendChild(input);
                        __doPostBack('" + ClientID + @"', '');
                    }
                });
                </script>";
            Page.ClientScript.RegisterStartupScript(typeof(ImageSwitch), "ImageSwitchScript", script);
            base.OnPreRender(e);
        }
    }
}

上面的代码定义了一个名为 ImageSwitch 的Web控件。该控件具有两个属性：ImageUrl 用于设置图片的URL，SelectedIndex 用于设置选中的图片索引。在RenderContents方法中，控件首先生成一个 <div>，其中嵌套了一个图片和一个切换按钮，切换按钮使用CSS实现。在点击按钮时，控件会向服务器发送Postback请求，将当前选中的图片索引传递到服务器端，以便进行处理。

下面是如何使用该控件的示例代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MyWebApp.Default" %>

<%@ Register TagPrefix="my" Namespace="MyWebControls" Assembly="MyWebControls" %>

<!DOCTYPE html>
<html>
<head>
    <title>ImageSwitch Test</title>
    <style>
        .image-switch {
            display: inline-block;
            position: relative;
        }

        .image-switch img {
            display: block;
            max-width: 100%;
            height: auto;
        }

        .image-switch .switch {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.5);
            border-radius: 10px;
            padding: 5px;
        }

        .image-switch .switch span {
            display: inline-block;
            margin-right: 5px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.5);
            cursor: pointer;
        }

        .image-switch .switch span.selected {
            background-color: #fff;
        }
    </style>
</head>
<body>
    <form runat="server">
        <div>
            <my:ImageSwitch ID="ImageSwitch1" runat="server" ImageUrl="~/Images/sample1.jpg" SelectedIndex="0" />
        </div>
    </form>
</body>
</html>

在这个示例中，我们首先在页面中注册了控件库，然后使用 <my:ImageSwitch> 标签来创建 ImageSwitch 控件。可以通过设置 ImageUrl 属性来设置要显示的图片，SelectedIndex 属性来设置选中的图片索引。