asp.net - Visual STudio 2010 の ASP.net。ドロップダウン リストと送信ボタンの操作

Question

Visual Studio 2010 はかなり新しいものです。基本的な select from ステートメントからデータのリストを取得するドロップダウン リストがあります。ドロップダウン リストには 4 つの選択肢しかありません。たとえば、リンゴ、バナナ、ナシ、ブドウだけだとしましょう。リンゴを選択するとあるページにリダイレクトされますが、バナナを選択すると別のページにリダイレクトされるようにするにはどうすればよいですか? 現在、送信ボタンが 1 つのページに向けられていますが、ユーザーの選択に基づいて動的に変化するようにするにはどうすればよいですか?

Answer 1

select要素のonchangeイベントを処理します。

function getComboA(sel) {
    var value = sel.options[sel.selectedIndex].value;  
    // decide what to do with value for example
    if(value=='apple')
      window.location='pages.aspx';

}

<asp:dropDownList onchange="getComboA(this);" ...

Answer 2

この時点では、コントロール ASP をレンダリングする必要はありません。

オプション1

<select id="myselect" onchange="myfunction();">
    <option value=""></option>
    <option value="apple">apple</option>
    <option value="banana">banana</option>
    <option value="pear">pear</option>
    <option value="grapes">grapes</option>
</select>
<script type="text/javascript">
    function myfunction() {
        var value = $("#myselect").val();
        switch (value) {
            case "apple":
                window.location = "http://www.apple.com/";
                break;
            case "banana":
                window.location = "http://www.google.com/";
                break;
            case "pear":
                window.location = "http://www.apple.com/";
                break;
            case "grapes":
                window.location = "http://www.apple.com/";
                break;
        }
    }
</script>

オプション 2

<asp:DropDownList ID="myselect" onchange="myfunction();" runat="server">
    <asp:ListItem Text="apple" Value="apple" />
    <asp:ListItem Text="banana" Value="banana" />
    <asp:ListItem Text="pear" Value="pear" />
    <asp:ListItem Text="grapes" Value="grapes" />
</asp:DropDownList>
<script type="text/javascript">
    function myfunction() {
        var value = $("#<%= myselect.ClientID %>").val();
        switch (value) {
            case "apple":
                window.location = "http://www.apple.com/";
                break;
            case "banana":
                window.location = "http://www.google.com/";
                break;
            case "pear":
                window.location = "http://www.apple.com/";
                break;
            case "grapes":
                window.location = "http://www.apple.com/";
                break;
        }
    }
</script>

オプション 3 (ポストバックが必要)

<asp:DropDownList ID="myselect" runat="server" OnSelectedIndexChanged="myselect_SelectedIndexChanged" AutoPostBack="True">
    <asp:ListItem Text="apple" Value="apple" />
    <asp:ListItem Text="banana" Value="banana" />
    <asp:ListItem Text="pear" Value="pear" />
    <asp:ListItem Text="grapes" Value="grapes" />
</asp:DropDownList>

コード ビハインド .cs

protected void myselect_SelectedIndexChanged(object sender, EventArgs e)
{
    switch (myselect.SelectedValue)
    {
        case "apple":
            Response.Redirect("http://www.apple.com/");
            break;
        case "banana":
            Response.Redirect("http://www.apple.com/");
            break;
        case "pear":
            Response.Redirect("http://www.apple.com/");
            break;
        case "grapes":
            Response.Redirect("http://www.apple.com/");
            break;
    }
}