Lab 6 Insert controls in web form

Transcription

1 Lab 6 Insert controls in web form Objective: These exercises will guide you through the procedure of inserting controls in web form Equipment: 1. PCs with Windows 10 and above 2. Internet Explorer/Chrome installed in PC 3. PCs with Visual Studio Community 2017 and above Exercise 1.1 Using Label, box, Radio, CheckBox, DropdownList and Control 1. Open Visual Studio. From the File menu, click File New Web Site 2. Choose Visual C# from Template and choose ASP.NET Empty Web Site. Name the new website as ControlsWebSite and stored it inside the default folder. Click OK. 3. Add a new Web Form to the current website and name it as WebFormCtrl1. Create the user interface as shown in the following: Institute Of Technical Education - 1 -

2 Properties of the controls on the form are given in the following: Control Page Property Title Setting Feedback form Label lblname Name lblclass Class lblrating Feedback Rating lblyear Year of Study Box txtname txtclass Radio GroupName Checked rdyear1 1st Year StudyYear True DropDownList CheckBox GroupName Checked rdyear2 2nd Year StudyYear False drprating cbregister I would like to register my interest on this cbcontact I will recommend this interest group to my btnsubmit Submit Feedback btncancel Cancel 3. Populate Rating DropDownList control by clicking the Collections button of the Items property, Edit Item, and add in the following: A - Excellent B - Good C Average 4. Save, build and run the project. Institute Of Technical Education - 2 -

3 Exercise 1.2 Using box, DropdownList, Tables and Controls 1. Add a new Web Form to the current website and name it as WebFormCtrl2. 2. Insert a table with 5 rows 2 columns. 3. Create the user interface as shown in the following form. Properties of the controls on the form are given in the following: Control Property Setting Page Title Currency converter Label lblfrom Convert From lblto To lblamount Amount of Money DropDownList drpfromcurrency drptocurrency Box txtmoney btnconvert Convert btnreset Reset 5. Populate both DropDownList controls by clicking the Collections button of the Items property, Edit Item, and add in the following: SGD USD EUR JPY HKD MYR R CNY AUD 4. Save, build and run the project. Institute Of Technical Education - 3 -

4 Exercise 1.3 Using Radio List, CheckBox List, Controls and Table 1. Add a new Web Form to the current website and name it as WebFormCtrl3. 2. Insert a table with 7 rows 2 columns. 3. Create the user interface as shown in the following form. Properties of the controls on the form are given in the following. Control Property Setting Page Title Survey Form Radio List rbltitle Box txtfirstname Box txtlastname Box txttelephone CheckBox List cblhobby btnsubmit Submit btncancel Cancel Institute Of Technical Education - 4 -

5 3. Click the Items property of the rbltitle and add the following menu items: Mr Mrs Miss Ms Dr 4. Click the Items property of the cblhobby and add the following menu items: Body painting Underwater photography Rice Sculpture Aerobics in the water Taming wild animals Bungee jumping Fashion Movies Mountain climbing 5. Save, build and run the project. Institute Of Technical Education - 5 -