100分求如何找到Gridview 模板列中ajax calendar 控件的ID

前台:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="WebApplication1.TextWaterMark.Calendar" %><%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript" src="../Js/JScript1.js"></script>
    <script type="text/javascript">
    function closeCalendar()
    {
       $find("CalendarExtender2").hide();
    }
    </script>
</head>
<body onprerender="test()">
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    
    </div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <table style="width: 600px">
                    <tr>
                        <td style="width: 200px">
                            <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Image ID="Image1" onclick="closeCalendar()" runat="server"
                                ImageAlign="Top" ImageUrl="~/Image/datePicker.gif" /></td>
                        <td style="width: 200px">
                            <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Image ID="Image2" runat="server"
                                ImageAlign="Top" ImageUrl="~/Image/datePicker.gif" /></td>
                        <td style="width: 200px">
                            <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></td>
                    </tr>
                    <tr>
                        <td style="width: 200px">
                            <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="yyyy-MM-dd" PopupButtonID="Image1"
                                TargetControlID="TextBox1">
                            </cc1:CalendarExtender>
                        </td>
                        <td style="width: 200px">
                            <cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="yyyy-MM-dd" PopupButtonID="Image2"
                                TargetControlID="TextBox2">
                            </cc1:CalendarExtender>
                        </td>
                        <td style="width: 200px">
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                                <Columns>
                                    <asp:TemplateField>
                                        <ItemTemplate>
                                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("date") %>'></asp:TextBox>
                                            <asp:Image ID="Image3" runat="server" ImageAlign="Top" ImageUrl="~/Image/datePicker.gif" />
                                            <cc1:CalendarExtender ID="CalendarExtender3" runat="server" Format="yyyy-MM-dd" PopupButtonID="Image3"
                                                TargetControlID="TextBox3">
                                            </cc1:CalendarExtender>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                </Columns>
                            </asp:GridView>
                        </td>
                    </tr>
                </table>
            </ContentTemplate>
        </asp:UpdatePanel>
    </form>
</body>
</html>後台:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;namespace WebApplication1.TextWaterMark
{
    public partial class Calendar : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = new DataTable();
                DataColumn dc = new DataColumn("date", typeof(string));
                dt.Columns.Add(dc);
                DataRow dr = dt.NewRow();
                dt.Rows.Add(dr);
                dr = dt.NewRow();
                dt.Rows.Add(dr);                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
        }        protected void Button1_Click(object sender, EventArgs e)
        {        }
    }
}
因為ajax calendar當我打開一個時,如果不進行任何操作,再去打開另一個,則會同時出現2個日曆框,如果2個隔得近,則會互相擋住
因此我想當我打開一個時候,其他的都關閉,如果在頁面中沒問題
我可以用
$find("CalendarExtender2").hide();//在CalendarExtender1打開時關閉CalendarExtender2
但是在gridview中(我需要增加行編輯),ID是開始不知道的,我該如何做
也就是我點任意一個calendar,其他的都關閉,只它本身打開

解决方案 »

  1.   

    前台:
    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Calendar.aspx.cs" Inherits="WebApplication1.TextWaterMark.Calendar" %><%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
        Namespace="System.Web.UI" TagPrefix="asp" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
        <title>Untitled Page</title>
        <script type="text/javascript" src="../Js/JScript1.js"></script>
        <script type="text/javascript">
        function closeCalendar()
        {
           $find("CalendarExtender2").hide();
        }
        </script>
    </head>
    <body onprerender="test()">
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
        
        </div>
            <asp:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <table style="width: 600px">
                        <tr>
                            <td style="width: 200px">
                                <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Image ID="Image1" onclick="closeCalendar()" runat="server"
                                    ImageAlign="Top" ImageUrl="~/Image/datePicker.gif" /></td>
                            <td style="width: 200px">
                                <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><asp:Image ID="Image2" runat="server"
                                    ImageAlign="Top" ImageUrl="~/Image/datePicker.gif" /></td>
                            <td style="width: 200px">
                                <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></td>
                        </tr>
                        <tr>
                            <td style="width: 200px">
                                <cc1:CalendarExtender ID="CalendarExtender1" runat="server" Format="yyyy-MM-dd" PopupButtonID="Image1"
                                    TargetControlID="TextBox1">
                                </cc1:CalendarExtender>
                            </td>
                            <td style="width: 200px">
                                <cc1:CalendarExtender ID="CalendarExtender2" runat="server" Format="yyyy-MM-dd" PopupButtonID="Image2"
                                    TargetControlID="TextBox2">
                                </cc1:CalendarExtender>
                            </td>
                            <td style="width: 200px">
                            </td>
                        </tr>
                        <tr>
                            <td colspan="3">
                                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
                                    <Columns>
                                        <asp:TemplateField>
                                            <ItemTemplate>
                                                <asp:TextBox ID="TextBox3" runat="server" Text='<%# Eval("date") %>'></asp:TextBox>
                                                <asp:Image ID="Image3" runat="server" ImageAlign="Top" ImageUrl="~/Image/datePicker.gif" />
                                                <cc1:CalendarExtender ID="CalendarExtender3" runat="server" Format="yyyy-MM-dd" PopupButtonID="Image3"
                                                    TargetControlID="TextBox3">
                                                </cc1:CalendarExtender>
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                            </td>
                        </tr>
                    </table>
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>
    </body>
    </html>後台:
    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;namespace WebApplication1.TextWaterMark
    {
        public partial class Calendar : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    DataTable dt = new DataTable();
                    DataColumn dc = new DataColumn("date", typeof(string));
                    dt.Columns.Add(dc);
                    DataRow dr = dt.NewRow();
                    dt.Rows.Add(dr);
                    dr = dt.NewRow();
                    dt.Rows.Add(dr);                GridView1.DataSource = dt;
                    GridView1.DataBind();
                }
            }        protected void Button1_Click(object sender, EventArgs e)
            {        }
        }
    }
    因為ajax calendar當我打開一個時,如果不進行任何操作,再去打開另一個,則會同時出現2個日曆框,如果2個隔得近,則會互相擋住
    因此我想當我打開一個時候,其他的都關閉,如果在頁面中沒問題
    我可以用
    $find("CalendarExtender2").hide();//在CalendarExtender1打開時關閉CalendarExtender2
    但是在gridview中(我需要增加行編輯),ID是開始不知道的,我該如何做
    也就是我點任意一個calendar,其他的都關閉,只它本身打開
      

  2.   

    http://www.cnit1.cn/bbs/topic.aspx?topicid=5690
      

  3.   

    CalendarExtender这个东东没用过，不过看你的代码，是在点击图片的时候去找到相应的日历控件，将之关闭，
    这里有个问题就是，在GridView里的控件，在生成页面的时候Id会改变，也就是说在你运行程序，在页面上“查看源代码”，
    你会发现相应的textbox的id已经不是textbox1，textbox2，而CalendarExtender1的id也不是CalendarExtender1了，
    不过有一点，textbox1生成的页面id里面肯定会包含“textbox1”这个字符串，至于CalendarExtender1，因为它是一个自定义控件，生成的页面控件是什么东西，用“查看源文件”应该可以看到了，估计是div，table之类的东东了，可以试一下：<script type="text/javascript"> 
    function closeCalendar() 
    { 
        $find("CalendarExtender2").hide(); 
    } 
    </script>改成<script type="text/javascript"> 
    function closeCalendar(objID) 
    {
        var ctrls = document.all;
        for(var i = 0;i < ctrls.length;i++)
        {
            if(ctrls[i].id.indexOf("CalendarExtender") >= 0 && ctrls[i].id.indexOf(objID) < 0)
            {
                $find(ctrls[i].id).hide(); 
            }
        }
    } 
    </script>将所有Image的onclick改下，例如<asp:Image ID="Image1" onclick='closeCalendar(CalendarExtender1)' runat="server" ImageAlign="Top"   ImageUrl="~/Image/datePicker.gif" />Image2的onclick='closeCalendar(CalendarExtender2)'类推之
      

  4.   

    謝謝!
    如果是像gridview里的Textbox那很好解決了
    我查看html代碼根本找不到那個控件ID,很奇怪,如果是textbox,甚至驗証控件,都很好找到(在Gridview)找gridview中textbox(開始放進去是textbox1)
    var rowIndex = source.parentNode.parentNode.rowIndex;
    var obj = document.getElementById("GridView1").rows[rowIndex].cells[4].childNodes[0];//這樣很好找
    但是那calendar是沒有東西在上面的
    我把Html代碼給你看下就知道
    HtmlCode:
                                <div>
    <table cellspacing="0" rules="all" border="1" id="GridView1" style="border-collapse:collapse;">
    <tr>
    <th scope="col">&nbsp;</th>
    </tr><tr>
    <td>
                                                <input name="GridView1$ctl02$TextBox3" type="text" id="GridView1_ctl02_TextBox3" />
                                                <img id="GridView1_ctl02_Image3" src="../Image/datePicker.gif" align="top" style="border-width:0px;" />
                                                
                                            </td>
    </tr><tr>
    <td>
                                                <input name="GridView1$ctl03$TextBox3" type="text" id="GridView1_ctl03_TextBox3" />
                                                <img id="GridView1_ctl03_Image3" src="../Image/datePicker.gif" align="top" style="border-width:0px;" />
                                                
                                            </td>
    </tr>
    </table>
    </div>它的html代碼是在:
    <script type="text/javascript">
    <!--
    Sys.Application.initialize();
    Sys.Application.add_init(function() {
        $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("Image1"),"format":"yyyy-MM-dd","id":"CalendarExtender1"}, null, null, $get("TextBox1"));
    });
    Sys.Application.add_init(function() {
        $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("Image2"),"format":"yyyy-MM-dd","id":"CalendarExtender2"}, null, null, $get("TextBox2"));
    });
    Sys.Application.add_init(function() {
        $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("GridView1_ctl02_Image3"),"format":"yyyy-MM-dd","id":"GridView1_ctl02_CalendarExtender3"}, null, null, $get("GridView1_ctl02_TextBox3"));
    });
    Sys.Application.add_init(function() {
        $create(AjaxControlToolkit.CalendarBehavior, {"button":$get("GridView1_ctl03_Image3"),"format":"yyyy-MM-dd","id":"GridView1_ctl03_CalendarExtender3"}, null, null, $get("GridView1_ctl03_TextBox3"));
    });
    // -->
    </script>很郁悶,我明天就回家了,卻留下個尾巴
    我想了個很笨的辦法:
    就是在GridView1_RowDataBound事件中取得所有calendar ID都存放在一個隱藏textbox中(GridView1_ctl02_CalendarExtender3,GridView1_ctl03_CalendarExtender3)
    然後我在點image時候,去裡面取ID(逗號分隔)
    效果是實現了,感覺很牽強