如何使用 jQuery 淡入服务器控件？

Question

我有两个网络表单面板，我根据代码隐藏中的点击事件显示和隐藏它们。 这是默认状态：

pnlStepOne.Visible = true;
pnlStepTwo.Visible = false;

在按钮 (#btnStepOne) 单击事件上，我目前通过切换可见性值来更改面板的可见性：

protected void btnStepOne_Click(object sender, EventArgs e)
{
pnlStepOne.Visible = false;
pnlStepTwo.Visible = true;
}

这部分效果很好。但是，我想淡入 pnlStepTwo，而不是通过更改可见性设置立即显示它。

我尝试过这样做：

$("#btnStepOne").click(function (event) {
    $('#pnlStepTwo').fadeIn(3000);
});

但这似乎不起作用。我认为这是因为 pnlStepTwo 还不可见。

我如何才能淡入 #pnlStepTwo 而不是立即显示它？

编辑：

这是我在 pnlStepOne 上的验证码：

 $("#<%=btnStepOne.ClientID%>").click(function (event) {

            var fvFname = document.getElementById('fvFname');
            var fvLname = document.getElementById('fvLname');

            ValidatorValidate(fvFname);
            ValidatorValidate(fvLname);

            if (!fvFname.isvalid || !fvLname.isvalid) {
                $("#<%=pnlStepOne.ClientID%>").effect("shake");
            }

            if (fvFname.isvalid && fvLname.isvalid) {

                $('#<%=pnlStepOne.ClientID%>').hide();
                $('#<%=pnlStepTwo.ClientID%>').fadeIn(500);

            }
        });

Answer 1

控件的Visibility 属性不允许在页面中呈现。而是使用display:none 使用javascript。

使用 Javascript 隐藏面板：

<script type="text/javascript">
function ShowPanelTwo()
{
  $('#<%=pnlStepOne.ClientID%>').css("display","none");
  //$('#<%=pnlStepTwo.ClientID%>').css("display","block");
  $('#<%=pnlStepTwo.ClientID%>').fadeIn(3000);

}

</script>

从代码隐藏调用：

protected void btnStepOne_Click(object sender, EventArgs e)
{
    Page.ClientScript.RegisterStartupScript(this.GetType(), "uniquekey", "<script type='text/javascript'>ShowPanelTwo();</script>");
}

你也可以使用：

$("#<%=btnStepOne.ClientID%>").click(function (event) {
   $('#<%=btnStepTwo.ClientID%>').fadeIn(3000);
});

希望这会有所帮助！

Answer 2

C# 代码中的Visible 属性将阻止面板在 HTML 页面上呈现。所以你是对的，你的 JQuery 代码看不到它，因为它还不可见。

我会让pnlStepTwo 可见，然后用style="display:none" 隐藏它。您也需要阻止提交按钮发回，因为它所做的只是更改 Visible 服务器端属性。

另外，为了确保您的客户端 javascript 可以在 DOM 中看到正确的元素，请以这种方式引用它：

$("#<%=btnStepTwo.ClientID%>")

这将使您的应用程序在实际呈现时返回该元素的 HTML id。有时渲染引擎会返回服务器端 ID 属性的变体，因此您的客户端 ID 实际上可能类似于 ContentPlaceHolder1_btnStepTwo。