aspx Web 用户控件 多选下拉框

TZ糖纸

HTML 部分

[HTML] 纯文本查看 复制代码

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="MultiSelectDropDown.ascx.cs" Inherits="UserControl_MultiSelectDropDown" %>

<asp:TextBox ID="txtSelection" runat="server" placeholder="请选择"></asp:TextBox>
<asp:Panel ID="Panel1" runat="server">
    <asp:Panel ID="Panel2" runat="server">
        <asp:CheckBoxList ID="cbSelections" runat="server">
        </asp:CheckBoxList>

    </asp:Panel>
    <div style="display: flex; padding: 2px;">
        <div>清空</div>
        <div>确定</div>
    </div>
</asp:Panel>




<script type="text/javascript">
    function showSelectionBox() {
        var panel = document.getElementById('<%= Panel1.ClientID %>');
        panel.style.display = 'block';
        panel.style.position = 'absolute';
        panel.style.backgroundColor = '#fff';
        panel.style.padding = "10px";
        panel.style.textAlign = "left";

        var panel2 = document.getElementById('<%= Panel2.ClientID %>');
        panel2.style.height = "200px";
        panel2.style.overflowY = "scroll";


        var txtSelection = document.getElementById('<%= txtSelection.ClientID %>');
        //panel.style.top = txtSelection.getBoundingClientRect().top + txtSelection.style.offsetHeight + 'px';
        panel.style.marginTop = txtSelection.getBoundingClientRect().height + 'px';
        panel.style.left = txtSelection.getBoundingClientRect().left + 'px';



    }

    function selectItem() {

        var varray = GetCheckBoxListValue('<%= cbSelections.ClientID %>');
        if (varray.length > 0) {
            var txtSelection = document.getElementById('<%= txtSelection.ClientID %>');
            txtSelection.value = varray.join(',');

        }
        initCbSelections();

    }
    function reset() {
        ResetCheckBoxListValue('<%= cbSelections.ClientID %>');
        var txtSelection = document.getElementById('<%= txtSelection.ClientID %>');
        txtSelection.value = '';
        initCbSelections();
    }
    function initCbSelections() {
        var panel = document.getElementById('<%= Panel1.ClientID %>');
        panel.style.display = 'none';
    }
    function ResetCheckBoxListValue(objID) {
        var CheckBoxList = document.getElementById(objID);
        if (CheckBoxList == null) return;
        if (CheckBoxList.tagName == "TABLE") {
            for (i = 0; i < CheckBoxList.rows.length; i++)
                for (j = 0; j < CheckBoxList.rows[i].cells.length; j++)
                    if (CheckBoxList.rows[i].cells[j].childNodes[0])
                        if (CheckBoxList.rows[i].cells[j].childNodes[0].checked == true)
                            CheckBoxList.rows[i].cells[j].childNodes[0].checked = false;
        }
        if (CheckBoxList.tagName == "SPAN") {
            for (i = 0; i < CheckBoxList.childNodes.length; i++)
                if (CheckBoxList.childNodes[i].tagName == "INPUT")
                    if (CheckBoxList.childNodes[i].checked == true) {
                        CheckBoxList.childNodes[i].checked = false;
                    }
        }
    }
    function GetCheckBoxListValue(objID) {
        var v = new Array();
        var CheckBoxList = document.getElementById(objID);
        if (CheckBoxList == null) return v;
        if (CheckBoxList.tagName == "TABLE") {
            for (i = 0; i < CheckBoxList.rows.length; i++)
                for (j = 0; j < CheckBoxList.rows[i].cells.length; j++)
                    if (CheckBoxList.rows[i].cells[j].childNodes[0])
                        if (CheckBoxList.rows[i].cells[j].childNodes[0].checked == true)
                            v.push(CheckBoxList.rows[i].cells[j].childNodes[1].innerText);
        }
        if (CheckBoxList.tagName == "SPAN") {
            for (i = 0; i < CheckBoxList.childNodes.length; i++)
                if (CheckBoxList.childNodes[i].tagName == "INPUT")
                    if (CheckBoxList.childNodes[i].checked == true) {
                        i++;
                        v.push(CheckBoxList.childNodes[i].innerText);
                    }
        }
        return v;
    }

    initCbSelections();
</script>

C# 部分

[C#] 纯文本查看 复制代码

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

public partial class UserControl_MultiSelectDropDown : System.Web.UI.UserControl
{


    public string CssClass
    {
        get { return txtSelection.CssClass; }
        set { txtSelection.CssClass = value; }
    }

    public ListItemCollection Items
    {
        get
        {

            return cbSelections.Items;
        }
        set
        {
            var data = value as ListItemCollection;
            cbSelections.DataSource = data;
            cbSelections.DataBind();
        }

    }
    public List<string> SelectedTexts
    {
        get { return txtSelection.Text.Split(',').ToList(); }
    }

    protected void Page_Load(object sender, EventArgs e)
    {

    }

}

使用方法

[C#] 纯文本查看 复制代码

<%@ Register TagPrefix="uc" TagName="MultiSelectDropDown" Src="~/UserControl/MultiSelectDropDown.ascx" %>
<uc:MultiSelectDropDown ID="multiSelectDropDown" runat="server" CssClass="Public_Input IE_textcentered"></uc:MultiSelectDropDown>

 this.multiSelectDropDown.Items.Add(new ListItem(item.Value, item.Key));

multiSelectDropDown.SelectedTexts

EnterpriseSolu

web form早就到了不维护了，过时技术，现在是mvc再或是前段框架vue angularjs，wen form必须配置ajax体验才好一点，回发导致的页面刷新太严重，viewstate也是

ldwz

没看懂。。。 - -！

7R903

过时了，前端框架顶上

TZ糖纸

cn005897 发表于 2023-8-1 08:29
过时了，前端框架顶上

内部用的，开发怎么快怎么来

TZ糖纸

EnterpriseSolu 发表于 2023-8-1 04:08
web form早就到了不维护了，过时技术，现在是mvc再或是前段框架vue angularjs，wen form必须配置ajax体验才 ...

有没有可能是不对外的？想用啥就用啥，怎么简单怎么来