2

@Html.DropDownList を取得して、それが作成する選択の onChange() イベントで別のアクションに指示する方法を理解しようとしています。アクション名は、選択リストのオプション値に格納されます。これまでに入手したクローゼットは次のとおりです。

意見：

@using (Html.BeginForm("Index", "Home", FormMethod.Get))
{
<h5>Select service to test:</h5>
@Html.DropDownList("ddl", new SelectList(Model.Services, "MvcActionName", "ServiceName"), 
new {
    onchange = @"
    var form = document.forms[0];
    var action = $('#ddl').val();                                 
    form.action=action;
    form.submit();"
})

}

そして、それが発するのはこれです：

<form action="/" method="get">    <h5>Select service to test:</h5>
    <select id="ddl" name="ddl" onchange="
            var form = document.forms[0];
            var action = $("#ddl").val();                                 
            form.action=action;
            form.submit();"><option value="">Ping Service</option>
    <option value="Data">Data Service</option>
    </select>
</form>

しかし、これは「localhost/Data」を呼び出そうとするだけで、「localhost/Home/Data」を呼び出す必要があるため失敗します。私は標準の MVC3 ルーティング設定を使用していますが、これまでのところ、BeginForm ヘルパーがより良いフォーム ブロックを発行するように変更することはできませんでした。

繰り返しになりますが、ルーティングが問題なのか、目的の場所にたどり着くのに不十分な道をたどっているのかはわかりません. ヘルプやガイダンスをいただければ幸いです。

4

1 に答える 1

2

2013 年 3 月 28 日更新: .attr() が Chrome で期待どおりに機能しないことがわかったため、.attr() のこの回答で .prop() を使用して jquery の使用法を更新しました。どうやらこれはjqueryの変更であり、この時点から進むべき道です。詳細については、このディスカッションを参照してください: .prop() vs .attr()

更新された回答:

リンクを提供してくれた Griegs に再び感謝します。

追加情報 - 「アクションの選択」ドロップダウンを独自のリストの任意のページに表示したかったので、レイアウトに配置しました。唯一の問題は、読み込まれた各ページの js で正しい「選択済み」オプションを設定する必要があったことですが、それは大したことではありませんでした。

レイアウト ビューは次のとおりです。

<body>
    <h4>Action Selector:</h4>
    <select id="ServiceDropDown" name="ServiceDropDown">
        <option value="Index">Ping Service</option> 
        <option value="Data">Data Service</option>
    </select>
    <br />

    @RenderBody()
</body>
</html>

インデックス ビュー:

<h2>Index</h2>

<script type="text/javascript">
    $(document).ready(function () {
        SetupServicesDropDown('Index');
    });
</script>

そして、概念実証のもう 1 つのビュー (実際には Index と同じです。関数呼び出しとのパラメーターの違いを強調したかっただけです):

<h2>Data</h2>

<script type="text/javascript">
    $(document).ready(function () {
        SetupServicesDropDown('Data');
    });
</script>

そして、すべてを機能させる関数を別のファイルに入れました。

function SetupServicesDropDown(optionValue) {
    // Set correct option in ServiceDropDown
    $('#ServiceDropDown > option[value = ' + optionValue + ']').prop("selected", "selected");

    // Event handler for ServiceDropDown.onChange()
    // Redirects to new Action in same Controller, with Action name of the selected option value
    $('#ServiceDropDown').change(function () {
        var target = "/Home/" + $("#ServiceDropDown option:selected").prop('value');
        window.location = target;
    });
}

各ページでセットアップ関数を呼び出さなければならないことを気にしない限り、それは魅力のように機能します。再度、感謝します。

于 2013-03-28T03:14:28.760 に答える