【发布时间】：2011-11-04 23:41:44
【问题描述】：
我有一个下拉列表控件 ddlAffilation、一个面板 pnlForms、一个面板 Complete、一个按钮 Submit、一个按钮 Return。
我在下拉列表中有一个验证控件。
这是我的 jquery 代码
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function () {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
});
</script>
我有两个问题： 1) 使用这个 jQuery 代码，只有当我没有在下拉列表框中选择任何值时，我才能来回切换（淡出 pnlForms，点击提交时淡入完成，反之亦然）。如果我在下拉列表中选择任何值，Return 按钮将不起作用。
2) jquery 代码绕过 .net 服务器验证控制。如果没有从下拉列表中选择任何值，我需要代码不做任何事情。我试过了
var isValid = true;
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
isValid = false;
return false;
}
if (isValid == true) {
...
但它不起作用。最好的方法是什么？
谢谢，
================================================ ====================================
我无法为自己的问题添加答案，所以我在这里回复约翰：
谢谢约翰。我有这样的代码，它解决了问题 2。
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
alert('blah2');
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(800).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
但是，问题 1 仍然存在。让我澄清一下。我有几个文本框、一个下拉列表和一个提交按钮来收集用户的反馈。它们都在面板 pnlForms 中。
除下拉列表外，所有控件都可以为空。我们使用您的代码和服务器验证控件解决了这个问题。
当用户单击提交按钮时，我希望 pnlForms 淡出，一个名为 pnlComplete 的隐藏面板淡入。 pnlComplete 有一个文本说感谢反馈和一个名为 Return 的按钮，让用户可以发送另一个反馈。
当用户点击返回按钮时，这里会发生相反的情况。 pnlComplete fadeOut 和 pnlForms fadeIn。
提交按钮效果很好，但返回按钮根本不起作用。我在 Return.click( 函数中设置了一些 alert() 但它没有命中。
有什么想法吗？
这是整个页面的代码。
<%@ Page Title="" Language="C#" MasterPageFile="~/Master.master"
AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="content" runat="Server">
<asp:UpdatePanel ID="pnlForms" runat="server">
<ContentTemplate>
<fieldset>
<legend>Your Information</legend>
<ol>
<li>
<label for="ctl00_content_name">
Your Name:</label>
<asp:TextBox ID="Name" runat="server" Width="150px"></asp:TextBox>
<em class="optional">Optional </em></li>
<li>
<label for="ctl00_content_status">
Your Affiliation:*</label>
<asp:DropDownList ID="ddlAffilation" runat="server" Width="155px">
<asp:ListItem Text="--Select One--" Value="" Selected="True" />
<asp:ListItem>F</asp:ListItem>
<asp:ListItem>S</asp:ListItem>
<asp:ListItem>T</asp:ListItem>
</asp:DropDownList>
<em class="required">Required
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage=" - Please select your affiliation"
ControlToValidate="ddlAffilation" SetFocusOnError="True" ForeColor=""></asp:RequiredFieldValidator>
</em></li>
</ol>
</fieldset>
<div style="text-align: center;">
<asp:Button ID="Submit" runat="server" Text="Submit" OnClick="submit_Click" /></div>
</ContentTemplate>
</asp:UpdatePanel>
<div id="Complete" style="display: none;">
<asp:UpdatePanel ID="pnlComplete" runat="server">
<ContentTemplate>
<p>Thank you</p>
<div style="text-align: center;">
<asp:Button ID="Return" runat="server" Text="Return" /></div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</asp:Content>
<asp:Content ID="Content3" runat="server" ContentPlaceHolderID="cpClientScript">
<script type="text/javascript">
$(document).ready(function () {
$("#<%= Submit.ClientID %>").click(function (e) {
if (IsValid() == false) {
e.preventDefault();
return false;
}
else {
$("#<%= pnlForms.ClientID %>").fadeOut('slow');
$("#Complete").delay(800).fadeIn('slow');
}
});
$("#<%= Return.ClientID %>").click(function () {
$("#Complete").fadeOut('slow');
$("#<%= pnlForms.ClientID %>").delay(1000).fadeIn('slow');
});
function IsValid() {
// Add any other validation in here
if ($("#<%= ddlAffilation.ClientID %>").val() == "") {
return false;
}
return true;
}
});
</script>
</asp:Content>
【问题讨论】：
-
可以为返回按钮添加渲染输出吗？