ASP.NET UpdatePanel阻止jQuery滑块更新

ASP.NET UpdatePanel preventing jQuery slider from updating

本文关键字：更新 jQuery 阻止 NET UpdatePanel ASP      更新时间：2023-09-26

我有一个网站正在显示数据库中的数据，我很难让jQuery widgit与其他asp.net对象正确更新。

网站结构如下：

[Opt1-DDownList] [Opt2-DDownList] [DateSelectTextBox] [TimeSelectTextBox]
                   [UpdateProgressText]           [jQuery Slider to select time]
[----------------- Table of Data depending on selected options ----------------]

一个jQuery DatePicker被附加到DateSelectTextBox。顶部的四个项目通过更改表中显示的数据来触发页面更新。UpdateProgressText告诉用户在更新页面时正在加载数据。

起初，我把所有东西都放在asp:UpdatePanel中。当我尝试更改TimeSelect的最大值时，滑块的UI不会更新。即使我尝试在pageLoad()中使用新的最大值创建一个新的jQuery Slider，只要加载页面的一部分，就会调用它。

然后我试着从asp:UpdatePanel中取出除了桌子以外的所有东西。jQuery滑块开始更新，但asp:UpdateProgress停止被触发（可能是因为页面加载是由以下之一触发的：（1）下拉列表之一、（2）日期选择或（3）时间选择，而它们都不在asp:UpdatePanel中。

有没有办法确保jQuery Slider在asp:UpdatePanel中更新其UI？

使用jQuery、javascript和asp:UpdatePanel时，是否需要遵循一般指南？我一直在网上寻找，有很多关于这个主题的问题，但我找不到适合我的通用指南或解决方案。

谢谢！

编辑：下面是我的代码片段，建议使用下面的"重新绑定"修复程序，让您了解结构/内容：

<body>
    <form id="frm" runat="server">
    <asp:ScriptManager runat="server"></asp:ScriptManager>
    <asp:UpdatePanel ID="UpdateData" runat="server">
        <ContentTemplate>
           <asp:DropDownList ID="dd1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RefreshData"></asp:DropDownList>
           <asp:DropDownList ID="dd2" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RefreshData"></asp:DropDownList>      
            Day: <asp:TextBox ID="DaySelect" runat="server" AutoPostBack="true" OnTextChanged="RefreshData"></asp:TextBox>      
            Time: <asp:TextBox ID="TimeSelect" runat="server" AutoPostBack="true" OnTextChanged="RefreshData"></asp:TextBox>     
           <table width="850px">
             <tr>
                <td width="200px"></td>
                <td width="450px">
                   <asp:UpdateProgress ID="LoadingProgress" runat="server" DisplayAfter="500">
                      <ProgressTemplate>Loading...</ProgressTemplate>
                    </asp:UpdateProgress>
                </td>
                <td width="200px">
                      <div style="width: 200px;" id="sliceControl"></div>
                </td>
             </tr>
            </table>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript" id="uiscripts">
        var sliceIndex = 0;
        var sliceControl = $("#sliceControl");
        sliceControl.slider({
            min: 0,
            ticks: 1,
            slide: function (event, ui) { OnSelectedSliceChanged(ui.value); },
            create: function (event, ui) {
                sliceControl.slider("option", "max", "<%=ViewState[maxTicks]%>");
                sliceControl.slider("value", "<%=ViewState[currentInterval]%>");
                sliceIndex = sliceControl.slider("value");
            }
        });
        function InitWidgits() {
            var datePicker = $("#DaySelect");
            datePicker.datepicker({});
            var now = new Date();
            var utc = new Date(now.getUTCFullYear(), now.getUTCMonth(), now.getUTCDate(), now.getUTCHours(), now.getUTCMinutes(), now.getUTCSeconds());
            var numValidDays = 7;
            var millisecondsInADay = 24 * 60 * 60 * 1000;
            datePicker.datepicker("option", "minDate", new Date(utc.getTime() - numValidDays * millisecondsInADay));
            datePicker.datepicker("option", "maxDate", utc);
            try {
                sliceControl.slider("destroy");
            } catch (e) { }
            sliceControl.slider({
                min: 0,
                ticks: 1,
                stop: function (event, ui) { $("#TimeSelect").trigger("onchange", null); },
                slide: function (event, ui) { OnSelectedSliceChanged(ui.value); },
                create: function (event, ui) {
                    sliceControl.slider("option", "max", "<%=ViewState[maxTicks]%>");
                        sliceControl.slider("value", sliceIndex);
                    }
                });
                    $("#TimeSelect").prop("readonly", "readonly");
                    $("#DaySelect").prop("readonly", "readonly");
            }
        $(document).ready(function () {
            // bind your jQuery events here initially
            InitWidgits();
        });
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function () {
            // re-bind your jQuery events here
            InitWidgits();
        });
    </script>
    [Code for Table of Data]
   </ContentTemplate>
  </asp:UpdatePanel>
 </form>
</body>

您需要在结束请求时重新绑定jquery事件。

$(document).ready(function() {
        // bind your jQuery events here initially
    });
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function() {
        // re-bind your jQuery events here
    });

更多详细信息：-jQuery$（document）.ready和UpdatePanels？

我们有很多JQuery和更新面板。以下是我们正在做的工作，例如工具提示：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack) { ... }
    RegisterScripts(...);
}
private void RegisterScripts(...)
{
    string script = string.Empty;
    if (onWindowLoad)
    {
        script = "$(window).bind('load', function() { $('#myDiv').tooltip({...}); });";
    }
    else
    {
        script = "$(function() { $('#myDiv').tooltip({...}); });";
    }
    System.Web.UI.ScriptManager.RegisterStartupScript(Page, Page.GetType(), scriptKey, script, true);
}

通常"$（function（）…"有效（发生在解析DOM时），但有时必须使用"$（window）.bind"（发生在页面加载后）。

有关更多信息，请查看此处：http://forum.jquery.com/topic/jquery-window-bind-load-function-vs-onready

没有真正的解决方案可以让UpdatePanels和jQuery Widgit协同工作。我刚刚摆脱了所有的UpdatePanel，现在一切都正常工作了。

相关文章：