Transcript:
This is part 61 of kitview tutorial in this video. We’ll discuss how to get value from a control that is present inside an item template of a gridview template filled column. Let’s understand what we mean by this. With an example, we’ll be using these two tables in this demo products and product details products table contain the basic information about products that is their. I’d, name and price and product details table contain the detailed information about products product. I’d in this table is a foreign K referencing. ID column from products table so based on these two tables. We want to design an aspnet web application project with two web forms. The first wave form is going to be products Dot Aspx page, which is going to display all these products inside a grid view control and the first column, the grid we control should be a template here and within that template field, we want to have a link button control, which is going to be clickable and then the link button should display product. Ids now. For example, when I click on a product, Id 1 then the user should be redirected to another page, which is product details. Aspx passing the ID of the product on which the user has clicked and on product details. Dot Aspx page. We should then display the detailed information about that specific product, so let’s see how to achieve this. So obviously the first step here is to create these two tables, which I have already done and here is the sequel script to create those tables and the next thing that we need to do is write the required stored procedures to retrieve data from products, table and product details table, which also. I have already done so here. We have the stored procedure so the first stored procedure here is going to retrieve. I’d name price columns from products table, so that is pretty straightforward. And then this stored procedure right here is going to retrieve product details by Id so basically, when we pass the product ID to the product details page. We should get the detailed information about that product by Id so this is. What is the stored procedure which is going to return that data so notice? This stored procedure has got ID parameter and then within the stored procedure, we are joining products table with product details table and then selecting all the columns from both the tables. And then finally we are filtering based on the product. I’d that gets passed to the stored procedure, so we have those two stored procedures as well. So let’s actually go and create these procedures now. And now let’s flip to visual studio so here. I have an empty aspnet Web application project. All I have done. So far is included the connection string to our sample database so that this project let’s add a new platform and lets name it products dot aspx and on this platform. We need a creepy control, so let’s drag and drop a gridview control so that should be present under the data tab, and then the first thing that we are going to do is what we are going to turn off auto generate columns. Okay, so now within this grid view control, you know, the first field should be a template field, so let’s include the column’s element and inside that we are going to have a template field and for this template field, the header text is going to be ID and within the template field, we are going to have item template and inside that we want the link button because that’s what is going to display the product. I’d, so let’s drag and drop link button there, okay, and then we also want two more bound fields so to display the name and price, so let’s go ahead and include bound fields and we need to specify header text so header text is going to be named and another thing that we need to specify is the data field so data field is also going to be named so basically. This is the stored procedure, which is going to return the data for the first grid view control. And if you look at the column name, its name and for price, its price and for. I’d this I’d, so we are going to have another bound feel and header text here is going to be price and for this. One data field is going to be price Now. If you look at the template field right here, we need to bind this link button to the value that is present in this column right so here. The text of this link button is going to be bound to so angle brackets percentage hash, so we are going to use this eval method and then say we want the. I’d, I mean text property to be bound to the value that is present in the ID column of the data source. Okay, and then once we click this link button, what should happen? We should rewrite the user to product details. Dot Aspx page so first of all, let’s go ahead and include product details toward Aspx page. So let’s name this product details. Dot Aspx. Alright, so we have the destination page. Now now, you know, we need an email handler method associated with this link button so on click of this link button. We want a method to be executed in the only server, so we need to have an even handler method, so within the code-behind file of this product store aspx page. We are going to have a given handler method, so let’s make a copy of this one, and then lets me change the name of this one to link. Button one underscore click, so this is going to be the method, which will be called on. Click of this link button, so lets. Suppose here that so on click equals link button one underscore, click. Alright, so now let’s actually write some idiot or net code to retrieve data from sequel server so that import the area or namespaces, we need systems or data systems or data or sequel client and finally system load configuration, all right, so on the page load if not is post back, so if it’s not a post back if it is the initial get request, first, read the connection string and for that, we are going to make user’s configuration manager class, and that’s the name of the connection string within the Web config file. Next, we want to create an instance or sequel connection class, so let’s call that con equals new sequel connection and we are going to pass the connection string that we have just read from the Webcom Vic trial and next we need our sequel command object and this sequel command object is going to execute this root procedure as we get basic product details, and then this sequel command is going to use that connection object to execute now. This is a stored procedure so command Dot command type equals command type dot stored procedure and this stored procedure doesn’t expect any parameters to be passed. So now all that is left is to execute the command so command Dot execute reader, but before that, we need to open the connections. Let’s go ahead and do that so connection Dot open and whatever results are this command execution returns. We are going to set that as the data source for the grid, we control and then call the data bind method. All right now, you know. This is going to display the data within the grid view control, so let’s go ahead and run this and let’s make sure it displays the data. Okay, all right, we have our data there. So when we click on this at the moment, nothing is going to happen because we have not written code to respond to that. Click event so we will do that in just a bit first of all. Look at that! Why does it display? I’d name price I’d name price twice. Let’s actually look at that. Let’s see what the stood. Procedure is returning so that stored procedure is returning Just one set of Id name and price, but here we have that displayed twice. Let’s look at the products Dot Aspx page. So we actually want to turn that to false. We have set that to true, that’s. The reason so we have the data as expected. Now, let’s quickly auto format this grid view control so that it looks a little nice, so let’s auto format this and choose maybe colorful scheme all right, now, within the code-behind file when we click that link button, we want to redirect the user to this page that is product details Dot Aspx page, So let’s copy that name. And we are simply going to use response tort redirect, and we want to redirect the user to product details Dot Aspx page and we want to pass the ID of the product as part of the query string so question Mark, Id equals, and we need to get the ID of the product on which the user has clicked. So how are we going to get that? So that’s the tricky bit. So here the ID value is displayed at you. Know inside the link button. So if we can get hold of that link button inside that template field, our problem is solved. We can simply use the text property of the link button and then retrieve the Product ID. So now, you know, when we click that link button, which method gets executed. This is the method that gets executed. And if you look at this even handler method, there are two parameters. One parameter says. You know, object sender. So what is the sender parameter? So basically, this is going to contain a reference to the control that has raised this event. Okay, so which is the control that has raised this event? It’s the link button, so whatever we are going to receive as part of this parameter is going to be a reference to the link pattern. Okay, which means we can typecast that safely to a link button because we know that the control will ever go. We’ll come into this even handler method only when the user clicks. You know that link button, so what we can do here is typecast the sender to be of type link button and then retrieve the text property. It’s as simple as that. So now this should redirect us to the destination page, so let’s quickly look at that in action, so let’s go ahead and run this now. And once we click on product. I’d one look at that. We are now redirected to product details. – aspx page and the ID of the product is passed. You know, as part of the query string now. All that is left is to use the product. I’d call the other stored procedure as we get product details by ID and then display that data within label controls. So let’s quickly do that so first of all, let’s go to product details. DOT ASPX page. And we need to design this page now to speed things up what I have done is. I already have the HTML which is going to lay out some labels. So if you look at this? HTML, it’s pretty straightforward. We have a table here, and then this table has got several TRS and within each DI, You have got a TD so it says I D there. And then there’s a label to display that ID value. So if you look at the design, it’s going to be pretty straightforward, and basically we get that background color Because I have said that. As the light golden, you know, yellow color as the background color. Okay, so pretty straightforward. HTML there. I’ll have this HTML on my blog. In case you need it, OK, So now in the code-behind file, so if not is post back, so if we land on this page, then we know that we are going to get that query. String that is product. I’d, so we need to retrieve that a product. I’d so string product. ID equals request Dot query string off. What is the name of the query string it is? I’d okay, so all that is left now is to write the ad or dotnet Koran to speed things up. Let’s actually make a copy of the code that we have already written first of all. We need these three namespaces so let’s copy them and let’s paste them right here, and let’s go back to products Dot Aspx page and then let’s copy this piece of code and within product details, so we want the connection string. We created the sequel connection object and we want to execute this stored procedure. SP get product details by ID. And that is a stored procedure, but that stored procedure expects a parameter to be passed. Right and at Id is the name of the parameter, so we need to create a sequel parameter as well so sequel parameter, Let’s call this parameter and we need to specify the name of the parameter and the value, so the name of the parameter is going to be at ID. And where is the value for ID? We are getting that from the query string, so let’s pass that. And finally we need to associate this parameter object with this command object so command dot parameters don’t add. We want to pass the parameter, all right, and we open the connection. Execute the command here. We don’t have a grid. We control so what we can do. Instead is store those results in a sequel data reader object and then so while we are reading the data from the reader, so while our dia dot read what we want to do is set the label values within product details page so notice that the labels are named LVL ID! Lvl named LVL Price. So we need to simply set their text properties, so LB L DOT LB elided or text equals. Rdr of Id dot two strings. So we need to do this. For all! The columns that are returned and to speed things up. I have typed that code as well already. So instead of making you see me type, Let’s copy and paste that there. So the same code. Alright, so let’s go ahead and run this now and another thing that we need to keep in mind. Look at this one. When a user directly navigates to product details. Dot Aspx page, It throws this error. SP get product details by Id expects a parameter app Id which was not supplied That’s basically because when the user lands on this page notice that there is no query string passed there if there is no query string passed. What do you think is going to happen, it’s? Actually, you know this product. I’d will be now, right, so nothing gets passed to the database, and that’s why we are getting that message. So you know, if a user lands on this page, and if there is no, I’d query string, you know, you want to redirect that user back to product details page. If that’s the case, you simply do a check here. So if the product I’d is equal to now, then we will simply redirect the user back to products page. All right, so let’s read on this page now product. I’d will be now look at that. We get back to the products page now. When I click on Product, I’d one notice that we land on this page and we have that I’d passed. Thank you for listening and have a great day.