在 PostBack (ASP.NET) 上运行 jQuery 函数

Posted 2023-02-22

【中文标题】在 PostBack (ASP.NET) 上运行 jQuery 函数

【英文标题】：Run jQuery function on PostBack (ASP.NET)

【发布时间】：2011-09-18 05:53:05

【问题描述】：

我有一个最初通过 jQuery 隐藏的表单，单击按钮时会出现两个单选按钮（最初也通过 jQuery 隐藏）。单击一个单选按钮后，用户将被重定向到另一个页面（这很好用）。单击另一个单选按钮时，“表单”通过 jQuery 再次可见。

我的问题是当“表单”中的字段在提交时在服务器端进行验证，并且页面重新加载时验证错误消息可见但“表单”现在已隐藏（根据下面的初始 jQuery）。

如何使表单在​​回发时可见？ （我已经尝试过 ASP Panels & 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");
      ); 

新添加的 javascript 实现（根据 Moar 的建议）这仍然不起作用，有什么想法吗？ :( :

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

【参考方案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 进行完全基于客户端的回发，从而消除回发

【参考方案2】：

我建议将您显示的所有 javascript 放在一个函数中。为了这个例子，假设你把它放在一个名为

的函数中

myFunction();

然后，在您的代码隐藏中，将其放在页面事件之一中（我会推荐 page_load）

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

这会将 javascript 注入页面，仅当页面是回发时才会运行您的函数。

【讨论】：

嗨摩尔。我将代码隐藏添加到 page_load 事件中，并将 JavaScript 放入您所说的函数中，但它仍然无法正常工作。见上面新增的 JavaScript

@Dan 查看您发布的代码后，我找不到名为“openForms”的函数我错过了什么吗？

是的对不起，我在尝试不同的东西之间，应该恢复，函数 openforms 只是 IsPostBack 函数的另一个名称，我有太多的东西叫做 IsPostBack 它让我感到困惑（想我有一个var，函数名称，然后在 c# 中一次调用它）。我很抱歉。我只是不确定语法以及如何告诉 JavaScript 中打开的元素。

接下来您可以执行以下两个步骤： 1) 在 Chrome 开发人员工具中打开您的页面，查看是否有任何 javascript 错误。 2) 在 Chrome 开发人员工具中打开您的页面并检查您正在注入的函数 ($(document).ready(openForms);) 是否实际上使其进入正确包含在脚本标签中的页面。如果您通过了这两项测试，请尝试调用 openForms();在开发者工具的控制台中，看看它是否符合您的要求。

【参考方案3】：

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

我不确定您是否在使用 UpdatePanel，但在这种情况下还有其他问题。阅读：jQuery $(document).ready and UpdatePanels?

如果您不使用 UpdatePanels，我想说您只需要在回发期间使表单在服务器端可见（form.visible）。

asp.net webforms 模型非常有用，但它绝对不是为 jQuery 设计的。在我看来，如果您想充分利用 web 2.0 类型的方法，您可能需要考虑摆脱使用回发/更新面板，而更多地使用 web 服务等等......就个人而言，这绝对是拉动我对 MVC 无情。