DataGrid EditItemTemplate 中的 ASP.NET JQuery Datepicker 不起作用答案

【问题标题】：ASP.NET JQuery Datepicker inside DataGrid EditItemTemplate not workingDataGrid EditItemTemplate 中的 ASP.NET JQuery Datepicker 不起作用
【发布时间】：2015-02-18 14:54:10
【问题描述】：

所以我有这段代码可以将日期选择器添加到文本框。它在常规文本框上运行良好，但是当我尝试将它用于我的 datagrid edititemtemplate 中的文本框时，它什么也没做。如果有人可以提供帮助，我将不胜感激。这是我的代码：

脚本部分是：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"
    type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css"
    rel="Stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("[id$=txtMileageEntryDate]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
        });
    });
</script>

而我的 asp.net 代码是：

<asp:GridView ID="gvLogbook" runat="server" Width="823px" AutoGenerateColumns="false"
                OnRowDataBound="gvLogbook_OnRowDataBound" OnRowCancelingEdit="gvLogbook_OnRowCancelingEdit"
                OnRowDeleting="gvLogbook_OnRowDeleting" OnRowEditing="gvLogbook_OnRowEditing"
                OnRowUpdating="gvLogbook_OnRowUpdating">
                <Columns>
                    <asp:TemplateField HeaderText="Vehicle Description">
                        <ItemTemplate>
                            <asp:Label ID="lblUserVehicleIDItem" runat="server" Text='<%# Bind("VehicleDesc") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblUserVehicleID" runat="server" Text='<%# Eval("UserVehicleID") %>'
                                Visible="false" />
                            <asp:DropDownList ID="ddlVehicleDesc" runat="server" AutoPostBack="True" />
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date">
                        <ItemTemplate>
                            <asp:Label ID="lblMileageEntryDateStatic" runat="server" Text='<%# Bind("MileageEntryDate") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtMileageEntryDate" runat="server" ReadOnly="true" Text='<%# Bind("MileageEntryDate") %>' />
                            <%-- %><asp:Calendar ID="calMileageEntryDate" runat="server" SelectedDate='<%# Bind("MileageEntryDate") %>' />--%>
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="OdometerStart" HeaderText="Odometer Start" />
                    <asp:BoundField DataField="OdometerEnd" HeaderText="Odometer End" />
                    <asp:TemplateField HeaderText="Purpose">
                        <ItemTemplate>
                            <asp:Label ID="lblMileagePurposeIDItem" runat="server" Text='<%# Bind("MileagePurposeDesc") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblMileagePurposeID" runat="server" Text='<%# Eval("MileagePurposeID") %>'
                                Visible="false" />
                            <asp:DropDownList ID="ddlMileagePurposeDesc" runat="server" AutoPostBack="True" />
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="MileageEntryComment" HeaderText="Comment" />
                    <asp:CommandField ShowInsertButton="true" ShowDeleteButton="true" ShowEditButton="true" />
                </Columns>
            </asp:GridView>

根据要求，这是我的整个 aspx 文件代码：

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeBehind="MileageLogbook.aspx.cs" Inherits="VehicleMilageLogbook.MileageLogbook" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"     type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"
    type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css"
    rel="Stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $("[id$=txtMileageEntryDate]").datepicker({
            showOn: 'button',
            buttonImageOnly: true,
            buttonImage: 'http://jqueryui.com/demos/datepicker/images/calendar.gif'
        });
    });
</script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:Panel ID="panelAccessControl" runat="server" Visible="false">
    <asp:Panel ID="panelAddVehicle" runat="server" BorderWidth="2">
        <h2>
            Mileage Logbook</h2>
        <asp:ScriptManager ID="scriptManagerVehicle" runat="server" />
        <p>
            <asp:GridView ID="gvLogbook" runat="server" Width="823px" AutoGenerateColumns="false"
                DataKeyNames="MileageEntryID"
                OnRowDataBound="gvLogbook_OnRowDataBound" OnRowCancelingEdit="gvLogbook_OnRowCancelingEdit"
                OnRowDeleting="gvLogbook_OnRowDeleting" OnRowEditing="gvLogbook_OnRowEditing"
                OnRowUpdating="gvLogbook_OnRowUpdating">
                <Columns>
                    <asp:TemplateField HeaderText="Vehicle Description">
                        <ItemTemplate>
                            <asp:Label ID="lblUserVehicleIDItem" runat="server" Text='<%# Bind("VehicleDesc") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblUserVehicleID" runat="server" Text='<%# Eval("UserVehicleID") %>'
                                Visible="false" />
                            <asp:DropDownList ID="ddlVehicleDesc" runat="server" AutoPostBack="True" />
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date">
                        <ItemTemplate>
                            <asp:Label ID="lblMileageEntryDateStatic" runat="server" Text='<%# Bind("MileageEntryDate") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:TextBox ID="txtMileageEntryDate" runat="server" Text='<%# Bind("MileageEntryDate") %>' />
                            <%-- %><asp:Calendar ID="calMileageEntryDate" runat="server" SelectedDate='<%# Bind("MileageEntryDate") %>' />--%>
                        </EditItemTemplate>
                    </asp:TemplateField>

                    <asp:BoundField  DataField="OdometerStart" HeaderText="Odometer Start" />
                    <asp:BoundField DataField="OdometerEnd" HeaderText="Odometer End" />
                    <asp:TemplateField HeaderText="Purpose">
                        <ItemTemplate>
                            <asp:Label ID="lblMileagePurposeIDItem" runat="server" Text='<%# Bind("MileagePurposeDesc") %>' />
                        </ItemTemplate>
                        <EditItemTemplate>
                            <asp:Label ID="lblMileagePurposeID" runat="server" Text='<%# Eval("MileagePurposeID") %>'
                                Visible="false" />
                            <asp:DropDownList ID="ddlMileagePurposeDesc" runat="server" AutoPostBack="True" />
                        </EditItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="MileageEntryComment" HeaderText="Comment" />
                    <asp:CommandField ShowInsertButton="true" ShowDeleteButton="true" ShowEditButton="true" />
                </Columns>
            </asp:GridView>
        </p>
    </asp:Panel>
    <asp:Label ID="lblStatus" runat="server" Text=""></asp:Label>
</asp:Panel>
<asp:Panel ID="panelAccessDenied" runat="server" Visible="true">
    <asp:Label ID="Label1" runat="server" Text="You are not authorized to view this page."></asp:Label>
</asp:Panel>

【问题讨论】：

这是你最新的 Jquery。？
恐怕我不明白为什么我被否决了。也许如果这样做的人实际上会发表评论而不是仅仅投反对票，我可以解决您认为的任何问题。否则，匿名投反对票毫无意义。
我没有投反对票，jquery是指用来运行js代码的插件
对不起，我在 Jquery / Javascript 方面没有受过教育。我怎样才能找到这个？
你需要向这里学习jquery.com

标签： jquery asp.net datagrid datepicker

【解决方案1】：

Kevin，当我在我的页面上实现您的代码时。我遇到了一些问题，您没有正确执行。

你调用的文本框ID不一样。
每个模板字段为每个文本框生成不同的ID。因此，您需要找到另一种解决方案，以便在运行时为模板字段生成ID。
该页面继承了母版页，因此为模板字段的第一行生成的ID是这样的mainContent_grdUser_txtMileageEntryDate_0。
你需要把你的代码所有的脚本包括 Gridview 的 HTML 都放在里面 <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"> </asp:Content>

当我这样实现时，它对我有用。您也可以检查第一个文本框的代码。

查看代码：-

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />

<script type="text/javascript">
    $(function () {
        $("[id$=mainContent_grdUser_txtMileageEntryDate_0]").datepicker({
            textboxImageOnly: true,
            textboxImage: 'images/calendar.png',
            changeMonth: true,
            changeYear: true,
            dateFormat: "yyyy / mm / dd",
            yearRange: "-40:+0",
            maxDate: new Date(),

        });
    });
</script>

仔细查看 Javascript 代码中的 ID，这是您的主要工作，阻止它生成日期选择器。

见Image

【讨论】：

谢谢你，伙计。能否请您告诉 ID mainContent_grdUser_txtMileageEntryDate_0 末尾的 0 是什么