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

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

return showLoadingScreen(this.checked);

Answer 2

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

以下是设置自动回发后 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

在这种情况下请勿设置 AutoPostBack。 “AutoPostBack” 意味着每当此控件的值发生更改时都会回发到服务器...这不是您想要的。

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