UpdatePanel 启动脚本未执行答案

【问题标题】：UpdatePanel startup script not executingUpdatePanel 启动脚本未执行
【发布时间】：2010-12-11 16:50:52
【问题描述】：

我正在编写一个用于 SharePoint 网站的 ASP.NET Web 部件，并尝试使用 UpdatePanel 来呈现查询结果。我想使用 JQuery 插件来修改从异步回发返回的表，但是我无法让启动脚本在异步 udpate 上执行。

我找到了indicates that the UpdatePanel won't do an eval() on startup scripts; instead, you must register the startup script block with the ScriptManager 的帖子。这一切都是有道理的，直到它不起作用。 MSDN reference documentation seems to concur 与那里采取的方法。

我的控件太长，无法完整发布，但这里有一个精简的表示，我认为它涵盖了所有相关内容。如果下面的粘贴中缺少控件，请原谅我 - 我不得不删除一些部分，并且可能有一些悬垂的触手，可以这么说。下面是 webpart 的代码，与加载用户控件 (.ascx) 的 SmartPart 没有什么不同。

如您所见，我使用的是 ScriptManager.RegisterStartupScript 方法。我已经尝试过两种重载；一次用于页面，一次用于更新面板中的 ListView（重命名为“AspListView”）。在这两种情况下，启动脚本都不会在异步更新时执行，我不知道为什么。

using System;
using System.Collections;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.InteropServices;
using System.Text;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Serialization;

using Microsoft.SharePoint;
using Microsoft.SharePoint.WebControls;
using Microsoft.SharePoint.WebPartPages;

namespace MyNamespace
{
    using AspListView = System.Web.UI.WebControls.ListView;

    [Guid("601b3bdb-ed2a-4ec8-8a40-c37de8ab048d")]
    public class ListSearch : StaticTemplateWebPart
    {
        private AspListView resultsList;

        public ListSearch()
        {
        }

        protected override void CreateChildControls()
        {            
            base.CreateChildControls();

            ScriptLink.Register(Page, "jquery-1.3.2.js", false);
            ScriptLink.Register(Page, "jquery-ui-1.7.2.custom.min.js", false);
            ScriptLink.Register(Page, "jquery.timepickr.js", false);
            ScriptLink.Register(Page, "jquery.quicksearch.js", false);

            string scriptBlock =
@"
if ($('table#discrepancy-results').length)
{
    $('table#discrepancy-results tr').quicksearch({
        position: 'before',
        attached: 'table.results',
        stripeRowClass: ['odd', 'even'],
        labelText: 'Keyword Search'
    });
}";
            ScriptManager.RegisterStartupScript(Page, typeof(Page), UniqueID, scriptBlock, true);

            /* adding other controls, getting references, databinding, etc. */

        }             

        void searchButt_Click(object sender, EventArgs e)
        {           
            if (Page.IsPostBack)
            {
                var beginDT = DateTime.Parse((beginDateText.Text ?? "") + " " + (beginTimeText.Text ?? ""));
                var endDT = DateTime.Parse((endDateText.Text ?? "") + " " + (endTimeText.Text ?? ""));
                var dataList = SPContext.Current.Web.Lists["MyDataList"].Items;

                var results = SearchListItems(dataList, beginDT, endDT, keywordText.Text ?? "");
                if (results.Count > 0)
                {
                    resultsList.DataSource = results;
                    resultsList.DataBind();
                }
            }
        }
    }
}

以及被加载的用户控件：

<%@ Control Language="C#" ClassName="ListSearchControl" %>

<% if (false)
   { %>
    <script src="../../LAYOUTS/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>    
<% } %>

<script type="text/javascript">
    $(function() {
        $('id').trigger('click');
        $('#<%= BeginTime.ClientID %>').timepickr({
            handle: '#<%= BeginTimeTrigger.ClientID %>',
            convention: 12,
            trigger: 'nothing' 
        });
        $('#<%= EndTime.ClientID %>').timepickr({
            handle: '#<%= EndTimeTrigger.ClientID %>',
            convention: 12,
            trigger: 'nothing'
        });        
    });
</script>

<asp:Panel ID="ControlPanel" runat="server">
    <asp:Panel ID="Inputs" runat="server">
        <asp:Panel CssClass="DateInputWrapper" runat="server">
            <asp:Panel CssClass="BeginDateInput" runat="server">
                <asp:Label Text="Begin Date: "  runat="server" />   
                <asp:TextBox ID="BeginDate" Columns="14" runat="server"></asp:TextBox>     
                <asp:Image ID="BeginDateImg" ImageUrl="/_layouts/Images/calendar.gif" runat="server" />
                <ajax:CalendarExtender ID="BeginDateExtender" TargetControlID="BeginDate" PopupButtonID="BeginDateImg" 
                                       Format="MMMM d, yyyy" runat="server">
                </ajax:CalendarExtender>
                <asp:Label Text="Begin Time: " runat="server" />
                <asp:TextBox ID="BeginTime" Columns="6" Text="04:00 am" runat="server"></asp:TextBox>
                <asp:Image ID="BeginTimeTrigger" runat="server" ImageUrl="/_layouts/1033/Images/clock.png" />                        
            </asp:Panel>                    
            <asp:Panel CssClass="EndDateInput" runat="server">
                <asp:Label Text="End Date: " runat="server" />                        
                <asp:TextBox ID="EndDate" Columns="14" runat="server"></asp:TextBox>     
                <asp:Image ID="EndDateImg" ImageUrl="/_layouts/Images/calendar.gif" runat="server" />
                <ajax:CalendarExtender ID="EndDateExtender" TargetControlID="EndDate" PopupButtonID="EndDateImg" 
                                       Format="MMMM d, yyyy" runat="server">
                </ajax:CalendarExtender>
                <asp:Label Text="End Time: " runat="server" />
                <asp:TextBox ID="EndTime" Columns="6" Text="03:59 am" runat="server"></asp:TextBox>
                <asp:Image ID="EndTimeTrigger" runat="server" ImageUrl="/_layouts/1033/Images/clock.png" />
            </asp:Panel>   
        </asp:Panel>         
        <asp:Panel CssClass="Submit" runat="server">
            <asp:Button ID="SearchButton" Text="Search" runat="server" />
            <asp:Label CssClass="SearchStatusText" runat="server" />
        </asp:Panel>       
    </asp:Panel>
</asp:Panel>

<asp:Panel ID="ResultsPanel" runat="server">
    <asp:ListView ID="ResultsList" runat="server">
        <LayoutTemplate>            
            <table id="discrepancy-results">
                <tr class="header-row">                    
                    <th>Scheduled Date/Time</th>                   
                    <th>Code</th>     
                    <th>Description</th>               
                </tr>                
                <asp:PlaceHolder runat="server" ID="itemPlaceHolder" />
            </table>            
        </LayoutTemplate>
        <ItemTemplate>
            <tr class="result-row">                
                <td><%# Eval("ScheduledDate") %></td>                
                <td><%# Eval("Code") %></td>         
                <td><%# Eval("Description") %></td>
            </tr>
        </ItemTemplate>
    </asp:ListView>
</asp:Panel>

<asp:Panel ID="DetailsPanel" runat="server">
</asp:Panel>

【问题讨论】：

当您查看渲染页面的源代码时，那里的 javascript 是否存在？这可能会提供一些线索...
玩了一会儿之后，我让它工作了。我认为问题在于我只是以某种方式错误地使用了 quicksearch() 。我后来尝试了一个简单的 alert() 并且效果很好。

标签： asp.net javascript ajax updatepanel

【解决方案1】：

我想补充一点，除非您使用 UpdatePanel's ID 和 typeof(UpdatePanel)，否则 updatepanel 启动脚本对我们不起作用。在更新面板之外的其他地方使用启动脚本并不那么挑剔。我们的工作方式如下：

ScriptManager.RegisterStartupScript(UpdatePanelId, typeof(UpdatePanel), "myScript",
                    / *
                      * Register a startup script to run 
                      * on the client after running this method on the server
                      * /
                    @" alert('Add your function to replace this.');", true);

Darin 提出的解决方案也可以，但在我们的例子中，更新面板具有更多功能，并且需要额外的逻辑来“跟踪”正在执行的操作，因此脚本不会在更新面板的每次更新时执行，但仅在某个事件之后。这样脚本只会在这个事件上执行。

【讨论】：

在这之前我尝试了很多不同的解决方案，但都没有奏效。这个在我的用户控制范围内工作得很好

【解决方案2】：

除了使用ScriptManager.RegisterStartupScript，您还可以尝试其他方法。注册 UpdatePanel 的 end_request 事件并执行您的 jQuery 脚本：

// This could also be done in jQuery's $(document).ready
function pageLoad() {
    Sys.WebForms
       .PageRequestManager
       .getInstance()
       .add_endRequest(endRequestHandler);
}

function endRequestHandler(sender, args) {
    // Shouldn't the next test be: 
    // $('table#discrepancy-results').length > 0 ???
    // and is it necessary at all? I suppose the quicksearch plugin
    // won't apply on empty array

    if ($('table#discrepancy-results').length) {
        $('table#discrepancy-results tr').quicksearch({
            position: 'before',
            attached: 'table.results',
            stripeRowClass: ['odd', 'even'],
            labelText: 'Keyword Search'
        });
    }
}

【讨论】：

【解决方案3】：

ScriptManager.RegisterStartupScript 采用参数key，您将其设置为控件的UniqueID。此键在页面脚本执行期间需要是唯一的。所以，你应该改变这一行：

ScriptManager.RegisterStartupScript(Page, typeof(Page), UniqueID, scriptBlock, true);

与

ScriptManager.RegisterStartupScript(Page, typeof(Page), Guid.NewGuid(), scriptBlock, true);

或您喜欢的其他方式来生成唯一密钥。

【讨论】：

【解决方案4】：

在玩了一会儿之后，我开始工作了。我认为问题在于我只是以某种方式错误地使用了 quicksearch() 。我后来尝试了一个简单的 alert() 并且效果很好。感谢您的建议！

【讨论】：