Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[Lesson 8:] Working with the GridView and FormView

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[male speaker] Hello, again. In this video we're going to talk about the GridView and the FormView controls. Now we've already talked a little bit about the basic features of the GridView, but we're going to expand on that quite a bit in this lesson. We're going to, first of all, enable paging and demonstrate how to set some paging features so that we can customize the way paging works within our application. We're also going to enable sorting and see what that does for us. But then we're going to get to the real important meat of our lesson. and that is demonstrating how to enable inline editing, inserting and deleting of data, then saving those changes back to the original data source. This is where the inner activity of your applications is going to begin to soar. And then we're going to move on to looking at the FormView. And we notice from the previous lesson that the FormView is exactly like the DetailsView, but the big difference is that the FormView allows your user to edit the values instead of just view the values from the database. So they'll be able to edit, delete, insert new values, and then save those values back in the database. So let's go ahead and get started. As you see here, I've taken the liberty of creating a new website called "Lesson08." And I have added a database called "Customers.mdf," and this is identical to the customer's database that we used in the previous lesson. If we go over here to the database explorer, you can see that I have 1 table. It is the customer table, and it's exactly the same in its layout. The only thing that I did differently was I added a couple more rows, so I have now 12 rows of data. And I did this so we could demostrate how to use the paging functionality within the GridView. So if you want to take a moment, pause your video, and add some more data to your table, please do that at this time. Okay, so let's move on. I'm going to drag and drop a GridView control onto our designer surface, and I'm going to move it into position. Then I'm going to select the "Quick Tasks" menu and go over here to "Choose Data Source," and select "New Data Source." I'm going to select "Database," just like we've done in the previous lessons, and now it'll ask what connection we should use to our database. We're going to select our "Customers.mdf" file and click the "Next" button. And it says, "Do you want to save a string connection for this database into your application configuration file—the web.config?" Yes. So we'll go ahead and leave that named to the default name. Click the "Next" button. Okay. This is the tab of the wizard that is going to look a little bit different. We're going to do something slightly different this time. And what I'm going to do is select—just like we did previously—the asterisk, so that we're grabbing all columns from the customer database. But I'm also going to click this little "Advanced" button here on the right-hand side, and this brings up the Advanced SQL Generation Options. I'm going to click "Generate, INSERT, UPDATE, and DELETE statements" and then also "Use optimistic concurrency." Now you can read the descriptions of these, but basically this first check box will enable 3 more SQL statements from within our data source to allow the insertion of new records, the updating of existing records, and the deletion of existing records. The second check box—this "Use optimistic concurrency"—is just a preventative measure to make sure that whatever we do within the database, that there's not a concurrency problem. A concurrency happens when 2 users are looking at the exact same record. And by virtue of the fact that User B makes a change and saves those changes back to the database that user A, 10 minutes later, tries to make different changes to that same row of data in the database, that they don't collide and cause what's called a data collision; therefore, the loss of data. So what will happen is that the second person who tries to save data back into the database will be notified that, "Look, the data changed out from under you. "If you change now and hit the save button now, the problem will be that we'll lose the changes that the previous user made, and you haven't even had a chance to review those changes. " So we'll talk about optimistic concurrency in other videos. This is not really the form for that. But for right now to be on the safe side, always select "Use optimistic concurrency," unless you have a reason not to—just as a rule of thumb. So we'll click our "Okay" button, and we'll click our "Next" button back on the Configure Data Source wizard. We can test our little SELECT query. We know that that works, so we're not too worried about that. And we'll click our "Finish" button. Okay, so let's do this—now that we've set up our data source, let us enable paging. And we'll do that by simply clicking the little check box, "Enable Paging." And let's run our application and see what that does for us. Yes, we want to add the ability to debug our application, the web.config file. So as usual, press "Okay" to that. After a moment or so, we're going to see the data from our database displayed in our GridView. This time we're going to get a little navigation bar at the bottom that allows us to navigate through the extra rows that are on page 2. So if you've ever used a search engine like MSN search, for example, you will see that there's the ability to page results. You may get 20 results from the first page and 20 results from the second page and so on until you can view all the results if you want to look at millions of results. So that's all well and good, but what if we want to expand this number from 10 rows— which is the default—to 20 rows, or contract it to 5 rows. How can we do that? How can we also change what's displayed here? I can't go to the end or the beginning if I have a very long set of data—or a very big set of data, rather. How can we modify those kinds of settings in the navigation part at the bottom? Well with the GridView, there are a number of options here at the very bottom called "Paging." So we have this little Paging section in our Properties window. And you can see that AllowPaging has already been set to True. And the page size will allow us to change from 10 rows displayed at one time to just 5 rows— or whatever value that we feel is necessary. We see that reflected here in our preview. And then also there's this drill down PagerSettings option within the Properties window. Let's go ahead and expand this up a little bit so we can see it a little bit more. And what this allows us to do is replace text that we would commonly use to use like the arrow button— like there's an arrow pointing left, typically—in order to go to the previous page; and then there's an arrow pointing to the right to go to the next page. Then we could also enable the going to the first page and last page by using double arrows, by default to the right—or I'm sorry—to the left, and then double arrows to go to the right. We can change all that by changing the FirstPageText, so you see arrow, arrow, or the LastPageText—arrow, arrow off to the right. And the same would be true for the NextPage—a single arrow to the left—I mean to the right— and a PreviousPage with a single arrow to the left. Now we can change that by using different HTML encoded strings that represent arrows or whatever the case might be—you might want to use ellipses or some other character. We could even say Next or Previous, so we could actually do that here. So let's just do this instead—Previous and Next. Now how do we get those to actually sidbplay on screen. Well we do that using this little Mode property of NextPrevious, okay? So let's go ahead and save this and then run it. And notice now that I get a Next and Previous button instead of my numerical buttons, because I changed the mode. And I can change it once again to be NextPreviousFirstLast— First or Last, Previous or First, Next, Next, and you get the idea. So we have a lot of options as far as that's concerned. Let's go ahead and just leave those for right now. Let's save what we have. And like I said before, if you don't want to use text in order to enable these little links, you can use images. And we can click the little ellipses and choose some type of resource that's available on our computer. Okay. So now let's move on to talk about sorting. Sorting is enabled very easily by checking the little Sorting box that's next to the Enable Paging Box—just below it. And that's all I need to do. Now let's go ahead and save what we have here and click the "Start Debugging" button. And notice now that the titles that I had at the very top have been changed to be hyperlinks. So by clicking on a hyperlink—for example, if I want to sort all my records in my record set by last name, all I need to do is click on it once, and you'll notice all the B's appear first—B, F, and then so on. And if I click it a second time, notice that it sorts in descending order. So the first click is ascending, the second click is descending. And I can do that on all my rows—ascending 3,500 to 10,000 or from 10,000 to 3,500. Let's go ahead and shut that down because sorting used to be something that, again, took several lines of code in previous versions of ASP.NET. It took several lines of codes previously to enable paging as well, but now all of that is taken care of— automatically for us—by ASP.NET 2.0, and it's a beautiful thing. Now something else let's do before we get into some of the cooler functionality here is to edit the columns, because I may want to add or remove columns that are displayed here. And I might want to change the way that those columns are displayed. For example, the titles, I may want to give a different name to Customer ID or remove that column all together. And how would I go about doing that? Well let's go ahead and select "Edit Columns." And at the very top, you can see here are all of the available fields. At the bottom, here are the fields that are currently selected and used within my little GridView. So if I wanted to remove a field, all I would need to do is select it and select the "X" button. I can move some fields higher than others, or I can change the order in which the fields are represented. I can move CreditLimit before CustomerSince, and I can move LastName before FirstName if I want to. And in more advanced scenarios, I can add a check box, a hyperlink field, an image field, a button field, and command fields. And we will use some of these command fields in just a few moments. We may not use it from this particular interface, but we'll use them in just a moment. Now let's say, for example, that I want to change the title of the LastName field, because this is pulled directly from the database definition. But we want something that's a little bit more aesthetically pleasing. So we may want to put a space in between Last and Name. So I could go here to the Header Text property of my selected field, put my mouse cursor between Last and Name and add a space. I could name it something completely different if I wanted to. And I was just considering showing you some more advanced stuff like combining the first and last name together. I'm not going to do that for right now, but I will just go ahead and change some of these. And I'll just, for example, get rid of the word Limit and CustomerSince. Okay. So now this should look dramatically different, as you can see here. Okay, let's move on now to enable some of the cooler functionality within the GridView that I've been promising. All I'm going to do is select "Enable Editing." And notice now that I get a new column over to the left-hand side which says, "Edit." So by clicking this, it's going to allow us to edit that current row of data. So let's go ahead and try this out—see if we have everything we need to make this work. Okay, so in the case of Chuck Ravetto, let's go ahead and edit him and change his name to Charles Ravetto and up his credit limit to 4000. Let's go ahead and expand this window—or Internet Explorer so we can see the entire row. Notice that next to Charles Ravetto, I now have the ability to cancel the changes that I just made or click update to save them and properly gate them back into the original data source. So I'm going to do that now—click the "Update" button. And notice now that instead of Chuck Ravetto we have Charles Ravetto, and his credit limit has been improved. Okay, so notice all the functionality I was able to enable by simply checking that "Enable Editing" button on our Quick View—our Quick Tasks menu. Let's do the same thing for deletion. Let's go ahead and run this. And this time let's go ahead and delete Chuck Ravetto form our database by clicking on the delete button, and now he's gone. Let's go ahead and sort by last name, and notice that when we're sorting in descending order that there's no Ravetto between Penn and Starr, okay? So again, able to create a very nice user interface on top of the database very quickly by just a couple of clicks. Now for you who are just starting, this may not be such a revolutionary thing. However, for those of us who have been building web applications for a long time and had to repetitively write the same code each and every time we wanted to enable this functionality, this is a God send, because the beauty of this is that I still have the ability to go behind the scenes and tweak the source, but I don't have to spend hours writing the same code on every project to do basically things that Microsoft has made it so easy to do by including that functionality by default and its controls. So again, I still have the ability to modify and look around with all these settings; however, I didn't have to write any code, and I was able to enable literally hundreds of lines of codes worth of functionality just by dragging and dropping, clicking options, and things of that nature. That's very cool. Okay, so next let us add another page to our website. We'll leave it default, too. That will be just fine. Go to the Design view, and this time I want to drag and drop a FormView onto my design surface. It says, "Right click to choose the Edit Templates task or edit template content. The Item Template is required." Okay. Let's not worry about that just at the moment. Let's go ahead and "New data source," "Database," "Ok." We going to choose from our existing connection string. "Next." Here we will select "All," click "Advanced," "Generate INSERT, UPDATE, and DELETE statements," "Use optimistic concurrency," "Ok." Great, let's hit the "Next" button. We could test the query; I'm going to avoid for right now and just click the "Finish" button. Okay. So now you can see that little statement that we had before—that little gray box that appeared— has gone away now that we've configured this with some real data and some real fields and things of that nature. Notice that by default Edit, Delete, and New happen to be added to our little view. This looks much like the data list that we used—I'm sorry—the details list that we used in the previous lesson, but this time there are some extra functionality with the editing, deleting, and the new functionality. We can also click "Auto Format" and find something that's a little more attractive for our particular tastes. Go ahead and click "Classic," "Apply." We can also click "Edit Templates" to change the way that the data is represented. Notice that there's a bunch of different templates. I have an Item Template, which is kind of used in the View Only mode— like we'll be in by default. While we're editing, we can change the look of the template and remove the text boxes which are generated by default. And we can change them up by using maybe drop-down list boxes or specialized controls that we write to only accept dates or whatever the case might be. But this is a little bit advanced, so I just wanted to show you that it exists— that we can change the look and the feel of every state of this control by modifying its template. So for example, let's go to Edit mode and I'm going to change the font here, just so you can see that. So I'm selecting some text here, and I'm going to change the font from Times New Roman to Arial, and we'll make it bold. We can do the same for the label control itself. We'll change that to Arial and make it bold as well. Then I'm going to save these changes and then come back out and "End Template Editing." So this changed back to the view—the blue's gone, all of the changes I made to Customer ID. Again, this is because this is the default template for the View Only mode. Once I click the "Edit" button, we'll be able to see the changes that I made because it will be in the Edit state. And we can do the same for the New state and for the headers and the footers and everything else. So very cool. We're also going enable paging for this, just like we did in our previous lesson with our Details view. And I think that's all we really need to do right now. So let's go ahead and do that and save. Right click and select "Setup Start Page," and we're going to run our application. Okay, so you can see here that we have the ability to move through each of the rows within our database, and let's go back to—oh let's find Robert Penn. Let's change him. Let's click the "Edit" button to move it from Robert to Bob. And we'll change his credit limit as well. Okay, notice now that I'm in Edit mode, the font changes that I made, the aesthetic changes, Customer ID = 8 are now represented on screen. And notice that without having to do anything special, that all of my values here are represented with text boxes. And I explained again in the previous—just a moment ago whenever we were editing this template, we can change these controls. So we could change the entire layout of this details area to our hearts desire— make the background white or black or whatever the case might be— the fonts, different colors, use different controls; whatever we want to do, we can do that while we're editing. So I'm going to change this to Bob Penn and change him to a $1,000 credit limit and then click "Update." Now notice that Bob Penn, $1,000 credit limit. Okay. We can also create new rows. So I'm going to click "New" and we'll put in here, "Grant." Last name "Tabor," customer since "1/3/2005," and credit limit $50. And we'll click the "Insert" button here at the bottom. Now if we go all the way to the very end, we have Grant Tabor. And just so you know, we haven't really talked about this, but just like we were able to do with the GridView, we can change the pager settings. So if we don't like the current mode which is Numeric, we can use the Next, Previous metaphor instead, in order to navigate between the rows, or even set this up in a master detail form like we did in the previous lesson where we combined the GridView and the DetailsView. We could do the same thing, combining the GridView in the FormView, so that you can see a larger selection of rows and then click on one of those, select it, and then be able to edit it in this little DetailsView. Okay, so did you notice that I haven't written any Visual Basic code at all in this lesson? And I was able to nail so much functionality here; it's just amazing. So again, you're going to be able to get up to speed very quickly, write some really excellent dynamic applications without having to write a whole lot of code, and you'll be able to finish them in very short order. So it's a very exciting time to start learning about developing web applications using Visual Web Developer, 2005 Express Edition. Okay, I hope you enjoyed this video and learned a lot. Please visit www.LearnVisualStudio.NET to download and watch over 400 videos just like this one, aimed at all skill levels on many different topics related to C#, Visual Basic, ASP.NET, and more. Thank you.

Video Details

Duration: 22 minutes and 58 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 7
Posted by: neudesicasp on Sep 26, 2013

In this lesson, you will learn about the GridView and FormView controls and how you can use some of the features of these controls to make editing and displaying of database content easier.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.