BIS4430 Web-based Information Systems Management. Unit 11 [BIS4430, LU11 version1.0, E.M, 09/07)]

Transcription

1 SCOPE Context BIS4430 Web-based Information Systems Management Unit 11 [BIS4430, LU11 version1.0, E.M, 09/07)] A fully dynamic e-commerce site must be able to send and retrieve data from the user and some form of data storage on the server. This unit will introduce the basics of the ActiveX Data Objects (ADO.NET), which provide the interface between the database and ASP.NET. We will show you how to create an Open Database Connectivity (ODBC) data source, which is then used in an ASP.NET programme to retrieve and manipulate data from an example database. You will be using the tool, Web Matrix, to develop your applications in ASP.NET. The activities will guide you through developing the applications using the tool. We are going to introduce the techniques for combining VBScript and HTML to build a Web page consisting of static content (HTML) and dynamic data (VBScript). To be more specific, you will learn how to send data from the server to the client, and retrieve data that is sent from the client to the server by submitting a form. In other words, how you can handle inquiries to your site by retrieving and evaluating user input. Do not worry if you do not have any Visual Basic programming experience. All VBScript that appears in the example ASP.NET code in this unit is explained. As you will see, VBScript is really simple to get started with and master. Learning Outcomes At the end of this unit you should be able to: Describe ASP.NET architecture and explain how an ASP.NET file is handled by a Web server; Write and execute ASP.NET files by calling them from a Web browser; Create an ODBC data source and use ADO.NET objects to open a database Execute a SQL statement and handle the resulting dataset; Insert records to a database using different methods SQL command INSERT or the Add method of the OleDbCommand object; Update data in a database using different methods SQL command UPDATE or the Add method of the OleDbCommand object; Delete records from a database using different methods SQL command DELETE or the Add method of the OleDbCommand object; Create and manipulate disconnected DataSets

2 Required Study Time You should plan to spend approximately 18 hours studying this unit. You may find it convenient to break up your study as follows: Activity Time Preparation (Introduction and On-line 0.5 hrs Planning): Disk-based Content: 4.5 hrs Application: 5 hrs Set textbook Content: 3 hrs Thinking (On-line discussions, Review 2 hrs questions): Tutorial Work: 1 hrs Related Course Work: 2 hrs Total: 18 Hours Equipment/Software Required A Web browser for browsing Web sites and Web-based database applications. Internet Explorer 5.0 is recommended. Personal web server (IIS) on windows XP Word Processor/Text editor, i.e. Microsoft Word, Word Pad, Note Pad Web Matrix, available from Microsoft Access or Oracle 8i or later versions. Reading Materials Core Text Module Reader BIS4430 Web-based Information Systems Management, chapter 11 Supplementary Texts ASP.NET in a Nutshell, Duthie & MacDonald, 2003, O'Reilly ISBN Connolly, T. and Begg, C., 2002, Database Systems: A Practical Approach to Design, Implementation, and Management, Addison Wesley, Harlow, England J. Buyens, Web Database Development; Step by Step,.NET Edition, Microsoft Press, 2002, ISBN

3 CONTENT Introduction Active Server Pages (ASP) provides an environment based on server-side scripting that is conducive to creating dynamic, interactive applications that don t consume enormous amounts of processing time. It is browser and language independent. The default scripting language for ASP is VBScript which will be used in this module. ASP runs in-process with the server, and is multithreaded and optimised to handle a large volume of users. ASP is built around files with the extension.asp, which can contain any combination of the following: Text; HTML tags, delimited by the usual angle-bracket < and > symbols; Script commands and output expressions, delimited by <% and %> symbols. The architecture for ASP is shown in figure 11.1 below: Client ASP files Client Internet/intranet IIS Server Dynamic HTML File Scripting engine Client Active X components Figure 11.1 ASP architecture An ASP script starts to run when a browser requests an.asp file from the Web server. The Web server then calls ASP, which reads through the requested file from top to bottom, executes any commands, and sends the generated HTML page back to the browser. It is possible to generate client-side scripts within a server-side generated HTML file by simply including the script as text within the ASP script. ActiveX Data Objects (ADO) is a programming extension of ASP supported by the IIS for database connectivity. A newer version of ASP (and the version we will use in this unit) is ASP.NET. It introduces a new namespace (asp:) for ASP.NET tags, and a new attribute (runat). Tags with the runat attribute set to server are, as the attribute suggests, run on the server.

4 For every HTML page, ASP.NET provides a code behind page. The code behind page contains code, written in C#, Visual Basic.NET or JScript.NET, or an opensource language such as Perl or Python, that is executed when the user interacts with form elements created using the asp: namespace and the runat= server attribute. In this unit we will concentrate on Visual Basic.NET as it is very simple to learn and the constructions will be helpful when moving onto JavaScript in unit 12. Well designed ASP.NET applications usually decompose into something approximating to the following tiers: Presentation (client side HTML) Presentation (server side, code-behind pages) Business logic Data access Database Database connectivity is dealt with in the data access layer. The data access layer can create and manipulate all the data access objects available in the chosen implementation language. Microsoft provides a variety of data access objects such as: Connections Commands Relations Data adaptors Datasets Data tables Data rows Data columns Data constraints Data readers (for forward only, read only access) These objects are provided via ADO.NET. These will be discussed in the next section From ASP to ASP.NET Active server pages (ASP) has been used by many programmers for many years as a server side scripting language. ASP allows data access to satisfy user queries and thus enables us to create dynamic web pages. This is carried out by embedding visual basic scripts in HTML. However, several limitations of using ASP lead to a newer version of ASP that utilises Microsoft s.net framework. The reasons for emergence of the ASP.Net version are as follows: VBscripts are not reusable modules. Functions and subroutines that are written in separate files are needed to be included in Web pages many times. Lack of utilising operating system functionalities. Codes are dispersed in different places and therefore tracking and maintenance become very laborious.

5 Scripts and web designing codes are mixed together and therefore may cause confusion. ASP.NET attempts to resolve all these issues by: using any programming language that support.net framework, for example, visual Basic or C#. allowing programming languages to access entire.net framework and to utilise the operating system facilities allowing to create your own objects and tags separating the program modules from web page design codes. Web Environment for ASP.NET As we have discussed before, ASP and ASP.NET run on the web server. If you load the ASP or ASP.NET pages directly from your local disk into your browser, it will not work. To make your ASP.NET programs to run in your browser, you need to set appropriate web environment. The ASP.NET needs to be uploaded to a web server for immediate access by visitors. FTP web service can be used to upload the ASP.NET files to the web server. However, it is quite often required to test the ASP.NET files before you upload the files to the web server, and therefore, you may wish to have a personal web server to test the files running in your own computer. The most popular approach of creating your own personal web server (PWS) is to use Microsoft Internet Information Servicess (IIS) that comes with your Windows XP Professional operating system. If you are using Microsoft XP Professional operating system, you may install IIS version However, you also need to install Microsoft.NET framework to run your ASP.Net pages. The.NET framework includes the Visual Basic.NET and C#.NET compilers. These compilers with the help of runtime and other files which are also included in the Framework, are able to run ASP.NET pages. Unlike ASP, ASP.NET uses common language runtime, runtime in short, in order to execute.net intermediate codes produced by.net compilers. Runtime allows the intermediate codes to access operating system s application programming interface (API), hence, can use all the facilities that are provided by an operating system. The.NET Framework also includes Microsoft Data Access Components (MDAC). MDAC is a package of ActiveX Data Objects.NET (ADO.NET). MDAC version 2.7 includes ADO.NET which provides required database access drivers that ASP.NET can use. MDAC allows an ASP.NET page to carry on required tasks on databases.

6 The diagram below demonstrates the steps for processing ASP.NET files: Web request processing of request Client internet web server (IIS) HTML viewed HTML received based on aspx extension processing is handed over to.net engine use appropriate data and HTML is returned access objects and data to web server is returned database ADO.NET object ASP.NET engine data is requested request source code is and returned for appropriate returned to the file engine Figure 11.2 Steps for ASP.NET processing File repository Whilst PCs in the university labs should have the.net framework already installed, you may download it for personal use from the Microsoft download site, i.e ADO.NET objects ADO.NET objects that are provided by MDAC 2.7 offer a wide range of database access activities. It also supports in utilising operating system s API to facilitate data manipulation. ADO.NET objects can interact with a database in many ways, for example, it may send a request to a database for immediate execution it may send a request to a database to return a group of data it may send a request to a database to return a group of data in order to carry on processing tasks in the computer memory ADO.NET has a set of objects that carry on above tasks. The table below list the objects and their functions. Facilities Object Name Function All OleDbConnection Establish a connection with a DBMS Individual command OleDbCommand Execute SQL of a database Reading data OleDbReader Runs a query and read-only access Read into memory and OleDbDataAdapter Execute and store results manipulate Read into memory and manipulate DataSet Store one or more data tables Read into memory and DataTable Store data in rows and columns

7 manipulate Read into memory and manipulate DataRelation Establish a logical relationship among tables Read into memory and manipulate DataView Show the contents of data tables Table 11.1 ADO.NET Database interaction functions Prior to using ADO.NET objects, you need to establish a connection with ADO.NET. This can be done by assigning values for a few parameters. A list of necessary parameters is given below: Parameter Parameter value Provider Access: Microsoft.Jet.OLEDB.4.0 Oracle: SDAORA Data Source Access: filename.mdb (physical path and file name) Oracle: ora815 (Oracle assigned server name) User ID Username for Access and Oracle Password Password for Access user and Oracle user Table 11.2 Connection parameters An example of establishing a connection with ADO.NET 1. Dim MyCon as OleDBConnection 2. DefCon = provider=microsoft.jet.oledb.4.0; &_ 3. Data Source = E:\Examples\employee.mdb 4. MyCon = New OleDbConnection(DefCon) 5. MyCon.Open() In the example above a variable, MyCon, for OleDbConnection is declared (line 1). Connection string is constructed in line 2 and 3. Note that the parameters provider and Data Source are used here. You can assign appropriate value for these parameters. Line 4 has created an OleDbConnection object. Finally you can open the connection using the Open() method of the connection object. Similarly you may close the connection using Close() method. J. Buyens, Web Database Development; Step by Step,.NET Edition, Microsoft Press, 2002, ISBN Chapter 1-2 and pp: OPTIONAL not for use on university pc Activity 11.1 Installing IIS and setting your web environment Now do Review Question 11.1

8 11.4 An example ASP.NET file In the section above we have seen how you can create and configure your own web server. In this section we will see how you can create your own ASP.NET file. However, we will use a tool, called Web Matrix, to create our introductory ASP.NET file and to run it in the web server. Web Matrix can be downloaded from Web Matrix will allow you to design and run your very first ASP.NET application. The good news is Web Matrix creates a personal web server for you and therefore, you don t need to configure or create your own web server. Once you have installed web Matrix, it should appear on the program menu. See figure 11.3 below: Figure 11.3 Web Matrix in Program Menu. Now we open the Web Matrix program and select ASP.NET Page. Then enter appropriate folder and file name. Make sure that your file name has got aspx extension.

9 Figure 11.4 Creating a new.aspx file inweb Matrix Now drag and drop appropriate web controls. For example if we wish to display database records in the web browser, we need to select data grid web controls. We also need to establish a connection with the back end database. Establishing the connection with the back end database This section assumes you are using MS ACCESS for your database. Obviously other formats, such as Oracle 8i are also appropriate, but we will stick with the Microsoft product in these explanations. 1. Make sure you have an appropriate database 2. Select the Data Tab at the right hand side of the panel 3. Then select database+ icon at the top of the right hand panel. See the diagram below. 4. It will prompt for database name. Make sure you have entered the path properly 5. Now you are connected with the back end database Using datagrids Data grids allow you to capture data from a database and to display the records on your browser. Therefore, you need to create a data grid for your ASP.NET application. You can do that very easily by using web matrix datagrid web controls. Select and drop the datagrid web control on your web matrix design editor. You should be able to see a table as below. Make sure you enter an appropriate ID for the datagrid in the property panel located at the right hand side lower panel. You will notice that the ID is set to MyDataGrid in this example.

10 Figure 11.5 Adding source code Now you need to add a method that will retrieve the data from your back end database. To carry out this task: Select Code Tab at the bottom of the designer editor drag and drop Select Query Builder on the editor A query builder will appear and prompt for database name. Note that a database name is already in the text box, since you connected to a database when you started (see figure 11.6 below) Figure 11.6 Query builder All column of your database will appear on the query builder

11 Construct the select query by selecting all the columns Now it will prompt for a function name. You may enter any appropriate function name (see figure 11.7 below). Note that a function name ExecuteQuery is entered in this example. You need to select DataReader radio button in order to read and manipulate the records (see table 11.1 in the previous section). Figure 11.7 Constructing a select query Now you have created a datagrid and that is bound to a database. Web matrix will write a function when it has accomplished the query building task. The name of the function is ExecuteQuery. Now you need to attach the function name with the datagrid. To achieve this you need to add the following code: MyDataGrid.DataSource()=ExecuteQuery() MyDataGridDataSource().DataBind() To display the datagrid when the page is first loaded, you need to use the Page_Load event handler. Therefore you need to place the code above as Sub Page_Load(sender as object, e as EventArgs) MyDataGrid.DataSource()=ExecuteQuery() MyDataGridDataSource().DataBind() End Sub So, the overall code should look like the following screen shot

12 Figure 11.8 Final DataGrid example code Running the ASP.NET file To run the ASP.NET file in you browser, go to View and then select Start. The web server, created by web matrix, will ask for port number (see the screen shot below). You can assign a port number that will not conflict with other ports. If the port number does not conflict with any other port you should be able to see the contents of your database on the browser. Figure 11.9 Starting the Web Application You have just created your very first ASP.NET page. The following sections will examine the codes in detail as it is not a good idea to rely on generated code. Now carry out Activity 11.2 Create and Run your own ASP.NET Application Learning Outcome: Write and execute ASP.NET files

13 11.5 Open Database Connectivity Microsoft ActiveX Data Objects (ADO.NET), which we discussed in section 11.3 provides a programming interface between a Web database page and various data sources. ADO provides a broad assortment of objects, methods, and properties. We will now discuss the concept of open database connectivity. ODBC is a data source that provides access to many relational database systems, including Microsoft Access and Microsoft SQL Server. This section will show how they can be used to open a database in an ASP.NET page. In following sections we will discuss how to manage SQL statements for data retrieval and manipulation in an ASP.NET page. ODBC provides an interface that allows applications to access data from different data sources, such as dedicated databases or text files. ODBC is an open, vendorindependent data access method which allows data stored in different formats and databases to be retrieved in a uniform way. It is a widely used interface to access relational data. With ODBC, you can easily connect to Microsoft Access, Microsoft SQL Server, Oracle, DB2 and many more. The figure below provides a graphic illustration of the layers between an application and the underlying database if ADO.NET is in use. ASP.NET application ADO.NET OLE DB ODBC Data Source Figure 11.10: Data access architecture Creating and Configuring an ODBC Data Source ADO.NET can use different data providers to connect to almost any kind of data source. The most accesible provider is ODBC. It offers the possibility to create the DSNs (Data Source Names), through which you can easily connect to any kind of database.

14 We will use an example in this section to show how ODBC connection and data source can be established, through which, the targeted database can be accessed. Let us create a database recruitment.dbm in MSAccess which will be our underlying database in the example. The definition of recruitment.dbm is given below: Field Name Data Type Field Size Indexed JobID AutoNumber Long Integer Yes (Primary Key) CompanyID Number Long Integer No (Foreign key reference to Company table) JobTitle Text 50 Yes(duplicates OK) EstimatedSalary Currency General Number (format) No JobDescription Memo No JobRequirement Memo No SearchKeyword Text 255 Yes(duplicates OK) ViewCounter Number Long Integer No DateEntered Date/Time Short Date (format) No Contact Text 255 No CompanyJobReference Text 255 No Table 11.3 Job List Field Name Data Type Field Size Indexed CompanyID Number Long Integer No (Primary Key) CompanyName Text 50 Yes(duplicates OK) Address Text 50 No City Text 50 No State Text 50 No PostCode Text 20 No Phone Text 50 No Fax Text 50 No Text 255 No ReferenceURL Text 255 No CompanyInformation Memo Recruiter Yes/No No Table 11.4: Company Table: Click here to download the recruitment database. Some sample data has already been included. Create the ODBC DSN 1. Click on Start, Settings, Control Panel to open the Control Panel. 2. Open the Administrative tools in XP and then select ODBC Data Source. 3. Choose the System DSN tab to enable all users of your computer to have access to the new ODBC data source. 4. Click Add to create a new System data source. 5. Select the Microsoft Access Driver (*.mdb) and click Finish. 6. The ODBC Microsoft Access Setup window appears. 7. Fill in the Data Source Name (DSN) Recruitment, which is used to refer to the DSN. Fill in the description you want, which might be Access Recruitment Database. 8. Click Select button in the Database frame. 9. The Select Database window appears. Select the database file Recruitment.mdb. You need to identify the directory where the copy of the database is stored.

15 10. Finish creating the DSN by clicking OK in the ODBC Setup window. 11. You can see the Recruitment System Data source is added in the ODBC Data source Administrator. 12. Close the ODBC Data source Administrator by clicking OK. You have now created an ODBC data source with the DSN Recruitment, which will provide data from the Access Recruitment database to any application. Activity 11.3 Create and define an ODBC DSN for your database. Learning outcome: Create an ODBC data source and use ADO.NET objects to open a database Now do Review Questions Accessing the Recruitment database To retrieve data from a database in ASP.NET, perform the following steps: 1. Open a connection to a database. 2. Create a recordset, which provides access to the data fields of each record. 3. Retrieve data from the fields of the recordset. 4. Close the recordset and the connection. The following steps show how you can write your basic ASP.NET code to retrieve data from the Recruitment database. Step 1: Add the basic HTML code in Web Matrix <html> <head> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> </body> </html> Step 2: Add datagrid to read table data <html> <head> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html>

16 The asp:datagrid control displays data in the browser as you can see them when you open Access database. DataGrid or any other webcontrols that store, display or manipulate database data should have an ID and in this example, it is RecruitmentGrid. Note the runat attribute. The runat attribute specifically tells ASP.NET to process the tag on the web server, not on client machine. One point is worth mentioning that, it is compulsory that you add the runat tag each time you define any webcontrol. Step 3: Setting your environment You need to add few lines before the <html> tag to let your ASP.NET application access and utilise objects that it requires. Page LANGUAGE = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html> The programming language for this ASP.NET is set to Visual Basic and it makes all System.Data and System.Data.OleDb classes available to ASP.NET. The OLE DB is an interface that allows ASP.NET to work on Access or Oracle database. Step 4: Adding tags for VB codes Now, we need to add visual basic codes, i.e. routines and functions, so that it can open the recruitment database and can fetch the records into the datagrid. You need to create an area to let ASP.NET know where your vb code resides. You can do that by writing the following tags. Page LANGUAGE = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html>

17 Step 5: Adding Page_Load subroutine Page_Load subroutine allows the ASP.NET code to connect and to open the backend database and to store the data into datagrid. Write the code for this subroutine add the following lines at the area that you just have created using script tag. Page LANGUAGE = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) End Sub </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html> Step 6: Define and open a database connection We already have seen how you can define a connection in ASP.NET connection in unit 6. However, we will see the code again here. Page LANGUAGE = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open End Sub </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid>

18 </body> </html> You need to declare a variable that can hold connection object instances. The variable ObjConn is the variable in this code that holds connection object instances. A connection string contains a series of argument = value statements separated by semicolons. DSN: Specifies the name of the ODBC data source for the connection. Database: Specifies the database to which the connection should be established. UID: Provides the user ID for login to the database. PWD: Presents the password of the user to the database. Note the Server.MapPath method in the code. The Server.MapPath has an ability to convert a physical path to a relative URL to avoid any confusion when you upload your file to webserver. The next few lines show how you can create a connection using Microsoft Jet OleDB driver. However, it is also possible that you can use DSN to establish such connection. For example the code below shows how you can use DSN to establish a connection. Dim objconn Dim strconnection Set objconn = Server.CreateObject( ADODB.Connection ) strconnection = DSN=Recruitment; Database=Recruitment; strconnection = strconnection & UID=; PWD=; objconn.open strconnection Step 7: Storing database commands Now we need to create an object that will hold database commands. Add the following code: Page LANGUAGE = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrQuery As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open

19 StrQuery= New OleDbCommand( _ Select JobTitle, EstimatedSalary from JobList, _ objconn) End Sub </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html> The SQL query is stored in StrQuery. When it is executed against a database, the database returns the fields JobTitle and EstimatedSalary from all records of the database table JobList. Note that the StrQuery object not only holds the database SQL command but also a pointer to the database connection that you have created. Step 8: Retrieving data from database The object that plays the vital role in retrieving the data from the database is OleDbDataReader. We need to create an object instance of OleDbDataReader. Add the following lines into your code: Page LANGUAGE = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrQuery As OleDbCommand Dim objrs As OleDbDataReader objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open StrQuery= New OleDbCommand( _ Select JobTitle, EstimatedSalary from JobList, _ objconn) objrs= StrQuery.ExecuteReader objrs.close End Sub </script> <title> Recruitment Information </title> </head> <body>

20 <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html> The objrs creates a new instance of OleDbReader and then executes the StrQuery. The SQL statements are executed by the ODBC driver or the database and not by ASP.NET. The OleDbDataReader object objrs includes all rows that have been returned from the database as a result of the SQL query execution. DataReader does not allow you to move randomly on the records. It also does not allow you to carry out update operations on the records. Step 9: Copying records from DataReader to DataGrid Now add the lines below to your code in order to copy the records from DataReader object to the DataGrid, RecruitmentGrid, that you defined in the HTML section. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrQuery As OleDbCommand Dim objrs As OleDbDataReader objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open StrQuery= New OleDbCommand( _ Select JobTitle, EstimatedSalary from JobList, _ objconn) objrs= StrQuery.ExecuteReader RecruitmentGrid.DataSource=objRS RecruitmentGrid.DataBind End Sub </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server >

21 </asp:datagrid> </body> </html> Step 10: Tidy up the code Now it is time to tidy up your code a bit by closing and freeing up all the connection, resources that your code has used. To carry out the task add the following lines. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrQuery As OleDbCommand Dim objrs As OleDbDataReader objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open StrQuery= New OleDbCommand( _ Select JobTitle, EstimatedSalary from JobList, _ objconn) objrs= StrQuery.ExecuteReader RecruitmentGrid.DataSource=objRS RecruitmentGrid.DataBind objconn.close StrQuery.Dispose ObjRS.Close End Sub </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html> It is important that you destroy any object that utilises system overheads when the task is accomplished. The line StrQuery.Dispose performs that task. Remember, as we have discussed in unit 6, you need to upload the aspx file to the web server in order to view the output. Alternatively, you can use web matrix tool to execute the code. The following activity will assist you to carry out the task.

22 Now do Review Questions 11.4 & 11.5 Activity 11.4 Access backend database records using ADO.NET objects Learning outcome: Create an ODBC data source and use ADO.NET objects to open a database Make notes in your learning journal of your learning process before you proceed to the next section Executing queries and handling the returned data In the previous section, we have seen how we can use the OleDbCommand object s ExecuteReader method. The example below will show you how you can perform processing tasks on the returned data after execution of a query. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrQuery As OleDbCommand Dim objrs As OleDbDataReader objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open StrQuery= New OleDbCommand( _ SELECT Company.CompanyName, &_ COUNT(JobList.JobID) as NumJobs &_ FROM Company INNER JOIN JobList on &_ Company.CompanyID = JobList.CompanyID &_ GROUP BY Company.CompanyName &_ HAVING COUNT(JobList.JobID)>0 &_ ORDER BY COUNT(JobList.JobID), _ objconn) objrs= StrQuery.ExecuteReader End Sub </script> <title> Recruitment Information </title> </head> <body> The companies that have job(s) available, together with the number of jobs are listed. The output is ordered ascending

23 by the number of jobs. <BR><BR> <% While objrs.read() Response.Write objrs( CompanyName ) & : Response.Write objrs( NumJobs ) & -Job<BR> End While objconn.close StrQuery.Dispose ObjRS.Close %> </body> </html> The method Read() will allow you to go through the contents of the OleDbDataReader object which holds the returned data. All rows of the dataset are returned and values of the fields are written to the browser by using a While loop. Read method of OleDbDataReader set the cursor points to the first returned row. With every loop through the data set it writes the data on the browser using Response.Write. Then the cursor is moved to the next row to do the same and keep on doing it until it reaches to the end. It is also possible that we can use a DataAdapter object for selecting and to hold the query results in a DataTable. The DataAdapter provides more flexibility when processing query results as it allows you to store resultant rows in a DataTable. In order to use DataAdapter object you need to replace OleDbCommand objects with the OleDbDataAdapter object. Look at the code below: Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrQuery As OleDbDataAdapter objconn = New OleDbConnection(_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open StrQuery= New OleDbDataAdapter( _ Select JobTitle, EstimatedSalary from JobList, _ objconn) ObjRS= New DataSet() StrQuery.Fill(ObjRS, Job_Salary ) RecruitmentGrid.DataSource=ObjRS.Tables( Job_Salary ) RecruitmentGrid.DataBind objconn.close StrQuery.Dispose ObjRS.Close

24 End Sub </script> <title> Recruitment Information </title> </head> <body> <h1>recruitment Information</h1> <asp:datagrid id= RecruitmentGrid runat= server > </asp:datagrid> </body> </html> Check the lines highlighted in blue. Note that StrQuery is declared as an instance of the OleDbDataAdapter object, instead of the OleDbDataReader as you have seen in the previous example (Section 11.6). The DataSet object instance ObjRS can hold one or more data tables in memory. This object instance is used by the StrQuery object to store data in a Data Table, Job_Salary. The ExecuteReader method is replaced with Fill method of OleDbDataAdapter (see Section 11.6 code). The Fill method of OleDbDataAdapter executes the query and stores the returned rows in the Job_Salary DataTable for future processing. You may wish to access any particular data of the Data Table that you just have created. For example, if you like to access any particular row of the Job_Salary, you can use the following fragment of the code. objrs.tables( Job_Salary ).Rows(1) The numeric subscript of the row denotes the second row of the table as row subscripts are 0 based. The code above returns the second row of the Job_Salary DataTable. We will see more on DataTable, DataSet and DataAdapter later in this unit. Now do Review Question 11.6 Activity 11.5 Searching records from Appointment table Learning outcome: Execute a SQL statement and handle the resulting dataset Activity 11.6 Searching records from Consultant table Learning outcome: Execute a SQL statement and handle the resulting dataset 11.8 Inserting records to the backend database There are two ways to insert data from ASP.NET to a database. Executing an SQL statement with the INSERT command against the database. Using the Add method of the Parameters object to append a record, fill the fields of the record, and write the records to the database. Using SQL INSERT Command

25 The sample script below creates and opens a connection to the Recruitment database, then writes a record to the JobList table of the database using an INSERT statement. The OleDbCommand or SqlCommand object use ExecuteNonQuery method to append and insert records in a database. The code below will show you how you can use the objects and methods to execute INSERT statement. The code is very similar to the one that you have seen in section The statements which are different than the code in section 11.7 are shown in blue colour. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrInsert As String Dim objrs As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open strinsert = INSERT INTO Company &_ (CompanyName, City) &_ VALUES ( Blue Bird, Leeds ) objrs= New OleDbCommand(strInsert, objconn) objrs.executenonquery End Sub </script> <title> Recruitment Information </title> </head> <body> <BR><BR> <% While objrs.read() Response.Write objrs( CompanyName ) & : Response.Write objrs( City ) & -City<BR> End While objconn.close StrQuery.Dispose ObjRS.Close %> </body> </html> StrInsert is declared as a String that stores the SQL INSERT statements. StrInsert adds new record to the Company table and inserts the values from the VALUES list into the appropriate fields. ObjRS executes the SQL stored in strinsert against the database using the ExecuteNonQuery method of the

26 already opened connection. As a result, the new record will be inserted into the Company table in the Recruitment database. The HTML section displays the whole data set to the client. Using Add Method of OleDbCommand Object The above ASP.NET script, which only writes the data that are defined in the code to the database, is not very useful. We need to extend the ASP.NET page to collect information from the client and then to stores it in the database. The following script uses the Add method of OleDbCommand for executing an INSERT SQL statement. The script below will enable you to accept values from users using a form and then to add new values in JobList table. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Button_Click(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrInsert As String Dim objrs As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open strinsert = INSERT INTO Company &_ (CompanyName, City) &_ VALUES objrs= New OleDbCommand(strInsert, objconn) txtcity.text) objrs.executenonquery objcon.close End Sub </script> <title> Recruitment Information </title> </head> <body> <form Runat= Server > <b> Company Name:</b> <br> <asp:textbox ID = TxtCompany Runat= Server /> <br> <p> <b> City : </b> <br> <asp:textbox ID = TxtCity Runat= Server /> txtcompany.text)

27 <p> <br> <asp:button Text = Add OnClick = Button_Click Runat= Server /> </form> </body> </html> Note the blue coloured lines in the code. We have used the same SQL INSERT statement as we did in the previous example, but in this case the values for the INSERT statement are shown which are parameters. The parameters accept the values that are inserted by the users using the TxtComany and TxtCity textbox (defined in HTML body section). To execute the query, users need to click a button (defined in HTML body section) in order to invoke the Button_Click subroutine. Note that, you will not be able to insert records if it violates entity and referential integrities or if there is any data type mismatch. Connolly, T. and Begg, C., 2002, Database Systems: A Practical Approach to Design, Implementation, and Management, Addison Wesley, Harlow, England Chapter 28: Web Technology and DBMS J. Buyens, Web Database Development; Step by Step,.NET Edition, Microsoft Press, 2002, ISBN Activity 11.7 Inserting Records in Consultant Table Learning outcome: Insert records to a database using different methods SQL command INSERT or the Add method of the OleDbCommand object; Activity 11.8 Inserting Records in Patient Table Learning outcome: Insert records to a database using different methods SQL command INSERT or the Add method of the OleDbCommand object; Now Do Review Questions 11.7 & Updating records of the backend database There are two ways to update data from an ASP.NET to a database. Executing an SQL statement with the UPDATE command against the database. Using Add method of Parameters object to append a record. Using SQL UPDATE Command

28 The SQL UPDATE command needs to be executed only to change database data, and it is simple to use in your script with the following format: UPDATE TableName SET ColumnName1 = Value1, ColumnName2 = Value2 WHERE Condition You may use as many ColumnName = Value pairs as you want. You may also update multiple record rows at once. For example: UPDATE JobList SET EstimatedSalary = EstimatedSalary * 1.10 or, with condition: UPDATE JobList SET EstimatedSalary = EstimatedSalary * 1.10 WHERE JobTitle = Network Administrators Using UPDATE SQL command consumes less Web server resources in comparison to the recordset s UPDATE method because it is executed entirely on the database server, and no Data Table needs to be created and stored. The UPDATE SQL command is executed by using the ExecuteNonQuery method on a Connection with the SQL UPDATE statement as a parameter. The sample script below creates and opens a connection to the Recruitment database, then update a record of the JobList table of the database using an UPDATE statement. The OleDbCommand or SqlCommand object use ExecuteNonQuery method to append and insert records in a database. The code below will show you how you can use the objects and methods to execute the INSERT statement. The code is very similar to the one that you have seen in section The statements which are different than the code in section 11.8 are shown in blue. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrUpdate As String Dim objrs As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open strupdate = Update JobList &_ SET EstimatedSalary = &_ EstimatedSalary * 1.10 &_ WHERE JobTitle = Network Administrators objrs= New OleDbCommand(strUpdate, objconn) objrs.executenonquery End Sub

29 </script> <title> Recruitment Information </title> </head> <body> <BR><BR> <% While objrs.read() Response.Write objrs( EstimatedSalary ) & : Response.Write objrs( JobTitle )<BR> End While objconn.close StrQuery.Dispose ObjRS.Close %> </body> </html> StrUpdate is declared as String that stores the SQL UPDATE statements. StrUpdate amend the JobList table and inserts the new estimated salary for Network Administrator. ObjRS executes the SQL stored in strupdate against the database using the ExecuteNonQuery method of the already opened connection. As a result, the record will update the EstimatedSalary of JobList table for Network Administrator. The HTML section displays the whole data set to the client. Using Add Method of OleDbCommand Object Now see the code below which is not very different the code presented in section 11.8 (Using the Add method of OleDbCommand Object). The statements that are different to the code in section 11.8 are shown in blue. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Button_Click(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrUpdate As String Dim objrs As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open strupdate = Update JobList &_ SET EstimatedSalary &_ WHERE JobTitle objrs= New OleDbCommand(strUpdate, objconn) &_

30 txtestimatedsalary.text) txtjobtitle.text) objrs.executenonquery objcon.close End Sub </script> <title> Recruitment Information </title> </head> <body> <form Runat= Server > <b> Estimated Salary:</b> <br> <asp:textbox ID = TxtEstimatedSalary Runat= Server /> <br> <p> <b> Job Title : </b> <br> <asp:textbox ID = TxtJobTitle Runat= Server /> <p> <br> <asp:button Text = Update OnClick = Button_Click Runat= Server /> </form> </body> </html> Note the blue coloured lines in the code. We have used the same SQL UPDATE here, but in this case the values for UPDATE statement are accepted from two text boxes, TxtEstimatedSalary and TxtJobTitle attached parameters respectively. The parameters accept the values that are inserted in the text boxes by the users (defined in HTML body section). To execute the query, users need to click a button Update (defined in HTML body section) in order to invoke the Button_Click subroutine. Activity 11.9 Updating Records in Consultant Table Learning outcome: Updating data in a database using different methods SQL command UPDATE or the Add method of the OleDbCommand object; Activity Updating Records in Patient Table Learning outcome: Updating data in a database using different methods SQL command UPDATE or the Add method of the OleDbCommand object; Now Do Review Questions 11.9 & 11.10

31 11.10 Deleting Data from a Database Besides inserting new record to a database and modifying any existing database records, it is also desirable to delete records that are not needed any more. Deleting helps regain database space and speeds up retrieval because fewer rows need to be searched. Like insert and update operations, there are two techniques you may use for deleting a data record: SQL DELETE command Delete method of the recordset Using the SQL DELETE Command The advantages of using SQL DELETE command include: Direct deletion of all records in a database that meet a certain criterion. Less Web server resources. Executing an SQL DELETE command means that all records that meet the WHERE clause of the DELETE statement are deleted. For example, DELETE FROM Company WHERE CompanyName = Blue Bird This SQL statement is executed just like the INSERT and UPDATE statements using it as a parameter in ExecuteNonQuery method of the connection object. See the example below. The code is very similar to the one that you have seen in the section 11.9, however, the differences are highlighted in blue. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Page_Load(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrDelete As String Dim objrs As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open strdelete = DELETE FROM &_ Company WHERE CompanyName = Blue Bird objrs= New OleDbCommand(strDelete, objconn) objrs.executenonquery End Sub </script> <title> Recruitment Information </title> </head>

32 <body> <BR><BR> <% While objrs.read() Response.Write objrs( CompanyName ) & : Response.Write objrs( City ) & -City<BR> End While objconn.close StrQuery.Dispose ObjRS.Close %> </body> </html> StrDelete is declared as String that stores the SQL DELETE statement. StrDelete delete a record in the Company table where the CompanyName is Blue Bird. ObjRS executes the SQL stored in strdelete against the database using the ExecuteNonQuery method of the already opened connection. As a result, the record for Blue Bird will be deleted. The HTML section displays the whole data set to the client. Using the Add method of OleDbCommand for delete operation Now see the code below which is not very different from the code presented in section 11.9 (Using Add method of OleDbCommand Object). The statements that are different to those in section 11.9 are shown in blue. Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Sub Button_Click(sender As Object, e As EventArgs) Dim objconn As OleDbConnection Dim StrDelete As String Dim objrs As OleDbCommand objconn = New OleDbConnection (_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open strdelete = Delete from Company &_ WHERE CompanyName objrs= New OleDbCommand(strUpdate, objconn) &_ txtcompanyname.text) objrs.executenonquery objcon.close

33 End Sub </script> <title> Delete Company </title> </head> <body> <form Runat= Server > <b> Company Name:</b> <br> <asp:textbox ID = TxtCompanyName Runat= Server /> <br> <p> <p> <br> <asp:button Text = Delete OnClick = Button_Click Runat= Server /> </form> </body> </html> Note the blue coloured lines in the code. We have used the same SQL DELETE here, but in this case the values for DELETE statement are accepted from a text box, TxtCompanyName is attached parameter. The parameter accepts the values that are inserted in the text boxes by the users (defined in HTML body section). To execute the query, users need to click a button Delete (defined in HTML body section) in order to invoke The Button_Click subroutine. Now carry out Activity Deleting records from Patient Table Learning Outcome: Deleting records from a database using different methods SQL command DELETE or the Delete method of the Record object; Now carry out Activity Deleting records from Consultant Table Learning Outcome: Deleting records from a database using different methods SQL command DELETE or the Delete method of the Record object; Now Do Review Question Introduction to disconnected DataSets All the examples we have seen before mainly deal with OleDbCommand or DataReader classes in order to execute queries on the tables that are stored in hard disk. In this section we will see how you can work with disconnected tables, that is, the tables that you create programmatically and manipulate the record of these tables that reside in your computer memory. The ADO.NET classes that we need to use for this purpose are:

34 DataAdapter DataSet DataTable We will see the function of these classes in the following sections. Creating DataSet It is possible to create a DataSet from an existing table that is stored in your hard disk. For this purpose we need to use DataAdapter. Let s revisit the code that we have seen in Section 11.7: Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Dim objconn As OleDbConnection Dim StrQuery As OleDbDataAdapter Dim objrs as DataSet objconn = New OleDbConnection(_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) objconn.open StrQuery= New OleDbDataAdapter( _ Select JobTitle, EstimatedSalary from JobList, &_ objconn) ObjRS= New DataSet() StrQuery.Fill(ObjRS, Job_Salary ) </script> <body> </body> </html> The code above is executing these steps: - creating a DataSet - creating a database connection - creating an object of type OleDbDataAdapter passing the SQL statement and connection name by using Fill method of the OleDbDataAdapter passing the name of the DataSet and a table name where you want your data to be stored. The DataTable s name is Job_Salary in this case. You can bind that DataSet with a datagrid as you did for backend databases. For example, the DataSet ObjRS can bind with a datagrid, JobGrid as: JobGrid.DataSource = ObjRs JobGrid.DataBind()

35 Creating your own data tables and adding rows The section above has shown how you can create a DataSet from an existing table. However, you can create your own DataTable without copying data from the existing tables. See the code below: Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Dim dtjob As DataTable Dim JobCol As DataColumn Dim JobRow As DataRow dtjob = New DataTable( Job_Salary ) jobcol = New DataColumn( JobTitle, GetType(String)) dtjob.columns.add(jobcol) jobcol = New DataColumn( EstimatedSalary, GetType(Int32)) dtjob.columns.add(jobcol) jobrow = dtjob.newrow() jobrow( JobTitle )= Network Administrator jobrow( EstimatedSalary )= dtjob.rows.add(jobrow) For each jobrow in dtjob.rows For each jobcol in dtjob.columns Response.write(jobRow(jobCol)) Next Next </script> <body> </body> </html> The code above, has created a DataTable dtjob by executing the following statement. dtjob = New DataTable( Job_Salary ) Add() method of DataTable is used for adding new columns and records. In this example the jobcol of type DataColumn and jobrow of type DataRow parameters have been passed using Add() method. A new column of the DataTable is created using the statement below: jobcol = New DataColumn( JobTitle, GetType(String))

36 GetType property denotes the column type which is String in this case. Subsequently, new row is also created to the table using the statement below: jobrow = dtjob.newrow() Data value is added for each column of the DataTable using JobRow( ColumnName ). Note that there is no connection object for this code as we are working with disconnected DataTables. Modifying a DataTable Manipulating the data contents stored in a DataTable is possible by using Delete() and Update() method. Look at the example below: Page Language = vb Debug= true %> Import Namespace = System.Data %> Import Namespace = System.Data.OleDb %> <html> <head> <script runat= server > Dim dsjob As DataSet Dim dtjob As DataTable Dim JobRow As DataRow Dim JobConn As OleDbConnection Dim JobQuery As OleDbDataAdapter JobConn = New OleDbConnection(_ Provider=Microsoft.Jet.OLEDB.4.0; &_ Data Source= & _ server.mappath( recruitment.mdb )& ; ) JobConn.Open JobQuery= New OleDbDataAdapter( _ Select JobTitle, EstimatedSalary from JobList, &_ objconn) dsjob= New DataSet() JobQuery.Fill(dsJob, Job_Salary ) dtjob = dsjob.tables( Job_Salary ) jobrow = dtjob.newrow() jobrow( JobTitle )= Network Administrator jobrow( EstimatedSalary )= dtjob.rows.add(jobrow) jobrow( JobTitle )= System Analyst jobrow( EstimatedSalary )= dtjob.rows.add(jobrow)

37 </script> <body> </body> </html> dtjob.rows(0).delete() In the example above, a DataSet is created to extract JobTitle and EstimatedSalary from JobList table. Then the contents of the DataSet table is transferred to a DataTable all information from the DataSet. The following piece of code is executing this transfer. dsjob= New DataSet() JobQuery.Fill(dsJob, Job_Salary ) dtjob = dsjob.tables( Job_Salary ) Two new rows are added to the DataTable using the Add method and then deleted one from the DataTable using Delete method. You may use Row subscript, i.e. 1, 2,.. to tell the object which particular row you want to delete. In this example, 0 subscript is used to specify the first row. The statement below is executing the deletion. dtjob.rows(0).delete() The DataAdapter has four properties that correspond to the SQL database commands and operate on your stored tables. These are : - SelectCommand - InsertCommand - UpdateCommand - DeleteCommand You can write you own SQL statements to execute these commands on your stored tables or you may use CommanBuilder to generate the SQLs automatically on the basis of the operation that you have carried out on the disconnected DataTable and then to apply these on the stored table. OleDbCommandBuilder class automatically generates SQL statements and can use Update() method directly to implement any modification on the stored tables. For example, Dim jobcombuilder As OlecDbCommandBuilder jobcommandbuilder = New OleDbCommandBuilder(AdapterObjectInstace) AdapterObjIntance.InsertCommand() = jobcombuilder.getinsertcommand() AdapterObjIntance.UpdateCommand() = jobcombuilder.getupdatecommand() AdapterObjIntance.DeleteCommand() = jobcombuilder.getdeletecommand() AdapterObjInstance.Update(DataSetName, Table Name ) Now carry out Activity Create and modify disconnected DataTable for Patient Table Learning Outcome: Creating and manipulating disconnected DataSets Now Do Review Question 11.12

38 Use the online discussion facility and post your comments on the topic for discussion for your group to share in Web Forms Web Forms consist of the user interface and the server-side scripting associated with the interface. The code can be included in the same file as the web form or be extracted into separate files on the server called code-behind files. As we saw in the previous sections, an ASP.NET page is a text file with an.aspx file name extension. In addition to basic HTML tags and the text to be shown on the screen there are eight syntax markup elements: Page directives Code declaration blocks Render code blocks Server-side comments Server controls Server-side object tags Server-side include directives Server-side <form> element Page Directives These start with symbol followed by attribute/value and are used to specify page level settings, e.g. namespace, language. These settings provide information to the runtime environment and can specify whether the code is in the page or in a code-behind file, the compiler to be used, caching options Now read chapter 3 of ASP.NET in a Nutshell, Pages 30-41, Make notes in Learning Journal. Code Declaration Blocks These are sections of code between <script language= VB runat= server > and </script> tags. Code declaration blocks define member variables and methods that will be compiled into the generated Page class. They can be used to write navigation logic. Render Code Blocks These are sections of code within <% and %> tags. These blocks are used to write inline code. Use of render code blocks is much less common in ASP.NET than in the original ASP since the event-based model does not fit well with inline code. Code enclosed by <%... %> is just executed, while expressions that include an equal sign, <%=... %>, are evaluated and the result is emitted as content. Therefore <%="Hello World" %> renders the same thing as the code <% Response.Write("Hello World"); %>. Unlike ASP -- where functions could be declared within <% %> blocks - - all functions and global page variables must be declared in a <script runat=server> tag. Functions declared within <% %> blocks

39 will now give you a syntax compile error. Server-side Comments Comments for documentation and testing. <%-- comment goes here --%> Server Controls ASP.NET server controls enable you to dynamically generate HTML user interface and respond to client requests. They are represented within a file using a declarative, tag-based syntax. The server control tags are distinguished from other tags because they contain a "runat=server" attribute. Server controls will be fully addressed in the next section (12.6) Server-side Object Tags Object tags enable you to declare and create instances of variables using a declarative, tag-based syntax. For example using the object tag to create an instance of an ArrayList class: <object id= things class= System.Collections.ArrayList runat= server /> The array object will be created at run time and can then be accessed through the ID "things". Server-side Include Directives Used to include any text file into your page. Server-side <form> Element Many server controls must be contained within a server-side <form runat= server > </form> pair of tags. Now do Review Question Server Controls ASP.NET pages can contain server controls, which are programmable server-side objects that typically represent an interface element in the page, e.g. textbox or image. These controls are used in the execution of the page and provide systemgenerated HTML to the browser. Advantages able to use simple components to produce complex effects reducing the amount of code it takes to produce a dynamic Web page. easy to customize their rendering or behaviour simplify the problem of retaining state

40 Server controls allow the author to modify browser or document properties directly through a tag or independently. The controls are also used for eventhandling to perform specific actions during the page execution or in response to a client-side action. Now do Review Question ASP.NET has a large library of pre-made server controls. These controls replace a significant amount of code in the page with simple tags. For cases where you need to design your own functionality the code is still kept separate in a codebehind file. This setup allows you to make changes to the GUI without worrying about damaging the functionality of the page under construction. There are two main types of server controls: HTML controls Web controls HTML Controls The HTML controls are directly related to the HTML tags. Whilst the following list of tags are directly supported in ASP.NET it is possible to declare any tag as a serve control by including runat= server as an attribute. <a> <img> <form> <table> <tr> <th> <td> <select> <textarea> <button> <input> Figure HTML tags directly supported in ASP.NET <input type= text id= goldfish runat= server > Figure Example HTML server control It is very important to include the id attribute as it allows you to access the control elsewhere in your code. Web Controls ASP.NET Web Controls are designed to automatically detect browser type and capabilities in order to consistently render pages correctly. The provide an abstract (not necessarily reflecting the HTML syntax), consistent object model. Web Controls are always declared with the asp namespace prefix. <asp:textbox id= feedback text= Enter your comments runat= server />

41 or <asp:textbox id= feedback runat= server > Enter your comments </asp:textbox> Figure Example ASP.NET web control It is good practice to keep the asp controls in lower case Web control attributes can be treated as properties and directly accessed when programming. The asp:textbox control from figure 12.x can produce a text field, password field or textarea based on the setting of a specific attribute. Using Web Controls There are two techniques for using Web Controls declarative and programmatic. Declarative This method places the asp.net controls inside the relevant pages rather than using a code-behind file. It is the simpler technique and it is the one we will use throughout this unit due to the similarity to the programming style presented in units 10 and 11. The method uses HTML style tags to declare instances of server controls and uses their attributes to set control properties. It is very similar to writing plain HTML and provides better control over page appearance. Programmatic The programmatic method places the code either in <script> server-side blocks or in code-behind files. It allows you to develop dynamically created controls, for example controls generated in response to user action. Types of Web Control There are eight types of Web Control: Input Display Action Selection Databound Rich Validation Mobile Figure Types of Web Control Input Controls Input controls allow the user to enter text data. ASP.NET uses a single web control, textbox, with a TextMode property to determine single or multi-line interface. <asp:textbox id= PasswordText text= Password textmode= Password runtat= server /> Figure Example textbox code

42 Now carry out Activity Input Controls Learning Outcome: Understand and use built-in ASP.NET Server Controls Display Controls These controls are used to render text or images in the browser. Table As per HTML table TableCell As per HTML td TableRow As per HTML tr Panel Groups a set of controls (very like a frame) Label Displays text specified in Text property Image Displays image specified in ImageURL property Table 11.7 Display Web Controls <asp:image id= Dolphin imageurl= dolphin.jpg runat= server /> Figure Example of display control Now carry out Activity Display Controls Learning Outcome: Understand and use built-in ASP.NET Server Controls Action Controls These controls enable to user to perform actions on a page. Hyperlink Hyperlink text for navigating between pages as per HTML <A href= > Button Command button that posts form to the server as per HTML submit ImageButton Displays image that send form to the server when clicked LinkButton Displays hyperlink text that sends for to the server when clicked Table 11.8 Action Web Controls <asp:hyperlink id= Orderlink text= Go to order page navigateurl= orders.aspx runat= server /> Figure Example of action control Now carry out Activity Action Controls Learning Outcome: Understand and use built-in ASP.NET Server Controls Selection Controls These enable the user to select one or more options from a list. CheckBox As per HTML checkbox RadioButton As per HTML radio button ListBox As per HTML option list CheckBoxList List of checkboxes represented by listitem controls & allows selection of 0 or more options RadioButtonList List of radio buttons represented by listitem controls & allows selection of only 1 item DropDownList Allows selection of only 1 item from a list represented by listitem controls. Used where space is limited

43 Table 11.9 Selection Web Controls The Checkbox and RadioButton controls are designed to work in a group, in a similar fashion to the HTML controls of the same name. <asp:dropdownlist id= menu runat= server > <asp:listitem value= Pizza selected= true >Pizza</asp:listitem> <asp:listitem value= Pasta >Pasta</asp:listitem> <asp:listitem value= Ice-cream >Ice-cream</asp:listitem> </asp:dropdownlist> Figure Example selection control Now carry out Activity Selection Controls Learning Outcome: Understand and use built-in ASP.NET Server Controls Validation Controls These controls are used for data validation. They can be executed as server-side ASP.NET controls or client-side JavaScript if the browser supports JavaScript and DHTML. It is also possible to write your own validation functions and link them to a control. CompareValidation Compares input to a constant value or property value of another control CustomValidation Invokes validation control you have written RangeValidation Checks that value is between specified limits RegularExpressionValidation Checks input against pattern defined by regular expression RequiredFieldValidation Ensures input cannot be left blank ValidationSummary Shows a summary of all errors from all validation controls in a form Table Validation Controls <asp:comparevalidator id= passcompare controltovalidate= value1 controltocompare= value2 operator= equal type= integer errormessage= Fields are not equal display= dynamic runat= server /> Figure Example of validation control Databound Controls These controls are used to display repetative data. Templates are used for customised rendering of data, e.g. header row of a table DataGrid Displays data in an editable grid that can be manipulated DataList Displays data in a list, where items can be selected and edited Repeater Displays repeating list of data Table Databound Controls DataGrid and DataList controls can be used without a template, but Repeater requires at least one template to be defined for the data. The DataGrid and

44 DataList controls have a set of style properties that can be used to modify their appearance. <asp:repeater id= studentrepeater runat= server > <template name= labeltemplate > <table><tr><th>student Number</th><th>Name</th></tr> </template> <template name= datatemplate > <tr> <td><%# DataBinder.Eval(Container.DataItem, studentnumber )%></td> <td><%# DataBinder.Eval(Container.DataItem, name ) %></td> </tr> </template> </asp:repeater> Figure Example of a databound control Rich Controls Ad Rotator Displays images that are adverts and links to other URLs Calendar Displays monthly calendar & allows date selection Table Rich Controls <asp:calendar id= MyCalendar showdayheader= true todaydaystyle-backcolor= grey todaydaystyle-forecolor= black runat= server /> Figure Example of a rich control Mobile Controls These controls provide the specialised functionality required for mobile devices. Pagination is supported for automatically separating content into smaller chunks for display on the smaller interface. Form Used to contain one or more mobile controls, including other forms Command Used to invoke event handlers Link hyperlink control that can also point to other forms on the page List As per Listbox, but with attributes specific to mobile device ObjectList Similar to datagrid control with support for pagination PhoneCall used to create phone call interface for the specific mobile device SelectionList used for selecting one or more items from a list. Selection does not create a server event. This control does not support pagination TextViewer Used for displaying large amounts of text. It supports pagination, but not editing. Table Mobile Controls Event Handling Controls OnClick As per JavaScript OnClick OnCommand Activated when a button linked to oncommand is clicked OnCheckedChanged Activated when a checkbox is selected OnPageIndexChanged Activated when the user clicks a page selection element

45 OnSelectedIndexChanged Activated when the selection is changed Table Event Handling Controls Sub MyButton_Click(Sender As Object, E As EventArgs) Event handling code End Sub Figure Example of a generic event handler Events are connected to outcomes in <script> blocks. The attributes are added to declarative tags used to create the control. <asp:button id= submitbtn text= Submit onclick= submitbtn_click runat= server /> Inside <script> tags: Sub submitbtn_click(sender As Object, E As EventArgs) Event handling code End Sub Figure Example of OnClick event handler Now read chapter 5 of ASP.NET in a Nutshell, Page 71 Make notes in Learning Journal. Now do Review Question Now do Review Question Shopping Cart Standard HTML is stateless, i.e. it cannot store data between sessions. An early solution to this problem was the creation of cookies. These are small textfiles stored either in memory (session cookies) or on the client-side disk (persistent cookies). The JavaScript required for reading and writing operations for cookies can be found in the Extras section of this unit. Cookies have the following limitations: only store text limited in size can be manipulated on the client browsers allow the user to turn cookies off ASP.NET implements state management through the HttpSessionState class. This class is the Session property of the Page class. Each ASP.NET page inherits from the Page class, making the property available to any code on the page. HttpSessionState is used for storing and accessing data shared across all pages accessed by an individual user in a single session. Each user session is identified by a unique Session ID, which is created when the user first accesses an ASP.NET page on the site. This Session ID has a limited lifetime (defaults to 20 minutes) for security reasons.

46 Now read chapter 19 of Asp.NET in a Nutshell, Page 400 Make notes in Learning Journal. Now do Review Question Use the online discussion facility and post your comments on the topic for discussion for your group to share in Unit Summary This unit has introduced the basic concepts involved in ASP.NET and demonstrated their use in implementing a dynamic website. The unit is intended to be an introduction to this topic that demonstrates the usefulness of the.net framework and ASP.NET and also provides pointers to resources for further independent study. Don t forget to log onto WebCT to complete the End of Unit Self- Assessment ACTIVITIES Activity 11.1 Installing IIS and setting your web environment OPTIONAL NOT to be done on university pc To run ASP.NET programs you need to install IIS that creates your own web server. To do that you need to see the steps below (for Windows XP Professional Verson): 1. Go to control panel and select Add and Remove programs 2. Then select add and remove Windows Components. You will find the Add/Remove Windows Components at the left hand side of your window 3. Check the Internet Information Service (IIS) Component box and then press Next button. The IIS will be installed in you computer. However, at this stage your operating system may ask you to insert XP CD. You may download IIS Resources and Manager 6.0 from Microsoft Download Centre. It is available at: Install the IIS Resource and Manager 6.0.

47 Once you have installed the IIS, you need to check the existence of the IIS. To check the existence of IIS you need to start Administrative Tool. To get your Administrative tools to appear on the Program list you need to carry out the steps below: 1. Right click on the task bar and select Properties 2. Check the Classic Start Menu Option 3. Select the Customize button 4. Check the Display Administrative Tools box. See the figure below: Figure: Display Administrative tools Now you should be able to see the Administrative Tools in the Program section of your start menu. Now you can see the IIS and IIS Manager in your Administrative Tools if these are installed successfully. Open the IIS Manager and expand the entries. Check the overall configuration of your web server setting by selecting properties for the default web site. See the diagram below:

48 Figure: IIS Manager 6 for Web Server configuration setting Note that the IP address is set to All Unassigned for web site properties. Select as IP for the web server. Now you need to create an executable virtual directory so that you can store all the ASP.NET files that are required for your web application. To do this you need to carry out the following steps: 1. Open IIS Manager and then right click on Default web. Select New and then Virtual directory 2. Ignore the first page and then enter a name that you have thought for your

49 application. In this example this is MyWeb. The visitors to your web page will only be able to see MyWeb virtual directory name, not any path associated with it. 3. Now enter the path to the directory that contains your files. You may enter: C:\Inetpub\wwwroot\MyAspApp The directory Inetpub\wwwroot is already available in your C:\ 4. Now select the options that you require for the application. In this example, Read and Run Scripts are selected. 5. You should be able to see the virtual directory name in IIs Manager. If you wish you may change the options by selcting properties and then change the values for Web Directory as necessary. By pressing the configuration button you can see the details of the options.

50 You have installed and configured IIS, now you need to install.net Framework. To get a copy of.net framework, visit, and download:.net framework version 3.0 Redistributable Package.NET framework version 1.1 SDK Activity 11.2 Create and run your own ASP.NET Application You will use Web Matrix Application for this activity. Follow the steps in 1.14 (An example of ASP.NET) to create and run your own ASP.NET file. Create: i) a Customer table with CustomerID, Name, Age, Sex, RegistrationDate attributes in Access ii) a DataGrid connecting to the Customer Table iii) a function to execute query on the customer table iv) Page_Load event to load the table contents when the ASP.NET page is loaded Activity 11.3 Create and Define an ODBC DSN Click Here to download a Patient System Database. The figure below shows the structure of this database.

51 Now, follow the steps given in 11.5 to create the ODBC DSN for the PatienSystem Database Discussion on Activity 11.3 Create and define an ODBC DSN You may practice with other databases you have on your system such as some of the sample databases built in Oracle Database. You should be clear with the concept of DSN after this activity. Activity 11.4 Access backend database using ADO.NET objects We will use web matrix for this activity, so you will need to download and install it as described in section 11.4 if you have not done so already. Some records have already been entered in the Patient system database. Before you start the activity, make sure that Web Matrix is connected to the backend database. In order to carry out this task, follow the steps below: 1. Click on Data tab of the Data Panel located at the right column of the editor. 2. Select Add Database Connection icon on the data panel. 3. Now select your DBMS and database that you want to work with. Once you are connected you should be able to see the list of tables on the Data Panel.

52 Now, follow the steps below: 1. Drag and drop a datagrid web control on your web matrix design editor. 2. Enter a name for the datagrid, i.e. PatientDatagrid 3. Click on Code tab. Drag and drop select method from the query builder panel (located at the left side of the code editor) to the code editor. 4. Now follow the steps in order to select all data from the patient table. 5. Don t forget to select DataReader radio button (see text for the reasons) and to put a meaningful function name, i.e. PatientInfo for the query. You will see that the tool has written a piece of code for your query automatically. But it is not much different than what you have seen in the text except the variable names and the way of invoking the ADO.NET methods. 6. Now add the Page_Load subroutine. Add the following piece of code at the top or bottom of the code editor. Sub Page_Load (sender As Object, e As EventArgs) PatientDatagrid.DataSource= PatientInfo() PatientDatagrid.DataBind End Sub Now run your ASP.NET file. Make sure you configure to appropriate port as your web server will use this port to access the required files. The output should look like the following screen shot.

53 Now, go back to the editor and click on the HTML tab. Have you noticed the HTML scripts? Do you find any difference between the HTML code that web matrix has produced and the script that is shown in the text? Actually no, there should be no difference. Web matrix has simply separated the HTML code from the VB code. Now go through the code in the text and the one which is in web matrix to identify the similarities and differences. Activity 11.5 Searching records from Appointment table In this activity you are going to create a search form that enables users to enter a Patient or Consultant s ID to retrieve corresponding record from the Appointment table. I suppose you already have entered some records in the Appointment table. We will be using web Matrix tool for this activity. Follow the steps below to create the search form. 1. Use the web Matrix design editor to create the form below. The search form should include a text box to let the users enter patient s number, a button to process the search query and a data grid to display the result of the query. 2. Drop and drag a text box and a button on the design editor at the position that you feel suitable. Set the Textbox ID, button ID and datagrid ID. You already have seen how you can create a datagrid and to bind that with a query function. The example here has used the following IDs.

54 Textbox ID: Input ButtonID : button1 DatagridID: Datagrid1 3. Now click the code tab of the design editor and add the following code for the button. Sub Button1_Click(sender As Object, e As EventArgs) DataGrid1.DataSource=Getpatientappointment(input.Tex t) DataGrid1.DataBind() End Sub The code above has used Button_Click event. Note that, you need to use the button ID that is associated with the Click event. For example, the piece of code above has used Button1. The code above also has used a function, Getpatientappointment(), which you are going to create in the next step. The query function is using the parameter that is entered by a user. The user s value is captured by a textbox named Input. 4. At this stage you need to create Getpatientappointment() function. In order to do this, drag and drop Select query builder. Select Appointment table and all necessary columns. Select the Where button to construct your query and click on the P-NHS attribute to let the Select builder know that the query will be executed based on the P_NHS number selected. Note the right operand of the Where clause builder. You can see the The string tells the browser to accept P_NHS number as input and that will be captured by the textbox as a search criteria. 5. Enter the query function name, Getpatientappointment and select Data Reader when the query builder will prompt for these. 6. Run the code. You should see the following screen

55 The textbox in the browser will prompt for a P_NHS number. If you enter a value for P_NHS and then press the Search button, you should see the output below. Note the following piece of code that is generated by web Matrix. Dim dataadapter As System.Data.IDbDataAdapter = &_ New System.Data.OleDb.OleDbDataAdapter dataadapter.selectcommand = dbcommand Dim dataset As System.Data.DataSet = New System.Data.DataSet dataadapter.fill(dataset) Does the code look familiar to you (see Section 7.4)? Can you identify the objects and methods that are associated with OleDbDataAdapter? Activity 11.6 Searching records from the Consultant table Follow the steps in Activity 3 and create a search form for the Consultant table. This time you may wish to include error messages and to carry out a complex query.

56 Activity 11.7 Inserting records in Consultant Table In this activity you are going to create a form with text boxes that enable users to enter Patient details in order to add new records in the Consultant table. We will be using web Matrix tool for this activity. Your search form may look like the following screen. Now follow the steps below to create the form. The search form should include a text box to let the users enter consultant s number, name, address and other attribute values. You also need to add a button to process the Insert Statement. If you wish to display the result on the browser, you may add a datagrid. 7. Drag and drop text boxes and a button on the design editor at the position that you feel suitable. Set the Textboxes IDs and button ID. You already have seen how you can create a datagrid and to bind that with a query function. In this activity, you may use the following IDs. Textbox ID for Consultant no: Consultant_no Textbox ID for First name: C_Fname Textbox ID for Middle name: C_Mname Textbox ID for Last name: C_Lname Textbox ID for Gender: C_gender Textbox ID for Address: C_Address Textbox ID for Department number: dept_no Textbox ID for Specialisation: specialisation Textbox ID for Date of Joining: date_of_joining Textbox ID for Date of Birth: c_dob Button ID for Insert Button: Button1 DataGrid ID for the display result: Datagrid1 8. Now click the code tab of the design editor and add the following code for the button. Sub Button1_Click(sender As Object, e As EventArgs) InsertConsultant (Consultant_no.Text, C_Fname.Text, C_Mname.Text, C_Lname.Text, C_gender.Text, C_address.Text, Dept_no.Text, Specialization.Text, Date_of_joining.Text, C_dob.Text)

57 DataGrid1.DataSource = GetConsultant() DataGrid1.DataBind() End Sub The code above has used Button1_Click event. Note that, you need to use the button ID that is associated with the Click event. For example, the piece of code above has used Button1. The code above also has used a function, GetConsultant(), which you are going to create in the next step. The function will simply select the records from the Consultant table and will display on the browser. Now if you wish to display all the current rows that exist in the consultant table when the page is loaded, add the code below: Sub Page_Load(sender As Object, e As EventArgs) DataGrid1.DataSource = GetConsultant() DataGrid1.DataBind() End Sub The subroutine has used the Page_Load event. We already have seen this event in previous examples. 9. At this stage you need to create GetConsultant() function. In order to do this, drag and drop Select query builder. Select all necessary columns of the consultant table. Enter the function name as GetConsultant and select the Data Reader radio button. You should have a piece of code on the editor. The code is similar to the code below: Function GetConsultant() As System.Data.DataSet Dim connectionstring As String = "Provider=Microsoft.Jet.OLEDB.4.0; Ole DB Services=-4; Data Source=C:\asp\PatientHistorySystem.mdb" Dim dbconnection As System.Data.IDbConnection = New System.Data.OleDb.OleDbConnection(connectionString) Dim querystring As String = "SELECT [Consultant].* FROM [Consultant]" Dim dbcommand As System.Data.IDbCommand = New System.Data.OleDb.OleDbCommand dbcommand.commandtext = querystring dbcommand.connection = dbconnection Dim dataadapter As System.Data.IDbDataAdapter = New System.Data.OleDb.OleDbDataAdapter dataadapter.selectcommand = dbcommand Dim dataset As System.Data.DataSet = New System.Data.DataSet dataadapter.fill(dataset) Return dataset End Function Now examine the code. You already have seen the use of OleDbConnection, dataadapter objects and Fill() method in previous examples. Check the query statement in querystring. 10. Now to create the InsertConsultant function that you have used in Button1_Click event subroutine, select INSERT Builder to invoke the INSERT BUILDER wizard. Then select all the columns in the Consultant table that you can see in the builder. Check the screen below, if you are not sure.

58 11. The wizard with prompt for a function name and at this stage you need to enter the function name InsertConsultant. Now the wizard will generate INSERT code for you. Now you are ready to run the program (see the output below). Now check the following piece of code that web Matrix has generated. Can you recognise the code? Can you find the similarities with the code presented in section 7.5. Dim querystring As String = "INSERT INTO [Consultant] ([Consultant_no], [C_Fname], [C_Mname], [C_Lname], [C_ge"& _ "nder], [C_address], [Dept_no], [Specialization], [Date_of_joining], [C_dob]) VAL"& _

59 @Dept_"& @C_dob)".. dbcommand.parameters.add(dbparam_consultant_no).. dbcommand.parameters.add(dbparam_c_fname) and so on. Now check the HTML in web Matrix for this program: <form runat="server">.. <asp:textbox id="consultant_no" runat="server"></asp:textbox>.. <asp:textbox id="c_fname" runat="server"></asp:textbox>.. <asp:textbox id="c_mname" runat="server"></asp:textbox>... <asp:button id="button1" onclick="button1_click" runat="server" Text="Add Consultant"></asp:Button>... <asp:datagrid id="datagrid1" runat="server" BorderStyle="None" BorderColor="#CC9966" BackColor="White" BorderWidth="1px" CellPadding="4"> </asp:datagrid>.. </body> </html> Does the HTML script look similar to the one presented in section 7.5? 12 Check the final output. Look at the screen below to enter the records and then press the Add Consultant button. Can you see any difference in the result table (check the screen shots)?

60 Newly added record. Activity 11.8 Inserting records in Patient Table Follow the steps in Activity 5 and create a form for Patient table. This time you may wish to include error messages and data validation controls. Discussion on Activity 11.8 Inserting records in Patient Table You can use Label web control to include data validation error message. In Button1_Click subroutine add If-Then-Else constructs to validate the entered data and to display error messages on the screen.

61 Activity 11.9 Updating records in Consultant Table In this activity you are going to update records of Consultant table. For simplicity you may modify the consultant table by having a Name column instead of three columns for name, i.e. C_Fname, C_mname and C_lname. To carry out the task, first we need to drag and drop a datagrid to the Web Matrix design editor. Set the ID for datagrid to ConsultantGrid. This datagrid will display consultant records on the browser. Now we need to add Edit, Update and Cancel column buttons for each row that enable users to edit and update consultant data as their requirements by pressing the buttons. We will be using web Matrix to carry out the task. Now follow the steps below: 1. Select the datagrid and then click on the Property Builder located at the property panel. Uncheck the Create columns automatically at run time and then press the column tab situated at the right of Property builder. 2. Select Button column and expand it. You should be able to see, Select; Edit, Update and Cancel; and Delete columns in the list. See the screen below. 3. Select the Edit, Update, Cancel button by pressing the > sign. The Edit Text, Cancel Text and Update text will have Edit, Cancel and Update default values. See the screen shot below if you are not sure. You may select a link button or pushbutton type as your preference.

62 4. Now click on Bound Column to add the columns that you want to be appeared on the browser. You can define your own header text as a column heading. For example, you may want consultant s number, name, address, department number to appear on the browser. To give a more meaningful name of the columns you can assign a value Consultant ID to header text textbox and bound the column with appropriate Data field name, Consultant_no in this case. Another example is if you want the consultant s department number to appear on the browser within a column called Assigned Department, instead of field name dept_no, you need to set appropriate Header Text value for this which is Assigned Department in this example. You also need to assign dept_no to the Data Field textbox in order to be able to retrieve appropriate value from the Consultant table. See the screen below to check if you are in right direction. Press the Finish button to complete the task.

63 5. Click on the Code tab and then drag and drop Select Builder. Click on Consultant table and select the columns that you want to appear on the browser. In this activity, you may select Consultant_no, consultant_name, address, dept_no and DOB. You already have created databound datagrid for these columns in the previous step. Now enter the function name GetConsultants and select Data Rader radio button. 6. Click on Code tab of the editor. Write the following subroutines for Edit and Cancel events. We also need to add another subroutine for Update event but you will do that later. Sub ConsultantGrid_Edit(sender as Object, e as DataGridCommandEventArgs) ConsultantGrid.EditItemIndex = e.item.itemindex ConsultantGrid.DataSource= GetConsultant() ConsultantGrid.DataBind() End Sub Sub ConsultantGrid_Cancel(sender as Object, e as DataGridCommandEventArgs) ConsultantGrid.EditItemIndex = -1 ConsultantGrid.DataSource= GetConsultant() ConsultantGrid.DataBind() End Sub ConsultantGrid_Edit and ConsultantGrid_Cancel will be invoked in response to Edit and Cancel button pressed. The ConsultantGrid_Edit event will make sure that the data are in editable format when requested. EditItemIndex is

64 an integer property of DataGrid and points to the 0 subscripts, it means pointing to the first row of a table. When the EditItemIndex property of the datagrid that you have created is set to the row selected, the row becomes editable. To accomplish this you write the statement ConsultantGrid.EditItemIndex = e.item.itemindex To cancel the edit or update operation on the row that you have done, you can set the EditItemIndex integer value to -1 which is datagrid s previous state. 7. Now drag and drop UPDATE method builder as you did with SELECT before. Select the Consultant table and then check the consultant_no, consultant_name, address, dept_no column as the editable columns. You will see that the default value for consultant_no will appear and we will leave that as it is. See the screen below. Follow the step until you set a parameter for all the required attributes. However, you can make certain columns non-editable by selecting read-only check box at the Property builder for bound columns. 8. In this step, you need to construct where clause. Click the Where button and then select consultant_no. Leave the parameter Now enter the Update method name as UpdateConsultant. 9. We need to add the final piece of code in Code editor for Update Event and Page_Load event. Add the following code at the end. Sub ConsultantGrid_Update( sender as Object, e as DataGridCommandEventArgs) Dim consultantid as Integer = e.item.cells(1).text Dim nametextbox as TextBox= e.item.cells(2).controls(0) Dim addresstextbox as TextBox= e.item.cells(3).controls(0) Dim depttextbox as TextBox= e.item.cells(4).controls(0) UpdateConsultant(consultantID, nametextbox.text, addresstextbox.text, depttextbox.text) ConsultantGrid.EditItemIndex= -1 ConsultantGrid.DataSource=GetConsultant() Consultant.DataBind() End sub sub Page_Load(sender as Object, e as EventArgs) if Not Page.IsPostBack then consultantgrid.datasource= getconsultant() consultantgrid.databind() End if End sub Note that the ConsultantGrid_update subroutine has used e.item.cells(i) a number of times. e.item.cells(i) is a collection

65 property that is used when ID of a text box is not known. e.item.cells(i) allows you to determine the value of a particular cell, in other words of a text box. You can access an editable column in order to retrieve a value by using the statement e.item.cells(i).controls(0). A number of TextBox objects are created in ConsultantGrid_Update subroutine. They are nametextbox for cell 2 of row item, addresstextbox for cell 3 of row item and so on. Then the text box values are passed to UpdateConsultant function to update a record in Consultant table. Finally, the Page_Load event subroutine allows the datagrid to display current records when the page is loaded each time. You should get the following outputs. You should get the screen above when you load the ASP.NET file in the browser first time. If you click on the Edit link all the data items of a particular row will become editable. Once you have edited the data, you can press the update button and you will get updated records on your browser. Now check the code for UpdateConsultant function. Can you identify the Add methods that Web Matrix has generated?

66 Activity Updating records in Patient Table Follow the steps in Activity 7 and create an editable data table that enables you to update the records for Patient table. This time you may wish to include error messages and data validation controls. Activity Deleting records from Consultant Table In this activity you are going to create a form that enables users to enter a Consultant s ID to delete corresponding record from the Consultant table. We will be using web Matrix tool for this activity. Follow the steps below to create the search form. 1. Use the web Matrix design editor to create the form below. The search form should include a text box to let the users enter patient s number, a button to process the Delete statement and a data grid to display the result of the query. 2. Drop and drag a text box and a button on the design editor at the position that you feel suitable. Set the Textbox ID, button ID and datagrid ID. You already have seen how you can create a datagrid and to bind that with a query function. The example here has used the following IDs. Textbox ID: consultant_no ButtonID : deletebutton and Text: Delete DatagridID: dgconsultant 3. Now click the code tab of the design editor and add the following code for the button. Sub deletebutton_click(sender As Object, e As EventArgs) Deleteconsultant(Consultant_no.Text) dgconsultant.datasource=getconsultant()

67 dgconsultant.databind() End Sub The code above has used Button_Click event. The code above also has used a function, DeleteConsultant(), which you are going to create in the next step. The query function is using the parameter to catch a text value that is entered by a user. 4. At this stage you need to create the DeleteConsultant function. In order to do this, drag and drop the Delete method builder on your screen. Select Consultant table and then hit the Where button to construct the Where clause. Now select consultant_no as a parameter to let the Delete builder know that the delete operation will be executed based on the consultant_no number selected. Note the right operand of the Where clause builder. You can see the appear on the Right Operand side. The string tells ASP.NET to accept Consultant_no as input and that will be captured by the textbox as a deletion criteria. 4. Enter the query function name, DeleteConsultant when the builder prompt for this. 5. We need to add another piece of code that allows the dgconsultant datagrid to display all the available record when the page is loaded on browser. We have used this piece of code before, it is Page_Load subroutine. Add the following code at the top of the code editor. Sub Page_Load(sender As Object, e As EventArgs) dgconsultant.datasource=getconsultant() dgconsultant.databind() End Sub 6. You must have noticed that we have used a function Getconsultant in the Page_Load subroutine. You already have seen the purpose of this function. The function will retrieve all the current records from the Consultant table and display that on the browser. You need to drag and drop Select Method builder to generate the code for Getconsuntant function. You have used this in activity 3 and Now run the page. You should get the screens as below.

68 All consultant records are displayed. The page contains a textbox and delete button. User has entered consultant number 5 in the textbox provided. The screen shows the current records after deletion operation. Note that consultant number 5 is deleted from the table. Now examine the following code that the web Matrix tool has generated.