ASP. NET data binding-DataList control practice, asp. netdatalist

Source: Internet
Author: User

ASP. NET data binding-DataList control practice, asp. netdatalist

The previous article introduced some basic knowledge of DataList, which will play a major role in future applications, now let's start with a small example of the Basic Knowledge mentioned in the previous article.
First, my database contains a person table, as shown in.


Now, we use the DataList control to display the information in the table and edit the table in the database on the DataList control.
1. First, use vs to create a web application, add a web form, pull the DataList control in the web form, right-click the control, and select Edit item template. here we can see four templates, two of them are SelectedItemTemplate and EditItemTemplate. In the ItemTemplate, pull two LinkButton controls. One is to change the Text to view, the CommandName attribute to select, and the other is to edit the Text, the CommandName attribute is changed to edit. Then, create a SelectedItemTemplate template on the HTML page and bind all the information of the employee to the template. (Here is the function to view employee details ).
2. Add two LinkButton controls to EditItemTemplate. The Text attributes are save and cancel, and the CommandName attributes are update and cancel. Then, add a TextBox Control to enter the name, modify employee name here.
3. We can also change the style of the table, the font color, and the distance from the grid in the property builder. Here we will not go into detail, but end the template editing.
4. Edit HTML code at the front end
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 display details in the employee)

<SelectedItemTemplate> employee No.: <% # DataBinder. eval (Container. dataItem, "pID") %> <br/> employee name: <% # DataBinder. eval (Container. dataItem, "personName") %> <br/> employee gender: <% # DataBinder. eval (Container. dataItem, "personSex") %> </SelectedItemTemplate>

Code in the EditItemTemplate template (used to modify employee name) Note: bind the text attribute in the text box to the employee 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 ID: <% # 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/> template footer </FooterTemplate>

5. The edited front-end interface is as follows:

6. Background code compilation
6.1 compile the 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"; // Save the primary key to the DataKeys set to edit a piece of data. DataList1.DataSource = ds. Tables ["per"]; DataList1.DataBind ();}

6.2 compile the Page_Loda event to determine whether the page is loaded for the first time and bind data when the page is loaded for the first time.

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

6.3 compile the DataList1_ItemCommand event to view the details of employees (provided that the details of employees have been bound in the SelectedItemTemplate template, and now only the call method is displayed)

Protected void DataList1_ItemCommand (object source, DataListCommandEventArgs e) // e indicates the information that DataList passes to this function. {If (e. CommandName = "select") {this. DataList1.SelectedIndex = e. Item. ItemIndex; this. dataBindToDataList ();}}

6.4 compile the DataList1_EditCommand event to edit the event and display the information in the EditItemTemplate.

Protected void DataList1_EditCommand (object source, DataListCommandEventArgs e) // e indicates the information that DataList passes to this function. {This. DataList1.EditItemIndex = e. Item. ItemIndex; // e. Item indicates the this. dataBindToDataList ();}

At this time, the binding information of the edit template item will be displayed. Here we can change the name or cancel editing, as shown below:


Finally, the Code for canceling the modification function, the code for updating the function, and the Code for deleting the function are DataList1_CancelCommand, DataList1_UpdateCommand, and DataList1_DeleteCommand.

Protected void DataList1_CancelCommand (object source, DataListCommandEventArgs e) // e indicates the information that DataList passes to this function. {Region =-1; // when the value of EditItemIndex is-1, the EditItemTemplate dataBindToDataList ();} protected void DataList1_UpdateCommand (object source, DataListCommandEventArgs e) is not displayed) {string ID = DataList1.DataKeys [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 (); response =-1; dataBindToDataList ();} protected void DataList1_DeleteCommand (object source, DataListCommandEventArgs e) {string ID = DataList1.DataKeys [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 ();}

You can use the DataList control to perform operations on the person table in the database to View Details and modify operations. The general process is to first modify the data bound to each template of the DataList control, wait for the specific event to display the content in the template, and then perform operations on the data. After the data adapter DateAdapter object fills data in the data source into DataSet, can I use DataList. the DataKeyField = "primary key field name" statement adds the primary key to the DataKeys set of DataList. When we want to modify data, we can retrieve the primary key of the data item to be edited from the set, the statement is DataList1.DataKeys [e. item. itemIndex]. In this way, you can modify the data items in the DataList table as you like.

The above is all the content of this article, hoping to help you learn.

Articles you may be interested in:
  • Determine when to use DataGrid, DataList, or Repeater (ASP. NET technical article)
  • Asp.net GridView and DataList to move the mouse over the row to change color
  • The asp.net Datalist control implements the paging function.
  • Asp.net datalist usage
  • Asp.net uses the for loop to display Datalist Columns
  • Differences between asp.net DataList and Repeater
  • Asp.net uses aspnetpager as the DataList page
  • Asp.net Summary of getting Checkbox values in Datalist
  • Implementation Method and instance code for binding a database to the DataList control in asp.net

Related Article

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.