Datalist或Repeater里点击某列内容将放到文本框中以便编辑,文本框失去焦点后信息即可修改成功

       如同GridView的编辑功能,在Datalist或Repeater中也可以实现。本文实现的功能就是当点击Datalist或Repeater中的某列,自动出现一文本框,然后在文本框中输入要改成的内容,当光标离开该框后即提交到数据库啦!功能虽实现了,不过朋友给我一建议“若无刷新就更好了”,呵呵......

       下面是我的代码,还希望能帮到有需要的朋友。注意:我用到了文本框的TextChanged事件,需要将该文本框的AutoPostBack属性设置为true。

前台代码
 1  <% @ Page Language = " C# "  AutoEventWireup = " true "  CodeFile = " UpdateInDatalist.aspx.cs "  Inherits = " UpdateInDatalist "   %>
 2 
 3  <! DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "   " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
 4 
 5  < html xmlns = " http://www.w3.org/1999/xhtml " >
 6  < head runat = " server " >
 7       < title > 无标题页 </ title >
 8       < script language = " javascript "  type = " text/javascript " >
 9         function pageOnLoad()
10         {
11              var arrAllTextboxes = document.getElementsByTagName( " input " );
12               for (i = 0 ;i < arrAllTextboxes.length;i ++ )
13              {
14                   if (arrAllTextboxes[i].id.indexOf( " TxtProName " ) !=- 1 || arrAllTextboxes[i].id == " TextBox1 " || arrAllTextboxes[i].id == " TxtProductID " )
15                  {
16                      document.getElementById(arrAllTextboxes[i].id).style.display = " none " ;
17                  }
18              }
19         }
20          function labelOnClick(Label1,TxtProName,productID,TxtProductID)
21          {
22                document.getElementById(TxtProductID).value = productID; // the nonce productID which needs to update the productName
23                document.getElementById(Label1).style.display = " none " ; // the label disappear
24                document.getElementById(TxtProName).style.display = " inline " ; // the txt appear
25                document.getElementById(TxtProName).focus();
26          }
27          function TxtboxOnblur(TextBox1,controlTxtID,LblProName)
28          {
29              document.getElementById(LblProName).style.display = " inline " ; // the label appear
30              document.getElementById(controlTxtID).style.display = " none " ; // the txt disappear
31                document.getElementById(TextBox1).value  =  document.getElementById(controlTxtID).value;
32          }
33       </ script >
34  </ head >
35  < body onload = " pageOnLoad() " >
36       < form id = " form1 "  runat = " server " >
37       < asp:TextBox ID = " TextBox1 "  runat = " server " ></ asp:TextBox >
38       < asp:TextBox ID = " TxtProductID "  runat = " server " ></ asp:TextBox >
39      
40       < asp:DataList ID = " DataList1 "  runat = " server "  HorizontalAlign = " Justify "  
41          RepeatColumns = " 3 "  RepeatDirection = " Horizontal "  
42          onitemdatabound = " DataList1_ItemDataBound " >
43       < ItemTemplate >
44      
45           < table >
46               < tr >
47                   < td >
48                       < asp:Image ID = " Image1 "  Width = " 150 "  Height = " 120 "  ImageUrl = ' <%# "UploadImages/"+Eval("productPic") %> '  runat = " server "   />
49                   </ td >
50               </ tr >
51               < tr >
52                   < td >
53                       < asp:Label ID = " Label1 "  runat = " server "  Text = ' <%#Eval("productName")%> ' ></ asp:Label >
54                       < asp:Label ID = " LblProductID "  Visible = " false "  runat = " server "  Text = ' <%#Eval("productID")%> ' ></ asp:Label >
55                       < asp:TextBox ID = " TxtProName "  AutoPostBack = " True "  runat = " server "  Text = ' <%#Eval("productName") %> '  ontextchanged = " TxtProName_TextChanged " ></ asp:TextBox >
56                   </ td >  
57               </ tr >
58           </ table >
59           </ ItemTemplate >
60       </ asp:DataList >
61       </ form >
62  </ body >
63  </ html >
64 
后台代码
using  System;
using  System.Collections;
using  System.Configuration;
using  System.Data;
using  System.Linq;
using  System.Web;
using  System.Web.Security;
using  System.Web.UI;
using  System.Web.UI.HtmlControls;
using  System.Web.UI.WebControls;
using  System.Web.UI.WebControls.WebParts;
using  System.Xml.Linq;

public   partial   class  UpdateInDatalist : System.Web.UI.Page
{
    
string  sql  =   null ;
    
protected   void  Page_Load( object  sender, EventArgs e)
    {
        
if  ( ! IsPostBack)
        {
            BindDataList1();
        }
    }
    
void  BindDataList1()
    {
        sql 
=   string .Format( " select * from productTable order by productID desc " );
        DataTable dt 
=  DataBase.ExecuteDataSet(sql).Tables[ 0 ];
        DataList1.DataSource 
=  dt.DefaultView;
        DataList1.DataBind();
    }
    
protected   void  DataList1_ItemDataBound( object  sender, DataListItemEventArgs e)
    {
        
if  (e.Item.ItemType  ==  ListItemType.Item  ||  e.Item.ItemType  ==  ListItemType.AlternatingItem)
        {
            DataRowView drv 
=  (DataRowView)e.Item.DataItem;
            
string  productID  =  ((Label)e.Item.FindControl( " LblProductID " )).Text.ToString();
            ((Label)e.Item.FindControl(
" Label1 " )).Attributes.Add( " onClick " " labelOnClick(' "   +  ((Label)e.Item.FindControl( " Label1 " )).ClientID  +   " ',' "   +  ((TextBox)e.Item.FindControl( " TxtProName " )).ClientID  +   " ',' "   +  productID  +   " ',' "   +  TxtProductID.ClientID  +   " ') " );

            ((TextBox)e.Item.FindControl(
" TxtProName " )).Attributes.Add( " onBlur " " TxtboxOnblur(' "   +  TextBox1.ClientID  +   " ',' "   +  ((TextBox)e.Item.FindControl( " TxtProName " )).ClientID  +   " ',' "   +  ((Label)e.Item.FindControl( " Label1 " )).ClientID  +   " ') " );
        }
    }
    
protected   void  TxtProName_TextChanged( object  sender, EventArgs e)
    {
        
string  productName  =  TextBox1.Text.ToString();
        
string  productID  =  TxtProductID.Text.Trim().ToString();
        
// Response.Write(productID);
        sql  =   string .Format( " update productTable set productName='{0}' where productID={1} " , productName, productID);
        
int  i  =  DataBase.ExecuteNonQuery(sql);
        
if  (i  >   0 )
        {
            BindDataList1();
        }
    }
}


你可能感兴趣的:(datalist)