私は ASP.net を使用して Web サイトを作成しています。JQuery ModalDialog (または ajax... 私は ajax についてあまり知りません) を使用して素敵なログイン ポップアップを作成したいと考えています。許可されたすべてのユーザーを含むデータベースがあり、ユーザーが正常にログインした場合はポップアップを閉じたいと思います (そうでない場合は、ポップアップをそのままにして、エラーメッセージを表示します)。問題は、私の検証がサーバー側で行われ、JQuery がクライアント側で実行されることです。
4 に答える
最も簡単な方法は、ダイアログ内から jQuery ajax 呼び出しを行い、次にこの ajax をリッスンするコード内の webmethod を作成することです。webmethod はログインの成功または失敗を返し、ダイアログ クライアント側の削除を処理します。
私はあなたのためにいくつかのサンプルコードを取得します
function fnValidateLogIn() {
$('#<%= lblLoginMessage.ClientID %>').text("");
var email = $('#<%= txtEmail.ClientID %>').val();
var pass = $('#<%= txtPass.ClientID %>').val();
if (pass == "") {
$('#<%= lblLoginMessage.ClientID %>').text("Please Enter A Password");
return false;
}
else {
$.ajax({
type: "POST",
url: "Login.aspx/LoginUser",
data: "{'email':'" + email + "', 'pass' : '" + pass + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (msg) {
var obj = $.parseJSON(msg.d);
if (obj.login == "failed") $('#<%= lblLoginMessage.ClientID %>').text("Login Failed");
if (obj.login == "success") {
location.reload(true); //you can hide popup instead of refreshing
window.location = $('.hidden_url').text(); //you can hid popup instead of redirect
}
}
});
return false;
}
}
コードビハインド:
<System.Web.Services.WebMethod(EnableSession:=True)> _
Public Shared Function LoginUser(email As String, pass As String) As String
'code to validate user
return "{ ""login "" : ""success"" }" 'example
それは VB.Net にありますが、アイデアを得ることができます
これは、ポップアップに使用している jquery プラグインによって異なります。
基本的に、ポップアップのハンドルを取得する必要があります。プラグインには close 関数が必要であり、サーバーから正常な応答を受け取った後に呼び出す必要があります。彼のプラグインのほとんどは、通常、次のようなものを持っています$("#pop_up_id").close();
サーバー側で、文字列を返す 1 つの Web メソッドを作成します
If successful login it will return 'success'
or if invalid login it willl return 'fail'
クライアント側でjQuery ajax関数を使用して、このようにメソッドへのajax呼び出しを行います
$.ajax(
url:your.asmx/webmethod
data:{username:$('#usernametextboxid').val(),password:$('#passwordtextbox').val()
type:'POST'
dataType:'json'
success:function(data){
//logic to hide popup
if(data.d=='success'){$('#modalpopupid').close()}
else if(data.d=='fail'){$('#modalpopupid').html('Invalid login')}
else{alert('some error occured.Please try again')}
}
)
スコット・セルビー、あなたのコードでは、ページを更新していますが、これは ajax の意味を殺しています。モーダル ウィンドウは、ページを更新せずにプラグインの close() 関数を呼び出すだけで閉じることができます。