Question

我有一个动态文本框和DDL创建的gridview。

在网格上的文本框中，我已经设法应用我想要的javascript并且工作正常（请记住我总共javascript noob：S）

如此错误发布我的代码只有一个文本框的简单示例，但它很好，因为我们只需要一个：）

HTML代码：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div style="height: 337px">
            <asp:GridView ID="Gridview1" runat="server" ShowFooter="true" AutoGenerateColumns="false" OnSelectedIndexChanged="Gridview1_SelectedIndexChanged">
                <Columns>
                    <asp:BoundField DataField="RowNumber" HeaderText="Row Number" />
                    <asp:TemplateField HeaderText="Header 1">
                        <ItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                        </ItemTemplate>
                    </asp:TemplateField>

                    <asp:TemplateField >

                        <FooterStyle HorizontalAlign="Right" />
                        <FooterTemplate>
                            <asp:Button ID="ButtonAdd" runat="server" Text="Add New Row"
                                OnClick="ButtonAdd_Click" />
                        </FooterTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>


            <br />

            <asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
                <asp:ListItem>opt1</asp:ListItem>
                <asp:ListItem>opt2</asp:ListItem>
            </asp:DropDownList>

            <br />
            <br />


            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>



        </div>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    <style type="text/css">
        body {
            font-size: 12px;
        }
    </style>
    <script type="text/javascript">
        $(function () {
            $("#<%=TextBox2.ClientID %>").datepicker({
                showButtonPanel: true
            });
        });
    </script>
    </form>
</body>
</html>

C＃代码

namespace WebApplication4
{
public partial class WebForm1 : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            setInitialRow();
        }
    }




    protected void Gridview1_SelectedIndexChanged(object sender, EventArgs e)
    {

    }





    protected void ButtonAdd_Click(object sender, EventArgs e)
    {
        AddNewRowToGrid();
    }





    private void setInitialRow()
    {
        DataTable dt = new DataTable();
        DataRow dr = null;

        dt.Columns.Add(new DataColumn("RowNumber", typeof(string)));
        dt.Columns.Add(new DataColumn("Column1", typeof(string)));


        dr = dt.NewRow();
        dr["RowNumber"] = 1;
        dr["Column1"] = string.Empty;

        dt.Rows.Add(dr);


        ViewState["CurrentTable"] = dt;
        Gridview1.DataSource = dt;
        Gridview1.DataBind();
    }







    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++)
                {

                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");


                    drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["RowNumber"] = i + 1;


                    dtCurrentTable.Rows[i - 1]["Column1"] = box1.Text;



                    rowIndex++;

                }

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

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

            }
            else
            {
                Response.Write("Viewstate is null");
            }
            SetPreviousData();
        }
    }






    private void SetPreviousData()
    {

        int rowIndex = 0;

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

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

            if (dt.Rows.Count > 0)
            {

                for (int i = 0; i < dt.Rows.Count; i++)
                {
                    TextBox box1 = (TextBox)Gridview1.Rows[rowIndex].Cells[1].FindControl("TextBox1");


                    box1.Text = dt.Rows[i]["Column1"].ToString();

                    rowIndex++;
                }
            }
        }
    }

    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        SetPreviousData();
        if (ViewState["CurrentTable"] != null)
        {

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

            if (dt.Rows.Count > 0)
            {
                TextBox box1 = (TextBox)Gridview1.Rows[(dt.Rows.Count - 1)].Cells[1].FindControl("TextBox1");
                box1.Text = DropDownList1.SelectedValue;
            }
        }

    }
}
}

我想将给定的javascript应用于GridView控件创建的文本框...

谢谢！：d

Answer 1

更改jQuery函数的选择器以获取所有文本框：

$("input[type=text]").datepicker({
            showButtonPanel: true
        });

<强>编辑：

将类名设置为要应用脚本的文本框：

  <asp:TextBox CssClass="myclass" runat="server"></asp:TextBox>

然后使用此选择器应用脚本代码：

$(".myclass").datepicker({
        showButtonPanel: true
    });

Answer 2

将ClientIDMode属性设为静态

ClientIDMode="Static"

检查问题的浏览器调试程序选项

ASP.NET如何将javascript添加到动态gridview文本框（ItemTemplate）

2 个答案: