In this tutorial will demonstrate how to use a DataList control to allow users to select individual items in the particular list.
Learn How to Use the DataList control in ASP.NET 3.5 Web App using C#
Once an individual item is selected, the DataList can be set to display additional text and controls for the SelectedItem that may be different from, or not included in, the ItemTemplate. This can be done by defining a SelectedItemTemplate, that is rendered but only for whichever item that is currently selected.
As you can see the DataList control displays data in a format that you can define using templates and styles. It is a perfect control for data in any repeating structure like a table. The DataList can also encapsulate the functionality to easily highlight the selected item visually, using the SelectedItemTemplate.I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.
To start, open Visual Studio 2008. Click File > New > Web Site > ASP.NET and name it DataList or whatever you want. First, we want to define the layout in a CSS. This example is pretty straight forward, considering we are using just a basic layout:
| <style type="text/css"> html { background-color:green; } .content { margin:auto; width:600px; background-color:white; } .column { float:left; width:250px; padding:20px; } .movies td { padding:10px; } a { padding:5px; color:red; } a:hover { background-color:gray; } </style> |
Next, we want to create a DataList control. The control will display a menu of People from our Person table. You can use the DataList control to edit database records. Although this control requires more coding than editing with other Databound controls such as the GridView, FormView, or DetailsView controls.
Notice how it includes a DataKeyField property that accepts the name of a primary key column from the data source. When this property is set, the DataList control's DataKeys collection is populated with the primary keys from the data source, but only when the control is bound to its data source. Below is an example markup of a DataList control and illustrates how you can edit and delete database records:
| <body> <form id="myForm" runat="server"> <div class="content"> <div class="column"> <asp:DataList id="dlstPeople" DataSourceID="dbPeople" DataKeyField="Id" //GridLines enables you to add rules around the cells in the DataList.The Possible values are None, Horizontal, Vertical, Both GridLines="Both" onEditCommand="dlstPeople_EditCommand" onCancelCommand="dlstPeople_CancelCommand" onUpdateCommand="dlstPeople_UpdateCommand" onDeleteCommand="dlstPeople_DeleteCommand" //CssClass enables you to associate a CSS class with the DataList CssClass="people" //EditItemStyle enables you to format the DataList row selected for editing EditItemStyle-CssClass="edit" Runat="server"> <ItemTemplate> <h1><%#Eval("Name") %></h1> is a <%#Eval("Gender") %> and was born in <%#Eval("City") %> <br /><br /> <asp:LinkButton id="lnkEdit" CommandName="Edit" Text="Edit" Runat="server" /> <asp:LinkButton id="lnkDelete" CommandName="Delete" Text="Delete" OnClientClick="return confirm('Are you sure?');" runat="server" /> </ItemTemplate> |
In the ItemTemplate shown above, the DataList includes an Edit LinkButton and a Delete LinkButton. When the Edit LinkButton is clicked, the DataList raises its EditCommand event and the dlstPeople_Edit() method is executed. Same is true for the delete button, which also raises the DeleteCommand event and the dlstPeople_Delete() method is executed. Here is an example of these methods:
| <script runat="server"> protected void dlstPeople_EditCommand(object source, DataListCommandEventArgs e) { dlstPeople.EditItemIndex = e.Item.ItemIndex; dlstPeople.DataBind(); } protected void dlstPeople_UpdateCommand(object source, DataListCommandEventArgs e) { // Get form fields TextBox txtName = (TextBox)e.Item.FindControl("txtName"); TextBox txtGender = (TextBox)e.Item.FindControl("txtGender"); TextBox txtCity = (TextBox)e.Item.FindControl("txtCity"); // Assign parameters dbPeople.UpdateParameters["Id"].DefaultValue = dlstPeople.DataKeys[e.Item.ItemIndex].ToString(); dbPeople.UpdateParameters["Name"].DefaultValue = txtName.Text; dbPeople.UpdateParameters["Gender"].DefaultValue = txtGender.Text; dbPeople.UpdateParameters["City"].DefaultValue = txtCity.Text; // Call SqlDataSource Update dbPeople.Update(); // Take out of Edit mode dlstPeople.EditItemIndex = -1; } protected void dlstPeople_DeleteCommand(object source, DataListCommandEventArgs e) { // Assign parameters dbPeople.DeleteParameters["Id"].DefaultValue = dlstPeople.DataKeys[e.Item.ItemIndex].ToString(); // Call SqlDataSource Delete dbPeople.Delete(); } protected void dlstPeople_CancelCommand(object source, DataListCommandEventArgs e) { dlstPeople.EditItemIndex = -1; dlstPeople.DataBind(); } </script> |
Can you see how the dlstPeople_Edit() method sets the EditItemIndex property fo the DataList control? The EditItemTemplate is displayed for the item in the DataList that matches the EditItemIndex.
Also notice how the EditItemTemplate includes form fields for editing a people record and an Update and Cancel LinkButton. These LinkButtons raise the UpdateCommand and Cancel Command events, and execute the corresponding event handlers.
If you're ever in the market for some great Windows web hosting, try Server Intellect.We have been very pleased with their services and most importantly, technical support.
If you are working through this and trying to get this to compile, do not forget to configure your web.config:
| <connectionStrings> <add name="PeopleConnectionString" connectionString="Data Source=(local);Initial Catalog=People;Integrated Security=True" providerName="System.Data.SqlClient"/> </connectionStrings> |
Also, be sure that you inlcude the rest of this EditItemTemplate markup under the ItemTemplate shown above. Ths simply just create labels and asscoiates them with the correct properties:
| <EditItemTemplate> <asp:Label id="lblName" Text="Name:" AssociatedControlID="txtName" Runat="server" /> <br /> <asp:TextBox id="txtName" Text='<%#Eval("Name")%>' Runat="server" /> <br /><br /> <asp:Label id="lblGender" Text="Gender:" AssociatedControlID="txtGender" Runat="server" /> <br /> <asp:TextBox id="txtGender" Text='<%#Eval("Gender")%>' Runat="server" /> <br /><br /> <asp:TextBox id="txtCity" Text='<%#Eval("City")%>' Runat="server" /> <br /><br /> <asp:LinkButton id="lnkUpdate" CommandName="Update" Text="Update" Runat="server" /> <asp:LinkButton id="lnkCancel" CommandName="Cancel" Text="Cancel" Runat="server" /> </EditItemTemplate> </asp:DataList> </div> |
In order connect to a the Person table you will need to connect to a database. So first you must set the ConnectionString property to a valid connection string.
The SqlDataSource data source control represents data in an SQL relational database to data-bound controls like the DataList we just went through. You can use the SqlDataSource control in conjunction with a data-bound control to retrieve data from a relational database and to display, edit, and sort data on a Web page with little or no code.
| <asp:SqlDataSource id="dbPeople" ConnectionString="<%$ ConnectionStrings:PeopleConnectionString %>" SelectCommand="SELECT Id,Name,Gender, City FROM Person" UpdateCommand="UPDATE Person SET Name=@Name, Gender=@Gender, City=@City WHERE Id=@Id" DeleteCommand="DELETE Person WHERE Id=@Id" Runat="server"> <UpdateParameters> <asp:Parameter Name="Id" /> <asp:Parameter Name="Name" /> <asp:Parameter Name="Gender" /> <asp:Parameter Name="City" /> </UpdateParameters> <DeleteParameters> <asp:Parameter Name="Id" /> </DeleteParameters> </asp:SqlDataSource> |
We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.
No comments:
Post a Comment