2009-05-18 5 views
3

페이지가 jQuery UI 대화 상자를 사용하는 ASP.NET 페이지가 있습니다. 사용자가 페이지에서 버튼 (btnGo)을 클릭하면 사용자가 로그인했는지 여부를 확인합니다. 로그인하지 않은 경우 jQuery UI 대화 상자에 로그인하도록 표시됩니다. jQueryUI가있는 ASP.NET : 서버 측 이벤트가 실행되지 않음

그리고 서버 측

<body> 
<form id="form1" runat="server"> 
<div> 
    <br /> 
    <asp:TextBox ID="txtModelId" runat="server" Text="12"></asp:TextBox><br /> 

    <asp:Button ID="btnGo" runat="server" Text="Go" OnClick="btnGo_Click" /> 
    <br /> 
    <asp:Label ID="lblUserMsg" runat="server" Text="Label"></asp:Label></div> 
    <div id="divContentHolder"> 
    <div class="demo"> 

    <div id="dialog" title="Login with your User Account"> 
    <p id="validateTips">Enter your EmailId & password</p> 


    <fieldset> 

    <label for="email">Email</label> 
    <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" /> 
    <label for="password">Password</label> 
    <asp:TextBox ID="txtFirstName" CssClass="text ui-widget-content ui-corner-all" runat="server" Text=""></asp:TextBox> 
    <!-- &nbsp;<asp:Button ID="btnSingIn" runat="server" OnClick="btnSingIn_Click" Text="Button" /><br />--> 
    <asp:Button ID="btnLogin" runat="server" Text="Login" OnClick="btnLogin_Click" /> 
    </fieldset> 

    </div><!--dialog--> 
    </div><!--demo--> 
    </div><!--divContentHolder--> 

</form> 
:

protected void btnGo_Click(object sender, EventArgs e) 
    { 
     CheckUserLoggedIn(); 
    } 

private void CheckUserLoggedIn() 
    { 
     if (Session["username"] != null) 
     { 
      Response.Write("Logged in user"); 
      ClientScript.RegisterHiddenField("isAuthenticated", "true"); 
     } 
     else 
     { 
      ClientScript.RegisterHiddenField("isAuthenticated", "false"); 
     } 
    } 

위의 코드는 다소 잘 작동이 코드를 사용했다. 사용자가 로그인하지 않은 경우 jQuery UI 대화 상자가 표시됩니다. 그러나 문제는 서버 쪽 기능 btnLogin_Click() (ASP.NET 단추 클릭 이벤트 btnLogin)이 해고되지 않습니다. 나는 fieldset 바로 앞에 폼 태그를 놓아서 다른 테스트 페이지에서 시도해 보았다. 예 :

<form id="form1" runat="server"> 
<fieldset> then rest of the items...(text box and button) 

하지만 난 그냥 필드 설정하기 전에 양식 태그를 배치하면, 내 다른 ASP.NET 텍스트 상자와 버튼 형태에서 일 것이기 때문에 나는 첫 번째 페이지에서이 작업을 수행 할 수 없습니다 실행하려고 할 때 txt 상자 컨트롤이 폼에 있어야한다는 오류가 표시됩니다.

나는이 페이지에서 runat="server"으로 여러 양식을 사용할 수 없음을 알고 있습니다.

이 문제의 해결책은 무엇입니까?

자바 스크립트 코드는 다음과 같습니다 단추 컨트롤에 UseSubmitBehavior=false 설정

<script type="text/javascript"> 
$(function() { 

    var name = $("#name"), 
     email = $("#email"), 
     password = $("#password"), 
     allFields = $([]).add(name).add(email).add(password), 
     tips = $("#validateTips"); 

    function updateTips(t) { 
     tips.text(t).effect("highlight",{},1500); 
    } 

    function checkLength(o,n,min,max) { 

     if (o.val().length > max || o.val().length < min) { 
      o.addClass('ui-state-error'); 
      updateTips("Length of " + n + " must be between "+min+" and "+max+"."); 
      return false; 
     } else { 
      return true; 
     } 

    } 

    function checkRegexp(o,regexp,n) { 

     if (!(regexp.test(o.val()))) { 
      o.addClass('ui-state-error'); 
      updateTips(n); 
      return false; 
     } else { 
      return true; 
     } 

    } 

    $("#dialog").dialog({ 
     bgiframe: true, 
     autoOpen: false, 
     height: 300, 
     modal: true, 
     buttons: { 
      'Create an account': function() { 
       var bValid = true; 
       allFields.removeClass('ui-state-error'); 

       bValid=true; 
       if (bValid) { 

        /*$('#users tbody').append('<tr>' + 
         '<td>' + name.val() + '</td>' + 
         '<td>' + email.val() + '</td>' + 
         '<td>' + password.val() + '</td>' + 
         '</tr>'); */ 

         alert("Check User Credentials") 
        $(this).dialog('close'); 
       } 
      }, 
      Cancel: function() { 
       $(this).dialog('close'); 
      } 
     }, 
     close: function() { 
      allFields.val('').removeClass('ui-state-error'); 
     } 
    }); 



    $('#create-user').click(function() { 
     $('#dialog').dialog('open'); 
    }) 
    .hover(
     function(){ 
      $(this).addClass("ui-state-hover"); 
     }, 
     function(){ 
      $(this).removeClass("ui-state-hover"); 
     } 
    ).mousedown(function(){ 
     $(this).addClass("ui-state-active"); 
    }) 
    .mouseup(function(){ 
      $(this).removeClass("ui-state-active"); 
    }); 

//}); 
var isAuthenticated = $("#isAuthenticated").val(); 
if (isAuthenticated && isAuthenticated == "false") 
{ 
// Display the modal dialog. 
$("#dialog").dialog("open"); 
} 
}); 
</script> 
+0

자바 스크립트의를! –

답변

10

보십시오. 분명히 jQuery BlockUI 위젯은 버튼 동작을 변경하고 제대로 제출하지 않습니다.

은 참조 : http://encosia.com/2008/10/04/using-jquery-to-enhance-aspnet-ajax-progress-indication/

+0

예이 방법이 효과적입니다. 고마워요 – Shyju

+0

하지만 서버 쪽에서 ASP.NET 텍스트 상자 컨트롤을 null로 채우는 중입니다. 예 : txtFirstName.Text 아무 생각하세요? – Shyju

+1

그래, 나는 똑같은 일이 일어났다, 수주. vondip의 대답에 대한 링크를 따라 가고 jQuery로 대화 상자를 표시하는 방법을 변경했습니다. var dlg = $ ("# AddEditDialog") dialog ({modal : true}); dlg.parent(). appendTo ($ ("form : first"))); –

관련 문제