Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In other videos in this chapter, I have described how to use the DetailsView control to present a data entry form and then how to insert data into a server-side database from data passed into the control by the user. Now, I'm going to describe how to bind together a list page, such as the Authors.aspx page I'm showing on the screen, with the Insert Form so that the user can link from the list page to the form and then return to the list page when they finish their task. I will start in Authors.aspx. This file currently shows a list of existing data.
I'm going to create a simple hyperlink that takes the user to the AuthorInsert page. I'll click right after the table, clicking to the right of the control and then I'll press Enter to create a new paragraph and I'll press Enter one more time to push the SQLDataSource down a line and then click above the SQLDataSource into the now empty paragraph. Now I'll go to the Toolbar panel. I'll move the cursor over the tab and then I'll pin the Toolbox and then I'll locate the Hyperlink control, which will be found in the standard category of the Toolbox. Then I'll click and drag the hyperlink and drop it into the paragraph. An ASP hyperlink simply generates an anchor tag and you set its values, that is the text or image it displays and the URL to which the user will navigate, through the control's properties.
With that selected, I'll go to the Properties panel, I'll double-click on the Properties panel header to make it float and then I'll drag it out, so I can see the properties more easily. Notice that the default text is Hyperlink. I'll change that to Add New Author and when I press Enter or Tab, I'll see that new text reflected in the Design view. Now I'll indicate which page I want the user to navigate to. I'll go to the NavigateURL property and I'll click into the text input next to the name.
Notice I then see a triple dot button, which allows me to browse for a target page. I'll click the button and I'll select the file, AuthorInsert.aspx. Then I'll click OK. Notice that Visual Web Developer uses the syntax starting with the tilde character which stands for the Root folder of the website, then the slash and then the name of the page. So now, I'll test my hyperlink. I'll press Control+S to save the file and Control+F5 to run it in the browser. When the Authors page appears, it shows the new link. I'll move the cursor over the link and click and I'm taken to the Insert page. Now I'll describe how to handle navigating from the insert form back to the list page. I'll close the browser and then switch to the file AuthorInsert.aspx. This is the same AuthorInsert.aspx that I used in another video of this chapter.
If you didn't work through the previous video that described how to create the insert form, you'll want to do that first before going through these next steps. The insert form in its current state uses a DetailsView to present text input controls for each column. The user types values into the column and then clicks the Insert link. By default, the page simply reloads. I'm going to handle an event that occurs after the data has been inserted into the database and I'll react to that event by redirecting the browser back to the list of data.
This page was originally created with a code file. The name of the code file is AuthorInsert.aspx.cs. I'll go to that file and I'll add a new function. I'm doing this work in C#. If you are doing your own work in Visual Basic, you will need to translate this code into the appropriate syntax but the basic architecture is the same. I will create a function with a protected access modifier and then a return type of void. I'll name the function DetailView_ItemInsert. I'm going to press Alt+Shift+Enter to open to Full Screen so I can see as much code as possible and then I'll scroll back over so I can see the beginning of the function. Now, I'll complete the function signature. I'll put it in an opening parenthesis and then the first item that will be passed in will be an object, which I'll name sender.
In an event handler function like this, the sender argument is a reference to the object that actually generated the event like the DetailView. Then I'll pass in something known as an event object. The event object contains information about the event that just occurred and in this particular event that I'll be working with, which is the item inserted event, the data type of the event object is DetailsViewInsertedEventArgs. So I'll put in the data type, DetailsViewInsertedEventArgs, and then I'll set the name of the event object as simply e for event.
Now put in the pair of braces. When this event occurs, the event object will have a property called affected rows. It's a numeric property and if the insert statement succeeded, it will have a value of 1. So I'll ask the question, if e.Affectedrows == 1. This means if one row is affected in the database, and then I'm going to take that as a condition of success. I'll put in a pair of braces and within the braces, I'll respond to that condition by calling this code, Response.Redirect, and I'll pass in the location of the file I want the user to go to, Authors.aspx.
Notice that I'm ending the statement with the semicolon because I'm working in C#. Now to make this function happen, I'm going to select and then copy just the name of the function to the clipboard. Then I'll go back to the page AuthorInsert.aspx and I'll look at this file in Source View. I'll scroll up to the DetailsView control's begin tag and place the cursor right inside the closing angle bracket. I will press Enter and then I'll put in an event handler attribute, which looks like this, OnItemInserted. This is the name of the attribute which causes the function to be called when this event occurs. I'll put in the equals and the quote and then I'll press Ctrl+V to paste in the name of the function and then close the statement with the closing quote.
Notice that I don't have to put in the parenthesis or actually call the function. The DetailsView object will call the function for me and it will call it using the signature or the number and data types of the arguments that I defined. I'll save all my changes by selecting File > Save All. Then I'll test the page. I'll select Debug > Start Without Debugging and I'm going to type in some values. When I click the Insert link, the data is inserted into the database and as you can see on the screen, the new data has been successfully added. Now I'll also put in code to handle the event that occurs when the user clicks the Cancel link.
I'll return back to the file AuthorInsert.aspx.cs and I'll move the cursor down below the existing functions and press Enter. When the user clicks either of the links, another event called ItemCommand occurs. As before, I'll create a new function starting with protected void and I'll name this function DetailView_ ItemCommand. As before the first argument will be an object which I'll name Sender and the event object passed in, it's the second argument, this time will have a data type of DetailsViewCommandEventArgs. I'll select the appropriate type and give it a name of e.
Then put in a pair of braces. Within the braces, I'm going to ask which link was clicked and specifically I'll check whether the user clicked the Cancel link using this syntax. if e.CommandName == "Cancel". Then I'll put in a pair of braces and within the conditional clause, I'll once again use the same redirect command. I'll just copy and paste it from the previous function. I'll select the code, Response. RedirectAuthors.aspx, press Ctrl+C to copy, click into my new conditional clause and press Ctrl+V to paste.
Now as before, I'll select and copy the name of the function that I just created. I'll save the changes to this file by pressing Ctrl+S. I'll return back to AuthorInsert.aspx and I'll add another event handler attribute. This one will be OnItemCommand. I'll start off by typing On, then press Ctrl+Space to bring up a list of events and the I'll keep on typing until I find the event I'm looking for, OnItemCommand. Then I'll put in the equals character that auto completes the name of the attribute, put in the quote, press Ctrl+V to paste and put in the closing quote.
Once again, I'm simply naming the function that I want to be called when the event occurs. I'll save my changes, I'll return back to the list page and test the whole thing. I'll run the list page, Authors.aspx, I'll click Add New Author and this time I'll click the Cancel link and that takes me back to the author list. So now I have a complete system for adding new data. The user clicks the Add New Author link from the list; that takes them to the form. If they type values into the form and click Insert, that adds the data to the server-side database and returns to the list, or if they click the Cancel link, they return to the list without inserting the data into the server-side database.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 97456 Viewers
61 Video lessons · 84687 Viewers
71 Video lessons · 68887 Viewers
56 Video lessons · 101331 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.