如何在文本框中将复选框列表中的选定数据显示为asp.net中的bootstrap标记

时间:2017-08-14 07:32:51

标签: jquery asp.net

即时通讯使用此链接和脚本

<script src="bootstrap-tagsinput-master/dist/bootstrap-tagsinput.min.js">
</script>
<script src="bootstrap-tagsinput-master/dist/bootstrap-tagsinput.js">
</script>
<link href="bootstrap-tagsinput-master/dist/bootstrap-tagsinput.css" 
rel="stylesheet" />
<link href="bootstrap-tagsinput-master/dist/bootstrap-tagsinput-
typeahead.css" rel="stylesheet" />
<script src="bootstrap-tagsinput-
master/lib/typeahead.js/typeahead.jquery.js"></script>  

我正在使用带按钮的复选框

  < <div class="wrapper">

<asp:Button ID="btnsearch" runat="server" Text="GENERATELIST" class="btn 
btn-primary" OnClick="btnsearch_Click" />


<div class="pre-scrollable">           
<asp:CheckBoxList ID="CheckBoxList1" runat="server" data-style="btn-primary" 
Width="100%" Height="100%" Style="overflow: auto; resize: none;" 
class="form-control" AutoPostBack="true" SelectionMode="Multiple" 
OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
</asp:CheckBoxList>

                                        </div>

                                    </div>
<asp:TextBox ID="txttag" runat="server" class="form-control" value="" data-
role="tagsinput" Style="border-color: #ccc; border-width: 1px; border-style: 
solid;">
</asp:TextBox>  />

代码隐藏文件, 当我点击按钮时,一些名称将被数据化为checkboxlist,然后如果我从复选框中选择一个项目,该项目应该在文本框中显示为bootstrap标记

   protected void btnsearch_Click(object sender, EventArgs e)
    {

        using (OracleConnection conn = new OracleConnection())
        {
            conn.ConnectionString = ConfigurationManager
                    .ConnectionStrings["GIS_RW"].ConnectionString;
            using (OracleCommand cmd1 = new OracleCommand())
            {
                cmd1.CommandText = "SELECT * FROM TABLE";
                cmd1.Connection = conn;
                conn.Open();
                using (OracleDataReader sdr = cmd1.ExecuteReader())
                {

                        if (sdr.HasRows == true)
                        {
                            DataTable dt = new DataTable();
                            dt.Load(sdr);

                            CheckBoxList1.DataSource = dt;
                            CheckBoxList1.DataValueField = "ID";
                            CheckBoxList1.DataTextField = "USERID";
                            CheckBoxList1.DataBind();
                            CheckBoxList1.Visible = true;
                        }
                        else
                        {
                            CheckBoxList1.Visible = false;
                        }


                }
                conn.Close();

            }

        }


 checkboxlist changing event

   protected void CheckBoxList1_SelectedIndexChanged(object sender, 
   EventArgs e)
    {
        List<string> chkeditems = new List<string>();
        foreach (ListItem item in CheckBoxList1.Items)
        {
            if (item.Selected)
            {
                chkeditems.Add(item.Text);
            }
        }
        String YrStr = String.Join(" ",chkeditems.ToArray());

        // Write to the page the value.
       // Response.Write(String.Concat("Selected Items: ", YrStr));
        txttag.Text = YrStr.ToString();


    }

bootstrap标签只出现一次,如果我点击任何按钮bootstrap标签消失,该怎么做?

1 个答案:

答案 0 :(得分:0)

我为此找到了解决方案,我刚刚为我的复选框列表添加了触发器,现在它的工作方式是谢谢

 <asp:UpdatePanel ID="UpdatePanel1" runat="server">
   <ContentTemplate>
       <asp:CheckBoxList ID="CheckBoxList1" runat="server" data-style="btn-
      primary" Width="100%" Height="100%" Style="overflow: auto; resize: 
      none;" class="form-control" AutoPostBack="true" 
      SelectionMode="Multiple" 
      OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged">
 </asp:CheckBoxList>
  </ContentTemplate>
   <Triggers>
    <asp:AsyncPostBackTrigger ControlID="CheckBoxList1" />
   </Triggers>
</asp:UpdatePanel>