Displaying Record Details with a FormView Control in .NET

Paint UPCA in .NET Displaying Record Details with a FormView Control

<asp:ListItem>AK</asp:ListItem><asp:ListItem>AL</asp:ListItem> <asp:ListItem>AR</asp:ListItem><asp:ListItem>AS</asp:ListItem> <asp:ListItem>AZ</asp:ListItem><asp:ListItem>CA</asp:ListItem> <asp:ListItem>CO</asp:ListItem><asp:ListItem>CT</asp:ListItem> <asp:ListItem>DC</asp:ListItem><asp:ListItem>DE</asp:ListItem> <asp:ListItem>FL</asp:ListItem><asp:ListItem>GA</asp:ListItem> <asp:ListItem>HI</asp:ListItem><asp:ListItem>IA</asp:ListItem> <asp:ListItem>ID</asp:ListItem><asp:ListItem>IL</asp:ListItem> <asp:ListItem>IN</asp:ListItem><asp:ListItem>KS</asp:ListItem> <asp:ListItem>KY</asp:ListItem><asp:ListItem>LA</asp:ListItem> <asp:ListItem>MD</asp:ListItem><asp:ListItem>ME</asp:ListItem> <asp:ListItem>MI</asp:ListItem><asp:ListItem>MN</asp:ListItem> <asp:ListItem>MO</asp:ListItem><asp:ListItem>MS</asp:ListItem> <asp:ListItem>MT</asp:ListItem><asp:ListItem>NC</asp:ListItem> <asp:ListItem>ND</asp:ListItem><asp:ListItem>NE</asp:ListItem> <asp:ListItem>NH</asp:ListItem><asp:ListItem>NJ</asp:ListItem> <asp:ListItem>NM</asp:ListItem><asp:ListItem>NV</asp:ListItem> <asp:ListItem>NY</asp:ListItem><asp:ListItem>OH</asp:ListItem> <asp:ListItem>OK</asp:ListItem><asp:ListItem>OR</asp:ListItem> <asp:ListItem>PA</asp:ListItem><asp:ListItem>RI</asp:ListItem> <asp:ListItem>SC</asp:ListItem><asp:ListItem>SD</asp:ListItem> <asp:ListItem>TN</asp:ListItem><asp:ListItem>TX</asp:ListItem> <asp:ListItem>UT</asp:ListItem><asp:ListItem>VA</asp:ListItem> <asp:ListItem>VT</asp:ListItem><asp:ListItem>WA</asp:ListItem> <asp:ListItem>WI</asp:ListItem><asp:ListItem>WV</asp:ListItem> <asp:ListItem>WY</asp:ListItem> </asp:DropDownList> </td> </tr> </table> <asp:LinkButton ID= UpdateButton Text= Update CommandName= Update RunAt= server /> <asp:LinkButton ID= CancelButton Text= Cancel CommandName= Cancel runat= server /> </EditItemTemplate> <InsertItemTemplate> <table cellpadding= 0 cellspacing= 0 > <tr> <td style= height:10px; ></td> <td style= font-size:10px;height:10px; >First</td> <td style= font-size:10px;height:10px;padding-left:3px; > Last</td> </tr> <tr> <td>Name</td> <td> <asp:TextBox ID= TextBox1 runat= server Text= <%# Bind( first_name ) %> /> </td> <td style= padding-left:3px; > <asp:TextBox ID= TextBox2 runat= server Text= <%# Bind( last_name ) %> /> </td> </tr> <tr> <td style= padding-top:3px; >Phone:</td> <td style= padding-top:3px; > <asp:TextBox ID= TextBox3 runat= server Text= <%# Bind( phone ) %> />

(continued)

Listing 4-7 (continued)

</td> <td style= padding-top:3px; ></td> </tr> <tr> <td style= padding-top:3px; >Credit Limit: $</td> <td style= padding-top:3px; > <asp:TextBox ID= TextBox4 runat= server Text= <%# Bind( credit ) %> /> </td> <td style= padding-top:3px; >00</td> </tr> <tr> <td style= height:10px; ></td> <td colspan= 2 style= font-size:10px;height:10px; > Street</td> </tr> <tr> <td>Address:</td> <td colspan= 2 > <asp:TextBox ID= TextBox5 runat= server Text= <%# Bind( address ) %> /> </td> </tr> <tr> <td style= height:10px; ></td> <td style= font-size:10px;height:10px; >City</td> <td style= font-size:10px;height:10px;padding-left:3px; > State</td> </tr> <tr> <td></td> <td> <asp:TextBox ID= TextBox7 runat= server Text= <%# Bind( city ) %> /> </td> <td style= padding-left:3px; > <asp:DropDownList ID= DropDownList1 runat= server SelectedValue= <%# Bind( state ) %> > <asp:ListItem>AK</asp:ListItem><asp:ListItem>AL</asp:ListItem> <asp:ListItem>AR</asp:ListItem><asp:ListItem>AS</asp:ListItem> <asp:ListItem>AZ</asp:ListItem><asp:ListItem>CA</asp:ListItem> <asp:ListItem>CO</asp:ListItem><asp:ListItem>CT</asp:ListItem> <asp:ListItem>DC</asp:ListItem><asp:ListItem>DE</asp:ListItem> <asp:ListItem>FL</asp:ListItem><asp:ListItem>GA</asp:ListItem> <asp:ListItem>HI</asp:ListItem><asp:ListItem>IA</asp:ListItem> <asp:ListItem>ID</asp:ListItem><asp:ListItem>IL</asp:ListItem> <asp:ListItem>IN</asp:ListItem><asp:ListItem>KS</asp:ListItem> <asp:ListItem>KY</asp:ListItem><asp:ListItem>LA</asp:ListItem> <asp:ListItem>MD</asp:ListItem><asp:ListItem>ME</asp:ListItem> <asp:ListItem>MI</asp:ListItem><asp:ListItem>MN</asp:ListItem> <asp:ListItem>MO</asp:ListItem><asp:ListItem>MS</asp:ListItem> <asp:ListItem>MT</asp:ListItem><asp:ListItem>NC</asp:ListItem> <asp:ListItem>ND</asp:ListItem><asp:ListItem>NE</asp:ListItem> <asp:ListItem>NH</asp:ListItem><asp:ListItem>NJ</asp:ListItem> <asp:ListItem>NM</asp:ListItem><asp:ListItem>NV</asp:ListItem> <asp:ListItem>NY</asp:ListItem><asp:ListItem>OH</asp:ListItem> <asp:ListItem>OK</asp:ListItem><asp:ListItem>OR</asp:ListItem> <asp:ListItem>PA</asp:ListItem><asp:ListItem>RI</asp:ListItem>

<asp:ListItem>SC</asp:ListItem><asp:ListItem>SD</asp:ListItem> <asp:ListItem>TN</asp:ListItem><asp:ListItem>TX</asp:ListItem> <asp:ListItem>UT</asp:ListItem><asp:ListItem>VA</asp:ListItem> <asp:ListItem>VT</asp:ListItem><asp:ListItem>WA</asp:ListItem> <asp:ListItem>WI</asp:ListItem><asp:ListItem>WV</asp:ListItem> <asp:ListItem>WY</asp:ListItem> </asp:DropDownList> </td> </tr> </table> <asp:LinkButton ID= InsertButton Text= Insert CommandName= Insert RunAt= server /> <asp:LinkButton ID= CancelButton Text= Cancel CommandName= Cancel runat= server /> </InsertItemTemplate> <ItemTemplate> <%#Eval( first_name )%> <%#Eval( last_name )%><br /> Credit Limit: $<%#Eval( credit )%><br /> <%#Eval( address )%><br /> <%#Eval( city )%> <%#Eval( state )%><br /> <asp:LinkButton ID= EditButton Text= Edit CommandName= Edit RunAt= server /> <asp:LinkButton ID= NewButton Text= Add New CommandName= New RunAt= server /> </ItemTemplate> </asp:FormView> </div> </form> </body> </html>

Figure 4-11 shows the code in action In this figure, the form is in Edit mode, meaning I m editing existing data A FormView control maintains multiple modes depending on what action the control is taking For example, when you are simply viewing data, the form is in ReadOnly mode If you re editing existing data, the form is in Edit mode; if you re inserting new data, the form is in Insert mode You can find out the current mode of a FormView control by checking its CurrentMode property Valid values are Edit, Insert, and ReadOnly Remember, you have complete control over the appearance of a FormView control It doesn t automatically put any controls on-screen; instead, you have to specify what the controls are and where they appear Since you probably want different controls when in ReadOnly mode versus when in Edit mode, the FormView control provides you with three different templates in which you describe the controls: ItemTemplate for viewing data, EditItemTemplate for editing existing data, and InsertItemTemplate for inserting new data Take a look at Listing 4-7 and you can see how I made use of all three of these templates Inside each template I provided several controls for manipulating the data

Now look inside the ItemTemplate template: Here I m just displaying data using the Eval function, in which I retrieve the data for a particular column in the data The Eval function does nothing more than retrieve the data But in the case of the other two templates, I want to actually modify data that s in the data set so I don t use Eval with these templates Instead, I put my controls on the page (mostly TextBox controls) and instead of using Eval to simply retrieve data, I bind the control to the SqlDataSource using the Bind function The Bind function causes the control to work as a two-way street, meaning data is retrieved for the current record (via the SqlDataSource control s SELECT statement) and sent back to the database (via the SqlDataSource control s INSERT or UPDATE statement) One particularly handy feature of the Bind function is that it also works with drop-down lists Notice that I m providing a drop-down in two of the templates for the state I bind to the drop-down when the form opens, and then the control will update itself with whatever is in the current record When I select a new state, the drop-down control sends the correct data to the database for the state It works pretty well!