当你有一个DataGrid控件,而且DataGrid允许用户删除网格(grid)中的一行时,你不需要某些客户端代码,你只需要点击网格上的Delete按钮就可以删除行了,但是删除时不会提示用户进行确认。这时Attributes属性就派得上用场了。你可以用DataGrid的ItemDataBound()服务器事件给网格中的每个删除按钮添加一个属性。当你用DataGrid的DataBind方法将数据绑定到网格时,所添加的每一行都会触发ItemDataBound事件。在事件中添加的代码如下:

Private Sub MyDataGrid_ItemDataBound(ByVal _
   Sender as object, ByVal e As _
   System.Web.UI.WebControls. _
   DataGridItemEventArgs) _
   Handles MyDataGrid.ItemDataBound

' This code adds javascript to the "Del" 
' button on each row in 
   ' the datagrid the javascript displays a 
   ' message box to the 
   ' user, confirming the delete action
   Dim btnDel As LinkButton
   Const DEL_COLUMN As Int16 = 1
      
   If Not (e.Item.ItemType = _
      ListItemType.Header Or _
   e.Item.ItemType = _
      ListItemType.Footer) Then

   btnDel = _
         e.Item.Cells(DEL_COLUMN).Controls(0)
   btnDel.Attributes.Add("onClick", _
         "confirmDelete();")

   End If

End Sub



客户要在DataGrid里绑定日期数据,并显示一个按钮,按钮按了以后弹出一个Calendar,可供选择日期。选择的结果要还给原来的DataGrid。给他做了一个:

有一点,在DataGrid.ItemCreated事件里取不到control的正确的Client IDUnique ID,老是返回“TextBox1”,弄得client side script很难写……而在DataGrid.ItemDataBound事件里就能取到“DataGrid1__ctl2_TextBox1”……未及深究,不知道有没有人能给个solid的解释……

 

 re: 在ASP.Net DataGrid中制作弹出式的日期选择Calendar 2004-12-11 4:23 Lostinet
ItemCreated的时候,Item并没有Add到DataGrid.Controls中,所以无法自动生成ID。
可以在ItemCreated时,得到e.Item
绑定e.Item.Init+=new ...

void e_Item_Init(..)
{
DataGridItem item=(DataGridItem)sender;
在这里做能得到UniqueID/ClientID的初始化。
}


The following two pages will demonstrate how to use client side "window.showModalWindow" in combination with ASP.Net server side PostBack.

=======================WebForm1.aspx=========================

<%@ Page language="c#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>WebForm1</title>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
   <asp:DataGrid id="DataGrid1" style="Z-INDEX: 101; LEFT: 56px; POSITION: absolute; TOP: 48px" runat="server"
    Width="512px" Height="256px" AutoGenerateColumns="False">
    <Columns>
     <asp:BoundColumn DataField="StringColumn" HeaderText="StringColumn"></asp:BoundColumn>
     <asp:TemplateColumn HeaderText="DateColumn">
      <ItemTemplate>
       <asp:TextBox id=TextBox1 runat="server" Text='<%# DateTime.Parse(DataBinder.Eval(Container, "DataItem.DateColumn").ToString()).ToShortDateString() %>'>
       </asp:TextBox>
       <asp:Button id="Button1" runat="server" Text="Edit Value"></asp:Button>
      </ItemTemplate>
     </asp:TemplateColumn>
    </Columns>
   </asp:DataGrid>
  </form>
  <script runat="server">
  protected DataTable dt;
  protected void Page_Load(object sender, System.EventArgs e)
  {
   DataGrid1.ItemDataBound += new System.Web.UI.WebControls.DataGridItemEventHandler(this.DataGrid1_ItemDataBound);
   dt = new DataTable("TestTable");
   dt.Columns.Add("StringColumn",typeof(string));
   dt.Columns.Add("DateColumn",typeof(DateTime));
   dt.Rows.Add(new object[]{"String 1",DateTime.Now});
   dt.Rows.Add(new object[]{"String 2",DateTime.Now});
   DataGrid1.DataSource = dt;
   DataGrid1.DataBind();
  }
  protected void DataGrid1_ItemDataBound(object sender, System.Web.UI.WebControls.DataGridItemEventArgs e)
  {
   //Eliminate the headers and footers.
   if (e.Item.Cells[1].Controls.Count == 5)
   {
    TextBox tx = (TextBox)e.Item.Cells[1].Controls[1];
    Button btn = (Button)e.Item.Cells[1].Controls[3];
    btn.Attributes.Add("onclick","return buttonClick('" + tx.ClientID + "');");
   }
  }
  </script>
  <script language="javascript">
  function buttonClick(senderTextBoxID) {
   //debugger;
   var i;
   var senderTextBox;
   for (i = 0; i <  event.srcElement.parentElement.children.length; i++) {
    if (event.srcElement.parentElement.children[i].id == senderTextBoxID) {
     senderTextBox = event.srcElement.parentElement.children[i];
    }
   }
   var returnValue;
   returnValue = window.showModalDialog("CalendarDialog.aspx?selectedDate=" + senderTextBox.value);
   //debugger;
   if (returnValue != null) {
    senderTextBox.value = returnValue.toString();
   }
   //Cancel the postback.
   return false;
  }
  </script>
 </body>
</HTML>

=======================CalendarDialog.aspx=========================

<%@ Page language="c#" AutoEventWireup="true"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
 <HEAD>
  <title>CalendarDialog</title>
  <base target=_self>
 </HEAD>
 <body MS_POSITIONING="GridLayout">
  <form id="Form1" method="post" runat="server">
    <asp:Calendar id="Calendar1" style="Z-INDEX: 101; LEFT: 32px; POSITION: absolute; TOP: 32px" runat="server"
     Width="241px" Height="176px"></asp:Calendar>
     <INPUT style="Z-INDEX: 102; LEFT: 32px; WIDTH: 96px; POSITION: absolute; TOP: 224px; HEIGHT: 24px"
     type="button" value="OK" onclick="returnToMainForm();">
     <INPUT style="Z-INDEX: 103; LEFT: 176px; WIDTH: 96px; POSITION: absolute; TOP: 224px; HEIGHT: 24px"
     type="button" value="Cancel" onclick="window.close();">
  </form>
  <script runat=server>
  protected void Page_Load(object sender, System.EventArgs e)
  {
   if (!IsPostBack)
   {
    DateTime dt;
    try
    {
     dt = DateTime.Parse(Request.QueryString["selectedDate"]);
    }
    catch
    {
     dt = DateTime.Now;
    }
    Calendar1.SelectedDate = dt;
    RegisterHiddenField("selectedDate",dt.ToShortDateString());
   }
   Calendar1.SelectionChanged += new EventHandler(Calendar1_SelectionChanged);
  }

  protected void Calendar1_SelectionChanged(object sender, System.EventArgs e)
  {
   RegisterHiddenField("selectedDate",this.Calendar1.SelectedDate.ToShortDateString());
  }
  </script>
  <script language=javascript>
  function returnToMainForm() {
   window.returnValue = window.Form1.selectedDate.value;
   window.close();
  }
  </script>
 </body>
</HTML>