none
jquery在asp.net ajax 使用UpdatePanel提交后失效??? RRS feed

  • 问题

  • 我在使用asp.net ajax的过程中结合使用了jquery 发现,开始没有问题,但是在页面中有UpdatePanel,UpdatePanel里提交后,jquery就失效了
    为什么 大虾们?

    具体的:
    我的模板页:
    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="administrator_MasterPage" %>
    
    
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head runat="server">
    
        <title>后台管理</title>
    
    
    
        <script language="javascript" type="text/javascript" src="../JS/jquery.js"></script> 
    
     
    
        <asp:ContentPlaceHolder ID="head" runat="server">
    
        </asp:ContentPlaceHolder>
    
    </head>
    
    <body>
    
        <form id="form1" runat="server">
    
        <asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="true"
    
            EnableScriptLocalization="true">
    
        </asp:ScriptManager>
    
        <div id="jsdiv"> 
    
        <div id="header">
    
            <div class="header_top">
    
                <div class="logo">
    
                </div>
    
                </div>
    
            <div class="header_bottom clear">
    
                目前登录用户:
    
            </div>
    
        </div>
    
        <div id="content">
    
            <div id="left">
    
                <div id="leftmenutop">
    
                </div>
    
                <div id="leftmenu">
    
                    <ul>
    
                        <li><a href="#">类别管理</a>
    
                            <ul>
    
                                <li><a href="companyinfotype.aspx">公司介绍类别</a></li>
    
                                <li><a href="newstype.aspx">新闻中心类别</a></li>
    
                                <li><a href="producttype.aspx">产品中心类别</a></li>
    
                            </ul>
    
                        </li> 
    
                        <li><a href="../zh/default.aspx">返回网站首页</a></li>
    
                    </ul>
    
                </div>
    
                <div id="leftmenubottom">
    
                </div>
    
                <br />
    
                <span style="color: White; font-size: 10px;">技术支持: </span>
    
            </div>
    
            <div id="rights">
    
                <div id="right">
    
                    <asp:UpdateProgress DynamicLayout="true" ID="updateProgress1" runat="server" DisplayAfter="500">
    
                        <ProgressTemplate>
    
                            <div class="update">
    
                                正在处理请稍后……
    
                            </div>
    
                        </ProgressTemplate>
    
                    </asp:UpdateProgress>
    
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
    
                    </asp:ContentPlaceHolder>
    
                </div>
    
            </div>
    
        </div>
    
        <div id="footer">
    
            版权所有:  <span style="padding: 300px;"></span>程序开发:     </div>
    
        <div id="hintdivup">
    
            <div class="hinttop">
    
            </div>
    
            <div class="hintmiddle">
    
                <img src="../App_Themes/admin/image/hint.gif" alt="提示" /><span id="hintinfoup"></span></div>
    
            <div class="hintbottom">
    
            </div>
    
        </div>
    
        <div id="hintdivdown">
    
            <div class="hinttop">
    
            </div>
    
            <div class="hintmiddle">
    
                <img src="../App_Themes/admin/image/hint.gif" alt="提示" /><span id="hintinfodown"></span></div>
    
            <div class="hintbottom">
    
            </div>
    
        </div>
    
        </form>
    
    </body>
    
    </html>
    
    
    然后子页:

    <%@ Page Title="急聘职位列表" Language="C#" MasterPageFile="~/Admin/MasterPage.master"
    
        AutoEventWireup="true" CodeFile="ComImportPositionList.aspx.cs" Inherits="Admin_ComImportPositionList" %>
    
    
    
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    
    
    
        <script type="text/javascript">
    
            $(function() {
    
                $("#checkallbottom").click(function() {
    
                    $("#tablelist tbody :checkbox").attr("checked", $(this).attr("checked"));
    
                });
    
            });
    
        </script>
    
    
    
    </asp:Content>
    
    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    
        <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    
        </asp:ScriptManagerProxy>
    
        <div class="topdiv">
    
            <a href="#">公司查询</a> <a href="ComPositionList.aspx">职位查询</a></div>
    
        <div class="topdiv">
    
            
            <asp:TextBox ID="tbTitle" runat="server"></asp:TextBox>
    
            
            急聘从<asp:TextBox ID="tbStartTime" runat="server" Width="80px"></asp:TextBox><asp:TextBox ID="tbEndTime" runat="server" Width="80px"></asp:TextBox>
    
            <asp:DropDownList ID="ddOrderBy" runat="server">
    
                <asp:ListItem Value="0">排序倒序</asp:ListItem>
    
                <asp:ListItem Value="1">急聘更新时间倒序</asp:ListItem>
    
                <asp:ListItem Value="2">发布时间倒序</asp:ListItem>
    
            </asp:DropDownList>
    
            <asp:Button ID="btSearch" runat="server" Text="查   询" OnClick="btSearch_Click" />
    
            <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" TargetControlID="tbStartTime">
    
            </ajaxToolkit:CalendarExtender>
    
            <ajaxToolkit:CalendarExtender ID="CalendarExtender2" runat="server" TargetControlID="tbEndTime">
    
            </ajaxToolkit:CalendarExtender>
    
        </div>
    
        <tbt:top runat="server" ID="top" Titles="信息列表" />
    
        <asp:UpdatePanel ID="updatePanel1" runat="server">
    
            <ContentTemplate>
    
                <table class="t alternate" cellpadding="5" cellspacing="1" id="tablelist">
    
                    <thead>
    
                        <tr>
    
                            <td style="width: 3%;">
    
                            </td>
    
                            <td style="width: 7%;">
    
                                职位编号
    
                            </td>
    
                            <td style="width: 23%;">
    
                                职位名称
    
                            </td>
    
                            <td style="width: 20%;">
    
                                公司名称
    
                            </td>
    
                            <td style="width: 10%;">
    
                                状态/排序
    
                            </td>
    
                            <td style="width: 10%;">
    
                                急聘周期
    
                            </td>
    
                            <td style="width: 10%;">
    
                                招聘周期
    
                            </td>
    
                            <td style="width: 10%;">
    
                                职/急更新
    
                            </td>
    
                            <td style="width: 12%;">
    
                                操作
    
                            </td>
    
                        </tr>
    
                    </thead>
    
                    <tbody>
    
                        <asp:ListView ID="lvList" runat="server" OnPagePropertiesChanging="lvList_PagePropertiesChanging"
    
                            DataKeyNames="id" OnItemCommand="lvList_ItemCommand">
    
                            <LayoutTemplate>
    
                                <tr runat="server" id="itemPlaceholder">
    
                                </tr>
    
                            </LayoutTemplate>
    
                            <ItemTemplate>
    
                                <tr>
    
                                    <td>
    
                                        <asp:CheckBox ID="cbImportPos" runat="server" />
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("id") %>
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("name") %>
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("comname") %>
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("state").ToString().Replace("10", "<span style='color:black'>回收站</span>").Replace("1", "未发布").Replace("0", "发布中").Replace("2", "<span style='color:red'>暂停</span>").Replace("9", "模板")%>(<%#Eval("displayorder") %>)
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("jstarttime","{0:yyyy/MM/dd}") %><br />
    
                                        <%#Eval("jendtime","{0:yyyy/MM/dd}") %>
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("starttime","{0:yyyy/MM/dd}") %><br />
    
                                        <%#Eval("endtime","{0:yyyy/MM/dd}") %>
    
                                    </td>
    
                                    <td>
    
                                        <%#Eval("uptime","{0:yyyy-MM-dd}") %><br />
    
                                        <%#Eval("juptime","{0:yyyy-MM-dd}") %>
    
                                    </td>
    
                                    <td>
    
                                        <a href='comimportposition.aspx?posid=<%#Eval("id") %>'>修改</a>&nbsp;&nbsp;
    
                                        <asp:LinkButton ID="lbdel" CommandName="dels" CommandArgument='<%#Eval("id") %>'
    
                                            runat="server"><span onclick="javascript:return confirm('确定删除?');">删除</span></asp:LinkButton>&nbsp;&nbsp;
    
                                    </td>
    
                                </tr>
    
                            </ItemTemplate>
    
                        </asp:ListView>
    
                    </tbody>
    
                    <tfoot>
    
                        <tr>
    
                            <td colspan="9">
    
                                <label>
    
                                    <input id="checkallbottom" type="checkbox" />全选</label>
    
                                <asp:Button ID="btDelAll" runat="server" Text="删除选中" OnClientClick="javascript:return confirm('确定删除?');"
    
                                    OnClick="btDelAll_Click" />
    
                                <asp:Button ID="btEdit" runat="server" Text="修改选中" OnClientClick="javascript:return confirm('确定修改?');"
    
                                    OnClick="btEdit_Click" />
    
                            </td>
    
                        </tr>
    
                        <tr>
    
                            <td colspan="9" align="right">
    
                                <asp:DataPager ID="dpList" runat="server" PagedControlID="lvList" PageSize="2">
    
                                    <Fields>
    
                                        <asp:NextPreviousPagerField ShowFirstPageButton="True" ShowNextPageButton="False"
    
                                            ShowPreviousPageButton="False" />
    
                                        <asp:NumericPagerField />
    
                                        <asp:NextPreviousPagerField ShowLastPageButton="True" ShowPreviousPageButton="False"
    
                                            ShowNextPageButton="False" />
    
                                    </Fields>
    
                                </asp:DataPager>
    
                            </td>
    
                        </tr>
    
                    </tfoot>
    
                </table>
    
            </ContentTemplate>
    
            <Triggers>
    
                <asp:AsyncPostBackTrigger ControlID="btSearch" EventName="Click" />
    
            </Triggers>
    
        </asp:UpdatePanel>
    
        <tbb:bottom runat="server" ID="bottom" />
    
    </asp:Content>
    
     

    这样只要UpdatePanel中有操作,jquery 要执行的操作就失效! 



        <script type="text/javascript">

            $(function() {

                $("#checkallbottom").click(function() {

                    $("#tablelist tbody :checkbox").attr("checked", $(this).attr("checked"));

                });

            });

        </script>



    2009年7月23日 2:11

答案

  • 这是因为ASP.NET页面POST BACK之后,脚本绑定的事件处理方法失效而导致。我在实际过程中也遇到过这个问题。

    建议你使用最新的 jquery 1.3.2 ,这个版本增加了一个绑定事件的方法 live ,您的js代码稍作修改就可以正常运行了:

        < script type = "text/javascript" >

            $(function() {

                $("#checkallbottom").live("click", function() {

                    $("#tablelist tbody :checkbox").attr("checked", $(this).attr("checked"));

                });

            });

        </ script >
    2009年7月24日 0:28
    版主

全部回复

  • 晕,
    你的代码真长啊。
    是不是 Jquery类库和asp.net ajax 有兼容问题,这个我没试验过,
    不行的话就把Jquery还原为Javascript代码,在试验一下。
    Frank.Xu Lei--谦卑若愚,好学若饥
    专注于.NET平台下分布式应用系统开发和企业应用系统集成
    Focus on Distributed Applications Development and EAI based on .NET
    老徐的博客:http://frank_xl.cnblogs.com
    2009年7月23日 13:49
    版主
  • 这是因为ASP.NET页面POST BACK之后,脚本绑定的事件处理方法失效而导致。我在实际过程中也遇到过这个问题。

    建议你使用最新的 jquery 1.3.2 ,这个版本增加了一个绑定事件的方法 live ,您的js代码稍作修改就可以正常运行了:

        < script type = "text/javascript" >

            $(function() {

                $("#checkallbottom").live("click", function() {

                    $("#tablelist tbody :checkbox").attr("checked", $(this).attr("checked"));

                });

            });

        </ script >
    2009年7月24日 0:28
    版主