コントロールの選択された値が設定された後に Javascript を実行する

StackOverflow https://stackoverflow.com/questions/9341

  •  08-06-2019
  •  | 
  •  

質問

シンプルな ASP.NET アプリケーション。

ドロップダウン コントロールが 2 つあります。最初のドロップダウンには JavaScript があります onChange イベント。JavaScript は 2 番目のドロップダウンを有効にし、そこから値 (最初のドロップダウンで選択された値) を削除します。ドロップダウンの最初の空白の値をクリックすると、2 番目のドロップダウンが無効になります (オプションはリセットされます)。

にもコードがあります OnPreRender 最初のドロップダウンの値に基づいて 2 番目のドロップダウンを有効または無効にするメソッド。これは、最初のドロップダウンの値をコードで選択できるようにするためです (ユーザー設定のロード)。

私の問題は次のとおりです。

  1. ユーザーは最初のドロップダウンで何かを選択します。2 番目のドロップダウンは JavaScript を通じて有効になります。
  2. 次に、ポストバックを開始する 3 番目のドロップダウンを変更します。ポストバック後、ドロップダウンは正しい状態になります (最初の値が選択され、2 番目のドロップダウンが有効になります)。
  3. その後「戻る」ボタンをクリックすると、最初のドロップダウンで何かが選択されているため有効になるはずですが、2 番目のドロップダウンは無効になります。

起動スクリプト（2番目のドロップダウンの正しい状態を設定する）を追加しようとしました ClientScript.RegisterStartupScript, ただし、これが呼び出されるとき、最初のドロップダウンには selectedIndex の 0, 、実際にはそうではありません。私の推測では、選択の値は開始スクリプトの後に設定されると思います（ただし、それでも onChange 脚本）。

何を試してみるかについて何かアイデアはありますか?

役に立ちましたか？

解決 

<%@ Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">
    protected void indexChanged(object sender, EventArgs e)
    {
        Label1.Text = " I did something! ";
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Test Page</title>
</head>
<body>
    <script type="text/javascript">
        function firstChanged() {
            if(document.getElementById("firstSelect").selectedIndex != 0)
                document.getElementById("secondSelect").disabled = false;
            else
                document.getElementById("secondSelect").disabled = true;
        }
    </script>
    <form id="form1" runat="server">
    <div>
        <select id="firstSelect" onchange="firstChanged()">
            <option value="0"></option>
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <select id="secondSelect" disabled="disabled">
            <option value="1">One</option>
            <option value="2">Two</option>
            <option value="3">Three</option>
        </select>
        <asp:DropDownList ID="DropDownList1" AutoPostBack="true" OnSelectedIndexChanged="indexChanged" runat="server">
            <asp:ListItem Text="One" Value="1"></asp:ListItem>
            <asp:ListItem Text="Two" Value="2"></asp:ListItem>    
        </asp:DropDownList>
        <asp:Label ID="Label1" runat="server"></asp:Label>
    </div>
    </form>
    <script type="text/javascript">
        window.onload = function() {firstChanged();}
    </script>
</body>
</html>

編集：コード全体を置き換えました。これはユーザー コントロールでも機能するはずです。Register.ClientScriptBlock が機能していないと思われるのは、そのブロックに記述したコードが実行されるためです。 前に window.onload が呼び出されます。そして、その時点では DOM オブジェクトには値が設定されていないと仮定します (この点についてはよくわかりません)。そして、これが、selectedIndex が常に 0 になる理由です。

他のヒント

2 番目のドロップダウンが最初に JavaScript によって有効になっている場合 (指定しなかったので、これは JavaScript の onchange の間であると仮定します)、戻るボタンをクリックして前のポストバックをリロードしても、ドロップダウンは有効になりません。

ASP.NET と従来の JavaScript を組み合わせるのは困難を伴う場合があります。ASP.NET の Ajax 実装 (または、古い ASP.NET バージョンを使用する必要がある場合は、サードパーティの AjaxPanel コントロール) を確認するとよいでしょう。これらは、JavaScript のハッカー行為に頼ることを強制せずに、純粋な C# を通じて必要な動作を提供します。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top