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

本文关键字：服务器控件 淡入 jQuery 何使用 | 更新日期: 2023-09-27 18:03:08

我有两个webform面板，我显示&隐藏基于点击事件在代码隐藏。这是默认状态:

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

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

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

这部分工作良好。然而，我想在pnlstep2中逐渐淡出，而不是通过改变可见性设置立即显示它。

我试过这样做:

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

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

我如何在#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);
            }
        });

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

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

使用Javascript隐藏面板: 

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

从Codebehind调用

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);
});

希望这对你有帮助!

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

我会让pnlStepTwo可见，只是隐藏它与style="display:none"。你也会想要阻止你的提交按钮，因为它所做的就是改变Visible服务器端属性。

另外，为了确保客户端javascript可以在DOM中看到正确的元素，可以这样引用它:

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

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

相关文章：