Question

所以我有这个代码将一个datepicker添加到文本框中。它在常规文本框上工作正常，但是当我尝试将其用于我的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>

Answer 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

DataGrid EditItemTemplate中的ASP.NET JQuery Datepicker无法正常工作

1 个答案: