Further Web-Database Examples

Size: px

Start display at page:

Download "Further Web-Database Examples"

Darcy Robinson
6 years ago
Views:

1 Further Web-Database Examples Most of the examples of Web-database before involve only displaying data using a select query. Moreover, in all cases, the user do not have any control on the selection of the query criteria. In the following, we provide some examples where the user maintains some flexibility, and we also deal with examples of insert, delete, and update to a database from the Web. Allowing the SQL Statement with a WHERE Clause In this first example, we want the SQL statement to contain a WHERE clause. In the following ASP.NET page, we use two controls: a DataGrid and a Button. Upon clicking the button, the SQL statement is executed; although the user does not have any control on defining the SQL statement. Again, we are using the Northwind database of Microsoft Access. <%@ Page Language="VB" Debug="true" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> Sub btnview_click(sender As Object, e As EventArgs) connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") dim objconnection as new OLEDBConnection(connectionString) Dim querystring As String = "SELECT * FROM Customers WHERE CustomerID = 'BOLID' " Dim objcommand as new OLEDBCommand(queryString,objConnection) objconnection.open dgcustomerinfo.datasource = objcommand.executereader(commandbehavior.closeconnection) dgcustomerinfo.databind() </script> <html><head></head><body> <form runat="server"> <asp:button id="btnview" onclick="btnview_click" runat="server" Text="View Customer"></asp:Button> <asp:datagrid id="dgcustomerinfo" runat="server"></asp:datagrid> </form> </body></html> Run SelectCustomer (See results next page) 1

Using a Value from a TextBox: Using Numbers in the WHERE Clause In the previous example, the SQL statement is fixed the user do not have any control on the query.

2 Using a Value from a TextBox: Using Numbers in the WHERE Clause In the previous example, the SQL statement is fixed the user do not have any control on the query. In this example, we want the user to enter a specific customer ID through an input box, and then display the associated information of the customer. In the ASP.NET page, we use three controls: a DataGrid, a TextBox, and a Button. All the codes are in a user-defined subroutine called btnview_click, which gets executed by the click event. Note, the EmployeeId in the Employees table is between 1 and 9, and there is an error-handling condition when the user clicks the button without entering any value. 2

3 Page Language="VB" Debug="true" %> import Namespace="System.Data" %> import Namespace="System.Data.OleDb" %> <script runat="server"> Sub btnview_click(sender As Object, e As EventArgs) connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") dim objconnection as new OLEDBConnection(connectionString) If CustomerID.text <> "" Dim querystring As String = "SELECT LastName, FirstName, Title, Address, City, PostalCode, HomePhone FROM Employees WHERE EmployeeID =" & CustomerID.text dim objcommand as new OLEDBCommand(queryString,objConnection) objconnection.open dgcustomerinfo.datasource = objcommand.executereader(commandbehavior.closeconnection) dgcustomerinfo.databind() end if </script> <html> <head> </head> <body> <form runat="server"> CustomerID: <asp:textbox id="customerid" runat="server" Columns="5"></asp:TextBox> <asp:button id="btnview" onclick="btnview_click" runat="server" Text="View Customer"></asp:Button> <asp:datagrid id="dgcustomerinfo" runat="server"></asp:datagrid>  </form> </body> </html></html> Run SelectEmployee (Enter a number between 1 9 and see the result) 3

4 Reading Text from an InputBox: Using String in the WHERE Clause Use of string in the WHERE clause of SQL statement needs to be handled carefully. Web Control TextBoxes by default accept input as variable data type. As such it depends on the what is typed. Thus typing text does not automatically used as text in the SQL string. For example, we want a SQL statement like: "SELECT * FROM Customers WHERE CustomerID = BOLID. If we read the value for the WHERE clause from a textbox, it will read as BOLID, not BOLID. Thus we need to place the BOLID within a quote in the SQL statement to work. The example below illustrates how to read and convert the value into string. In the following, we use a textbox to get input from the user that is used in the WHERE clause and a Button to execute a subroutine. The SQL string is displayed on a label control and the data is displayed using a datagrid. 4

<%@ Page Language="VB" Debug="true" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> Sub btnview_click(sender As Object, e As EventArgs) connectionstring ="Provider=Microsoft.

5 Page Language="VB" Debug="true" %> import Namespace="System.Data" %> import Namespace="System.Data.OleDb" %> <script runat="server"> Sub btnview_click(sender As Object, e As EventArgs) connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") dim objconnection as new OLEDBConnection(connectionString) dim customernum as string customernum = CustomerInput.text If customernum <> "" Dim querystring As String = "SELECT * FROM Customers WHERE CustomerID = '" & CustomerNum & "'" label1.visible = true label1.text = querystring dim objcommand as new OLEDBCommand(queryString,objConnection) objconnection.open dgcustomerinfo.datasource = objcommand.executereader(commandbehavior.closeconnection) dgcustomerinfo.databind() end if </script> <html><head></head><body> <form runat="server"> CustomerID: <asp:textbox id="customerinput" runat="server" Columns="5"></asp:TextBox> <asp:button id="btnview" onclick="btnview_click" runat="server" Text="View Customer"></asp:Button> <asp:label id="label1" runat="server" ForeColor="Red" Visible="False"></asp:Label> <asp:datagrid id="dgcustomerinfo" runat="server" BorderColor="Blue" CellPadding="1" ForeColor="DarkViolet" HorizontalAlign="Left"></asp:DataGrid> </form> </body></html> Run SelectCustomerString.aspx (Try 11 and ANTON, BOLID, or FRANK. See results) 5

6 Counting Number of Records Returned Number of records returned by a data reader or data adapter can be counted, as shown by the following modified code from the above example. <%@ Page Language="VB" Debug="true" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> Sub btnview_click(sender As Object, e As EventArgs) connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") dim objconnection as new OLEDBConnection(connectionString) dim customernum as string customernum = CustomerInput.text 'Try Customer ID = ANTON, BOLID, or FRANK If customernum <> "" Dim querystring As String = "SELECT * FROM Customers WHERE CustomerID = '" & CustomerNum & "'" dim objcommand as new OLEDBCommand(queryString,objConnection) objconnection.open() dgcustomerinfo.datasource = objcommand.executereader(commandbehavior.closeconnection) dgcustomerinfo.databind() Check the number of records returned dim reccount as integer reccount = dgcustomerinfo.items.count if (reccount = 0) then label1.text = "No Records found from the database" else label1.text = "Number of Records: " & reccount end if end if </script> <html> <head></head><body> <form runat="server"> CustomerID: <asp:textbox id="customerinput" runat="server" Columns="5"></asp:TextBox> <asp:button id="btnview" onclick="btnview_click" runat="server" Text="View Customer"></asp:Button> <asp:label id="label1" runat="server">label</asp:label> <asp:datagrid id="dgcustomerinfo" runat="server"></asp:datagrid>  </form> </body> Run SelectCustomerTwo (Try typing 1, 2, or 3 as well as ANTON, BOLID, or FRANK) 6

7 Binding Database Data to a DropDownList A DropDownList contains multiple list items, one of which can be selected. The items are typically populated in the design time, but populating list items from a database data is common also. Each list item has two properties: text and value. The text property specifies the text displayed to the user and value is hidden but used in manipulations. For example, while a customername is a text, customerid is the value. In order to bind database data to a DropDownList, we need to perform the following: Set the DataSource property of the DropDownList control to the DataSet or DataReader returned by a routine that retrieves appropriate data. Call DropDownList s DataBind() method. Set DataTextField property of DropDownList control to the DataSource field to be displayed. Set DataValueField property of DropDownList control to the DataSource field to be used for future manipulation.. Because our goal is to display information of a selected item from the drop-down list, we need to have the Web form post back when the user selects an item form the list. One option is to use a button that users can click once a list item is selected. Another way is to set the DropDownList s AutoPostBack property to True. This will cause the Web form to submit once a new item is selected. Binding database data to a DropDownList control is fine, but the data needs to be used. Typically, when an item in a DropDownList is selected, a code is executed. To execute the code, we use an event handler, and the most obvious one is the SelectedIndexChanged event handler. Note how the selected item of the DropDownList is accessed in the SQL statement: CustomerList.selectedItem.value 7

8 Page Language="VB" Debug="true" %> Register TagPrefix="wmx" Namespace="Microsoft.Saturn.Framework.Web.UI" Assembly="Microsoft.Saturn.Framework, Version= , Culture=neutral, PublicKeyToken=6f763c " %> import Namespace="System.Data" %> import Namespace="System.Data.OleDb" %> <script runat="server"> Sub Page_Load(sender As Object, e As EventArgs) If not page.ispostback then connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") dim objconnection as new OLEDBConnection(connectionString) objconnection.open Dim querystring As String = "SELECT * FROM Customers" dim objcommand as new OLEDBCommand(queryString,objConnection) CustomerList.DataSource = objcommand.executereader(commandbehavior.closeconnection) CustomerList.Databind() end if Sub customerlist_selectedindexchanged(sender As Object, e As EventArgs) Response.Write("<br>Text selected: " & customerlist.selecteditem.text) Response.Write("<br>Value selected: " & customerlist.selecteditem.value) connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") dim objconnection as new OLEDBConnection(connectionString) objconnection.open Dim CustomerQuery As String = "SELECT * FROM Customers WHERE CustomerID = '" & CustomerList.selectedItem.value & "'" label1.visible = true label1.text = customerquery dim newcommand as new OLEDBCommand(customerQuery,objConnection) dgcustomerinfo.datasource = newcommand.executereader(commandbehavior.closeconnection) dgcustomerinfo.databind() </script> <html><head></head><body> <form runat="server"> Contact Name: <asp:dropdownlist id="customerlist" runat="server" OnSelectedIndexChanged="customerList_SelectedIndexChanged" DataValueField="CustomerID" DataTextField="ContactName" AutoPostBack="True"></asp:DropDownList> <asp:label id="label1" runat="server" ForeColor="#C00000" visible="false">label</asp:label> <asp:datagrid id="dgcustomerinfo" runat="server" BorderColor="DarkRed" CellPadding="1" HorizontalAlign="Left" ForeColor="Blue" BorderStyle="Inset"></asp:DataGrid> </form> </body></html> 8

9 Run SelectCustomerDropDown Screen shot before selecting an item Screen shot after selecting an item 9

10 Paging through DataGrid s Data When a DataSource returned from a database query returns a large rows of data to a DataGrid control, it is not advisable to display all the data at once. Rather a subset of data can be presented to the user, and then move forward or backward with the next or previous subset of data. This can be accomplished by setting several properties of the DataGrid control and some other changes as described below. Paging Mode: The DataGrid can be configured to page in two different modes: hyperlinked next/previous mode or numbering mode. This property can be set in design time through the property window. Other properties to be set: AllowPaging property = True. PageSize property = a reasonable number suitable for the user (say 10) DataSet as DataSource: In the previous examples, we used a DataReader to get data from the database. For data to be paged, we must return a DataSet, not a DataReader. Note, a DataSet is returned through a DataAdapter object rather than a DataReader object. So, there are some changes in the code and Fill() method is used to fill the DataSet. CurrentPageIndex: In order to page through various pages of data, the CurrentPageIndex property of the DataGrid control must be changed. The index for the first page is 0, that for the second page is 1, and so on. Except fort he first index, the others are not set, and thus paging may not be accomplished automatically. In order to do that, we need to add a DataGrid event handler to page through and bind data in new pages. The event handler must be of the form: Sub EvenrtHandlerName (sender As Object, e As DataGridPageChangedEventArgs) The second input parameter to the event handler is of type DataGridPageChangedEventArgs, which has a property called NewPageIndex. It is used to access the new page and then assigned as the DataSource to the DataGrid control. The data is again rebinded. OnPageIndexChanged event: The final step is to assign the EventHandlerName to the OnPageIndexChanged event of the DataGrid control, so that the event is fired for a change of the event (clicking on the navigation button). 10

11 Page Language="VB" Debug="true" %> Register TagPrefix="wmx" Namespace="Microsoft.Saturn.Framework.Web.UI" Assembly="Microsoft.Saturn.Framework, Version= , Culture=neutral, PublicKeyToken=6f763c " %> import Namespace="System.Data" %> import Namespace="System.Data.OleDb" %> <script runat="server"> Function GetCustomers() As System.Data.DataSet connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") Dim objconnection as new OLEDBConnection(connectionString) objconnection.open Dim CustomerQuery As String = "SELECT CustomerID, CompanyName, ContactName, ContactTitle, Address, City, PostalCode FROM Customers" label1.text = "SQL = " & CustomerQuery Dim newcommand as new OLEDBCommand(customerQuery,objConnection) Dim objadapter as new OledbDataAdapter(newCommand) Dim objdataset as new DataSet() objadapter.fill(objdataset) Return objdataset End Function Sub Page_Load(sender As Object, e As EventArgs) If not page.ispostback then dgcustomers.datasource = GetCustomers() dgcustomers.databind() end if Sub dgcustomers_page(sender As Object, e As DataGridPageChangedEventArgs) ' Assign the CurrentPageIndex property to the new page index value dgcustomers.currentpageindex = e.newpageindex ' Rebind the data to the DataGrid dgcustomers.datasource = GetCustomers() dgcustomers.databind() </script> <html><head></head><body> <form runat="server"> <asp:label id="label1" runat="server" ForeColor="Red">Label</asp:Label> <asp:datagrid id="dgcustomers" runat="server" ForeColor="Blue" AllowPaging="True" BorderColor="DarkRed" CellPadding="1" HorizontalAlign="Left" BorderStyle="Inset" PageSize="6" OnPageIndexChanged="dgCustomers_Page" CellSpacing="1"> <PagerStyle nextpagetext="next>" prevpagetext="<prev"></pagerstyle> </asp:datagrid> </form></body></html> 11

12 Run CustomerPaging Limited to six rows and Next/Prev buttons A different page accessed through Next/Prev buttons 12

13 Reading Rows and Items from a DataSet As it was mentioned, there are two ways data can be retrieved from a database: DataReader and DataSet. The DataReader is a read-only forward-only recordset and as such data can not be updated. On the other hand, DataSet is most flexible, and can be used to update the database. A DataSet contains a Tables collection, i.e., more than one tables can be held in a DataSet. Each Table in the Tables collection is identified through an index such as Tables(0), Tables(1), Tables(2), and so on. When retrieving Tables through an SQL statement, the name of the Table can be given specifically or the name of the Table from the database is automatically taken if not given specifically in the DataSet. To access a Table, we can use the Table index or the Table name, such as: DataSetName.Tables(0) or DataSetName.Tables( TableName ) Each Table in a DataSet has a Rows collection. Rows are accessed through an index such as Rows(0), Rows(1), Rows(2), and so on. To access a Row in the code, we can use the index such as: DataSetName.Tables(0).Rows(2) or DataSetName.Tables( TableName ).Rows(2) Each Row consists of an Items collection. Items are accessed through an index such as Item(0), Item(1), Item(2), and so on. An item can also be accessed through the field name of the Table. Thus to access a field value of a Row: DataSetName.Tables(0).Rows(2).Item(2) or DataSetName.Tables( TableName ).Rows(2).Item( FieldName ) The following code section opens two tables from the Microsoft Access Northwind database to a DataSet named Data using a DataAdapter. It then displays the two tables in two DataGrid controls. It also displays two fields from two tables. 13

14 Page Language="VB" %> import Namespace="System.Data" %> import Namespace="System.Data.Oledb" %> <script runat="server"> Sub Page_Load(Sender As Object, E As EventArgs) connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") Dim dbconnection As New OleDbConnection(connectionString) Dim querystring As String = "SELECT * FROM Categories" Dim dbcommand As New OleDbCommand dbcommand.commandtext = querystring dbcommand.connection = dbconnection Dim dataadapter As New OleDbDataAdapter dataadapter.selectcommand = dbcommand Dim data As DataSet = New System.Data.DataSet dataadapter.fill(data, "Categories") dataadapter.selectcommand.commandtext = "SELECT * FROM Shippers" dataadapter.fill(data, "Shippers") DataGrid1.DataSource = data.tables("categories") DataGrid1.DataBind() DataGrid2.DataSource = data.tables("shippers") DataGrid2.DataBind() Label1.Text = data.tables("categories").rows(1).item("categoryname") Label2.Text = data.tables(1).rows(2).item(2) </script> <html> <head></head> <body> <form runat="server"> <font color="blue"><strong>categories:</strong></font> <asp:datagrid id="datagrid1" runat="server" ForeColor="#FF8000" OnSelectedIndexChanged="DataGrid1_SelectedIndexChanged" BorderColor="Blue"></asp:DataGrid> <strong>category Name in Row (2):</strong> <asp:label id="label1" runat="server" ForeColor="Magenta">Label</asp:Label> <font color="blue"><strong>shippers:</strong></font> <asp:datagrid id="datagrid2" runat="server" ForeColor="#FF8000" BorderColor="Blue"></asp:DataGrid> <strong>shipper Phone in Row(3):</strong> <asp:label id="label2" runat="server" ForeColor="Magenta">Label</asp:Label> </form> </body> </html> 14

15 Run TableAndRow 15

16 Adding Data to a Database As it was mentioned adding and updating data to a database requires a DataSet. To add a row into a dataset, first a new row is defined in the DataSet table through a NewRow() method, then appropriate values are assigned to fields or Items to the new row. Finally, the new row is added through the Add method. The code section below shows this steps. <%@ Page Language="VB" Debug="true" %> <%@ import Namespace="System.Data" %> <%@ import Namespace="System.Data.OleDb" %> <script runat="server"> Sub Page_Load(Sender As Object, E As EventArgs) Dim querystring As String Dim data As New DataSet Dim dataadapter As OleDbDataAdapter connectionstring ="Provider=Microsoft.Jet.OLEDB.4.0;data source=" & server.mappath("northwind.mdb") Dim dbconnection As New OleDbConnection(connectionString) querystring = "SELECT FirstName, LastName FROM Employees" dataadapter = New OleDbDataAdapter(queryString, dbconnection) dataadapter.fill(data, "Employees") DataGrid1.DataSource = data.tables("employees") DataGrid1.DataBind() Dim table As DataTable Dim newrow As DataRow table = data.tables("employees") newrow = table.newrow() newrow.item("firstname") = "Norman" newrow.item("lastname") = "Blake" table.rows.add(newrow) ' bind the data grid to the new data DataGrid2.DataSource = table DataGrid2.DataBind() </script> <html><head></head><body> <table style="width: 466px; HEIGHT: 162px" width="466"> <tbody> <tr><td> <font color="blue"><strong>original Data</strong></font></td> <td> <font color="blue"><strong>data with new Row</strong></font></td> </tr> <tr> <td valign="top"> <asp:datagrid id="datagrid1" runat="server" ForeColor="#FF8000" BorderColor="Blue"></asp:DataGrid> </td> <td valign="top"> <asp:datagrid id="datagrid2" runat="server" ForeColor="#FF8000" BorderColor="Blue"></asp:DataGrid> </td> </tr> </tbody> </table> </body></html> 16

17 Run AddingData Note: This example only adds data in the dataset in the memory, not in the database. One needs to send an Insert sql command to add a record to the database. 17

Reading From Databases

57076_Ch 8 SAN.qxd 01/12/2003 6:43 PM Page 249 8 Reading From Databases So far in this book you've learnt a lot about programming, and seen those techniques in use in a variety of Web pages. Now it's time