ASP.NET和jQueryUI:服务器端事件未触发

3

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

JavaScript 在哪里? - Aaron Powell
2个回答

10

但是在服务器端,我发现 ASP.NET 文本框控件中填写的值为 null。 例如:txtFirstName.Text。有任何想法吗? - Shyju
1
是的,Shyju,我也遇到了同样的问题。最终我按照vondip的回答中提供的链接进行了操作,并使用jQuery改变了对话框的显示方式:var dlg = $("#AddEditDialog").dialog({ modal: true }); dlg.parent().appendTo($("form:first")); - Cory Grimster
这解决了我在Jquery对话框和对话框内的asp:button的问题...它没有提交...花了我一段时间才到这里。 - hanzolo

2

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接