Asp. NET Data binding DataList control Actual combat Article _ Practical skills

Source: Internet
Author: User

The last article about DataList some of the basic knowledge, master these knowledge in the future application plays a big role, now we begin to talk about the basic knowledge of the article to do a small example.
First, I have a person table in the database of my machine, as shown in the following figure.


Now, we use the DataList control to display the information in the table, and we can edit the tables in the database on the DataList control.
1. Create the Web application first with VS, add the Web Form, pull the DataList control in the web window, right-click the control, select Edit Item template, where we can see four templates, Two of these are selecteditemtemplate and EditItemTemplate, two LinkButton controls are pulled in the ItemTemplate template, one changes text to view, and CommandName attributes to select , the other one changes the text to edit, and its CommandName property is changed to edit. The SelectedItemTemplate template is then created on the HTML page, and all information about the employee is bound in the template. (This is the feature that enables you to view employee details).
2. Add two LinkButton controls in the EditItemTemplate template entry, the Text property is saved and canceled, the CommandName property is update and cancel respectively, and then a TextBox control is added to enter the name. Here to implement the ability to modify employee names.
3, we can also change the style of the table in the Property builder, the color of the font, the distance of the grid change, here in detail no longer Aushu, and finally finished template editing.
4. Edit foreground HTML code
code in the ItemTemplate template (used to display the employee's name)

<ItemTemplate> 
 <asp:linkbutton id= "lbtnshowdetails" runat= "Server" commandname= "select" Forecolor= " Red "> View </asp:LinkButton> 
 <asp:linkbutton id=" Lbtnedit "runat=" Server "commandname=" edit "ForeColor = "Red" > Edit </asp:LinkButton> 
 <%# DataBinder.Eval (Container.DataItem, "PersonName")%> 
</ Itemtemplate> 

Code in the SelectedItemTemplate template (used to show details in the employee)

 <SelectedItemTemplate> 
 Employee Number: <%# DataBinder.Eval (Container.DataItem, "PID")%> 
 <br/> 
 Employee Name: <%# DataBinder.Eval (Container.DataItem, "PersonName")%> <br 
 employee sex:/> DataBinder.Eval (Container.DataItem, "Personsex")%> 
</SelectedItemTemplate> 

code in the EditItemTemplate template (used to modify employee names) Note: Bind the Text property in the textbox to the employee's name.

<EditItemTemplate> 
 <asp:linkbutton id= "lbtnupdate" runat= "Server" commandname= "Update" > Save </asp :linkbutton> 
 <asp:linkbutton id= "Lbtncancel" runat= "Server" commandname= "Cancel" > Cancel </asp: linkbutton> <br/> 
 Employee Number: <%# DataBinder.Eval (Container.DataItem, "PID")%><br/> Name: <asp: TextBox id= "txtname" runat= "Server" <span style= "color: #FF0000;" >text= ' <%# DataBinder.Eval (Container.DataItem, "PersonName")%> ' </span> width= ' 50px ' ></asp: Textbox> 
</EditItemTemplate> 

Finally, the header and footer templates

<HeaderTemplate> 
  Template Header 
 </HeaderTemplate> 
 <FooterTemplate> 
  <br/> 
  Footer for template 
 </FooterTemplate> 

5, the editor of the front screen is as follows

6, the background code compilation
6.1, write DataList data binding method

private void Databindtodatalist () 
  { 
   SqlConnection con = db.createconnection (); 
   SqlDataAdapter SDA = new SqlDataAdapter (); 
   String sql = "SELECT * from person"; 
   Sda. SelectCommand = new SqlCommand (sql, con); 
   DataSet ds = new DataSet (); 
   Sda. Fill (ds, "per"); 
   Datalist1.datakeyfield = "PID"; Stores a primary key in the DataKeys collection so that a single piece of data is edited later. 
   Datalist1.datasource = ds. Tables["per"]; 
   Datalist1.databind (); 
  } 

6.2. Write Page_loda events to determine whether the page is loaded for the first time and bind the data when the page is first loaded.

protected void Page_Load (object sender, EventArgs e) 
  { 
   if (!this. IsPostBack) 
   { 
    this.databindtodatalist (); 
   } 
  } 

6.3, write Datalist1_itemcommand events, to achieve the view of the staff details function (provided that we have already in the SelectedItemTemplate template to the employee's details have been bound, Now just call the method to show it.

protected void Datalist1_itemcommand (object source, DataListCommandEventArgs e)//E represents the information that DataList passes to the function. 
  { 
   if (e.commandname = = "Select") 
   {this 
    . Datalist1.selectedindex = E.item.itemindex; 
    This.databindtodatalist (); 
   } 
   

6.4, the writing Datalist1_editcommand event, realizes the editing function, will display the information in the EditItemTemplate template.

protected void Datalist1_editcommand (object source, DataListCommandEventArgs e)//E represents the information that DataList passes to the function. 
  {this 
   . Datalist1.edititemindex = E.item.itemindex;//e.item Represents the occurrence of an event in DataList 
   This.databindtodatalist (); 
 
  } 

At this point, the binding information for the Edit template item is displayed, where we can change the name, or cancel the edit, as shown below


Finally, the code that cancels the modification function, the code that updates the function, the code that deletes the function, the event is Datalist1_cancelcommand, Datalist1_updatecommand, Datalist1_deletecommand respectively.

protected void Datalist1_cancelcommand (object source, DataListCommandEventArgs e)//E represents the information that DataList passes to the function. 
  {datalist1.edititemindex =-1;//When the EditItemIndex property value is-1, the EditItemTemplate template databindtodatalist () is not displayed; } protected void Datalist1_updatecommand (object source, DataListCommandEventArgs e) {string ID =datalist1.da Takeys[e.item.itemindex]. 
    ToString (); String name = ((TextBox) E.item.findcontrol ("Txtname")). 
    Text; 
    SqlConnection con = db.createconnection (); 
    SqlCommand cmd = new SqlCommand ("Update person set personname=" "+name+" ' Where pid= ' "+id+" ', con); Cmd. 
    ExecuteNonQuery (); 
    Datalist1.edititemindex =-1; 
  Databindtodatalist (); } protected void Datalist1_deletecommand (object source, DataListCommandEventArgs e) {string ID = Datalist1.data Keys[e.item.itemindex]. 
   ToString (); 
   SqlConnection con = db.createconnection (); 
   SqlCommand cmd = new SqlCommand ("Delete from person where pid=" + ID + "'", con); Cmd. ExecutenOnquery (); 
   Datalist1.edititemindex =-1; 
  Databindtodatalist (); 

 }

Using the DataList control to implement the person table in the database operation, to achieve view details, modify the operation, the approximate process is to modify the DataList control of the various templates in the binding data, and then wait for specific events to make the contents of the template displayed, and finally the data to operate. After the data adapter Dateadapter object populates data from the data source into the dataset, I can add the primary key to the DataKeys collection of DataList with the Datalist.datakeyfield= primary key field name statement. When we want to modify the data, we can then retrieve the primary key of the data item to edit from the collection, the statement is Datalist1.datakeys[e.item.itemindex]. So we can modify the data items in the DataList table as we like.

The above is the entire content of this article, I hope to help you learn.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.