ASP.NET Ajax Toolkit Calendar Extender日期显示扭曲及无法选择问题求助

问题详情 #

使用ASP.NET Ajax Calendar Extender时出现两个异常：

1. 打开日历控件，日期/字符显示扭曲
2. 多次开关控件后，日期完全消失，无法进行选择
   同一机器上其他Web应用使用该控件无此问题。

问题截图 #

排查修复步骤 #

• 排查CSS冲突
  项目自定义CSS大概率覆盖了日历控件默认样式，尤其是字体、盒模型相关规则。用浏览器F12开发者工具对比正常应用和异常应用的日历控件样式，定位冲突的CSS。可以给日历容器添加样式隔离：

  .ajax__calendar_container {
    all: unset !important;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    border: 1px solid #ccc;
    padding: 2px;
  }
  

• 统一Ajax控件版本
  检查当前项目与正常应用的ASP.NET Ajax Control Toolkit版本是否一致。版本不匹配易引发渲染问题，更新到相同稳定版本，或重新安装兼容版本：

  Install-Package AjaxControlToolkit -Version [匹配的版本号]
  

• 排查JS脚本冲突
  页面中其他JS（如jQuery、自定义脚本）可能与Ajax控件脚本冲突。逐步注释非必要脚本定位冲突源，若用jQuery，执行jQuery.noConflict()避免$符号冲突。

• 清理缓存
  清除浏览器缓存（Ctrl+Shift+Del），同时删除服务器端临时ASP.NET文件（路径：C:\Windows\Microsoft.NET\Framework\[版本]\Temporary ASP.NET Files），避免旧资源干扰。

• 检查控件配置
  确认日历控件初始化代码无误，TargetControlID绑定正确，Format属性无错误配置：

  <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
  <ajaxToolkit:CalendarExtender ID="CalendarExtender1" runat="server" 
    TargetControlID="txtDate" 
    Format="yyyy-MM-dd">
  </ajaxToolkit:CalendarExtender>
  

• 验证服务器环境
  确保应用程序池的.NET版本与控件兼容，权限设置正确，ASP.NET能正常加载控件的CSS、JS资源。

内容的提问来源于stack exchange，提问作者Code