回发后asp.net jquery脚本未运行

Posted 2023-05-08

【中文标题】回发后asp.net jquery脚本未运行

【英文标题】：asp.net jquery script not running after postback

【发布时间】：2015-04-15 09:18:25

【问题描述】：

我花了几个小时寻找答案，但似乎无法完成这项工作。 我知道 asp.net 中的 javascript/jquery 仅在您有更新面板的情况下才首次工作，所以当您在 gridview 上页面时我也需要它来工作。 我发现您需要在更新面板中放置一些代码以在每次回发时刷新 javascript。 所以这是我尝试过的代码，它不起作用（给出'BindEvents not defined'错误）

这是不起作用的代码（短）：

 <asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">
        <ContentTemplate>

            <script type="text/javascript">
                Sys.Application.add_load(BindEvents); ' reload jquery again after postback 

            </script> 

             <div id="div_GRIDVIEW" class="div_Gridview" clientidmode="Static"  runat="server">
<asp:GridView ID="GridView1">
...grid data
</asp:GridView>
 </div>
some more code....

             <script type="text/javascript">
                 function BindEvents() 

                     $("table.STD_GridView tr").mouseover(function (event) 

                         var color = $(this).css("background-color");
                         $(this).css("background", "#f6f6f6");
                         $(this).bind("mouseout", function () 
                             $(this).css("background", color);
                         )
                     
                 )
                 
           </script>
</body>
</html>

但是，如果您在更新面板中添加脚本 区域如下，它完美地工作。问题是我不想将 javascript/jquery 代码放在更新面板中，而是放在底部，因为我有很多 javascript/jquery 代码（这里只是一个示例）

任何指导将不胜感激

<asp:UpdatePanel runat="server" ID="updatePanel1" UpdateMode="Conditional">
<ContentTemplate>

    <script type="text/javascript">
        Sys.Application.add_load(BindEvents); ' triggers jquery again after postback of gridview'

        function BindEvents() 

            $("table.STD_GridView tr").mouseover(function (event) 

                var color = $(this).css("background-color");
                $(this).css("background", "#f6f6f6");
                $(this).bind("mouseout", function () 
                    $(this).css("background", color);
                )
            
        )
        


    </script> 

     <div id="div_GRIDVIEW" class="div_Gridview" clientidmode="Static"  runat="server">

【参考方案1】：

我最近遇到了这个问题，当我的引导选项卡和其他项目在添加更新面板后不再工作时。项目必须重新初始化。

我用两个项目解决了这个问题。首先在回发时重新加载所有脚本。第二次重新初始化任何 jQuery 功能。

A) 在每次回发时重新加载所有脚本。我使用客户类来加载 CSS 和 JavaScript 与捆绑配置...这是在母版页的 page_load 中，每次都会触发。

 ClientScripts.AddClientScripts(Page);

B) 客户端脚本加载

public static class ClientScripts
    
        public static void AddClientScripts(Page page)
        
            //Making it Month instead to limit downloads
            string ID = DateTime.Now.Month.ToString();

            //Change this if pushing CSS changes during the day
            string VerNo = "41";

            ID = ID + VerNo;

            AddJavaScriptFile(page, "Scripts/jquery-1.11.1.min.js", ID);
            AddJavaScriptFile(page, "Scripts/bootstrap.min.js", ID);
            AddJavaScriptFile(page, "Scripts/DevExpress.js", ID);            
            AddJavaScriptFile(page, "Scripts/ValidateNumber.js", ID);            

            AddCSSFile(page, "Content/bootstrap.min.css", ID);
            AddCSSFile(page, "font-awesome/css/font-awesome.min.css", ID);         

        
        private static void AddJavaScriptFile(Page page, string path, string id)
                    
            //var Key = path.Replace("Scripts/", "");
            //Key = Key.Replace(".js", "");
            //page.ClientScript.RegisterClientScriptInclude(Key, path);

            path = page.ResolveUrl("~/" + path) + "?id=" + id;

            //Add to header
            HtmlGenericControl child = new HtmlGenericControl("script");
            child.Attributes.Add("type", "text/javascript");
            child.Attributes.Add("src", path);
            page.Header.Controls.Add(child);

            //Line break
            page.Header.Controls.Add(new LiteralControl("\r\n"));
        
        /// <summary>
        /// Add CSS File
        /// </summary>
        private static void AddCSSFile(Page page, string path, string id)
        
            path = page.ResolveUrl("~/" + path) + "?id=" + id;

            HtmlLink lnk = new HtmlLink();
            lnk.Attributes.Add("rel", "stylesheet");
            lnk.Attributes.Add("href", path);
            lnk.Attributes.Add("type", "text/css");
            page.Header.Controls.Add(lnk);

            //Line break
            page.Header.Controls.Add(new LiteralControl("\r\n"));
        
    

C) 有时您必须重新初始化 Bootstrap 等组件。在 UpdatePanel 中添加以下内容。

Sys.Application.add_load 将调用“BindEvents”JavaScript 函数来重新初始化 jQuery。

<script type="text/javascript">
       Sys.Application.add_load(BindEvents);
</script>

B) BindEvents：这就是我的绑定事件中的内容

    function BindEvents()  

    //--- START Popovers with x -----
    $('.popoverThis').popover(
        html: true,
        placement: 'right',
        content: function () 
            return $($(this).data('contentwrapper')).html();
        
    );
    $('.popoverThis').click(function (e) 
        e.stopPropagation();
    ); 
    $(document).click(function (e) 
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) 
            $('.popoverThis').popover('hide');
        
    );

    //POPOVER --- TOP ---
    $('.popoverThisTop').popover(
        html: true,
        placement: 'top',
        content: function () 
            return $($(this).data('contentwrapper')).html();
        
    );
    $('.popoverThisTop').click(function (e) 
        e.stopPropagation();
    );
    $(document).click(function (e) 
        if (($('.popover').has(e.target).length == 0) || $(e.target).is('.close')) 
            $('.popoverThisTop').popover('hide');
        
    );

    //--- END Popovers with x -----

    //Accordion
    $('#accordion').on('hidden.bs.collapse', function () 
        //do something...
    )
    $('#accordion .accordion-toggle').click(function (e) 
        var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
        $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
    );

【讨论】：

您好，感谢您的回答。不幸的是，这有点超出我对这个主题的了解，我无法理解如何在我的项目中实施。我希望有一个更简单的解决方案，但我想它不存在。再次感谢

您可以使用 ScriptManager.RegisterClientScriptBlock(UpdatePanel1, UpdatePanel1.GetType(), "jscript", jscript,false);如果您不想在线编写脚本，请在 PAGE_LOAD 中将脚本附加到更新面板。无论哪种方式，要么在每个页面加载时加载所有脚本，要么将其加载到更新面板内。