无法将日期选择器绑定到详细信息视图中的编辑项目模板

Posted 2023-05-08

【中文标题】无法将日期选择器绑定到详细信息视图中的编辑项目模板

【英文标题】：unable to bind datepicker to edititemtemplate in detailsview

【发布时间】：2017-02-22 21:03:10

【问题描述】：

我的详细信息视图中有以下模板来编辑日期：

<EditItemTemplate>
                        <asp:TextBox id="EndDate" class="datefield" text='<%# Bind("EndDate")%>' runat="server"/>
                    </EditItemTemplate>

我正在使用带有以下代码的按钮切换到编辑模式：

protected void Edit_Assignment(object sender, EventArgs e) 

            if (_gvAssignments.CurrentMode != DetailsViewMode.Edit) 
                _gvAssignments.ChangeMode(DetailsViewMode.Edit);
            


        

我还准备好文档和 onclientclick 函数来调用日期选择器。

$(document).ready(function() 
            $("#tabs").tabs();
            $(".datefield").datepicker();
            $("#StartDate").datepicker();
            $("#EndDate").datepicker();
        );

        function updateDatepickFields() 
            alert("Button clicked");
            $(".datefield").datepicker();
            $("#StartDate").datepicker();
            $("#EndDate").datepicker();
        ;
        $(".datefield").on("focus",function() 
            $(".datefield").datepicker();
        );

但是无论我使用什么代码，它似乎都没有附加日期选择器。

【参考方案1】：

在浏览器中右键单击您的页面，执行检查元素，然后找到您的 EndDate 元素。您会注意到它的 ID 呈现为完全不同的东西！这是因为 ASP.Net 将重命名服务器端控件以避免身份冲突。

考虑到这一点，您可能会开始意识到这个问题 - 在 Jquery 中引用 $('#EndDate') 将不起作用，因为没有具有该 ID 的元素。

最简单的选择是将ClientIDMode="static" 属性添加到您的文本框：

<asp:Textbox runat="server" ClientIdMode="static" ID="EndDate">

这会强制元素使用给定的 ID 呈现，而不是“重写”。然后，您就可以像往常一样访问这些元素，尽情享受。

---

如果您有<asp:Repeater> 或<asp:GridView> 之类的内容，请避免使用此方法。因为元素是重复的，这将导致重复的 ID。在这种情况下，请使用ClientIdMode="Predictable"，这会将您的项目呈现为更像EndDate_0、EndDate_1 等等。

【讨论】：

第一种方法对我有用，尽管我必须将它安装到控件所在选项卡上的鼠标悬停功能（通过 document.ready() 功能不起作用，并且也没有使用 asp 按钮的 clientclick。