在PostBack（ASP.NET）时运行jQuery函数

Question

我有一个表单，最初是通过jQuery隐藏的，当点击按钮时，两个单选按钮也会出现（初始状态下也通过jQuery隐藏）。当点击其中一个单选按钮时，用户将被重定向到另一个页面（这个功能很好用）。当点击另一个单选按钮时，“表单”将再次通过jQuery变为可见。

我的问题在于，当提交时服务器端验证“表单”中的字段，并重新加载带有验证错误消息的页面时，“表单”现在已经被隐藏了（如下面的初始jQuery所示）。

我该如何使表单在回发时可见？ （我已经尝试过ASP面板和AJAX UpdatePanel，但都无济于事。）

** 这是我的jQuery代码： **

// Reveal Radio Fields
      $(".btn-leavecomment, .txt-leavecomment").toggle(function(){   
            $("#commenttype").stop().animate({ down: "+=300" }, 3000)      
            $("#commenttype").stop().slideDown("slow");      
       }, function(){
            $("#commenttype").stop().animate({ down: "-=300" }, 1400)      
            $("#commenttype").stop().slideUp("slow");  
      });     


      // Reveal Form on-click of one radio field in particular
      $(".reveal_ccform").toggle(function(){   
            $("#ccform_container").stop().animate({ down: "+=300" }, 4000)      
            $("#ccform_container").stop().slideDown("slow:4000");      
       }, function(){
            $("#ccform_container").stop().animate({ down: "-=300" }, 4000)      
            $("#ccform_container").stop().slideUp("slow:4000");
      }); 

根据Moar的建议，新增了JavaScript实现，但仍然无法工作，有什么想法？ :(

JavaScript：

<script type="text/javascript">
        $(document).ready() {
            function isPostBack() 
            {
                if (!document.getElementById('clientSideIsPostBack'))
                {
                    return false;

                    if (document.getElementById('clientSideIsPostBack').value == 'Y' )
                    return true;
                    }

                // Reveal Comment Type
                $(".btn-leavecomment, .txt-leavecomment").toggle(function () {
                    $("#commenttype").stop().animate({ down: "+=300" }, 3000)
                    $("#commenttype").stop().slideDown("slow");
                }, function () {
                    $("#commenttype").stop().animate({ down: "-=300" }, 1400)
                    $("#commenttype").stop().slideUp("slow");
                });


                // Reveal Sign Guestbook Form
                $(".reveal_ccform").toggle(function () {
                    $("#ccform_container").stop().animate({ down: "+=300" }, 4000)
                    $("#ccform_container").stop().slideDown("slow:4000");
                }, function () {
                    $("#ccform_container").stop().animate({ down: "-=300" }, 4000)
                    $("#ccform_container").stop().slideUp("slow:4000");
                });

                // Hide 'Leave a Comment' button and 'Comment Type' div
                $('.reveal_ccform').click(function () {
                    $(".btn-leavecomment").stop().fadeOut("slow:1500"),
                    $('#commenttype').slideUp("slow:8000");
                });
            }
        }
    </script>

C#：

if (Page.IsPostBack)
        {
            Page.ClientScript.RegisterStartupScript(GetType(), "IsPostBack", script, true);

            //Second part of code will run if is postback = true
            ClientScriptManager cs = Page.ClientScript;
            Type csType = this.GetType();
            cs.RegisterClientScriptBlock(csType, "openForms",     "$(document).ready(openForms);", true);
        }  

- Dan

Answer 1

这可能听起来有些烦人，但为了实现这个目标，我会使用隐藏值。比如当你打开表单时，将隐藏值更新为1。 页面HTML

input type="hidden" id="hiddenFormOpen" value="1" runat="server"

C# 代码后台

if (IsPostBack)
    ClientScriptManager.RegisterClientScriptBlock(this.GetType, "myFunction",
        "openForm("+hiddenFormOpen+")", true);

Javascript 函数

function openForm (val)
{
    if (val ==1)
    {
        Update form visibility here
    }
}

第二个选项是避免进行服务器端的回发，使用 JQuery 进行完全基于客户端的回发，从而消除回发。

- P6345uk

Answer 2

我建议将您展示的所有JavaScript代码放入一个函数中。以本例为例，假设您将其放在名为的一个函数中。

myFunction();

然后，在您的代码后台中，将此放置在页面事件之一中（我建议使用page_load）

if (IsPostBack)
    ClientScriptManager.RegisterClientScriptBlock(this.GetType, "myFunction", "$(document).ready(myFunction);", true);

这将向页面注入JavaScript，仅在页面回发时运行您的函数。

- MoarCodePlz

---

嗨Moar。我将代码放入了page_load事件中，并如你所说，把JavaScript放入一个函数中，但它仍然不起作用。请查看上面新添加的JavaScript代码。 - Dan

@Dan在查看了你发布的代码后，我找不到一个名为"openForms"的函数。是我漏掉了什么吗？ - MoarCodePlz

是的，抱歉，我在尝试不同的事情之间，应该回退，openforms函数只是IsPostBack函数的另一个名称，我有太多被称为IsPostBack的东西，这让我感到困惑（我认为我有一个变量，函数名，然后在某个阶段一次性调用它）。我的道歉。我只是不确定如何在JavaScript中告诉元素打开的语法。 - Dan

你可以接下来执行以下两个步骤：1）在Chrome开发者工具中打开你的页面，查看是否有任何JavaScript错误。2）在Chrome开发者工具中打开你的页面，检查并确认你注入的函数（$(document).ready(openForms);）是否正确地被包含在脚本标签中。如果这两个测试都通过了，那么尝试在开发者工具的控制台中调用openForms();，并查看它是否按照你的预期执行。 - MoarCodePlz

Answer 3

当发生回传时，通过jQuery对页面所做的任何更改都将丢失。

我不确定您是否正在使用UpdatePanels，但在这种情况下还存在其他问题。阅读此内容：jQuery $(document).ready和UpdatePanels？

如果您没有使用UpdatePanels，我会建议您在回传期间在服务器端使表单可见（form.visible）。

asp.net webforms模型非常有用，但它绝对不是为了jQuery而设计的。在我看来，如果您想要充分利用Web 2.0类型的方法，您可能需要考虑摆脱使用回传/更新面板，并进行更多的Web服务等操作...就个人而言，这肯定会让我不可避免地转向MVC。

- Brian MacKay