Asp.net使用javascript向动态gridview添加日期选择器

我正在尝试使用javascript将日期选择器附加到动态gridview的startdate列。我选择使用javascript，这样即使用户添加一行（通过单击网格底部的add按钮），datepicker也可以在新行中使用。请看下面我的代码

当前用于操作网格的contact列的javascript

<script src="javascript/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="javascript/jquery-1.3.2.min.js"></script>
 <script type="text/javascript">
        $(document).ready(function () {
           $(".ddlClass").change(function () {
              var txt = $(this).closest("tr").find(".txtClass");
              if ($(this).val() == "First") {
                 txt.css("background", "#cccccc");
                 txt.attr("disabled", "disabled");
              }
              else {
                 txt.css("background", "#ffffff");
                 txt.attr("disabled","");                                         
              }
            }); 
        });
 </script>

$（文档）.ready（函数（）{
$（“.ddlClass”）.change（函数（）{
var txt=$（this.closest（“tr”）.find（“.txtClass”）；
if（$（this.val（）=“First”）{
css（“背景”和“#cccc”）；
txt.attr（“禁用”、“禁用”）；
}
否则{
css（“背景”，“#ffffff”）；
txt.attr（“禁用”和“）；
}
}); 
});

网格视图

<div>
    <asp:gridview ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false" OnRowCreated="Gridview1_RowCreated">
        <Columns>
            <asp:BoundField DataField="RowNumber" HeaderText="No." />                
            <asp:TemplateField HeaderText="AGE">
                <ItemTemplate>
                    <asp:TextBox runat="server" ID="StartDate" />  
                </ItemTemplate>                        
            </asp:TemplateField>
            <asp:TemplateField HeaderText="CONTACT">
                <ItemTemplate>
                    <asp:DropDownList ID="dlstContact" runat="server" AppendDataBoundItems="true" CssClass="ddlClass">
                            <asp:ListItem Text="--Select--" Value="" />
                            <asp:ListItem>First</asp:ListItem>
                            <asp:ListItem>Repeat</asp:ListItem>                               
                        </asp:DropDownList> 
                </ItemTemplate>                        
            </asp:TemplateField>
            <asp:TemplateField HeaderText="ContactDate">
                <ItemTemplate>
                    <asp:TextBox runat="server" ID="ContactDate" CssClass="txtClass"></asp:TextBox>                         
                </ItemTemplate>                        
            </asp:TemplateField>
        </Columns>
    </asp:gridview>
    <br />
    <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row" OnClick="ButtonAdd_Click" />

</div>

第一
重复

按钮D_Click调用以下函数

private void AddNewRowToGrid()
    {
        int rowIndex = 0;

        if (ViewState["CurrentTable"] != null)
        {

            DataTable dtCurrentTable = (DataTable)ViewState["CurrentTable"];

            DataRow drCurrentRow = null;

            if (dtCurrentTable.Rows.Count > 0)
            {

                for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                {

                    //extract the TextBox values

                    TextBox idno = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("txtIDNO");
                    TextBox names = (TextBox)Gridview1.Rows[rowIndex].Cells[2].FindControl("txtNames");
                    DropDownList sex = (DropDownList)Gridview1.Rows[rowIndex].Cells[3].FindControl("dlstSex");
                    TextBox age = (TextBox)Gridview1.Rows[rowIndex].Cells[4].FindControl("txtAge");
                    DropDownList maritalstatus = (DropDownList)Gridview1.Rows[rowIndex].Cells[5].FindControl("dlstMaritalstatus");
                    DropDownList sector = (DropDownList)Gridview1.Rows[rowIndex].Cells[6].FindControl("dlstSector");
                    DropDownList attachment = (DropDownList)Gridview1.Rows[rowIndex].Cells[7].FindControl("dlstAttachment");
                    DropDownList contact = (DropDownList)Gridview1.Rows[rowIndex].Cells[8].FindControl("dlstContact");
                    jQueryDatePicker contactdate = (jQueryDatePicker)Gridview1.Rows[rowIndex].Cells[9].FindControl("txtContactdate");
                    DropDownList session = (DropDownList)Gridview1.Rows[rowIndex].Cells[10].FindControl("dlstSession");

                    drCurrentRow = dtCurrentTable.NewRow();

                    drCurrentRow["RowNumber"] = i + 1;

                    dtCurrentTable.Rows[i - 1]["IDNO"] = idno.Text;
                    dtCurrentTable.Rows[i - 1]["Names"] = names.Text;
                    dtCurrentTable.Rows[i - 1]["Sex"] = sex.Text;
                    dtCurrentTable.Rows[i - 1]["Age"] = age.Text;
                    dtCurrentTable.Rows[i - 1]["MaritalStatus"] = maritalstatus.Text;
                    dtCurrentTable.Rows[i - 1]["Sector"] = sector.Text;
                    dtCurrentTable.Rows[i - 1]["Attachment"] = attachment.Text;
                    dtCurrentTable.Rows[i - 1]["Contact"] = contact.Text;
                    dtCurrentTable.Rows[i - 1]["ContactDate"] = contactdate.Text;
                    dtCurrentTable.Rows[i - 1]["Session"] = session.Text;

                    rowIndex++;

                }

                dtCurrentTable.Rows.Add(drCurrentRow);
                ViewState["CurrentTable"] = dtCurrentTable;

                Gridview1.DataSource = dtCurrentTable;
                Gridview1.DataBind();

            }

        }

        else
        {

            Response.Write("ViewState is null");

        }

        //Set Previous Data on Postbacks
        SetPreviousData();

    }

private void AddNewRowToGrid（）
{
int rowIndex=0；
如果（ViewState[“CurrentTable”]！=null）
{
DataTable dtCurrentTable=（DataTable）视图状态[“CurrentTable”]；
DataRow drCurrentRow=null；
如果（dtCurrentTable.Rows.Count>0）
{
对于（int i=1；i 0）
{
对于（int i=0；iage.Attributes.Add（“onkeypress”，“var key；if（window.event）{key=event.keyCode；}else if（event.which）{key=event.which；}return（key==45 | key==13 | key==8 | key==9 | key==189 |（key>=48&&keyjQueryUI的日期选择器是客户端解决方案）。NET在codebehind中看到的是一个带有日期值的文本框控件

您的$（document）.ready函数可能需要如下内容：

$(document).ready(function () {
    $("select.ddlClass").change(function () {
        var txt = $(this).closest("tr").find(".txtClass");
        if ($(this).val() == "First") {
            txt.css("background", "#cccccc");
            txt.attr("disabled", "disabled");
        }
        else {
            txt.css("background", "#ffffff");
            txt.attr("disabled","");                                         
        }
    });

   $("input.txtClass").datepicker({
       // Add config options here
   });
});

请注意，我将您原来的选择器修改为“select.ddlClass”。任何时候您都可以向类选择器添加标记名，您应该这样做。随着站点的增长，性能的提高可能会非常显著

在BtnAdd_单击中，您将要替换以下内容：

jQueryDatePicker contactdate = (jQueryDatePicker)Gridview1.Rows[rowIndex].Cells[9].FindControl("txtContactdate");

用这个

TextBox contactdate = (TextBox)Gridview1.Rows[rowIndex].Cells[9].FindControl("txtContactdate");

我也遇到了类似的问题

<asp:GridView ID="GridView1" runat="server" Height="300px"
            AllowPaging="true" 
            ShowFooter="True"           
            AutoGenerateColumns="false"
            OnRowDeleting="GridView1_RowDeleting" 
            OnRowEditing="GridView1_RowEditing"
            OnRowUpdating="GridView1_RowUpdating"
            OnRowCancelingEdit="GridView1_RowCancelingEdit"
            OnRowCommand="GridView1_RowCommand"  
            >
        <Columns> 
        <asp:TemplateField HeaderText="Holiday"> 
            <EditItemTemplate> 
                <asp:TextBox ID="txtEditHoliday" runat="server" Text='<%# Eval("HOLIDY_CAL_NM") %>'></asp:TextBox> 
            </EditItemTemplate>
            <FooterTemplate> 
                <asp:TextBox ID="txtNewHoliday" runat="server"></asp:TextBox>
            </FooterTemplate>
            <ItemTemplate> 
                <asp:Label ID="lblHoliday" runat="server" Text='<%#Eval("HOLIDY_CAL_NM")%>'></asp:Label> 
            </ItemTemplate>
        </asp:TemplateField>                 
        <asp:TemplateField HeaderText="Date">
           <EditItemTemplate> 
                <asp:TextBox ID="txtEditDate" runat="server" Text='<%# GetDate(Eval("CAL_DT")) %>' OnLoad="DisplayDatePicker1"  ReadOnly="true"></asp:TextBox> 
           </EditItemTemplate>
           <FooterTemplate> 
                <asp:TextBox ID="txtNewDate"  runat="server"  OnLoad="DisplayDatePicker2" ReadOnly="true"></asp:TextBox>
           </FooterTemplate> 
           <ItemTemplate> 
                <asp:Label ID="lblDate" runat="server" Text='<%# GetDate(Eval("CAL_DT")) %>'></asp:Label> 
           </ItemTemplate> 
        </asp:TemplateField> 



    protected void DisplayDatePicker1(object sender, EventArgs e)
    {
        StringBuilder scriptText = new StringBuilder();
        string clientID = (sender as TextBox).ClientID;
        scriptText.Append("$(function() {");
        scriptText.Append("var DateSelector1 = $('#" + clientID + "'); ");
        scriptText.Append("DateSelector1.datepicker();");
        scriptText.Append(" });");
        this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
                       "DateScript1", scriptText.ToString(), true); 
    }


受保护的void DisplayDatePicker1（对象发送方，事件参数e）
{
StringBuilder scriptText=新建StringBuilder（）；
字符串clientID=（发送者作为文本框）；
Append（“$（函数（）{”）；
Append（“var DateSelector1=$（'#“+clientID+”）；”；
附加（“DateSelector1.datepicker（）；”；
scriptText.Append（“}”）；”；
this.Page.ClientScript.RegisterClientScriptBlock（this.GetType（），
“DateScript1”，scriptText.ToString（），true）；
}
您能在“按钮添加”中分享您在代码隐藏中使用的代码吗"？Alison，我已经更新了我的问题，将所有函数都包含在我的代码中。请注意，我编辑网格只是为了集中讨论。否则，这两个函数都有代码来处理其他未包含在网格中的列。谢谢。您面临的问题是什么？是日期选择器不工作吗？没错。日期拾取er只是没有出现。我能找到的最简单的解决方案是在这里。谢谢chprpipr。它非常有用。这是一个很好的解决方案。我如何处理“string CliendID=（发送者作为文本框）。ClientID；”这一行它说对象引用未设置为对象的实例。请帮助。太好了。我解决了这个问题，因为我需要将onLoad附加到文本框本身。现在我需要在标题部分附加对jquery的引用。显然我正在contentplaceholder中使用它。谢谢
<asp:GridView ID="GridView1" runat="server" Height="300px"
            AllowPaging="true" 
            ShowFooter="True"           
            AutoGenerateColumns="false"
            OnRowDeleting="GridView1_RowDeleting" 
            OnRowEditing="GridView1_RowEditing"
            OnRowUpdating="GridView1_RowUpdating"
            OnRowCancelingEdit="GridView1_RowCancelingEdit"
            OnRowCommand="GridView1_RowCommand"  
            >
        <Columns> 
        <asp:TemplateField HeaderText="Holiday"> 
            <EditItemTemplate> 
                <asp:TextBox ID="txtEditHoliday" runat="server" Text='<%# Eval("HOLIDY_CAL_NM") %>'></asp:TextBox> 
            </EditItemTemplate>
            <FooterTemplate> 
                <asp:TextBox ID="txtNewHoliday" runat="server"></asp:TextBox>
            </FooterTemplate>
            <ItemTemplate> 
                <asp:Label ID="lblHoliday" runat="server" Text='<%#Eval("HOLIDY_CAL_NM")%>'></asp:Label> 
            </ItemTemplate>
        </asp:TemplateField>                 
        <asp:TemplateField HeaderText="Date">
           <EditItemTemplate> 
                <asp:TextBox ID="txtEditDate" runat="server" Text='<%# GetDate(Eval("CAL_DT")) %>' OnLoad="DisplayDatePicker1"  ReadOnly="true"></asp:TextBox> 
           </EditItemTemplate>
           <FooterTemplate> 
                <asp:TextBox ID="txtNewDate"  runat="server"  OnLoad="DisplayDatePicker2" ReadOnly="true"></asp:TextBox>
           </FooterTemplate> 
           <ItemTemplate> 
                <asp:Label ID="lblDate" runat="server" Text='<%# GetDate(Eval("CAL_DT")) %>'></asp:Label> 
           </ItemTemplate> 
        </asp:TemplateField> 



    protected void DisplayDatePicker1(object sender, EventArgs e)
    {
        StringBuilder scriptText = new StringBuilder();
        string clientID = (sender as TextBox).ClientID;
        scriptText.Append("$(function() {");
        scriptText.Append("var DateSelector1 = $('#" + clientID + "'); ");
        scriptText.Append("DateSelector1.datepicker();");
        scriptText.Append(" });");
        this.Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
                       "DateScript1", scriptText.ToString(), true); 
    }