asp.net回传和javascript / jquery
[英]asp.net postback and javascript/jquery
问题描述
I just found a funny behaviour in asp.net. 
我刚刚在asp.net中发现了一个有趣的行为。
I have a form that has got a fieldset which is hidden when initially loaded and a submit button. 我有一个表单，其中有一个字段集，该字段集在初始加载时是隐藏的，并且有一个提交按钮。
What I'm expecting to do is that when a user clicks the submit button, the fieldset would appear. 我希望做的是，当用户单击“提交”按钮时，将出现该字段集。 The thing is, when I try to click the submit button, it will show the fieldset element but would dissaper immediately. 问题是，当我尝试单击“提交”按钮时，它将显示fieldset元素，但会立即失效。
Would it be possible if you could point me in the right direction as to where in my code am I doing something wrong? 如果您可以向我指出我在代码中哪里做错了什么，方向是否正确？ See my code below. 请参阅下面的代码。
Thanks a million! 太感谢了！
Cheers, Ann 干杯安
<%@ Page Language="C#" AutoEventWireup="true" Inherits="JavascriptTest._Default" %>
<!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>Test Javascript</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.js"></script>
<script type="text/C#" runat="server">
protected void Page_Load(object sender, EventArgs e)
{
}
</script>
<script type="text/javascript">
$(document).ready(function () {
var btnSubmit = '#<%= btnSubmit.ClientID %>';
$('#result').hide();
$(btnSubmit).click(function () {
$('#result').show();
return true;
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<fieldset id="result">
<legend>Search Result</legend>
<p>Cras risus. Parturient lectus! Ac quis. Enim arcu adipiscing nunc? Porta magna ultrices elit amet, turpis vel nunc, massa pulvinar sit, pulvinar amet elementum tristique diam parturient, eu in dolor, non pulvinar nisi, penatibus? Velit tincidunt? Pulvinar nec urna ac, pulvinar purus integer phasellus, ridiculus non dictumst penatibus dolor rhoncus elementum pellentesque? Adipiscing et, dapibus, amet ac porta! Magna tristique, sed porta elit mid. Et ultricies et elit mattis. Arcu! Elementum ac? Nisi turpis, vel in massa pellentesque porta lectus, egestas aenean scelerisque risus? Placerat purus cum et. Egestas sociis, adipiscing porttitor scelerisque integer? Auctor a arcu sit aliquam amet sed odio, velit turpis, risus, porttitor mid diam, ac arcu lectus auctor, facilisis tincidunt! Et, proin, turpis nunc velit? Elementum.</p>
</fieldset>
<asp:Button ID="btnSubmit" runat="server" Text="Submit" />
</div>
</form>
</body>
</html>
4 个解决方案
解决方案1
4 已采纳 2010-12-06 02:29:39
The default button behavior is kicking in here, causing the <form> to submit and your page to refresh (hiding the <fieldset> again). 默认的按钮行为在此处生效，从而导致<form>提交并刷新页面（再次隐藏<fieldset> ）。 You need to prevent that default behavior with event.preventDefault() or return false , like this: 您需要使用event.preventDefault()来防止这种默认行为，或者return false ，例如：
$(document).ready(function () {
var btnSubmit = '#<%= btnSubmit.ClientID %>';
$('#result').hide();
$(btnSubmit).click(function (e) {
$('#result').show();
e.preventDefault();
});
});
event.preventDefault() will just prevent the submission where as return false will kill the event dead in its tracks...so I really consider return false overkill here. event.preventDefault()只会阻止提交这里作为return false会杀事件在其轨道上死了......所以我真的考虑return false矫枉过正这里。 It's really better to do what you're trying to do, not more than that which can cause potential unwanted issues later (for example a .live() / .delegate() handler wouldn't work if you killed the event, etc). 最好做您想做的事情，不要多于以后会引起潜在的不必要问题的.delegate()例如，如果您杀死了该事件，那么.live() / .delegate()处理程序将无法工作，等等） 。
解决方案2
1 2010-12-06 02:30:20
You'll want to "return false;" 您将要“返回假”； instead of true to prevent the button from causing an actual postback. 而不是true，以防止按钮引起实际的回发。 i'm guessing what you want is just a client side action, so you return false. 我猜您想要的只是客户端操作，因此您返回false。
解决方案3
1 2010-12-06 02:30:26
in the button function you need to be returning false otherwise the form will get submitted 在按钮功能中，您需要返回false，否则表单将被提交
$(btnSubmit).click(function () {
$('#result').show();
return false; //changed this to return false
});
解决方案4
1 2010-12-06 02:32:27
当您单击按钮时，您正在做回发，然后再次执行$（'＃results）.hide（）...您需要在点击处理程序中执行event.preventDefault（），以防止回发。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.