使用jQueryUI的ASP.NET:服务器端事件未触发

Question

使用jQueryUI的ASP.NET:服务器端事件未触发

我有一个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>

Run Code Online (Sandbox Code Playgroud)

在服务器端:

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");
        }
    }

Run Code Online (Sandbox Code Playgroud)

上面的代码工作得很好.如果用户未登录,则会显示要登录的jQuery UI对话框.但问题是,服务器端功能btnLogin_Click()(ASP.NET按钮的Click事件btnLogin)没有被触发.我通过在字段集之前放置一个表单标记在另一个测试页面中尝试了它并且它有效.例如:

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

Run Code Online (Sandbox Code Playgroud)

但我不能在第一页中执行此操作,因为如果我将表单标记放在字段集之前,则我的其他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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Aar*_*ell 10

尝试设置UseSubmitBehavior=false按钮控件.显然,jQuery BlockUI小部件更改了按钮行为,并且无法正确提交.

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

归档时间：	16 年，6 月前
查看次数：	5298 次
最近记录：	16 年前