Figure 1 Design to Allow Insertion Into a Gridview

Lab 9 – G9idView 3IntroductionThe tutorial shows how to insert a new row into the database and update the GridView as shown in Figure 1 below. This is exactly the same as Lab 8 except for this new feature. We also show how to confirm a delete on the client and add a validator inside the GridView to restrict the Jersey number (PNumber) to be between 1 and 99.Figure 1 – Design to allow Insertion into a GridView.Lab Objectives:1. Allow the user to insert a row into a GridView. 2. Confirm a deletion from the GridView. 3. Utilize a validator inside the GridView to constrain the user’s input.There are 8 stages to complete Lab 9.Stage Description 1 Create Lab 9 Home Page 2 Add Insert Feature 3 Confirming a Delete on the Client 4 Adding a Validator 5 Updating the Select Event Code 6 Wrapping Up and Posting to LuciusFollow the directions below to complete the lab. The completed Lab should work like this: https://lucius.valdosta.edu/dgibson/labs/lab9_sp15_2/Default.aspx1 Stage 1 – Create Lab 9 Home PageWe will begin by copying your Lab 8 work and then Stage 2 will implement some new pieces of functionality.1. Do the following: a. In Windows, copy your lab8 folder and give it the new name, lab9. b. Open the folder and delete the .sln and .sou files if they are present. c. Open VS and choose: File, Open, Web Site and navigate to the lab9 folder. d. Change the HTML title to: Lab 9… e. Change the Level 2 header to: Lab 9… f. Put a link from your course home page to the Lab 9 home page. g. (Optional) Save the solution as lab9.sln to the lab9 folder: i. Select the Solution node in the Solution Explorer as shown on the right. ii. Choose: File, Save lab9.sln As… iii. Navigate to your lab9 folder and save.2. Build and run your page (Ctrl+Shift+B, Ctrl+F5). Test thoroughly.Stage 2 – Add Insert Feature3. Just below the Lab 9 h2 header and above the GridView, add the markup below to the Source to create input fields for adding a new row to the database as shown below.Last Name <asp:TextBox ID="txtLName" runat="server" Width="50px"></asp:TextBox> First Name <asp:TextBox ID="txtFName" runat="server" Width="50px"></asp:TextBox> Jersey Num <asp:TextBox ID="txtPNumber" runat="server" Width="20px"></asp:TextBox> Birth Date <asp:TextBox ID="txtBDate" runat="server" Width="50px"></asp:TextBox> Team <asp:DropDownList ID="ddTeams" runat="server"> </asp:DropDownList> <asp:Button ID="btnAdd" runat="server" Text="Add" /> 2 4. Configure the DropDownList above to be bound to a DataSource which displays the Name as the Text and TeamID as the Value (from the Teams table). Hint: See Lab 8 if you need help with this.5. Build and run your page (Ctrl+Shift+B, Ctrl+F5). Make sure the teams are displayed in the drop down.6. When we created the DataSource in Lab 7 (and 8) we pressed “Advanced” and had it, “Generate INSERT, UPDATE, and DELETE statements” (See Lab 7, Stage 2, steps 11 & 12 if needed). The GridView itself uses the UPDATE and DELETE statements to carry out those actions. However, the INSERT statement is not use as the GridView does not have a mechanism to insert a new row in the database. But, we can use the DataSource’s INSERT statement programmatically to insert a row. Do the following: a. Create an Add button event handler by double-clicking the Add button in Design mode. b. Add this code to the event handler. dsSqlServerPlayers.InsertParameters["TeamID"].DefaultValue = ddTeams.SelectedValue; dsSqlServerPlayers.InsertParameters["LName"].DefaultValue = txtLName.Text; dsSqlServerPlayers.InsertParameters["FName"].DefaultValue = txtFName.Text; dsSqlServerPlayers.InsertParameters["PNumber"].DefaultValue = txtPNumber.Text; dsSqlServerPlayers.InsertParameters["BDate"].DefaultValue = txtBDate.Text; dsSqlServerPlayers.Insert();// Clear fields txtLName.Text = string.Empty; txtFName.Text = string.Empty; txtPNumber.Text = string.Empty; txtBDate.Text = string.Empty;7. Build and run your page (Ctrl+Shift+B, Ctrl+F5). Test thoroughly. Insert a player and verify that it is there.Stage 3 – Confirming a Delete on the ClientWe will next require the user to be confirm a delete from the GridView. To do this we will remove the “automatic” Delete button and put in a new one that allows us to intercept the deletion and do a custom confirmation.8. Display the flyout menu for the GridView and uncheck “Enable Delete”.3 9. Display the “GridView Tasks” menu, choose “Edit Columns...” to display the Fields dialog, then: a. Select TemplateField from the “Available fields” and choose “Add”. b. Select TemplateField from the “Selected fields” and then click the up arrow to raise it to just below CommandField (this moves the TemplateField left in the GridView display). c. Choose “OK”.10. Display the “GridView Tasks” menu and choose “Edit Templates”. Make sure the ItemTemplate is displayed. Put a LinkButton in the ItemTemplate (i.e. drag a LinkButton from the ToolBox).11. Select the LinkButton and set the properties shown below. a. Set the CommandName property to “Delete”. This synchs the LinkButton’s Click event with GridView’s DeleteCommand, which contains the SQL for a Delete statement. b. Set the OnClientClick property to “return ConfirmDelete()”. This specifies a JavaScript function (that runs on the client) that returns true or false. If true, the page posts-back and the deletion is carried out on the server. If false, the page does not post back (i.e. the deletion is aborted). In this case, the JavaScript function name is ConfirmDelete which we will add to the Source in the next step. c. Set the Text property to “Delete” which is the text that appears on the LinkButton. d. Display the GridView Tasks menu and “End Template Editting.”12. Add the JavaScript function below in the Source (in the head section). You could have a more elaborate function that displays the values of the row that is about to be deleted; however, this is a good bit more involved.<script type="text/javascript"> function ConfirmDelete() { return confirm("Are you sure you want to delete this entry?"); } </script>13. Build/Run (Ctrl+Shift+B, Ctrl+F5). Test the confirmation of deletion.4 Stage 4 – Adding a ValidatorWe will add a RangeValidator to the Jersey Number (PNumber) field in the GridView when in Edit mode so that a Jersey Number can only be between 1 and 99.14. Display the “GridView Tasks” menu and choose “Edit Columns.” 15. Select “PNumber” and “Convert this field into a Template Field” (lower right). Then choose OK.Do the following: a. Display the “GridView Tasks” menu and choose “Edit Templates.” b. Select “Column[6] – PNumber” from the Display drop down. c. Select the Label in the ItemTemplate and supply it the ID: gvLblPNum. We will use this later.5 6 d. (This step is for information only). i. Select the label, then click the arrow icon, then select “Edit DataBindings.” ii. The display will look like this. We will not change anything here. Notice how the Text property is bound to the PNumber field under “Custom binding”. Choose Cancel. e. Select the TextBox in the EditItemTemplate (see Step 15 c above) and provide the ID, gvTxtPNum. f. (This step is for information only). Select the TextBox in the EditItemTemplate and choose: “Edit DataBindings”. Inspect the Text property binding and then Cancel.16. Drag a “RangeValidator” from the ToolBox into the EditItemTemplate, beside the Textbox. Set the following properties:Property Value ControlToValidate gvTxtPNum ErrorMessage Jersey Number must be between 1 and 99. Font/Bold True ForeColor Red MaximumValue 99 MinimumValue 1 SetFocusOnError True Text * Type Integer Width 2017. When complete, display the “GridView Tasks” menu select End Template Editing.7 18. Drag a “ValidationSummary” from the ToolBox to just above the GridView (and below the Add feature). Set the following properties:Property Value Font/Bold True ForeColor Red19. Open Web.config. Add the appSettings node above (or below) the system.web node.<appSettings> <add key="ValidationSettings:UnobtrusiveValidationMode" value="None" /> </appSettings>20. Build/Run (Ctrl+Shift+B, Ctrl+F5). Test the validation. It should work. If not, go back over the previous steps. Test the Select feature. It will fail. We will fix that in the next section.21. (Information only) View the Source for the page. Find the GridView and then find the PNumber TemplateField inside the GridView. Study the structure. Note the two Bind statements as shown highlighted in yellow below.<asp:TemplateField HeaderText="PNumber" SortExpression="PNumber"> <EditItemTemplate> <asp:TextBox ID="gvTxtPNum" runat="server" Text='<%# Bind("PNumber") %>' Width="41px"> </asp:TextBox><asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="gvTxtPNum" ErrorMessage="Jersey Number must be between 1 and 99." Font-Bold="True" ForeColor="Red" MaximumValue="99" MinimumValue="1" SetFocusOnError="True" Type="Integer" Width="20px">* </asp:RangeValidator></EditItemTemplate><ItemTemplate> <asp:Label ID="Label1" runat="server" Text='<%# Bind("PNumber") %>'></asp:Label> </ItemTemplate></asp:TemplateField>8 Stage 5 – Updating the Select Event CodeLeft off here!~!!!!!~!~@!~!~@#@!~!~22. If you have not coded the GridView’s SelectedIndexChanged event, create that event handler now. (Select GridView, select Events icon in Properties Window, double-click the SelectedIndexChanged event.)If you have already coded this event, you have noticed that it doesn’t work for several reasons: a. When we added the Delete LinkButton, this messed up the numbering of the cells, e.g. “Edit Select” is Cell 0, “Delete” is Cell 1, “PlayerID” is Cell 2, etc. b. “PNumber” is now a template field and we have to reference it differently.23. The complete event handler should look like as shown below. Note: if you did not put in the HiddenField to store the TeamID, see Step 49 in Lab 8. protected void gvPlayers_SelectedIndexChanged(object sender, EventArgs e) { // Bound Fields int playerID = Convert.ToInt32(gvPlayers.SelectedRow.Cells[2].Text); string lName = gvPlayers.SelectedRow.Cells[4].Text; string fName = gvPlayers.SelectedRow.Cells[5].Text; //int jerseyNum = Convert.ToInt32(gvPlayers.SelectedRow.Cells[5].Text); DateTime bDate = Convert.ToDateTime(gvPlayers.SelectedRow.Cells[7].Text);// Template Fields Label lblTeamName = (Label)gvPlayers.SelectedRow.FindControl("gvLblTeamName"); string teamName = lblTeamName.Text;Label lblJerseyNum = (Label)gvPlayers.SelectedRow.FindControl("gvLblPNum"); int jerseyNum = Convert.ToInt32(lblJerseyNum.Text);// Hidden Field HiddenField teamIDHidden = (HiddenField)gvPlayers.SelectedRow.FindControl("TeamIDHidden"); string teamID = teamIDHidden.Value; string output = String.Format("PlayerID={0}, LName={1}, FName={2}, " + "JerseyNum={3}, BDate={4}, " + "Team={5}, TeamID={6}", playerID, lName, fName, jerseyNum, bDate.ToShortDateString(), teamName, teamID); txtMsg.Text = output; }24. Build/Run (Ctrl+Shift+B, Ctrl+F5). Test thoroughly.9 Stage 6 – Wrapping Up and Posting to Lucius25. Make sure that your Identity node:<identity userName="vsu\YOUR_ID" password="YOUR_PASWORD” /> is in Web.config for your course website (not Lab 9).26. Upload to Lucius a. RDP to Lucius. b. Copy your local Lab9 folder to your root folder on Lucius (c:\students\yourID). c. Copy your lab9 folder that is inside your App_Code folder to the App_Code folder in your root folder.27. Test – Open a browser NOT on Lucius and pull up your page (https://lucius.valdosta.edu/yourID/lab9). Test thoroughly. If there is an error, open a browser ON Lucius and pull up your page (https://lucius.valdosta.edu/yourID/lab9). 28. Check links before stopping! a. Do you have a link (that works) from your course home page to the home page for Lab 9? b. Do you have a link (that works) from your home page for Lab 9 to your course home page? Log off LuciusYou’re done!10

Figure 1 Design to Allow Insertion Into a Gridview

Details

Download

Copyright

We respect the copyrights and intellectual property rights of all users. All uploaded documents are either original works of the uploader or authorized works of the rightful owners.

Support