代码之家 › 专栏 › 技术社区 › Andy_Vulhop

呈现多个日历会使HTML膨胀,使页面陷入困境

calendar html asp.net c#

Andy_Vulhop · 技术社区 · 17 年前

注意:我使用基础设施控件是因为这是继承的遗留代码,但如果这是一个更好的解决方案,我不会超过用ASP.NET控件重写。

我有一个转发器控件,它使用基础设施webdatecooser为一个记录选择一个日期。假设中继器中的每一项都代表一个客户,我选择的是激活日期或者类似的东西。它可以是过去、现在或未来的任何时间。

当您呈现这个控件20次时,它会写入所有的重HTML,以显示所有的日期(月份名称、工作日等)20次,并显著地放大HTML。这使得浏览器在任何合理的时间内都难以呈现页面,即使是20条记录(在转发器上实现分页只是为了防止浏览器在大量页面上崩溃)。对于标准的ASP.NET日历控件,这一点在较小程度上也是正确的(但仍然很重要)。

我要寻找的是一种可能让所有20个日期选择者共享1个日历的资源的方法,这样他们就不需要为显示详细日期而呈现自己的字符串和垃圾。

编辑: 我知道许多用户没有使用基础设施,但是对于标准的内置ASP:Calendar控件,它仍然是正确的。将一个放在中继器中,显示n>20次。渲染时会使浏览器陷入困境。

此外,为了澄清这一问题,如果任何人的潜在解决方案,这个代码库是基于.NET 2.0的,必须支持IE6。

5 回复 | 直到 17 年前

iZ. 17 年前

您可能会考虑的另一件事是在页面上有一个日历实例。当用户单击“激活”日历的文本框时,可以使用jquery之类的客户端JavaScript框架来显示日历并将其移动到正确的预期位置。选择日期后,将所选日期存储在正确的文本框中,然后再次隐藏日历。你必须写一些javascript,但它比下载所有额外的bloat要好!

wiglebot 17 年前

如果您要查找的是在网格中的每个日期字段上调用和显示的日期标记,则调用JavaScript日历最有效。查看jquery ui日历,只需对每个字段进行调用——请参见:jquery ui.com/demos/。

HTML——注意类是相同的,ID是不同的:

<input type="text" class="datepicker" id="d1" />
<input type="text" class="datepicker" id="d2" />

jquery然后选择css类:

$(.datepicker.each(function() {
  $(this).datepicker();
});

旧的ASP.NET解决方案用于在触发Click-Even时在服务器上声明和动态实例化控件。很多博客上都有这样的例子。或者其中的20个可以在页面加载时创建并放置在数据报或其他东西中。但是如果数据报有100个条目呢?它不能伸缩。

但是Ajax控制工具包中有一个日历,它在面板上创建一次,然后该面板显示在您告诉它的地方。这是一个日历,显示了很多次。

<asp:Panel ID="panelCal" runat="server"> Â Â Â Â Â 
  <asp:UpdatePanel ID="update" runat="server"> Â Â Â Â Â Â Â Â Â Â 
    <ContentTemplate> Â Â 
    <asp:Calendar ID="theonlyCal"runat="server"/> Â Â Â Â Â Â Â Â Â Â 
    </ContentTemplate> Â Â Â Â Â 
  </asp:UpdatePanel>
</asp:Panel>

现在假设有20行:

<asp:TextBox ID="twenty" runat="server" />

现在,每个文本框都需要一个弹出控件扩展程序。

<ajaxToolkit:PopupControlExtenderID="twentExtenders"runat="server"
TargetControlID="twenty"
PopupControlID="panelCal" 
Position="Bottom" />

ASP.NET Ajax可以使用大量的带宽。

Spencer Ruport 17 年前

我没有使用你的控制,所以我不能说这个是否适合你,但我强烈推荐: http://www.dynarch.com/projects/calendar/ 这是一个javascript日历,因此用户只会下载一次JS includes。之后,创建调用只是几行。

它不能立即与ASP.NET“拖放”兼容。我建议在用户控件中包装它。

Posthuma 17 年前

虽然它不能统一到控件的一个实例中,但您可以使用AjaxControlToolkit附带的CalendarExtender吗?我只是在我的机器上建立了一个小例子,它并没有把页面拖得那么久。

drs9222 17 年前

嗯,这个例子在 Infragistics 明确地表明,该控件是为像这样重用而构建的。当然,他们不使用中继器,但最终都是一样的。我将研究UltraGridColumn如何与WebDateCooser一起显示下拉列表。当然,这对更普遍的问题没有帮助。为此,我会像其他人所说的那样做,创建一个控件,并使用JavaScript在需要时在需要的地方显示它。
如果你真的不想自己写任何javascript,你可以利用工具包。您可以创建任何日历的实例(而不是下拉版本),并使用AjaxControlToolkit的ModalPopup、Infrasgic的WebDialogWindow或类似的东西(可能对话框越少,显示就越流畅)。

最后,所有选项都有一个共同点。它们在中继器外创建一个日历,并按需显示该日历实例。