3

我一直在四处寻找，我迷失了如何去做我想做的事情。

我正在尝试创建一个表单，其中第一列是名称列表，下一列是所有下拉列表。这个想法是，对于每个名称，用户都会选择一个值。每个名称可能需要两个、三个或更多值。我想创建一个动态表单，用户可以在其中单击行中的添加并出现另一个下拉列表。

前任。“姓名” | 添加按钮 | 落下

然后当我点击添加...

“姓名” | 添加按钮 | 下拉 | 落下

并让它继续下去。

我能够创建表单，并且可以创建下拉列表。问题是我在转发器的 ItemCommand 上添加控件，因此每次都必须重新创建它们。因此，当我必须重新创建它们时，我无法找到一种方法来保持在每个下拉列表中选择的值。

通常不需要超过两个下拉菜单，但在少数情况下需要三个，并且可能会出现更多。我想尽可能保持这种动态。

我知道，如果我在 Init 页面中添加下拉列表，它们将保留在回发中，但至少在我的设计中，用户必须单击添加才能获得另一个下拉列表。

有没有办法从这些下拉列表中捕获数据然后每次重新加载它们？还是实现此功能的更好方法？

感谢您的帮助。

这是我正在使用的一些 asp 和代码。这正如我所愿，但我不知道如何将数据保留在回发中，因为我添加的所有下拉列表都丢失了。

ASP：

<table>
    <asp:Repeater ID="repChemicals" runat="server" OnItemCommand="repChemicals_OnItemCommand">
        <ItemTemplate>
            <tr>
                <td>
                    <asp:HiddenField ID="hfNumber" runat="server" />
                    <%# Eval("ChemicalName") %>
                </td>
                <td>
                    <asp:Button runat="server" ID="btnAdd" Text="Add" CommandArgument="ADD" />
                </td>
                <td>
                    <div id="divContainer" runat="server">
                        <asp:DropDownList runat="server" Width="60px" ID="ddlTest"></asp:DropDownList>
                    </div>
                </td>
            </tr>
        </ItemTemplate>
    </asp:Repeater>
</table>

C＃：

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            List<Chem> Chemicals = new List<Chem>();
            Random rnd = new Random();

            for (int z = 0; z <= 10; z++)
            {
                List<string> t = new List<string>();

                Chem a = new Chem()
                {
                    ChemicalName = "Chemical" + z.ToString()
                };

                Chemicals.Add(a);
            }

            repChemicals.DataSource = Chemicals;
            repChemicals.DataBind();
        }


    }

public void repChemicals_OnItemCommand(object sender, RepeaterCommandEventArgs e)
    {
        int number = 0;

        foreach (RepeaterItem i in repChemicals.Items)
        {
            HiddenField hf = (HiddenField)repChemicals.Items[i.ItemIndex].FindControl("hfNumber");

            if (i.ItemIndex == e.Item.ItemIndex)
            {
                if (!string.IsNullOrWhiteSpace(hf.Value))
                {
                    number = Convert.ToInt16(hf.Value) + 1;
                }
                else
                {
                    number = 1;
                }

                hf.Value = number.ToString();
            }
            else
            {
                if (!string.IsNullOrWhiteSpace(hf.Value))
                {
                    number = Convert.ToInt16(hf.Value);
                }
                else
                {
                    number = 0;
                }
            }

            for (int x = 0; x < number; x++)
            {
                DropDownList ddl = new DropDownList();

                ddl.Style.Add("width", "60px");
                ddl.ID = "ddl" + i.ToString() + x.ToString();

                ddl.Style.Add("Margin-right", "3px");
                ddl.Attributes.Add("runat", "server");
                ddl.DataSource = DataSource();
                ddl.DataBind();

                Control c = repChemicals.Items[i.ItemIndex].FindControl("divContainer");
                c.Controls.Add(ddl);
            }
        }

一些循环用于创建测试数据。基本上，我在隐藏字段的每一行上存储了一些动态控件。然后在 item 命令上，我遍历所有行并重新创建所有以前存在的 ddl，并将一个添加到命令来自的行。

4

1 回答 1

1

这并不能完全回答您的问题，但它以一种不太复杂的方式实现了您的最终目标，并且利用了内置的 ASP.NET 控件，因此您可以在回发之间维护状态。

它利用jQuery、jQuery UI和DropDownChecklist插件。

ASPX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
    <script type="text/javascript" src="js/ui.dropdownchecklist.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css"/>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table>
            <asp:Repeater ID="repChemicals" runat="server">
                <ItemTemplate>
                    <tr>
                        <td>
                            <%# Container.DataItem %>
                        </td>
                        <td>
                            <div id="divContainer" runat="server">
                                <asp:ListBox ID="lstAttributes" SelectionMode="Multiple" runat="server"></asp:ListBox>
                            </div>
                        </td>
                    </tr>
                </ItemTemplate>
            </asp:Repeater>
        </table>
        <asp:Button ID="btnPostback" Text="Postback" runat="server"/>
    </div>
    </form>
</body>
</html>

C＃

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace PersonAttributes
{
    public partial class People : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            repChemicals.ItemCreated += RepChemicalsOnItemCreated;

            var chemicals = new[] {"Hydrogen", "Helium", "Lithium", "Beryllium", "Boron"};

            if(!IsPostBack)
            {
                repChemicals.DataSource = chemicals;
                repChemicals.DataBind();
            }

            var dropDownChecklist = "$(document).ready(function () { $('select').dropdownchecklist(); });";
            ScriptManager.RegisterStartupScript(this,GetType(),"initDropDownChecklist",dropDownChecklist,true);
        }

        private void RepChemicalsOnItemCreated(object sender, RepeaterItemEventArgs repeaterItemEventArgs)
        {
            var lst = repeaterItemEventArgs.Item.FindControl("lstAttributes") as ListBox;

            if (lst == null)
                return;

            lst.DataSource = new[] {"Option 1", "Option 2", "Option 3"};
        }
    }
}

在CodeRun上查看它的实际效果。

于 2012-07-13T03:47:09.063 回答