Gridview Jquery DatePicker中的Asp.Net UpdatePanel

Posted 2023-05-08

【中文标题】Gridview Jquery DatePicker中的Asp.Net UpdatePanel

【英文标题】：Asp.Net UpdatePanel in Gridview Jquery DatePicker

【发布时间】：2011-03-21 11:24:45

【问题描述】：

<asp:UpdatePanel ID="asd" runat="server">
    <ContentTemplate>
    <asp:GridView ID="gvUpdate" runat="server">
    <Columns>
    <asp:TemplateField HeaderText="DATE">
    <ItemTemplate>
    <asp:Label ID="lblDate" runat="server" Text='<%# Eval("DATE","0:dd.MM.yyyy")%>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
    <asp:TextBox ID="txtDate" runat="server" Text='<%# Eval("DATE","0:dd.MM.yyyy") %>'></asp:TextBox>
    </EditItemTemplate>
    </asp:TemplateField>
    </Columns>
    </ContentTemplate>

我想要 jquery datepicker for "txtDate" 如何制作？

谢谢...

【参考方案1】：

最简单的方法是在你的日期文本框中放置一个类，然后使用jQuery添加日期选择器...

<EditItemTemplate>
<asp:TextBox ID="txtDate" CssClass="clDate" 
  runat="server" Text='<%# Eval("DATE","0:dd.MM.yyyy") %>'></asp:TextBox>
</EditItemTemplate>

init 的 javascript 是：$(".clDate").datepicker(); 但更新面板需要在更新后再次初始化，所以最终代码为：

<script type="text/javascript"> 
   // if you use jQuery, you can load them when dom is read.
   $(document).ready(function () 
       var prm = Sys.WebForms.PageRequestManager.getInstance();    
       prm.add_initializeRequest(InitializeRequest);
       prm.add_endRequest(EndRequest);

       // Place here the first init of the DatePicker
       $(".clDate").datepicker();
    );        

    function InitializeRequest(sender, args) 
       // make unbind to avoid memory leaks.
       $(".clDate").unbind();
    

    function EndRequest(sender, args) 
       // after update occur on UpdatePanel re-init the DatePicker
       $(".clDate").datepicker();
    
</script> 

更新：关于系统。 -> http://msdn.microsoft.com/en-us/library/bb311028.aspx

【讨论】：

@Aristos 错误：Microsoft JScript 运行时错误：'Sys' 未定义请帮助我

@oraclee 你有放置 ScriptManager 吗？ （因为你需要更新面板）

不起作用 Microsoft JScript 运行时错误：'Sys' 未定义

@oraclee 您需要放置 Sys.在 scriptManager !!! 之后，或者在页面加载时加载。请参阅此处的示例：msdn.microsoft.com/en-us/library/bb311028.aspx

这在它自己的更新面板中效果很好，但我如何让它在更新面板内的详细信息视图中工作？