ASP：复选框如何仅在选中时自动回发？

Question

我有一个复选框，设置如下：

<asp:CheckBox ID="myCheckbox" runat="Server" OnClick="showLoadingScreen(this.checked);" AutoPostBack="true" Text="Check me for more data!" /> 

showLoadingScreen函数如下：

function showLoadingScreen(isChecked) {         
if (isChecked)
    {
        document.getElementById('form1').style.display='none';
        document.getElementById('img_loading').style.display='block';
    }
else { return false; }
}

我添加了 else 子句，希望仅在选中复选框时才能将其回发，但无论哪种情况都会发回。

我在页面上有一个网格（在 form1 内），它在页面加载时加载了一组数据，但是为了向其中添加一些额外的数据，我添加了这个复选框（它的运行时间更长过程，所以我只想按需加载，而不是预先加载）。当它被选中时，我想显示加载 gif、回发、抓取数据并返回。如果该框未被选中，我不想做任何事情，因为在页面上留下足够多的数据是完全可以的（也就是说，预先显示的数据是选中复选框时显示的数据的子集）。

有什么办法可以让复选框自动回复选中，而不是取消选中？

编辑：使用 Dark Falcon 的建议，我将复选框修改为：

<asp:CheckBox ID="myCheckbox" runat="Server" OnClick="return showLoadingScreen(this.checked);" AutoPostBack="true" Text="Include HQ Values" /> 

而 javascript 是：

function showLoadingScreen(checked) {         
alert(checked);
if (checked)
    {
        document.getElementById('form1').style.display='none';
        document.getElementById('img_loading').style.display='block';
        document.form1.submit();  //my own addition, to get it to post back
    }
else { return false; }
}

现在，它会在选中后发回消息，但无法再取消选中该框。如您所见，我添加了一个警报以显示传入的值。当您取消选中该框（false）时，它传入了正确的值，但随后又以某种方式再次被选中。

这不是一个大问题，因为真的没有理由取消选中该框（因为正如我之前所说，选中时的数据集是未选中数据集的超集），但我仍然想知道它为什么会这样做那。有什么想法吗？

Answer 1

在这种情况下不要设置 AutoPostBack。 "AutoPostBack" 表示在此控件的值发生更改的任何时候发回服务器...这不是您想要的。

相反，使用GetPostBackEventReference(myCheckbox,"") 获取适当的回发脚本，如果选中该复选框，则从您的showLoadingScreen 方法调用此脚本。

Answer 2

尽量避免使用 _doPostback，因为它是一种 hack，您必须知道来自 Microsoft ASP.NET 的 Javascript 函数的回发控件 ID 和其他参数。要了解幕后发生的事情，您必须知道为什么会有回发以及如何防止回发发生。

以下是设置自动回发时 ASP.NET 复选框 (ASP:Checkbox) 发生的情况：

<ASP:Checkbox runat="server" id="chkCheckbox" AutoPostback="true" onclick="return isDoPostback(this.checked);" ClientIdMode="static" ... />

生成的 HTML 代码是：

<input type="checkbox" ... id="..." onclick="return isDoPostback(this.checked);_doPostback(...);" .../>

自定义的 onclick 事件被附加到复选框的 onclick 事件的开头。无论您做什么，该前置函数调用都会执行。最糟糕的是，如果您有返回值，_doPostback 将永远不会被执行。

这才是你真正想做的（我在这里混合使用了 jQuery 和原生 Javascript）：

var checkbox = $("#chkCheckbox");
...

checkbox .on("change", function(e)
{	if(this.checked)
	{
		var isConfirmedToContinue = confirm("Continue with Postback?");

		if(!isConfirmedToContinue)
		{	this.checked = false;	//Uncheck the checkbox since the user canceled out
			var onClickDelegate = this.onclick;

			if(onClickDelegate)
			{	var me = this;
				this.removeEventListener("click", onClickDelegate);	//Remove the onclick event so that auto-postback no longer happens

				setTimeout(function()
				{    //Add back the onclick delegate after 250ms    
                    me.addEventListener("click", onClickDelegate);
				}, 250);

				this.onclick = null; //Remove the current onclick event by nulling it out
			}
        }
    }
});

Answer 3

尝试使用一个JS例程来检查它是否被检查，如果它被设置为true，尝试这样做：

_doPostBack(checkElementReference.name, "");

_doPostBack 负责为通常不回发的控件向服务器执行发布。您必须传递元素的名称，该名称在服务器上恰好是服务器端复选框控件的 UniqueID 属性。

Answer 4

对于您的 onclick 处理程序，您需要执行以下操作：

return showLoadingScreen(this.checked);