Question

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

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>

代码有评论，但如果您需要任何进一步的解释，请随时提出。

Live test case

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

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];
        //.....
    }

如何在C＃中实现dropbox的列表

1 个答案: