Video: Databinding to User Interface Controls VB

Presenter:Bob Tabor (from LearnVisualStudio.NET)

In this lesson, you will learn how to display data in your ASP.NET 2.0 web applications through some of the new databound controls.


Click here to go to original video page

The following text is a software generated transcript of the video. Click on a minute link to jump to a location within the video

Minute 0
Login in this lesson were going to the heart of cream data driven dynamic websites by demonstrating how to add a SQL Server 2005 express edition database to our website project and the really demonstrate how to retrieve data from a database or to display to the end user s web browser using some new controls that are featured in ASP net 2 0 and fat ASP net 2 0 and 80 net 2 0 combine feature new lightweight model for data access when compared to prove his versions of Sarah s show is the new SQL data source object witching tests with all the functionality from connecting to a database to managing various select insert update and delete commands to delivering that data to controls themselves and additionally a new set of intelligent server controls designed for data binding had added to which make to display the manipulation in the adding updating deleting a
Minute 1
And extremely easy effect limited to lessons this lesson in the next lesson eight to look for all the great new functionality that s containing your two things really impressed me to start working with these upgraded tools the first is how easy would be for somebody who is just getting started to suck you to harness this and start billing data driven websites very quickly because a lot of the complexity of previous versions of ASP net and 80 net have been boiled down to the bare essence making the options that you would choose 99 of the time readily available and easy to get to and the second thing that impressed me was that I like the fact that almost everything can be done without writing any code a rather you would use the visual Web developer 2005 express edition tools in order to achieve a high degree productivity while still getting assess the underlying settings in the source view in the code view
Minute 2
All the aspx file so that you can tinker around with all that your hearts desire okay but first of all what is data binding with data binding is a feature of your user interface controls that allow them to retrieve information from a data source like a database and display that information to the end user for each control might work little differently here some controls display the data in a tabular or gridlike fashion while others display the data in a more details oriented manner and we ll talk about this in just a moment as important note that the controls we been using up until now a text box and label control and also the value property of the drop down list box in the list box can t be data bound now in a case of OS to damage the drop down list box in the list box you can retrieve the list of possible values that are displayed in their respective list areas those can be data bound but the actual selected that
Minute 3
You all those to list based controls can t be data bound but instead really feature controls like the grid view the data list the details view the form view each of these controls were built specifically to provide different views and functionality for your Web applications so they can data bind and achieve a high degree of interactivity with your Web applications without having to buy each individual test author E to individual label also that works in just a moment okay so let s start by creating new SQL Server 2005 express edition database in our project the express edition of SQL Server 2005 allows us to create a small portable file that contains all of the data that we might need to say for application out of work perfectly for websites that run on a single Web server
Minute 4
Company that has a server farm were dozens and dozens of Web servers that handle millions of requests from website visitors on those cases your company would probably use more heavy duty version of SQL Server 2005 to see the mind in this tool will serve the needs of most personal and small business websites I also trust that you have some knowledge of databases like what is the word relational database mean and you should already know the basic definition of the term table column field and so on of these terms are new to you or renew refresher course please review the series of videos for Visual Basic 2005 express edition which is also available somewhere on MSDN or at www VisualStudio net so in those 100 level videos those beginner videos I explain I demonstrate the basics of databases and working with the SQL Server 2005 express edition tools that are integrated to all the express edition
Minute 5
Bulls including visual Web developer 2005 express edition of closely to started a more deliberative creating a new project on a website called lesson 07I ve done nothing to up to this point the first in that I do want to to do is selects in the solutions for the click add item and I m going to select SQL database and it is the purpose of demonstration lesson 7112 is I wanted to a create a customer is database arena creole fictitious Web form that allows our salespeople out in the field to enter information about their customers so I think is because raw primus familiar with the information we would need to collect right first name and last name what company does a person work for a may be what the credit limit of this customer is and how long they do customer things like
Minute 6
In top rated new customers that MBF and what could be a sudden and noticeably this will message box that says that basically alone you should place this database file that you re creating inside an apt data folder would you like to do that and written click yes or will talk about some of the special folders that ASP net 2 0 recognizes in one of the upcoming lessons I believe it s a less number 10 so I will explain to much about the special relationship between these folders and what they do with it is given to that over right now just note that certain meetings going on behind the scenes in a notice whenever I was created to be a database that it actually put it into our app data folder here is that it opens up the database Explorer for a surgery to look at the purchase of data objects that are within our database of this point there are no to
Minute 7
Is in our database answers is the basic building block one would do is I want to add a new table so on a right click tables and select add new table and as good as our table designer here in the main area and so again I m assuming you re somewhat familiar with this song would go through at a fairly quick pace and if this doesn t make sense to get or encourage you to take a look at some lessons already exist that go into this in great depth so really create a customer ID first name stoop for her if the last name March 15 we are going to have a customer or since I wanted a customer will use a small daytime and then finally he will do a credit limits of types for money
Minute 8
And can capture a dollar amount and today I want to adjust this column s properties to turn on the identity make it yes and were also to make this feels the primary key for this table at the recall this customer so the filename as customers MDF and this tables names and the customer so just be aware of the code and naming your regularly that I chose your okay but now we have a customer table in on the go to my default aspx in the design view because I want to start working with Palm with this so that the data to the table which reminds me I actually need a backup one quick step and it puts in getting your so if something to display a webpage so going back to the database explore a warm right click on the new customer table
Minute 9
And when the select show table data about a fault obviously there s no doubt in the tables as we just rated it so put some fictitious information in here with us in favor of source database 21 2003 Kremlin 10 000 today and will goes like Steve Chua or CD now due 225 2000 four are and will be from a 5 000 credit limit leave Brian and K Leahy and will do it or 73 2004 l 2500 credit limit and no go with Chuck 10 fourths and will do here like 81 2004 and will also give him like 35 and 11 okay
Minute 10
Know we have some sample data dinner table you can type in any value that you want to be following along now we want to do is ask a data source to our Web form so I m going to select in the toolbox assurance in the the data area so I can see all of the tools in the data category in the drag and drop a SQL data source should ignore this error for right now and you click on configure data source and ask look at connections as your application use to connect to the database on the selects the only database file that is associate with micro website project and the salami to view the connection string to the data connection string is simply a column a string of data or information that instructs on 80 oh net on how to reference an access this particular database would type it is the security settings and so forth
Minute 11
Xoma click the next button you want to save the connection in the application configuration file so I will revisit this in just a moment and this will all clips that connection file which again tells 80 oh net to know where to look for our database for data directory customers in BF file and we can make this dynamic so that we can change this pretty easily through an XML file you recall the web config file from the previous upper useless and well they will say that data in their sordid go ahead and accept that and click next possess the good way to go about it it and ask us to configure the select statement in a select statement is basically the retrieval of data from our database in this particular case remake of very simple all select statement were going to select all the columns or we could select his individual columns if we wish to it this time
Minute 12
Earn the results at this return from our select statement by a adding a where clause to our SQL statement or to order the rows that are returns we could order based on credit limit or customer since I m a dude in this example because I will leave it fairly straightforward fairly easy on in other videos on www two net will talk about some of them the more debt settings that are at their listed here and go into that quite adept so let s just go ahead and click next for now we can test our query to see what Rose informational be retrieved looks great and then click the finish button here and a promoter to argue SQL data source will be properly configured I m going to go ahead and just close that quick tasks of a menu item and then I m going to drag and drop a great deal onto my designer surface
Minute 13
And at a grid views is a very easy way to display the data that s retrieved from a SQL data source some point or took a quick tasks for our grid view allows me to select the data source we can create new data source from here or we can select an existing 16 source one which we have and does whatever I select that that automatically updates behind the seats only close the grotesque window it retrieves the field names and datatypes and makes them available in time of preview mode to seniors assuring data does national retrieve data from the database it just uses the data definitions in order to a populated preview what this table of this grid watch look like it s in now that is all we had to do it on going to hit to start debugging button on our toolbars and asked if
Minute 14
Ought to enabled blogging absolutely analysts see what we get so tremendously easy was to retrieve data from a database and display it on a web form it was almost too easy now for what you do is and we ll will do over the course of the next few moments and the next lesson as well is how plus more bad scenarios looks going to get right now so the gravy works great and wanted display the data from our database in a tabular format for work and want to have a more details oriented view while I do now is at another page to my website mostly to default to that will just final click the add button the design view for the fall two aspx and the somewhat on do is drag a details to or to the
Minute 15
Designer surface or move it into place here and now equip our little quick tasks of menu and select a data source memo said there is no data source available soma click new data source and this is the holder shortcuts would have had to drag and drop and configure a SQL data source independently of the steps so Ringo through the same processor of selecting a database as our type of data that were going to select from renaming our ID for our data source for us to us to ask what connections your application connects to the database nose and dirty have this connection string and this connection strings being pulled from our web config file the previous time we set up a connection to the specific customers MDF database I was saved into a connection string property saved in a rebel config were just merely pulling that back out and reused
Minute 16
At again I d need to specify what I will be pulling from the database against the select all columns by clicking the check mark next to the and then click next month with the tests are carried to see if we are indeed pulling back all the columns and all the rows from our customer table and looks as we are sure to click the finish button okay and we resize this a usable handle and writing inside and I would go back to the quick tasks menu and select autoformat and you see here that I can Celexa from Paris configured color combinations to make my top to make my little table move data airfield that more attractive and is quite a few to choose from of the stick of this professional look and then click okay
Minute 17
Like and it feels I can ever remove fields from this list I can also enable paging and by enabling paging on adding a little paging navigation bar to bottom that allows the user to navigate from one page of data to the next page of data each page of data is equal to a row in the database and Glenn close that saved we ve done and then click the start button looks less to do this to us right click default today is the absence of this is a sharp age and now we will start debugging agency again I have quite a functionality enables here without having to do a lot of work I just was able to drag and drop right zero code in order to display the data from the database here on my weblog and I can navigate between the rows that are in my customers table
Minute 18
Bar the paging bar near the bottom of a virtual that can mind him to show you the base functionality to them I will show you how to tweak any of the information inside or you might have to have a need for some more complex of logic where you are of enabling the selection of certain of certain customers based on similar criteria of those are the kinds of things that were not in covering the series of lessons this again is just geared towards getting you up and running very quickly and you can rely on other videos or articles or books to fill in some of the details and how to get a little bit more complex and take more control over what you don t hear but I want show you the source to you because even though we re not writing any code there is code source code is written in the form of tags in our HTML so notice here that we have one of our server control tags if he
Minute 19
He details view as a lot of settings that are associated with the ID property rights server allows paging equals true okay since the data source and hear the four color alone the grid lines known hiding He insist on it on and even within that control the beginning check for that control anti anything for a data control way down here there s a bunch of other tags that define things like the style and also the fields of data that are being pulled back notice that in this field section that we have several AFP power filled server controls within each one of these Brownfields point to a data field from the database so that s how about it and knows how to bind to certain fields are you going here in change anything you want for sample to want to remove my customer since field all you do to select his entire entire line click the delete key on my keyboard
Minute 20
And now the next time that I run this you ll notice that that field information has been removed so it s fully customizable we can change anything we want to from the source view but there is no code behind JC here we have our script run as for Rochefort we have no Visual Basic code we ve written in order to enable this functionality begins when talking about at the beginning of this lesson when I said that the ASP net net to have no server controls for data binding are very intelligent the very full full featured reform show without having to write any of server side code okay for less extends examples of that were using both the grid view and the details view on the same web form so we can enable a little master details have such which reselect one of the rows in the in the grid view and it will show the details
Minute 21
All of that row in the detail view now in the past and you can see this for some reviews that I wrote on the web are great of a website this little bit more intense and require quite a bit code required on the use of a number of different controls for each of the fields of the retrieved from the database however in ASP net two though this is made extremely simple so what should this let us add to the nether items and other web form to her project closely with the defaulting default three aspx and double click the button and the rest of the design view and let us first graphic aid group even the place
Minute 22
Up with this neared the left hand side will wonder here with your and will put eight details view and we will put that over here more to the right hand side up work so I get so and now let s configure this power grid view and for going to select a new data source again returning to the same exercise of selecting database select in the connection string for the web config file see here were going to select all columns click next contestant who want to ignore that s okay probably works and click the finish button note that it s not a little bit of a problem careful to move things around the purpose below that should work
Minute 23
This one will therefore rose but you might need conscientious of this if you are using this in a real application of Singh Malik and figure our details view and I m going to select the existing data stores and I can turn on some of these other options run the lead to enable paging off a code defeat the purpose one current troubleshooter in the space that is so old that okay so or try to accomplish here is by clicking on one of the rows in the top you ll need to Bula displayed a given row all the details of the road in the bottom so you do offer configuration appear for example one of the things that I need to do is select enable selection is to create a new link over here or on in the elbow and leftmost column called select and we can change this to you like a little icon of some sort or it s been a more dance scenario we can just use the first in
Minute 24
As input a hyperlink of those spices the selection of a minority use the most simple case here in just at a selection column today and then a link that would probably do it although it probably should remove some columns goes to this list remove like a customer ID by to show how do that again I m sorry it was good at columns link on the grid view quick tasks menu and we see down here are fields that we currently have here are the available fields of top and we can insurgency here a checkbox field hyperlink field image button command and a template and so on here are bound fields which really have all those available right now solicitor this was take home to get rid of the customer since fields to a clickable less fun must get rid of the credit
Minute 25
Limit fields and get rid of the customer ID fields smell does have first and last name and then select okay and then for the details all the details will be displayed at the bottom so first was named and the customer since credit and customer details in wanting me to do is write some code specifically that will sync these two also the one awry select an item in my grid view that the details view will reflect that a changing show to do the vast and Russell lacks my grid view over here go to my defense view of my properties and I m going to find a selected index changed and I miss his double click inside their and that will bring out a grid view ones selected index changed event
Minute 26
Antler so here what type something like this so details view one page index equals grid view one selected index up selected index okay know why they use the page index in the details view because the details you want in terms of pages so each row represents a page or as the grid view works in terms of rows so we have a selected index on just a difference in terminology to reflect the different archival functions of the road perform internally so that should be all we need to do no less right click default three and said starters said his age and in other applications see what happens crossing fingers here okay so now you see that at all and so
Minute 27
Good that Bob Tabor is selected by default of the slow growing Feely and knows whenever a clickable link next to Brian Feely all his details appeared on the bottom sandwich or better host Steve and so on so we were able to enable a master details view with one line of code which is a little bit configuration were them I d taken multiple lines of code in the past a lot of setup in order to achieve basically the same things is very impressive and is to allow you since you re just getting started to write much more powerful applications much more intuitively without having arrives a ton of code so you impress a lot of people here by just is bringing these kinds of things out and into your organization is shown in the current things that you do or to your friends or whatever the case might be OK sought to this point always shown you are two controls the grid view in the details new entity noticed that the only thing we did with these was displayed
Minute 28
Alleys wouldn t allow any in line editing out any updating adding deleting of any values here if you just need to display values you want to use the grid view and the details for you however if you need to do some in line editing of the values you can still use the grid view Bourgoin need to set some additional options and if you want to be able use something like the details view but I allow the users to change the values from that perspective instead you ll have to use a form view which is a whole different control and we ll talk about both of these topics in the next lesson in lesson number eight so hopefully or he will fall along that a lot of these things made sense if you didn t understand some the database concepts once again I urge you to take a look at some of the other material that I created for MSDN for the Visual Basic team with
Minute 29
To sharp team that will describe how to use the integrated SQL Server 2005 express edition tools into the visual IDE in order create databases with it also explains what relational databases tables rows all those things are so pleased to that resource or there s no brother places online where can find similar information but you need research that because this is the most powerful stuff you can do with this tool it s not really the difference between writing a aspx page and just regular old html page so will be enjoyed as video please visit www learnVisualStudio net to download and watch or former videos just like this one aimed at all skill levels on many different topics related to see sharp Visual Basic ASP net and more thinking