页面上的多个更新面板从文本框中删除 JavaScript Datepicker 日历答案

【问题标题】：Multiple updatepanels on page remove JavaScript Datepicker calender from textbox页面上的多个更新面板从文本框中删除 JavaScript Datepicker 日历
【发布时间】：2011-04-21 15:53:19
【问题描述】：

实际上我在页面上有多个更新面板，它们在服务器上更新不同的值，但问题是我有一个文本框，我在 Load 事件上为 datepicker 附加了 javascript 类。

但是在该日期 TextBox 之前还有其他更新面板，当我更新它们时，更新面板中带有日期控件的第一个日历图像消失了。或者它删除文本框旁边的日历。

txtDate.Attributes.Add("class", "show-week w16em dateformat-d-sl-m-sl-Y");

在使用任何更新面板之前都是这样

在我们更新任何 updatepanel 控件后，它是这样的。

但是不在任何更新面板中的日期控件都可以正常工作。

在这些更新面板中，我实际上将值保存在 DataTables 中，并将这些 DataTables 保存在 viewState .... HTML 中没有变化。

【问题讨论】：

标签： javascript asp.net ajax updatepanel datepicker

【解决方案1】：

我猜日期选择器和它的文本框都放在了更新面板中？

如果您使用 UpdatePanels 执行 ajax-postback，服务器将为页面上的所有 UpdatePanels 发回 html，并刷新其所有内容，因此您的日期选择器将消失。

如果您在 UpdatePanel 上设置 UpdateMode=Conditional，则只有导致回发的 UpdatePanel 会更新。

另一种选择是使用 ScriptManager.RegisterStartupScript 重新创建日期选择器，但这可能会重置其值（取决于它是哪个日期选择器）。

【讨论】：

好的...但是如果该更新面板也回发或在服务器上更新下次同样的 JavaScript 问题将再次出现
是的，那么每次面板更新时，您都必须使用 javascript 重新创建日期选择器，但如何做到这一点完全取决于您使用的日期选择器。我猜你在加载时运行了一些代码，尝试在 (ajax-)postback 上加载该代码。

【解决方案2】：

您是否更改了包含 TextBox 的 DIV 或 TABLE 的 INNERHTML，因为如果您要在更新 DIV 或 TABLE 后删除日历控件。

【讨论】：

no .... 在这些面板中，我实际上将值保存在 DataTables 中，而我将它们保存在 viewState .... HTML 中没有变化。
那么你必须在每个 ajax 请求之后重新绑定日历控件，就像 y34h 建议的那样。重新装订日历； Sys.Application.add_init(function() { $create(AjaxControlToolkit.CalendarBehavior, {"button":$get(""),"cssClass":"cal_Theme1","format":"MM/ dd/yyyy","id":"","popupPosition":1}, null, null, $get("")); });

【解决方案3】：

无论您使用什么方法来附加日期选择器，您必须在更新面板更新后再次调用

你可以在服务器端使用this：

// at some point of the method that updates the panel
ScriptManager.RegisterStartupScript(
    this, typeof(object), "someUniqueKey", "theScript();", true);

或者在客户端使用这个：

// <body onload='...'> or in the <head>
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
    function () { theScript() });

【讨论】：