0

私の ASP.NET MVC3 Web サイトには、ユーザーがボタンをクリックしてアカウントの [保存済みアイテム] セクションにエントリを追加できるセクションがあります。これは、JQuery Ajax リクエストを介して行われます。これは、ログインしている場合にうまく機能します。ログインしていない場合は、ログイン ページにリダイレクトされ、自動的にエントリが保存済みに追加されるようにしたいと考えています。アイテムセクション。

すべての部分が個別に動作しています。つまり、ボタンをクリックすると、ログインしていない場合、ログイン ボックスが表示されます。ログインポップアップも正常に機能します。問題は、すべてを一度にシームレスに実行しようとすることです。これが私がこれまでに持っているコードです:

[保存] ボタンのクリック イベント - ユーザーが途中でログインしたかどうかを確認します。

    var loggedIn = false;

    $(document).ready(function () {
        $('a#saveSearch').live('click', function (event) {
            $.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) {
                if (response == "True")
                    loggedIn = true;
                else
                    loggedIn = false;
            });
            if (loggedIn){
                SaveSearch();
            }
            else{                        
                $('#dialog').dialog('open');
                SaveSearch(); //don't think this is correct because it hits this line before login is complete
            }
        });

データベースに保存する関数:

        function SaveSearch(){                    
            var url = '@Url.Action("SaveSearch", "User")';
            $.ajax({
                url: url,
                type: 'POST',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify({
                    json: "@Html.Raw(Session["MyFormString"].ToString())"
                }),
                success: function (data) {
                    $('a#saveSearch').attr('disabled', "disabled");
                    $('div#savedResponse').html('<p>Search saved to user account</p>');
                },
                error: function () {
                }
            });
        }
    });

JQuery UI ダイアログのポップアップ:

$(function () {
    $('#dialog').dialog({
        autoOpen: false,
        width: 400,
        resizable: false,
        title: 'Login',
        modal: true,
        open: function(event, ui) {
            $(this).load("@Url.Action("Logon", "Account", null)");
        },
        buttons: {
            "Close": function () {
                $(this).dialog("close");
            }
        }
    });

私のコードには何か根本的な問題があると思います。この方法では、ログイン ポップアップがほんの 1 秒間表示された後、すぐに消えてしまうからです。ログインが完了するまで、コードの進行を停止する必要があるようです。

これを実現するためのアドバイスやヘルプをいただければ幸いです。

4

2 に答える 2

1

あなたの問題は次のことに関連している可能性があると思います：

$.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) {
  if (response == "True")
    loggedIn = true;
  else
    loggedIn = false;
});
if (loggedIn){
  SaveSearch();
}
else{                        
  $('#dialog').dialog('open');
  SaveSearch(); //don't think this is correct because it hits this line before login is complete
}

呼び出しは非同期です。$.getこれは、後者のコードを意味します。

if (loggedIn){

サーバーが応答する前に実行されています。そのコードを応答コールバック内に配置する必要があります。

$.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) {
  if (response == "True")
    loggedIn = true;
  else
    loggedIn = false;

  if (loggedIn){
    SaveSearch();
  }
  else{                        
    $('#dialog').dialog('open');
    SaveSearch(); //don't think this is correct because it hits this line before login is complete
  }
});
于 2012-06-08T09:31:58.673 に答える
1

クローズ コールバック関数をモーダルに追加してみてください。モーダルが閉じられ、すべてのログインが正常に完了するとすぐにコードが実行されます。コード内のコメントを表示する

$(document).ready(function () { 
    $('a#saveSearch').live('click', function (event) { 
        $.get('@Url.Action("IsLoggedIn", "Account", null)', function (response) { 
            if (response == "True") 
                loggedIn = true; 
            else 
                loggedIn = false; 
        }); 
        if (loggedIn){ 
            SaveSearch(); 
        } 
        else{  
            //in this dialog, add a close handler,then add the SaveSearch(); function in that handler
            $('#dialog').dialog('open'); 

           } 
    });
于 2012-06-08T09:36:01.963 に答える