Final Web Application Create a new web site under c:\temp\webapps\ and name it Final. Create the following additional folders:

Transcription

1 Final Web Application Create a new web site under c:\temp\webapps\ and name it Final. Create the following additional folders: StyleSheets App_Themes (ASP.NET folder, name the Theme1 folder Basic) App_Data (ASP.NET folder, place Library.mdf(or mdb) from homework project into this folder) Create a master page with the following specifications: Set the id of the div section inside the form of the master page to div_table. Inside the div tag, create a simple html table (id=tblmain) using the following structure: <tr id= master_hdr > <td colspan= 2 > <asp:label CssClass="center" ID="lblHeader" runat="server" Text=""></asp:Label> <tr id= master_nav > <td id= master_nav_cell > <tr id= master_ftr > <td id= master_ftr_left > <asp:label ID="lblFooter" runat="server" Text=""></asp:Label> <td> <asp:contentplaceholder id= cphmain runat= server > <td id= master_ftr_right > <asp:label ID="lblVersion" runat="server" Text=""></asp:Label> In the web.config file, create a title and a version entry in the appsettings section. Assign them any values, such as Final Web Application for the title and for the version, for example. In the load event of the master page, assign the label lblfooter the current date in short date format, lblheader the title of the appsettings section (wrap an h2 tag around it), and lblversion the version value from the appsettings section. Use the ConfigurationManager class to retrieve the values from the appsettings section. Create a style sheet in the StyleSheets folder and name it MainFormat.css. Use the settings as shown below: Instructor: Michael Kremer Page 1 asp.net@ucb-access.org

2 You may choose different color settings or border styles. Delete the default.aspx page and create a new one using the same name, except make sure to select the Master Page. Simply type Final Project Main Page in the Content2 content block. Create the following Web Form pages (Add New Item), again make sure to select the Master Page: Books.aspx Books_edit.aspx Books_view.aspx Patrons.aspx Patrons_edit.aspx Create a Web.sitemap file (Add New Item) using the Default.aspx as the highest node. Create two sub nodes, one the Book.aspx page and the other the Patron.aspx page. Under the Book.aspx node, add Books_view.aspx and Books_edit.aspx. Under the Patron node, add Patrons_edit.aspx. You may choose any title and description value. Add a SiteMapDataSource to the Master page and set its ID to smdatasource. In the header row of the table, below the lblheader, place an hr tag and below that a SiteMapPath control. In the master_nav_cell place a tree view control and set its DataSourceID to smdatasource. Now it is time to test the project for the first time. Save the entire project and view the Default.aspx page in your browser. The web application should look like the one shown below: Instructor: Michael Kremer Page 2 asp.net@ucb-access.org

3 Under the App_Themes/Basic folder, create a skin(add New Item) named Basic. In this skin file, add a tree view control and a text box control. You may set any properties of your liking, for example, in the above figure, the ImageSet property of the tree view control is set to Arrows. For the textbox control, set at least two properties, such as backcolor and forcolor. Add this skin file to the web.config file in the pages tag. The Books.aspx page is shown below: Instructor: Michael Kremer Page 3 asp.net@ucb-access.org

4 In terms of validation you have two options: Use required field validators for all three text box controls Use a JavaScript function (similar to fvalidate in the course reader, but simpler). There is no need to specifically return a validation message for each control. One message as shown below is sufficient if one control is empty. When validation is passed, then show the following message: There is no other logic behind the submit button. Instructor: Michael Kremer Page 4 asp.net@ucb-access.org

5 The Books_view.aspx page is shown below: Use a SQLDataSource control or AccessDataSource (if connected to MS Access) with the following SELECT statement: SELECT ISBN, Title, Edition, Authors FROM Book Add a GridView control as shown above and bind it to the data source control. Enable the sorting feature. Use an AutoFormat of your liking. Instructor: Michael Kremer Page 5 asp.net@ucb-access.org

6 The Books_edit.aspx page is shown below: Use a SQLDataSource or AccessDataSource and the following SQL statements: SELECT: SELECT ISBN, Title, Edition, Authors, Publisher FROM Book SQLDataSource UPDATE: UPDATE book Set title=@title, edition=@edition, authors=@authors, publisher=@publisher WHERE AccessDataSource UPDATE: UPDATE book Set title=?, edition=?, authors=?, publisher=? WHERE ISBN=? Add a GridView control and bind it to the data source control. Enable the sorting and editing feature. Instructor: Michael Kremer Page 6 asp.net@ucb-access.org

7 The Patrons.aspx page is shown below: Add a SQLDataSource or AccessDataSource and use the following SQL statement: SELECT PatronID, Patron_Name, Address1, Address2, City, State, ZipCode FROM Patron Add a GridView control and bind it to the data source control. Instructor: Michael Kremer Page 7 asp.net@ucb-access.org

8 The Patrons_edit.aspx is shown below: Add a SqlDataSource (ID = sdspatronsall) or AccessDataSource(ID=adsPatronsAll) control using the following SQL SELECT statement: SELECT PatronID, Patron_Name FROM Patron Add a DropDownList(ID=ddlPatron) control as shown above and bind it to the data source control. Use PatronID as the value field and Patron_Name as the display field. Make sure to set the AutoPostback property to true. Add another SqlDataSource (ID=sdsPatronsSelected) or AccessDataSource(ID=adsPatronsSelected) control using the following SQL statements: SELECT: SELECT PatronID, Patron_Name, Address1, Address2, City, State, ZipCode FROM Patron WHERE PatronID=@PatronID (AccessDataSource WHERE PatronID =?) SqlDataSource UPDATE: UPDATE Patron SET Patron_Name Address1=@Address1, Address2=@Address2, City=@City, State=@State, ZipCode=@ZipCode WHERE PatronID=@PatronID AccessDataSource UPDATE UPDATE Patron SET Patron_Name =?, Address1?,Address2=?, City=?, State=?, ZipCode=? WHERE PatronID=? Instructor: Michael Kremer Page 8 asp.net@ucb-access.org

9 When navigating through the data source wizard, bind the parameter PatronID to the DropDownList control ddlpatron. Add a DetailsView (dvpatron) control to the page and bind it to the sdspatronsselected (or adspatronsselected) data source ontrol. Enable the editing feature. Double-click on the DropDownList control in design view to create is default event. Use the following line of code to refresh the DetailsView control every time a value is selected in the DropDownList control: dvpatronedit.databind(); Instructor: Michael Kremer Page 9 asp.net@ucb-access.org