ASP.NET如何將JavaScript添加到動態gridview文本框（ItemTemplate）

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 個解決方案

解決方案1
2 已采納 2016-01-19 11:08:14

解決方案2
0 2016-01-19 10:57:26

ASP.NET如何將JavaScript添加到動態gridview文本框（ItemTemplate）

問題描述

2 個解決方案

解決方案1 2 已采納 2016-01-19 11:08:14

解決方案2 0 2016-01-19 10:57:26

解決方案1
2 已采納 2016-01-19 11:08:14

解決方案2
0 2016-01-19 10:57:26