带有jQueryUI的ASP.NET:服务器端事件未触发 [英] ASP.NET with jQueryUI: server side event not firing
问题描述
我有一个ASP.NET页面，该页面正在使用jQuery UI对话框.当用户单击页面中的按钮(btnGo)时，我将检查该用户是否已登录.如果未登录，我将显示jQuery UI对话框进行登录.我使用了以下代码:
I have an ASP.NET page where the page is making use of jQuery UI dialog. When a user is clicking a button (btnGo) in a page, I will check if the user is logged in or not. If not logged in, I would show the jQuery UI dialog to login. I used this code:
<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>
<!-- <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的Click事件)没有被触发.我在另一个测试页中通过在字段集之前放置一个表单标签对其进行了尝试，并且它可以正常工作.
例如:
The above code works fine somewhat. If a user is not logged in, it will show the
jQuery UI Dialog to login. But the problem is, The server side function btnLogin_Click() (Click event of ASP.NET button btnLogin) is not getting fired. I tried it in another test page by placing a form tag just before the fieldset and it worked.
Ex:
<form id="form1" runat="server">
<fieldset> then rest of the items...(text box and button)
但是我无法在第一页中执行此操作，因为如果将form标记放在字段集之前，则我的Other ASP.NET文本框和按钮将不在表单中，并且在尝试运行它时显示错误，提示txt框控件必须采用表格形式.
But I can't do this in the first page, because if I place the form tag just before the field set, my Other ASP.NET text box and button would be out of the form and when trying to run it is showing an error, telling that the txt box control has to be in the form.
我知道我们不能在此页面中使用runat="server"的多种形式.
I know we can't use multiple forms in this page with runat="server".
该问题的解决方案是什么?
Whats the solution for this problem?
javascript代码是:
The javascript code is:
<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小部件更改了按钮的行为，并且未正确提交.
Try setting UseSubmitBehavior=false on the button control. Apparently the jQuery BlockUI widget changes the button behavior and it doesn't submit correctly.
请参阅: http://encosia.com/2008/10/04/using-jquery-to-enhance-aspnet-ajax-progress-indication/
这篇关于带有jQueryUI的ASP.NET:服务器端事件未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
