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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6404074/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 20:48:00  来源:igfitidea点击:

Run jQuery function on PostBack (ASP.NET)

jqueryasp.netpostback

提问by Dan

I have a form which is initially hidden via jQuery, and on click of a button two radio buttons appear (also hidden initially via jQuery). On click of one radio button, the user is redirected to another page (this works fine). On click of the other radio button "the form" is made visible again, via jQuery.

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

My problem comes when a field within 'the form' is validated server-side on submit, and the page is reloaded with the validation error message visible BUT the 'form' is now hidden (as per the initial jQuery below).

当“表单”中的字段在提交时在服务器端进行验证时,我的问题就出现了,并且页面重新加载并显示验证错误消息,但“表单”现在隐藏了(按照下面的初始 jQuery)。

How can I make the form visible on postback? (I have already tried ASP Panels & AJAX UpdatePanel to no avail.)

如何使表单在​​回发时可见?(我已经尝试过 ASP Panels & AJAX UpdatePanel 无济于事。)

** This is my jQuery: **

** 这是我的 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");
      }); 

Newly Added JavaScript implementation (as per Moar's suggestion) this is still not working, any ideas? :( :

新添加的 JavaScript 实现(根据 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#:

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

回答by P6345uk

This may sound rather annoying but to accomplish this

这听起来可能很烦人,但要实现这一点

I would use hidden values Say when you open the form update the hidden value to 1,

我会使用隐藏值 说当你打开表单时,将隐藏值更新为 1,

Page HTML

页面 HTML

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

C# codebehind

C# 代码隐藏

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

Javascript Function

Javascript 函数

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

Second option would be to avoid doing a serverside post back and use JQuery to do an entirely client based one therefore eliminating the postback

第二种选择是避免进行服务器端回发并使用 JQuery 来执行完全基于客户端的回发,从而消除回发

回答by MoarCodePlz

I would recommend putting all of the javascript you have shown in a function. For sake of this example, lets say you place it in a function called

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

myFunction();

Then, in your code-behind, place this in one of the page events (I would recommend page_load)

然后,在你的代码隐藏中,把它放在一个页面事件中(我推荐 page_load)

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

This will inject javascript to the page that will run your function only if the page is a post back.

这会将 javascript 注入到页面中,该页面仅在页面是回发时才会运行您的功能。

回答by Brian MacKay

When a postback occurs, any changes you made to the page via jQuery will be lost.

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

I'm not sure if you're using UpdatePanels, but there are additional problems in that case. Read this: jQuery $(document).ready and UpdatePanels?

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

If you're not using UpdatePanels, I would say you just need to make the form visible on the server-side during the postback (form.visible).

如果您不使用 UpdatePanels,我会说您只需要在回发期间使表单在服务器端可见 (form.visible)。

The asp.net webforms model is really useful, however it was definitely not desigend with jQuery in mind. In my opinion, if you want to get the most of the web 2.0 type of approach, you might want to think about getting away from using postbacks/updatepanels and doing more with web services and so on... Personally, this is definitely pulling me inexorably towards MVC.

asp.net webforms 模型非常有用,但是它绝对不是在设计时考虑到 jQuery。在我看来,如果您想充分利用 Web 2.0 类型的方法,您可能需要考虑放弃使用回发/更新面板,并使用 Web 服务等做更多的事情......就个人而言,这绝对是拉扯我无情地走向MVC。