您的位置：首页 > Web前端 > JQuery

asp.net web form与jQuery Validate一起工作时解决服务器端事件不能被触发的问题

2012-11-27 17:13 609 查看

初衷

刚在弄一个asp.net web form的用户注册、登录界面（asp.net mvc的高手请不要喷 :])，涉及的两个界面都有大量的验证工作要做。既然现在jQuery那么流行，赶紧找到了jQuery Validate插件并迅速的过了一下它的基础文档，开始上手！

中间完成的代码

<%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeBehind="Register.aspx.cs" Inherits="YourNameSpace.Web.Register" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>注册</title>
</head>
<body>
<form id="form1"  runat="server">
<asp:ScriptManager ID="scm" runat="server" AjaxFrameworkMode="Disabled">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.8.2.js" />
<asp:ScriptReference Path="~/Scripts/jquery.validate.js" />
<asp:ScriptReference Path="~/Scripts/register.js" />
</Scripts>
</asp:ScriptManager>
<div id="mainContainer" style="width: 700px; margin: auto;">
<div class="error">
<span></span>
</div>
<div id="formContainer">
<fieldset class="login">
<legend class="login">注册</legend>
<table>
<tr>
<td class="label">
<label for="username" class="login">
用户名</label>
</td>
<td class="field">
<div class="div_texbox">
<asp:TextBox ID="username"  runat="server" class="username required"></asp:TextBox>
</div>
</td>
<td class="status">
</td>
</tr>
<tr>
<td class="label">
<label for="password" class="login">
密码</label>
</td>
<td class="field">
<div class="div_texbox">
<asp:TextBox TextMode="Password" ID="password" ClientIDMode="Static" runat="server" class="password required" Text="password" ></asp:TextBox>

</div>
</td>
<td class="status">
</td>
</tr>
<tr>
<td class="label">
<label for="password2" class="login">
重复密码</label>
</td>
<td class="field">
<div class="div_texbox">
<asp:TextBox TextMode="Password" ID="password2" ClientIDMode="Static" runat="server" class="password required" Text="password" ></asp:TextBox>

</div>
</td>
<td class="status">
</td>
</tr>
<tr>
<td class="label">
<label for="email" class="login">
邮箱</label>
</td>
<td class="field">
<div class="div_texbox">
<asp:TextBox ID="email" ClientIDMode="Static" runat="server" class="textbox required email"></asp:TextBox>
</div>
</td>
<td class="status">
</td>
</tr>
<tr>
<td colspan="2">
<div class="button_div">
<asp:Button ID="btnClear" OnClientClick="clearFields();return false;"
runat="server" class="buttons" Text="清空" onclick="btnClear_Click"  />
<asp:Button ID="btnReg" runat="server" class="buttons" Text="注册"
onclick="btnReg_Click" />
</div>
</td>
<td></td>
</tr>
</table>
</fieldset>
</div>
</div>
</form>
</body>
</html>

function clearFields() {
if ($("form").data('validator')) {
$("form").data('validator').resetForm();
}
}

$(document).ready(function () {
jQuery.validator.addMethod("password", function (value, element) {
var result = this.optional(element) || value.length >= 6 && /\d/.test(value) && /[a-z]/i.test(value);
if (!result) {
element.value = "";
var validator = this;
setTimeout(function () {
validator.blockFocusCleanup = true;
//element.focus();
validator.blockFocusCleanup = false;
}, 1);
}
return result;
}, "Your password must be at least 6 characters long and contain at least one number and one character.");

jQuery.validator.messages.required = "";

$("form").validate({
invalidHandler: function (e, validator) {
var errors = validator.numberOfInvalids();
if (errors) {
var message = errors == 1 ? 'You missed 1 field. It has been highlighted below' : 'You missed ' + errors + ' fields. They have been highlighted below';
$("div.error span").html(message);
$("div.error").show();
} else {
$("div.error").hide();
}
},
onkeyup: false,
/*
submitHandler: function () {
$("div.error").hide();
alert("submit! use link below to go to the other step");
},
//*/
rules: {
username: {
required: true,
minlength: 6,
maxlength: 20,
remote: "ValidateHanlders/CheckHandler.ashx"
},
password2: {
required: true,
equalTo: "#password"
},
email: {
required:true,
remote: "ValidateHanlders/CheckHandler.ashx"
}
},
messages: {
password2: {
required: " ",
equalTo: "Please enter the same password as above"
},
email: {
required: " ",
email: "Please enter a valid email address, example: you@yourdomain.com",
remote: jQuery.validator.format("{0} is already taken, please enter a different address.")
}
},
errorPlacement: function (error, element) {
error.appendTo(element.parent().parent().next());
},
debug:false
});
});

问题

花了30分钟写好了asp.net页面以及前端脚本,第一次点击注册按钮服务器端事件能响应到，但是第二次服务器端事件始终不能被触发。

在google中搜了这个问题，貌似也没有什么答案。

解决问题

还是用排除法，最后在调试服务器端代码时发现page_load方法确实是被调用了，只是控件的事件没有被触发。用浏览器开发工具查看aspx页面，发现跟__doPostback相关的客户端脚本不见了，但是这貌似是asp.net 3.5后的一个新特性，最多说明了asp.net后端认为register.aspx页面根本不需要render __doPostback脚本。不过确实不能放过这个线索，g一下试试运气吧。

参照stackoverflow.com一个帖子的答案，具体内容如下：

The problem was, as tdammers noted, that ASP.NET only renders the

__doPostback()

javascript when it thinks it's needed, and in this case it didn't think so. The solution was given to me ina
thread at forums.asp.net and was as simple as this:

Set
UseSubmitBehavior="False" on the button that should submit with

__doPostBack()

and not using the browser's default submit behavior.

我将btnReg的UseSubmitBehavior属性设置为false，打开页面->点击注册按钮多次，一切顺利！

参考文档及链接，

1.jQuery Validate文档

jQuery Validate

2.stackoverflow链接
http://stackoverflow.com/questions/3369905/forcing-asp-net-webforms-to-render-dopostback-scripts

jQuery Samples:

1.marketo（信用卡注册表单）

步骤1： marketo,

步骤2：marketo2

2.milk（用户注册表单）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航