在 asp.net Ajax 调用后运行 javascript 以重新绑定 datepicker

Posted 2023-05-08

【中文标题】在 asp.net Ajax 调用后运行 javascript 以重新绑定 datepicker

【英文标题】：Run javascript to re-bind datepicker after an asp.net Ajax call

【发布时间】：2017-10-14 16:54:01

【问题描述】：

我有一些 Ajax 写入我的代码隐藏中的一些控件，asp:UpdatePanel 内的这些控件之一是一个文本框，其中绑定了一个 jQuery datepicker 小部件。当触发 Ajax 调用并刷新面板时，绑定的 datepicker 小部件会因为刷新而丢失，需要重新绑定。我的问题是：在刷新asp:UpdatePanel 之后，有什么方法可以让我再次运行一些javascript？

更新：

<script type="text/javascript" language="javascript">
    //Here I'm initially binding the datepicker to the txtFirstIllDate control, works great
    $(document).ready(function () 
        $('#<%= txtFirstIllDate.ClientID %>').datepicker((
            startDate: "01/01/1990",
            showOn: "both",
            buttonImage: "Images/calendar_2.png",
            buttonImageOnly: true,
            buttonText: "Select first ill date"
        ));
    );
</script>

<asp:ScriptManager ID="ScriptManager1" runat="server" />
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
                <ContentTemplate>
                        <asp:Label ID="lblStateID" runat="server" Text="State ID:"></asp:Label><asp:TextBox ID="txtStateID" runat="server" Width="40%" CssClass="floatRight" MaxLength="50"></asp:TextBox>
                        <asp:Label ID="lblFirstIllDate" runat="server" Text="First Ill Date:"></asp:Label><asp:TextBox ID="txtFirstIllDate" runat="server" Width="40%" CssClass="floatRight"></asp:TextBox>                            
                        <asp:Button ID="btnNewReport" runat="server" OnClick="btnNewReport_Click" Text="Create NORS Report" CssClass="marginBottom10px" />
                        <div class="clearFloat">
                            <asp:Label ID="lblErrorReportName" runat="server" ForeColor="Red" Font-Bold="true" Visible="false" CssClass="blockItem"></asp:Label>
                            <asp:Label ID="lblErrorFirstIll" runat="server" ForeColor="Red" Font-Bold="true" Visible="false" CssClass="blockItem"></asp:Label>
                            <asp:Label ID="lblErrorEstimatedPrimary" runat="server" ForeColor="Red" Font-Bold="true" Visible="false" CssClass="blockItem"></asp:Label>
                            <asp:Label ID="lblErrorModeOfTransmission" runat="server" ForeColor="Red" Font-Bold="true" Visible="false" CssClass="blockItem"></asp:Label>
                        </div>                            
                </ContentTemplate>
            </asp:UpdatePanel>




// Code behind when btnNewReport is pressed
    protected void btnNewReport_Click(object sender, EventArgs e)
    
        if (IsValidEntry())
        
            //After all this code is ran and the panel is updated,
            //the txtFirstIllDate control looses its datepicker widget.
            //How do I get js to run again after the ajax panel update?
        
    

【问题讨论】：

你能用你当前的标记更新你的帖子吗？

按要求完成。

【参考方案1】：

ASP.NET UpdatePanel 实现 JavaScript XMLHttpRequest 对象来处理来自具有 AJAX 功能的服务器的响应。

当您在 ASP.NET 页面中添加 ScriptManager 和 UpdatePanel 控件时，会在内部加载来自 Microsoft 的客户端脚本库，它具有与 XMLHttpRequest 对象相关的函数。

内部存在其他函数（来自 Microsoft 的脚本库）（.axd 文件）。

通过 ScriptManager - UpdatePanel 的每个响应都在 ASP.NET 生命周期事件中进行处理。

你可以试试这样的：

function pageLoad(sender, args)  // This function name is reservaded in ASP.NET AJAX when you use a ScriptManager in the page.

  $('#<%= txtFirstIllDate.ClientID %>').datepicker((
    startDate: "01/01/1990",
    showOn: "both",
    buttonImage: "Images/calendar_2.png",
    buttonImageOnly: true,
    buttonText: "Select first ill date"
  ));

您可以在此link（Ajax 客户端生命周期事件）中找到更多信息。