2

モバイル用に設計された単純な ASP.Net MVC 4 アプリがあります。このアプリケーションは、ログインを処理するためのフォーム認証とアカウント ビューとコントローラーを備えたモバイル アプリケーション用の組み込みの C# Visual Studio テンプレートを使用します。

このアプリケーションには、組み込みのログイン ビュー、メイン メニュー、および私が作成した Flight ビューがあります。

「日付」の CSS クラスを持つすべての html 要素を日時ピッカーにしたいので、JQuery UI を介して、Jquery バンドルがロードされた直後に次の JavaScript を Shared/_Layout.cshtml ビューに配置しました。

<script type="text/javascript">
            $(document).ready(function () {
                alert("test");
                $('.date').datepicker({ dateFormat: "dd/mm/yy" });

            });
</script>

このスクリプトは、アプリケーションにログインし、ブラウザーの URL を手動で Flight ビューに変更するときに必要なことを正確に実行します。http://localhost:63891/Flight

ただし、メイン メニューのリンクから移動すると、スクリプトは実行されません。メイン メニュー ビューでは、リンクは次のように生成されます。

<ul data-role="listview" data-inset="true">
    <li data-role="list-divider">Navigation</li>
    <li>@Html.ActionLink("Flights", "Index", "Flight")</li>
</ul>

明確にするために、リンクをクリックすると、期待どおりにビューがレンダリングされ、JavaScript が実行されません。スクリプトを実行できる唯一の方法は、手動で URL を入力することです。

スクリプトを実際のフライト ビュー内に移動しようとしましたが、Shared/_Llayout.cshtml ビューのスクリプト セクションに読み込まれているため、その時点で JQuery は読み込まれません。

リンクにカーソルを合わせると、表示される URL は localhost:63891/Flight ですが、実際に URL をクリックすると、localhost:63891/#/Flight に変わります。これがなぜなのか、それが関連しているかどうかはわかりません。

リンクをクリックしたときにスクリプトを実行するにはどうすればよいですか?

編集:私はこの問題を抱えていると思いますが、誰も彼/彼女の質問に答えていませんASP.net MVC Ajax で読み込まれたページで jQuery イベントを処理する方法は?

4

4 に答える 4

2

モバイル サイトが JQM を使用している場合、コメントからそうであることがわかります。使ってみて

$(document).bind('pageinit')

それ以外の

$(document).ready()

それについてもっと

于 2013-05-29T11:29:46.530 に答える
1

@Igarioshka の回答を受け入れました。これは、この問題に対する通常の回答であり、Jquery モバイル アプリで document.ready を使用することを意図していない方法に関する適切な情報を提供するためです。

実際の問題は、JQuery モバイルを自動的に追加する VS のモバイル テンプレートからサイトを作成したことです。その後、カレンダーのポップアップが必要になるまで開発を進めました。私がオンラインで見つけたものから、これには JQuery UI と JQuery (full) が必要なので、SHAred/_layout.cshtml ビューで JQM の既存の呼び出しの下にレンダリング呼び出しを追加しました。

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
 @Scripts.Render("~/bundles/jquery")
 @Scripts.Render("~/bundles/jqueryui")

次に、データピッカーを追加するためのスクリプトを追加しました。@Igarioshka で詳述されているように、JQuery Mobile がすべてに AJAX を使用しているため、これは起動しません。ただし、スクリプトを次のように変更します$(document).bind('pageinit', function (event, data) {

まだ発砲していませんでした。これは、本格的な JQuery がロードされた後でスクリプトが実行されたためと思われます。したがって、本格的なjqueryがロードされる前にpageinitイベントを使用するようにコードの順序を変更すると、問題が解決します。

@Scripts.Render("~/bundles/jquery", "~/bundles/jquerymobile")
@RenderSection("scripts", required: false)
        <script type="text/javascript">
            $(document).bind('pageinit', function (event, data) {
                $('.date').datepicker({ dateformat: "dd/mm/yy" });
            });
        </script>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

これは、pageinit イベントが JQuery Mobile に固有のものであり、本格的な JQuery では利用できないことを意味します。これは、プラットフォーム間での Web 開発への統一されたアプローチを学ぼうとするときに残念です。

これは、JQuery Mobile を完全に使用してしまったために JQuery Mobile を取り除く必要があることを意味するのか、それとも最適化などがあるためにまだ有用なのかはわかりません。

于 2013-05-29T13:53:15.080 に答える
0

「フライト」ページが部分的にロードされているように聞こえます（たとえば、ajaxを介して）。

XHR リクエストを探す前に、「Flight」リンクをクリックしたときに URL が変更されているかどうかを確認できます。変更されていない場合は、「Flight」ページが部分的に読み込まれていることを意味し、その逆は false です ( AJAX でコンテンツを読み込み、URL を変更します)。

次に、開発者ツール (Chrome など) を使用して XHR リクエストを探すことができます。F12 を押して (または「Inspect Element」を右クリックして)、コンソールに XHR リクエストがあるかどうかを確認します。 Chromes の Web 開発者ツールでの XHR リクエスト

「Log XMLHttpRequests」オプションが有効になっていることを確認します (設定で)。 設定

ログ XMLHttpRequests オプション

于 2013-05-29T10:39:58.637 に答える
0

シンプルなタグを試してみてください。多分それは動作します：

<a href = "~/Flight/">Flights</a>
于 2013-05-29T10:24:16.770 に答える