3

ログアウトした後、自分のサイトのログイン ページにリダイレクトされるという問題があります。ただし、更新しない限り、ログイン ページの JavaScript はまったく実行されません。

次のリンクを使用して、アカウント コントローラーの LogOff アクションを呼び出しています (このコードは別のコントローラーにあります)。

@Html.ActionLink("Logout", "LogOff", "Account", null, new { data_icon = "gear", @class = "ui-btn-right" })

アカウント コントローラーの LogOff メソッドは次のようになります。ログアウト アクションからここに来たことをログイン ビューで検出するために、ログアウト パラメーターを渡します。

public ActionResult LogOff()
{
    return Redirect(Url.Action("LogOn", "Account", new RouteValueDictionary(new { logout = true })));
}

firebugをチェックインすると、javascriptが

$(document).ready(function () { ... });

ログインページで使用されているものはまったく実行されません。

さらに、ログイン ページの URL は、私が期待していた "localhost:#####/Account/LogOn?logout=True" ではなく、"localhost:#####/Account/LogOff" と表示されます。

後でログイン フォームを送信しようとすると、「http://localhost:#####/?logout=True」という URL の空白のページが表示されます。

そのため、ページがJavaScriptでロードされない原因と、問題を解決する方法を知りたいです。

ありがとう!

更新: これが私の LogOn コントローラー メソッドです。

public ActionResult LogOn()
{
    List<SelectListItem> cpList = new List<SelectListItem>();

    // Retrieve the list of central points from web.config
    NameValueCollection centralPoints = (NameValueCollection)ConfigurationManager.GetSection("CentralPointDictionary");

    foreach (string cp in centralPoints)
        cpList.Add(new SelectListItem { Text = cp as string, Value = centralPoints[cp] as string });

    // Check for a cookie containing a previously used central point
    string selectedCP = string.Empty;
    if (ControllerContext.HttpContext.Request.Cookies["LastCentralPoint"] != null)
        selectedCP = ControllerContext.HttpContext.Request.Cookies["LastCentralPoint"].Value;
    else if (cpList.Count > 0)
        selectedCP = cpList[0].Text;
    LogOnModel loginModel = new LogOnModel { CentralPointsList = new SelectList(cpList, "Value", "Text", selectedCP) };
    return View(loginModel);
}

そして私のビューの本体:

<div data-role="page" id="page">
    <div data-role="header" data-position="inline">
        <div id="languageContainer" data-role="fieldcontain">
        <select id="languageSelect" data-mini="true" data-theme="b" data-overlay-theme="d" data-native-menu="false" data-inline="true">
            <option value="English">English</option>
            <option value="Français">Français</option>
        </select>
        </div>
    </div><!-- /header -->

    <div data-role="content" id="contentFrame" class="frame">
        <div id="controlFrame">
            @using (Html.BeginForm())
            {
            <div id="centralPoint" class="frame">
                    @Html.DropDownListFor(model => model.CentralPointAddress, Model.CentralPointsList, new { id = "centralPointSelect", name = "centralPoint", data_mini = "true", data_inline = "true", data_native_menu = "false" })
            </div>
                <div id="errorMsg">@Html.ValidationSummary()</div>
            <div id="credentialsFrame" class="frame">
                @Html.TextBoxFor(m => m.UserName, new { id = "userField", type = "text", name = "Username" })
                @Html.PasswordFor(m => m.Password, new { id = "passField", type = "password", name = "Password" }) 
            </div>
            <input id="loginBtn" type="submit" value="Login" />
            <div id="rememberMe" class="frame">
                        @Html.CheckBoxFor(m => m.RememberMe, new { @class = "custom", data_mini = "true" })
                        @Html.LabelFor(m => m.RememberMe)
            </div>
            <div id="forgotPassFrame">
                <input id="forgotPass" type="button" data-mini="true" value="Forgot password?" />
            </div>
            @Html.HiddenFor(m => m.Encrypted, new { id = "encrypted", value = "false" })
            }
        </div>
        @using (Html.BeginForm("SuccessfulLogin", "Account", FormMethod.Get, new { id = "successForm" }))
        {
            <input id="returnUrl" name="returnUrl" type="hidden" />
        }
    </div><!-- /content -->
 </div><!-- /page -->
4

2 に答える 2

3

実際、問題は jQuery Mobile に関連していました。JQM ドキュメントから: http://jquerymobile.com/test/docs/api/events.html

jQuery で最初に学ぶことは、$(document).ready() 関数内でコードを呼び出して、DOM が読み込まれるとすぐにすべてが実行されるようにすることです。ただし、jQuery Mobile では、ナビゲートするときに Ajax を使用して各ページのコンテンツを DOM にロードし、DOM Ready ハンドラーは最初のページに対してのみ実行されます。新しいページが読み込まれて作成されるたびにコードを実行するには、pageinit イベントにバインドします。このイベントについては、このページの下部で詳しく説明しています。

私だけは、「pageinit」は機能しませんでしたが、「pagechange」はうまくいきました。

$(document).ready() から元のコードを抽出し、それを別の関数に挿入しました。次のようになります。

$(document).ready(DocumentReady);

$(document).bind("pagechange", function () {
    // check if we just logged out to ensure we don't call DocumentReady() 
    // twice in succession
    if (window.location.href.indexOf("LogOff") > -1) {
        DocumentReady();
    }
});

function DocumentReady() {
    // some initialization code
});

でも...

これにより、JavaScript が実行されないという最初の問題は解決されましたが、UI には JavaScript による変更が表示されませんでした。

JQM のドキュメントに記載されているように、アプリ全体が 1 つのドキュメントで動作しています。そのため、LogOff コントローラー メソッド (LogOn にリダイレクトされた) により、新しいログイン ページが既存のページに挿入 (または追加) されていました。次に、私のjavascriptコードが、たとえば、でテキスト入力フィールドにアクセスすると、ログアウト後に表示されるページではなく$("#userField")、アプリケーションの最初にロードされたページからフィールドにアクセスしていました!

後で分かったのは、window.location に値を割り当ててページの場所を変更すると、完全に更新されるということです。したがって、ログアウトするときは、コントローラー メソッドを呼び出すのではなく、次のようにするだけです。

$("#logoutBtn").click(function () {
    window.location = $.mobile.path.parseUrl(window.location.href).domain + "/Account/LogOn";
});

これによりページが完全に更新されるため、$(document).ready() イベントが発生します。つまり、「pagechange」または「pageinit」へのバインドについて以前に述べたことが不要になったことを意味します。 jQuery モバイルを使用する場合。更新によってまったく新しい DOM も読み込まれるため、JavaScript がページに表示される要素に影響を与えることを確信できます。

于 2012-06-26T14:51:59.093 に答える
0

RedirectToAction()の代わりに使用しredirect()ます。

于 2012-06-22T19:59:19.093 に答える