Question

我的网络表单中有两个控件。一个是组合框控件，另一个是文本框。我想要做的是当用户在组合框中选择另一个项目时，新项目被添加到文本框并自动显示给用户。

例如： 1.当用户在组合框中选择“001”项时，文本框在文本区域显示“001”。 2.当用户在组合框中选择'002'项时，文本框显示如下：'001'，'002'

这是我的代码：

class webform : System.Web.UI.Page{

    private StringBuilder sb = new StringBuilder();

    protected void ComboBox1_SelectedIndexChanged(object sender, EventArgs e)
    {
        //Todos: Add the selection of combo box to text box2. 
        this.localsb.Append(this.ComboBox1.Text);
        this.localsb.Append(",");
        this.Text2.Text = this.localsb.ToString();
    }

......
}

这是我的前端代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PCA_Form.aspx.cs" Inherits="WebApplication2.PCA_Form" Culture="auto" meta:resourcekey="PageResource1" UICulture="auto" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PCA_Form</title>
    <style type="text/css">
        #Text1 {
            width: 147px;
            margin-top: 0px;
        }

        #form1 {
            height: 718px;
            width: 963px;
        }

        .auto-style1 {
            font-size: large;
        }

        #Checkbox1 {
            width: 112px;
        }

        #Select1 {
            width: 162px;
        }
    </style>
    <script>
        $(document).ready(function () {
            $('.ComboBox1').on('blur', function () {
                if ($(this).prop('checked')) {
                    var initial = $('#Text2').val();
                    var checkbox = $(this).text();
                    $('#Text2').val(initial + ',' + checkbox).change();
                }
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

        <div style="height: 51px; width: 906px;" aria-atomic="False" draggable="auto">
            <span class="auto-style1">New Price</span>
            <asp:TextBox ID="Text1"
                runat="server"
                class="Text"
                onkeypress="if (event.keyCode!=46 && (event.keyCode < 48 || event.keyCode >57)) event.returnValue = false;"
                TextMode ="MultiLine">
            </asp:TextBox>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <span class="auto-style1">Item Number</span>
            <ajaxToolkit:ComboBox ID="ComboBox1"
                TextMode="MultiLine"
                runat="server"
                AutoPostBack="True"
                DataSourceID="SqlDataSource1"
                DataTextField="Code"
                DataValueField="Code"
                Style="display: inline;"
                AutoCompleteMode="Suggest"
                DropDownStyle="DropDown"
                OnSelectedIndexChanged="ComboBox1_SelectedIndexChanged">

            </ajaxToolkit:ComboBox>
            &nbsp; &nbsp;
            <asp:Button ID="Button1"
                Text="submit"
                OnClick="SubmitButton_Click"
                runat="server" />
            &nbsp;&nbsp;&nbsp;
            <asp:Button ID="Button2" runat="server" Text="Excel" OnClick="Button2_Click" />
            &nbsp;&nbsp;&nbsp;

            <asp:TextBox ID="Text2" runat="server" TextMode="MultiLine"></asp:TextBox>

        </div>

        <div style="height: 466px; width: 943px; margin-top: 35px">
            <span class="auto-style1">&nbsp;<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=XXX;Initial Catalog=XXXXX;Integrated Security=True" ProviderName="System.Data.SqlClient" SelectCommand="SELECT [Code] FROM [Item]"></asp:SqlDataSource>
            <br />
            <asp:GridView ID="PCADataGrid" runat="server" Width="938px" OnSelectedIndexChanged="PCADataGrid_SelectedIndexChanged" AutoGenerateColumns ="true">
            </asp:GridView>
            </span>
        </div>

    </form>
    <p>&nbsp;</p>

</body>
</html>

在组合框标签中，当用户更改此框中的选择时，我会触发一个名为ComboBox1_SelectedIndexChanged（）的函数。

Answer 1

嗯，这确实是可能的。但是，如果您打算避免那些讨厌的 Postback的中的可爱屏幕闪烁，那么您的方法将需要更新面板以及随后的所有痛苦。我建议用JavaScript做这个客户端：

$(document).ready(function() {
     $('.Checkbox').on('blur', function() {
          if($(this).prop('checked')) {
               var initial = $('#txtField').val();
               var checkbox = $(this).text();
               $('#txtField').val(initial + ', ' + checkbox).change();
          }          
     });
});

这有点粗糙和粗糙，但它应该满足您的需求。这将通过使用 Asp.Net页面生命周期来避免您必须引入的问题。希望这能指明你的方向。

正如我上面所说，你的方法将会：

需要回发或更新面板

<强>问题：

回发 - 屏幕会闪烁，加上管理View State非常困难。
更新面板 - 使用起来很痛苦，也会影响性能。每个'Postback'成为页面的Ajax调用。它存储在内存中，因此每个回发在生命周期中都会存储在内存中。所以效率不高。

<强>更新

你问了一个关于：

.Checkbox
#txtField

在您的前端，在源代码中，您的元素创建如下：

<asp:TextBox 
     id="txtField" runat="server"
     placeholder="Initial Content..." />

您可以在控件上放置更多内容，但要回答您的问题，它们与您操作的给定元素的 Id 或 Class 名称相关联。 Id只能绑定到单个元素，其中一个类可以用于多个元素。例如 -

<asp:Checkbox
     id="chkField" runat="server"
     CssClass="Checkbox" />

因此，在这种情况下，.是此案例的锚点.Checkbox。下一个是#，它将锚定到Id，#chkField。因此，当您使用JavaScript时，他们会使用$('.Checkbox')或$('#chkField')作为选择器来访问您网页上的元素。这会为你澄清吗？

在组合框中更改选定的索引时，如何将此新索引添加到另一个文本框？

1 个答案: