c# - 如何在 C# 中实现 Dropbox 列表

Question

我目前正在使用 ASP.NET 开发一个 C# 项目。我想实现一个保管箱列表。因此，用户从 Dropbox 开始并可以选择一种方法，并且在 Dropbox 旁边是一个 + 和 - 按钮，这使用户能够添加更多的 Dropbox。所以我想知道如何实现在 ASP.NET 中构建保管箱列表的可能性？

Answer 1

您不需要任何服务器端代码，客户端脚本是满足您需求的理想解决方案。

拥有这样的 HTML：

<div id="MainPlaceholder">
    <div id="DropDownPlaceholder">
        <select name="myDropDown">
            <option value="1">First</option>
            <option value="2">Second</option>
            <option value="3">Third</option>
        </select>
        <button type="button" onclick="AddDropDown(this);">+</button>
        <button type="button" onclick="RemoveDropDown(this);">-</button>
    </div>
</div>

您需要以下纯 JavaScript 才能使其工作：

<script type="text/javascript">
var added_counter = 0;

function AddDropDown(sender) {
    var parent = sender.parentNode;

    //make fresh clone:
    var oClone = parent.cloneNode(true);

    //append to main placeholder:
    parent.parentNode.appendChild(oClone);

    //store change in global variable:
    added_counter++;
}

function RemoveDropDown(sender) {
    //don't allow to remove when there is only one left
    if (added_counter <= 0) {
        alert("One drop down must exist");
        return;
    }

    var parent = sender.parentNode;

    //disable so value won't be passed when form submitted:
    parent.getElementsByTagName("select")[0].disabled = true;

    //hide:
    parent.style.display = "none";

    //store change in global variable:
    added_counter--;    
}
</script>

代码有注释，但如果您需要任何进一步的解释，请随时询问。

现场测试用例。

编辑：由于您需要读取服务器端代码上的选定值，更好的方法是更改​​每个克隆下拉列表的名称：

var totalAddedCounter = 0;

function AddDropDown(sender) {
    var parent = sender.parentNode;

    //make fresh clone:
    var oClone = parent.cloneNode(true);

    //assign unique name:
    oClone.getElementsByTagName("select")[0].name += "_" + totalAddedCounter;

    //append to main placeholder:
    parent.parentNode.appendChild(oClone);

    //store change in global variable:
    added_counter++;
    totalAddedCounter++;
}

现在棘手的部分是读取这些值。dropboxlistID.Text您将不得不遍历所有已发布的值来寻找您需要的东西，而不是普通的：

foreach (string key in Request.Form.Keys)
{
    if (key.StartsWith("dropboxlistID"))
    {
        string text = Request.Form[key];
        //.....
    }