c# - C# でドロップボックスのリストを実装する方法

Question

現在、ASP.NET を使用して C# プロジェクトに取り組んでいます。そして、ドロップボックスのリストを実装したいと思います。したがって、ユーザーはドロップボックスから開始し、メソッドを選択できます。ドロップボックスの横には + および - ボタンがあり、ユーザーはさらにドロップボックスを追加できます。だから、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];
        //.....
    }