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

Question

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

<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();
        });

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

Answer 1

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

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

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

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

这会强制元素使用给定的 ID 呈现，而不是 "rewritten"。然后，您可以像往常一样访问这些元素，并尽享快乐。

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

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

unable to bind datepicker to edititemtemplate in detailsview

jquery

asp.net

datepicker

detailsview