ASP.NETを使用していますが、onclickとonserverclickの両方を持つリンクがあります。どちらも重要ですが、可能な限りonserverclickが実行されないようにonclickが必要です。
これが私が今遊んでいるアイテムです:
<ul class="clickables">
<asp:Repeater ID="MenuRepeater" runat="server">
<HeaderTemplate>
</HeaderTemplate>
<ItemTemplate>
<li class=" <%# ((DataRowView)Container.DataItem)["CSSClass"]%>"
style="background-color: <%# ((DataRowView)Container.DataItem)["BackgroundColour"]%>">
<a id="A1"
runat="server"
onserverclick="LinkClick"
onclick=<%# "return javascript:LinkClick('" + ((DataRowView)Container.DataItem)["Postback"] + "')" %>
customid='<%# ((DataRowView)Container.DataItem)["UniqueID"]%>'
href='<%# ((DataRowView)Container.DataItem)["PageFile"]%>'>
</a>
<%# ((DataRowView)Container.DataItem)["DisplayName"]%>
</li>
</ItemTemplate>
<FooterTemplate>
</FooterTemplate>
</asp:Repeater>
</ul>
これが私がポストバックを止めることを期待しているJSです:
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
私は何かが足りないのですか?これも可能ですか?onclickでfalseを返すことで通常のポストバックを防ぐことができますが、onserverclickを停止できますか?
更新 もう少しデバッグした後(しばらくwebdevから離れていました...)、JS関数が起動していません...
更新2
完全にレンダリングされたページソースは次のとおりです。
<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
href="iphone.css" />
<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="YkYtJBVbLo0YmPPXHO5sO8FI5kAxszDeDe/bdeHgDCummp4bGaZKj3W6ihINzdq9PFQT6uCqE2eRXLhF1OEeKh8qJgRJnXWiisrDZ2ivw6JISfxuhIFP1VKKrZET9NIJqrJKpS2namuXzQL+yDJG8WGGvDrQ7oEBMDT6seSXr3zoowlA6tB4+gdbsPJ4utvNKCrhhTImpeXTzeaYCNV3t8QzsiGA7wK51Pgqo9vFQ6LH31NRYJEJ/yfhnnUcoSG6YR8SHNp+j7cGMVMoZPpgLu4bcMNSixHjGW+yin4YN7sf4wtXqQHIGFOwbSHM0VcAxd3is4lUJVYMoBH4pqAjjgBZMuaXPHwDfmZZk3Dk8feyn2btCh0nwXUrkAiAf8n1+a3hs9VfR0JeNs6x0WVzlMxgm4JFzIkthXtJ+632NaNh4rJyvib+j/Vs+HjtRFQXaIDj1fXp2KFniReSjZANiBaepyJqozJghhYnEB8MP1ZOePmrrbLCxUl1MD5Wn2bgFKkNSK25NC1hQoXdnZbEeA==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="zxCYbgjQBAQXVsCg6EwWqRNbeqa/5PzOIgwdhVB5mEasbEk06ik+VT9njAhsM8vF0ymfwdsNmbuX2R7iMJjdpqLMAVABvva4eorpK2PdajpD+g2RzFXI5SEEG9VjwQUXf3kKgb0KnPjWGYQdgZHGDQ==" />
</div>
<div>
<div class="button">Back</div>
<div class="button-bold">+</div>
<h1>AAR</h1>
<h2 id="lblQuestion">Please wait for a question...</h2>
<ul class="clickables">
<li class=" arrow"
style="background-color: White">
<a id="MenuRepeater_A1_0" onclick="return LinkClick('True')" customid="80f03602-cb67-4d46-99ea-4200459e6a48" href="javascript:__doPostBack('MenuRepeater$ctl01$A1','')">
</a>
Question 1
</li>
<li class=" "
style="background-color: LightGray">
<a id="MenuRepeater_A1_1" onclick="return LinkClick('False')" customid="91f76613-ecaa-47df-a5d6-5a921935b1f9" href="javascript:__doPostBack('MenuRepeater$ctl02$A1','')">
</a>
Question 2
</li>
</ul>
<ul class="clickables">
</ul>
</div>
</form>
<script>
$$('.clickables').each(function(clickable) {
var list = clickable.getElements('li');
list.addEvent('click', function() {
var link = this.getElement('a');
if(this.getFirst('a')) {
window.location = link;
}
});
});
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
return true;
}
</script>
</body>
</html>
編集3
私がするときでさえ:
onclick='return LinkClick(False)'
また
onclick="return LinkClick(False)"
私はまだ得ます:
onclick="return LinkClick('True')"
編集4
現在レンダリングされているソースは次のとおりです。
<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
href="iphone.css" />
<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="ATtNaDBRU6vswFif62qens2E35fTb32GNoGWb9g2UFbg0Pli0sVNrzGeLKgFI41ojer32c0dUpY2F54DIn0L0dQgi7XFwJCum71RivEO8THI+xsj3ACip5IKj0hPTlB0mDtjRUcRAPxTUDJlxNB2ZvpP1nAR8i7b/tsSrF5sP3Xx3JOb59POn4nxVDOTm80j0OAolK09Mo0leI9EzyQWbpig8Q8FaT7eKzCoJ1Z40TNWX24ZKsxsND4ebBfakOnI8qd2lNdBcJ9FrhBCTEJDCQksXs/rhyJXkksaonPGNFdtWMpiIyQDGkT0V6Q+CPt5fFnZZp4fbKZyRVMcs6XdxwHG3qTYJJgnDbfSvnswKce7la8JVSxoWy+dufG6gxIfJK2rKw0mhfQ21y90ZtkaKZ4CeZWB4TveHRhYJVlinC7bwXwKJGXhqcHJeJ0IoinTS+ZgsbuJOo3zHCslpWThP+ib7IVpmFx+nluy31L65Zy7dVoSZeySboBq10C9e1D3Tm0K5Pvcn/ovG7NmRupa+vgrcYEWQgb6QKym1aartoVmtPm1dWZiJzwA9X7j7Wn5mus2XrE5SXqbvp0bANO1rQ==" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="vi/Uef51SWAjwpFRuN3fwE5Y2FDB84KMHL6HjRIbWSKMEsSrg2RiGbteExTKFCbKhGe16A7xsn6DzMULMalMxqrg2yi9wkWZb0w2ifgCG6mmU0fH3V6zELQeACrtHDQ+4YlxeZ8k7HfGC592ammq3g==" />
</div>
<div>
<div class="button">Back</div>
<div class="button-bold">+</div>
<h1>AAR</h1>
<h2 id="lblQuestion">Please wait for the question...</h2>
<ul class="clickables">
<li class=" arrow"
style="background-color: White">
<a id="MenuRepeater_A1_0" onclick="return LinkClick(True);" customid="b88d214b-0d1c-4986-821e-c1650ffbdbfd" href="javascript:__doPostBack('MenuRepeater$ctl01$A1','')">
</a>
Question 1
</li>
<li class=" "
style="background-color: LightGray">
<a id="MenuRepeater_A1_1" onclick="return LinkClick(False);" customid="d566775f-4bee-4069-adb0-27e8cf8057d9" href="javascript:__doPostBack('MenuRepeater$ctl02$A1','')">
</a>
Question 2
</li>
</ul>
<ul class="clickables">
</ul>
</div>
</form>
<script>
$$('.clickables').each(function(clickable) {
var list = clickable.getElements('li');
list.addEvent('click', function() {
var link = this.getElement('a');
if(this.getFirst('a')) {
window.location = link;
}
});
});
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
return true;
}
</script>
</body>
</html>
アップデート5
したがって、メソッドを終了してtrue / falseを返すだけで、ポストバックを停止する必要がありますか?これは機能しません(よりレンダリングされたソース)。
<!DOCTYPE html>
<link rel="stylesheet" type="text/css"
href="iphone.css" />
<link href="MenuStyles.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="user-scalable=no, width=device-width" />
<script type="text/javascript" src="mootools-core-1.4.5-full-nocompat-yc.js"></script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
</title></head>
<body>
<script>
function LinkClick(parameters) {
if (parameters[0] == "False") {
return false;
}
return true;
}
</script>
<form method="post" action="Main.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="PiZp7nhFhCoiWV3slT5szv5Z5GAkeDWYHj7QpAPmnwSoKxWg6Zm9HTQGkZXS2Osddx6KwS0eGu/ZMaLjgxVBm1U+Eszzf/OjmAbB78jPAeSwW8GwXRUUp984a7cPZc9cYajKHkhBVtuuALV6HSsT3oRzEPlziohjgWGiV8HFAEOd1CWTj+RAC3B/mWcmrFcexzpR1XhQgnV5LQC7GplUB9Y2E/rb8MFQHfYsRxG5GjWJ5zqe51FhwstLL/dbSklaBkRlFHyFyZNUeA74My6AHCOAWbUjZ42sVcMjaSVnM1zZsxQtSG8+UdbshaLZ9Gz5SOB0Vq4fS8J+TrUlswsSLqQ77Q+m2ouZG+jhPf7jKC59KvIYGlKHkgYVqCvhqhkIG91xg7k9M3f5KAf0yOB6yaesVxnWBCC+UQWcKRePIV9tq2eE8C+8F+rLCPJ6RXgUzpC+DvVmlQMHzmiXWLehtymb2HRX4O/2RUJxLDlVP/8=" />
</div>
<script type="text/javascript">
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
//]]>
</script>
<div class="aspNetHidden">
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="aQDXp34k4YJiEBt3URBFL0do/c8NXsEmuBtFz8JLRhtXerYXPFYRZmyXIpCef68aO7itJ4EUwQ9eXl2KkxDndTmS4149nNN8BX3AoFLDgB0b4w6cNsn3nzoZ3ENnU4vExyeHdXVJyyVwmZruhoQ7GA==" />
</div>
<div>
<div class="button">Back</div>
<div class="button-bold">+</div>
<h1>AAR</h1>
<h2 id="lblQuestion">Please wait for a question...</h2>
<ul class="clickables">
<li class=" arrow"
style="background-color: White">
<a id="MenuRepeater_A1_0" onclick="return true;" customid="b88d214b-0d1c-4986-821e-c1650ffbdbfd" href="javascript:__doPostBack('MenuRepeater$ctl01$A1','')"></a>
Question 1
</li>
<li class=" "
style="background-color: LightGray">
<a id="MenuRepeater_A1_1" onclick="return false;" customid="d566775f-4bee-4069-adb0-27e8cf8057d9" href="javascript:__doPostBack('MenuRepeater$ctl02$A1','')"></a>
Question 2
</li>
</ul>
<ul class="clickables">
</ul>
</div>
</form>
<script>
$$('.clickables').each(function (clickable) {
var list = clickable.getElements('li');
list.addEvent('click', function () {
var link = this.getElement('a');
if (this.getFirst('a')) {
window.location = link;
}
});
});
</script>
</body>
</html>