带有 jQueryUI : server side event not firing 的 ASP.NET

lexus 阅读：75 2024-02-27 23:08:18 评论：0

我有一个 ASP.NET 页面，该页面正在使用 jQuery UI 对话框。当用户单击页面中的按钮( btnGo )时，我将检查用户是否已登录。如果没有登录，我会显示 jQuery UI 对话框来登录。我使用了这个代码:

<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 )没有被触发。我在另一个测试页面中通过在字段集之前放置一个表单标签来尝试它，并且它起作用了。
前任:

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

但是我不能在第一页中这样做，因为如果我将表单标记放在字段集之前，我的其他 ASP.NET 文本框和按钮将不在表单中，并且在尝试运行时显示错误，告诉txt框控件必须在表单中。

我知道我们不能在此页面中使用多个表单 runat="server" .

这个问题的解决方案是什么？

javascript代码是:

<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>

请您参考如下方法:

尝试设置 UseSubmitBehavior=false在按钮控件上。显然 jQuery BlockUI 小部件更改了按钮行为并且它没有正确提交。

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

标签:jquery

声明

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，请转载时务必注明文章作者和来源，不尊重原创的行为我们将追究责任；3.作者投稿可能会经我们编辑修改或补充。