ascx自定义控件完善版

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SelectOP.ascx.cs" Inherits="ASB.XPON.Page.LabelAndPackManage.SelectOP" %>

<div id="s1" style="float: left;width: 134px;">
    <div>
        <asp:TextBox ID="txtQT" runat="server" Width="86px" Style="display: block; float: left;"> </asp:TextBox>
        <asp:Button ID="btnSearch" runat="server" Text="查询" Style="float: left; height: 26px; line-height: 26px; width: 36px; padding: 0px;" class="btn mbtn" OnClick="BtnSearch_Click" />
    </div>
    <div>
        <select id="leftST" multiple="true" style="width: 128px; height: 100px;" runat="server">
        </select>
    </div>
</div>

<div style="float: left; padding-top: 40px;">
    <div style="height: 20px; margin-left: 8px; margin-right: 8px;">
        <span>==》</span>
    </div>
    <div style="height: 30px; margin-left: 8px; margin-right: 8px;">
        <span>《==</span>
    </div>
</div>

<div id="s2" style="float: left;">
    <div>
        <select  name="leftRT" id="leftRT" runat="server" multiple="true" style="width: 128px; height: 126px;">
        </select>
    </div>
</div>

<input type="hidden" id="leftRTValue" runat="server" />

<script>
    $(function () {
        // 给select1的option加双击事件,移除左边的，给右边添加相应的数据
        var leftST = '<%= leftST.ClientID %>';
        var leftRT = '<%= leftRT.ClientID %>';
        var objRTValue = $('#' +'<%= leftRTValue.ClientID %>');
        $('#' + leftST).dblclick(function () {
            var selected = $('#' + leftST + ' option:selected');
            // document.getElementById(leftST).remove(selected)
            $('#' + leftRT).append(selected);
            objRTValue.val(objRTValue.val() + selected.val()+"、");
        });
        // 右边添加相应事件
        $('#' + leftRT).dblclick(function () {
            var selected = $('#' + leftRT + ' option:selected');
            // document.getElementById(leftRT).remove(selected)
            $('#' + leftST).append(selected);
            var RTValue = objRTValue.val();
            objRTValue.val(RTValue.replace(selected.val()+'、',''));
        });


    });
</script>

后台代码

using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace ASB.XPON.Page.LabelAndPackManage
{
    public partial class SelectOP : System.Web.UI.UserControl
    {
        public delegate DataTable GetDTDelegate();
        public event GetDTDelegate GetDTEvent;
        protected void Page_Load(object sender, EventArgs e)
        {
            if (IsPostBack)
            {
                InitControl();
            }
        }

        // 初始化控件的值
        private void InitControl()
        {
            string SelectOP = GetGetSelectProvinceValue();
            if (!string.IsNullOrEmpty(SelectOP))
            {
                string[] SelectedArray = SelectOP.Split('、');
                leftRT.Items.Clear();
                foreach (string option in SelectedArray)
                {
                    leftST.Items.Remove(leftST.Items.FindByValue(option));
                    DataRow dr = DtLSource.Select(ValueBind + "='" + option + "'")[0];
                    leftRT.Items.Add(new ListItem() { Value = dr[ValueBind].ToString(), Text = dr[TextBind].ToString() });
                }
            }
        }
 

        //左边赋值
        private DataTable _DtLSource;
        public DataTable DtLSource
        {
            get => _DtLSource;
            set
            {
                ddlItemTypeBind(value);
                _DtLSource = value;
            }
        }

        //右边赋值
        public DataTable DtRSource
        {
            set
            {
               ddlItemTypeRBind(value);
            }
        }

        // 获取选中的数据
        public string GetGetSelectProvinceValue() => this.leftRTValue.Value.Length>0? this.leftRTValue.Value.Substring(0, this.leftRTValue.Value.Length-1):"";

        public string ValueBind { get; set; }
        public string TextBind { get; set; }

        private void ddlItemTypeBind(DataTable dt)
        {
            this.leftST.DataSource = dt;
            this.leftST.DataTextField = TextBind;
            this.leftST.DataValueField = ValueBind;
            this.leftST.DataBind();
        }

        private void ddlItemTypeRBind(DataTable dt)
        {
            this.leftRT.DataSource = dt;
            this.leftRT.DataTextField = TextBind;
            this.leftRT.DataValueField = ValueBind;
            this.leftRT.DataBind();
        }

        protected void BtnSearch_Click(object o, EventArgs e)
        {
            DataTable dt = GetDTEvent();
            if (dt != null && dt.Rows.Count > 0)
            {
                DataTable dtN = new DataTable();
                dtN.Columns.Add(leftST.DataTextField, typeof(string));
                dtN.Columns.Add(leftST.DataValueField, typeof(string));
                if (!string.IsNullOrWhiteSpace(txtQT.Text))
                {
                    foreach (var dr in dt.Select(leftST.DataTextField + " like '%" + txtQT.Text.Trim() + "%'"))
                    {
                        dtN.Rows.Add(dr[leftST.DataTextField], dr[leftST.DataValueField]);
                    }
                }
                else
                {
                    dtN = dt;
                }
                // 右边处理
                string SelectOP = GetGetSelectProvinceValue();
                leftRT.Items.Clear();
                if (!string.IsNullOrEmpty(SelectOP))
                {
                    string[] SelectedArray = SelectOP.Split('、');
                    foreach (string option in SelectedArray)
                    {
                        if ((dtN.Rows.Cast<DataRow>().Where(x => x.Field<string>(leftST.DataValueField) == option)).Count()>0)
                        {
                            dtN.Rows.Remove((DataRow)dtN.Rows.Cast<DataRow>().FirstOrDefault(x => x.Field<string>(leftST.DataValueField) == option));
                        }
                        DataRow dr = DtLSource.Select(ValueBind + "='" + option + "'")[0];
                        leftRT.Items.Add(new ListItem() { Value = dr[ValueBind].ToString(), Text = dr[TextBind].ToString() });
                    }
                }
                 
                dtN.AcceptChanges();
                leftST.DataSource = null;
                TextBind = leftST.DataTextField;
                ValueBind = leftST.DataValueField;
                ddlItemTypeBind(dtN);
            }
            else
            {
                leftST.DataSource = null;
                TextBind = leftST.DataTextField;
                ValueBind = leftST.DataValueField;
            }
        }
    }
}

具体调用

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AscxProject._Default" %>
<%@ Register Src="SelectOP.ascx" TagName="header" TagPrefix="uc1" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <uc1:header ID="SelectOP" runat="server" />
  
     <uc1:header ID="Header1" runat="server" />
    <asp:Button runat="server" Text="获取数据" OnClick="Unnamed_Click" />
</asp:Content>

后台赋值

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;

namespace AscxProject
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("Text", typeof(string));
            dt.Columns.Add("Value", typeof(string));
            dt.Rows.Add("安徽", "AH");
            dt.Rows.Add("上海", "SH");
            dt.Rows.Add("芜湖", "WH");
            dt.Rows.Add("南京", "NJ");

            this.SelectOP.ValueBind = "Value";
            this.SelectOP.TextBind = "Text";
            this.SelectOP.DtLSource = dt;

            this.SelectOP.GetDTEvent += new ASB.XPON.Page.LabelAndPackManage.SelectOP.GetDTDelegate(GetProvince);


            DataTable dt1 = new DataTable();
            dt1.Columns.Add("Text", typeof(string));
            dt1.Columns.Add("Value", typeof(string));
            dt1.Rows.Add("安徽", "AH");
            dt1.Rows.Add("上海", "SH");
            dt1.Rows.Add("芜湖", "WH");
            dt1.Rows.Add("南京", "NJ");

            this.Header1.ValueBind = "Value";
            this.Header1.TextBind = "Text";
            this.Header1.DtLSource = dt1;

            this.Header1.GetDTEvent += new ASB.XPON.Page.LabelAndPackManage.SelectOP.GetDTDelegate(GetProvince);

        }

        public DataTable GetProvince() {
            DataTable dt = new DataTable();
            dt.Columns.Add("Text", typeof(string));
            dt.Columns.Add("Value", typeof(string));
            dt.Rows.Add("安徽", "AH");
            dt.Rows.Add("上海", "SH");
            dt.Rows.Add("芜湖", "WH");
            dt.Rows.Add("南京", "NJ");

            return dt;
        }

        protected void Unnamed_Click(object sender, EventArgs e)
        {
            this.Response.Write(this.SelectOP.GetGetSelectProvinceValue());
            Response.Flush();
        }
    }
}

效果图

 

 发现一个问题，加runat="server"的控件，每次点一下都会刷新下界面，以后有时间再研究下。

记录下，在aspx中加入这个控件后，下面的js不再实行。在控件的Page_Load里加上这个。

ScriptManager.RegisterStartupScript(Page, this.GetType(), "Refresh", "funcn();", true);

注意下这个key必须是唯一的，跟前台js代码一样，

if (IsPostBack)
{
ScriptManager.RegisterStartupScript(Page, this.GetType(), "Refresh"+ this.ClientID, this.ClientID+"();", true);
InitControl();
}