UpdatePanel 和 Javascript 问题
UpdatePanel and Javascript Issue
我有一个表单，其中包含几个字段，所有字段都显示在更新面板中。我还有一个保存按钮，它位于更新面板内。单击时我会做一些 javascript 验证以检查字段中是否有值，如果是这样，回发并保存到数据库。
javascript 调用正常，但无论验证是否成功，它都会发回服务器。如果缺少字段，它会显示错误但会立即回发。
关于更新面板和 javascript 我是否遗漏了什么？
代码：
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%-- <script src="Scripts-QTrack/DocumentValidation.js" type="text/javascript"></script>--%>
<link href="Styles-QTrack/MenuBarControl.css" rel="stylesheet" type="text/css" />
<%-- <script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Jquery Call
}
function EndRequestHandler(sender, args) {
//Jquery Call
}
</script>--%>
<script type="text/javascript">
function validate() {
// event.preventDefault();
var x = document.getElementById("<%=lblerr.ClientID %>");
var vDocCode = document.getElementById("<%=txtDocCode.ClientID %>").value;
var vDocTitle = document.getElementById("<%=txtDocTitle.ClientID %>").value;
var vDocName = document.getElementById("<%=txtDocName.ClientID %>").value;
var vRevNumber = document.getElementById('<%=txtRevNumber.ClientID %>').value;
var vMessage = document.getElementById('<%=txtMessage.ClientID %>').value;
var check;
var app = "";
if (vDocCode == "") {
check = false;
app = "Document Code can not be blank<br/>";
}
if (vDocTitle == "") {
check = false;
app += "Enter Document Title<br/>";
}
if (vDocName == "") {
check = false;
app += "Enter Document Name<br/>";
}
if (vRevNumber == "") {
check = false;
app += "Enter Revision Number<br/>";
}
if (vMessage == "") {
check = false;
app += "Enter Message<br/>";
}
else {
x.innerHTML = "data";
bool = true;
}
x.innerHTML = app;
return bool;
}
</script>
<%-- <script type="text/javascript">
function DocManValidation() {
var vDocCode;
vDocCode = document.getElementById("<%=txtDocCode.ClientID%>").value;
if (vDocCode == "") {
alert("Enter DocCode");
return false;
}
return true;
}
</script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="container">
<div class="row">
<div>
<uc1:MenuBarControl ID="MenuBarControl1" runat="server" />
</div>
</div>
<div class="row">
<div align="center">
<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" Width="900px"
ondatabound="ASPxTreeList1_DataBound"
onfocusednodechanged="ASPxTreeList1_FocusedNodeChanged"
onselectionchanged="ASPxTreeList1_SelectionChanged">
</dx:ASPxTreeList>
</div>
<div>
</div>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager >
<div align="center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div>
<dx:ASPxRoundPanel ID="ASPxRoundPanelDocument" runat="server"
HeaderText="Document" Width="900px">
<HeaderStyle HorizontalAlign="Left" />
<PanelCollection>
<dx:PanelContent runat="server" SupportsDisabledAttribute="True">
<div class="row">
</div> <div class="row">
<form class="form-inline" data-toggle="validator">
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Document Code</label>
<asp:TextBox ID="txtDocCode" runat="server" CssClass="form-control" placeholder="Code" ></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2">Document Title</label>
<asp:TextBox ID="txtDocTitle" runat="server" CssClass="form-control" placeholder="Title"></asp:TextBox>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputName2">Document Name</label>
<asp:TextBox ID="txtDocName" runat="server" CssClass="form-control" placeholder="Name"></asp:TextBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Revision Number</label>
<asp:TextBox ID="txtRevNumber" runat="server" CssClass="form-control" placeholder="RevNumber"></asp:TextBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Status</label>
<asp:DropDownList ID="ddlStatus" CssClass="form-control" runat="server" >
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">Standard</label>
<asp:DropDownList ID="ddlStandard" CssClass="form-control" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">Main Document</label>
<asp:DropDownList ID="ddlMainDoc" CssClass="form-control" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2" runat="server" id="lblReqBy">Requested By:</label>
<asp:TextBox ID="txtReqBy" runat="server" CssClass="form-control" placeholder="Requested By"></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2">Due Date:</label>
<%-- <input type="text" name="date" class="datepicker" id="dp" />--%>
<asp:TextBox ID="txtDueDate" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="exampleInputName2">Upload Doc</label>
<asp:FileUpload ID="fupDocument" runat="server" CssClass="btn btn-default" />
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<%-- <asp:Label ID="lblRemarks" runat="server" Text="Message" CssClass="exampleInputName2"></asp:Label>--%>
<label for="exampleInputName2" runat="server" id="lblRemarks">Message:</label>
<asp:TextBox ID="txtMessage" runat="server" CssClass="form-control" placeholder="Message" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputName2">Description of Change:</label>
<asp:TextBox ID="txtDescChange" runat="server" CssClass="form-control" placeholder="Desciption of Change" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="VerifyRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Verifiers Remarks:</label>
<asp:TextBox ID="txtVerifyRemarks" runat="server" CssClass="form-control" placeholder="Verifier Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="ApproverRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Approver Remarks:</label>
<asp:TextBox ID="txtApprovers" runat="server" CssClass="form-control" placeholder="Approvers Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="PublishRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Publishers Remarks:</label>
<asp:TextBox ID="txtPublisher" runat="server" CssClass="form-control" placeholder="Publishers Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
</div>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxRoundPanel>
</div>
<div>
</div>
<div align="center">
<div class="form-group">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return validate();" OnClick="btnSave_Click" CssClass="btn btn-default" />
</div>
<div class="btn-group" role="group">
<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" CssClass="btn btn-default" />
</div>
</div>
<div>
<asp:Label ID="lblerr" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
</div>
</div>
</form>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div align="center">
<asp:Literal ID="ltEmbed" runat="server"></asp:Literal>
</div>
</div>
</div>
</asp:Content>
在您的 JavaScript event handler 中，如果输入正确，变量 bool 只会被初始化。因此，如果输入不正确，函数将 return undefined 而不是 false。但是如果您在 click event handler 中 return false，按钮点击的回发只会被抑制。此外，您必须确保不会收到任何 JavaScript 错误，因为它们也可能导致回发。
因此，要解决您的问题，只需将 validate 函数的开头更改为：
function validate() {
var bool = false;
[....]
}
编辑：如果输入正确，也许您想使用变量 check 到 return，那么您需要将对 bool 的两个引用替换为 check 像这样：
function validate()
{
[...]
else {
x.innerHTML = "data";
check = true;
}
x.innerHTML = app;
return check;
}
</script>
我有一个表单，其中包含几个字段，所有字段都显示在更新面板中。我还有一个保存按钮，它位于更新面板内。单击时我会做一些 javascript 验证以检查字段中是否有值，如果是这样，回发并保存到数据库。
javascript 调用正常，但无论验证是否成功，它都会发回服务器。如果缺少字段，它会显示错误但会立即回发。
关于更新面板和 javascript 我是否遗漏了什么？
代码：
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%-- <script src="Scripts-QTrack/DocumentValidation.js" type="text/javascript"></script>--%>
<link href="Styles-QTrack/MenuBarControl.css" rel="stylesheet" type="text/css" />
<%-- <script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_beginRequest(BeginRequestHandler);
prm.add_endRequest(EndRequestHandler);
function BeginRequestHandler(sender, args) {
//Jquery Call
}
function EndRequestHandler(sender, args) {
//Jquery Call
}
</script>--%>
<script type="text/javascript">
function validate() {
// event.preventDefault();
var x = document.getElementById("<%=lblerr.ClientID %>");
var vDocCode = document.getElementById("<%=txtDocCode.ClientID %>").value;
var vDocTitle = document.getElementById("<%=txtDocTitle.ClientID %>").value;
var vDocName = document.getElementById("<%=txtDocName.ClientID %>").value;
var vRevNumber = document.getElementById('<%=txtRevNumber.ClientID %>').value;
var vMessage = document.getElementById('<%=txtMessage.ClientID %>').value;
var check;
var app = "";
if (vDocCode == "") {
check = false;
app = "Document Code can not be blank<br/>";
}
if (vDocTitle == "") {
check = false;
app += "Enter Document Title<br/>";
}
if (vDocName == "") {
check = false;
app += "Enter Document Name<br/>";
}
if (vRevNumber == "") {
check = false;
app += "Enter Revision Number<br/>";
}
if (vMessage == "") {
check = false;
app += "Enter Message<br/>";
}
else {
x.innerHTML = "data";
bool = true;
}
x.innerHTML = app;
return bool;
}
</script>
<%-- <script type="text/javascript">
function DocManValidation() {
var vDocCode;
vDocCode = document.getElementById("<%=txtDocCode.ClientID%>").value;
if (vDocCode == "") {
alert("Enter DocCode");
return false;
}
return true;
}
</script>--%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<div class="container">
<div class="row">
<div>
<uc1:MenuBarControl ID="MenuBarControl1" runat="server" />
</div>
</div>
<div class="row">
<div align="center">
<dx:ASPxTreeList ID="ASPxTreeList1" runat="server" Width="900px"
ondatabound="ASPxTreeList1_DataBound"
onfocusednodechanged="ASPxTreeList1_FocusedNodeChanged"
onselectionchanged="ASPxTreeList1_SelectionChanged">
</dx:ASPxTreeList>
</div>
<div>
</div>
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager >
<div align="center">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" >
<ContentTemplate>
<div>
<dx:ASPxRoundPanel ID="ASPxRoundPanelDocument" runat="server"
HeaderText="Document" Width="900px">
<HeaderStyle HorizontalAlign="Left" />
<PanelCollection>
<dx:PanelContent runat="server" SupportsDisabledAttribute="True">
<div class="row">
</div> <div class="row">
<form class="form-inline" data-toggle="validator">
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Document Code</label>
<asp:TextBox ID="txtDocCode" runat="server" CssClass="form-control" placeholder="Code" ></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2">Document Title</label>
<asp:TextBox ID="txtDocTitle" runat="server" CssClass="form-control" placeholder="Title"></asp:TextBox>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label for="exampleInputName2">Document Name</label>
<asp:TextBox ID="txtDocName" runat="server" CssClass="form-control" placeholder="Name"></asp:TextBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Revision Number</label>
<asp:TextBox ID="txtRevNumber" runat="server" CssClass="form-control" placeholder="RevNumber"></asp:TextBox>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label for="exampleInputName2">Status</label>
<asp:DropDownList ID="ddlStatus" CssClass="form-control" runat="server" >
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">Standard</label>
<asp:DropDownList ID="ddlStandard" CssClass="form-control" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="exampleInputName2">Main Document</label>
<asp:DropDownList ID="ddlMainDoc" CssClass="form-control" runat="server">
</asp:DropDownList>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2" runat="server" id="lblReqBy">Requested By:</label>
<asp:TextBox ID="txtReqBy" runat="server" CssClass="form-control" placeholder="Requested By"></asp:TextBox>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputName2">Due Date:</label>
<%-- <input type="text" name="date" class="datepicker" id="dp" />--%>
<asp:TextBox ID="txtDueDate" runat="server" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="exampleInputName2">Upload Doc</label>
<asp:FileUpload ID="fupDocument" runat="server" CssClass="btn btn-default" />
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<%-- <asp:Label ID="lblRemarks" runat="server" Text="Message" CssClass="exampleInputName2"></asp:Label>--%>
<label for="exampleInputName2" runat="server" id="lblRemarks">Message:</label>
<asp:TextBox ID="txtMessage" runat="server" CssClass="form-control" placeholder="Message" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12">
<div class="form-group">
<label for="exampleInputName2">Description of Change:</label>
<asp:TextBox ID="txtDescChange" runat="server" CssClass="form-control" placeholder="Desciption of Change" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="VerifyRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Verifiers Remarks:</label>
<asp:TextBox ID="txtVerifyRemarks" runat="server" CssClass="form-control" placeholder="Verifier Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="ApproverRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Approver Remarks:</label>
<asp:TextBox ID="txtApprovers" runat="server" CssClass="form-control" placeholder="Approvers Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
<div class="col-lg-12" id="PublishRemarks" runat="server">
<div class="form-group">
<label for="exampleInputName2">Publishers Remarks:</label>
<asp:TextBox ID="txtPublisher" runat="server" CssClass="form-control" placeholder="Publishers Remarks" TextMode="MultiLine" Rows="3" Columns="120"></asp:TextBox>
</div>
</div>
</div>
</dx:PanelContent>
</PanelCollection>
</dx:ASPxRoundPanel>
</div>
<div>
</div>
<div align="center">
<div class="form-group">
<div class="btn-group btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<asp:Button ID="btnSave" runat="server" Text="Save" OnClientClick="return validate();" OnClick="btnSave_Click" CssClass="btn btn-default" />
</div>
<div class="btn-group" role="group">
<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" CssClass="btn btn-default" />
</div>
</div>
<div>
<asp:Label ID="lblerr" runat="server" ForeColor="Red" Font-Bold="true"></asp:Label>
</div>
</div>
</div>
</form>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div align="center">
<asp:Literal ID="ltEmbed" runat="server"></asp:Literal>
</div>
</div>
</div>
</asp:Content>
在您的 JavaScript event handler 中，如果输入正确，变量 bool 只会被初始化。因此，如果输入不正确，函数将 return undefined 而不是 false。但是如果您在 click event handler 中 return false，按钮点击的回发只会被抑制。此外，您必须确保不会收到任何 JavaScript 错误，因为它们也可能导致回发。
因此，要解决您的问题，只需将 validate 函数的开头更改为：
function validate() {
var bool = false;
[....]
}
编辑：如果输入正确，也许您想使用变量 check 到 return，那么您需要将对 bool 的两个引用替换为 check 像这样：
function validate()
{
[...]
else {
x.innerHTML = "data";
check = true;
}
x.innerHTML = app;
return check;
}
</script>