1 00:00:00,510 --> 00:00:05,730 Hello and welcome to the park to all build your first web app. 2 00:00:06,000 --> 00:00:12,480 In this part we are going to add a web form. 3 00:00:13,350 --> 00:00:15,660 So let's add a web form. 4 00:00:15,690 --> 00:00:21,840 So within the solution Explorer window match right click on this part. 5 00:00:21,840 --> 00:00:24,580 This is my first web app. 6 00:00:24,640 --> 00:00:29,000 The one I've highlighted here with the little globe next to it. 7 00:00:29,010 --> 00:00:35,390 So right click on that and click on add an option here to add. 8 00:00:35,820 --> 00:00:39,090 And there is an option too for web form. 9 00:00:39,240 --> 00:00:47,480 So let's look for it still option here to add web form. 10 00:00:47,560 --> 00:00:49,000 That's right at the bottom here. 11 00:00:49,150 --> 00:00:52,730 So click on that to add the web form. 12 00:00:53,170 --> 00:00:56,720 We need to give the web form a name. 13 00:00:56,830 --> 00:01:00,160 I'm going to call the form identity. 14 00:01:00,160 --> 00:01:04,010 You can call it whatever name you one doesn't really matter so I'll just call mine. 15 00:01:04,020 --> 00:01:07,170 I don t t. 16 00:01:07,420 --> 00:01:09,150 And click OK. 17 00:01:12,300 --> 00:01:20,310 So this is generated a SB x file. 18 00:01:20,460 --> 00:01:24,540 So that's the name that identity dot A S P x file. 19 00:01:24,540 --> 00:01:29,100 So this is called like a web form template. 20 00:01:29,100 --> 00:01:36,010 Notice the hasty e-mail has got it doc type the hash CML the head the body and so on. 21 00:01:36,240 --> 00:01:40,440 And then it's got the form tag in in there as well inside the body. 22 00:01:42,150 --> 00:01:54,660 So it's basically generated and paste CML template the DOT ESB x file extension it's used to indicate 23 00:01:55,200 --> 00:01:58,280 that this page is a web form. 24 00:01:59,460 --> 00:02:09,150 So consist of a combination of hasty AML files mixed with a speed dot net declarative. 25 00:02:09,570 --> 00:02:11,900 So the first line here is in haste. 26 00:02:11,950 --> 00:02:17,870 It's p x dot net airspeed dot net declarative. 27 00:02:17,880 --> 00:02:22,590 And then you've got some hasty e-mail mixed with it as well. 28 00:02:22,590 --> 00:02:29,620 So these ones are hate mail and you've got the first line here which is an airspeed on net declarative. 29 00:02:29,940 --> 00:02:36,590 We are going to use the designer to actually flesh out this web page. 30 00:02:36,600 --> 00:02:45,650 So I'm going to ignore this airspeed dot net and paste CML generated template here and go for the designer. 31 00:02:46,000 --> 00:02:47,640 So click on this option here. 32 00:02:47,640 --> 00:02:49,760 The set designer. 33 00:02:49,830 --> 00:02:50,310 All right. 34 00:02:50,310 --> 00:02:57,520 It should generate so inside here whatever we create here is what the page will look like. 35 00:02:57,520 --> 00:03:00,250 So you can see the mouse flashing inside it. 36 00:03:00,270 --> 00:03:04,580 So this is where we'll start to design our form. 37 00:03:05,250 --> 00:03:08,570 The design really is a convenient way. 38 00:03:08,730 --> 00:03:10,190 It's a visual editor. 39 00:03:10,610 --> 00:03:13,960 This look kind of like what you see what you get editor. 40 00:03:14,010 --> 00:03:22,560 So you can this allows you to actually add mark up to your web page without having to access the hasty 41 00:03:22,560 --> 00:03:22,920 e-mail. 42 00:03:22,920 --> 00:03:27,820 I see us as code behind it OK. 43 00:03:27,830 --> 00:03:28,390 Let's talk. 44 00:03:28,400 --> 00:03:30,870 So why because I is flashing inside the box. 45 00:03:31,290 --> 00:03:33,710 I want you to type in the text. 46 00:03:33,710 --> 00:03:40,960 What is your first name. 47 00:03:41,120 --> 00:03:45,560 What is your 48 00:03:49,430 --> 00:03:50,390 first 49 00:03:57,000 --> 00:04:00,970 name question mark as well. 50 00:04:02,890 --> 00:04:07,240 After the question mark tab two spaces. 51 00:04:07,650 --> 00:04:11,590 Are we going to add another control to that. 52 00:04:11,860 --> 00:04:18,160 So we gonna add a control item here using the tool box on the left here you can see we've got some tool 53 00:04:18,160 --> 00:04:19,000 box here. 54 00:04:19,240 --> 00:04:24,960 So I just click on that and that should generate the tool box. 55 00:04:25,060 --> 00:04:31,660 Trying to build that up the moment if I click on the standard here it will expand the tool box. 56 00:04:32,020 --> 00:04:39,130 This pin here allows you to auto hide how you can pin it if you want it to stay there for a while without 57 00:04:39,130 --> 00:04:40,090 moving about. 58 00:04:40,150 --> 00:04:42,320 Okay. 59 00:04:42,510 --> 00:04:42,930 All right. 60 00:04:42,940 --> 00:04:45,150 Expand the standard one here. 61 00:04:45,160 --> 00:04:46,990 Just click to expand that. 62 00:04:47,350 --> 00:04:50,110 If you scroll down there should be one for a text box. 63 00:04:50,140 --> 00:04:51,010 There's one here. 64 00:04:51,010 --> 00:04:52,240 So double click on it. 65 00:04:54,350 --> 00:04:54,950 All right. 66 00:04:54,990 --> 00:05:03,890 Finally fi click told her high that you would notice that it is inserted a control item next to this 67 00:05:04,340 --> 00:05:04,940 text here. 68 00:05:04,940 --> 00:05:07,890 What is your name. 69 00:05:08,360 --> 00:05:08,910 Okay. 70 00:05:08,930 --> 00:05:11,830 So we're going to repeat what we did in this step. 71 00:05:12,050 --> 00:05:30,610 So I'm just going to tab down and type livable space and do what is your last name. 72 00:05:32,930 --> 00:05:33,950 All right. 73 00:05:33,950 --> 00:05:44,780 And question mark and then give two spaces and then we double click on the text box again in from the 74 00:05:44,780 --> 00:05:47,960 toolbar to box double click. 75 00:05:47,960 --> 00:05:50,440 And it has inserted. 76 00:05:50,550 --> 00:05:50,900 All right. 77 00:05:50,900 --> 00:05:57,140 So we're beginning to see how our form will look inside the design. 78 00:05:58,730 --> 00:06:01,100 We also want to add a button. 79 00:06:01,100 --> 00:06:08,460 So place a mouse inside a designer top down okay and actually be enough. 80 00:06:08,710 --> 00:06:16,690 So we are going to add a button see where we the mouse CASAREZ And in the toolbar here we've got an 81 00:06:16,690 --> 00:06:24,880 option called button so I'm just going to double click as you can see it's inserted the button we are 82 00:06:24,880 --> 00:06:26,590 going to add a label. 83 00:06:26,590 --> 00:06:34,300 So I'm just going to click enter twice to create some space and we are going to go to the label option. 84 00:06:34,300 --> 00:06:41,740 So that's a label here in the toolbar just double click and it's inserted a label. 85 00:06:42,100 --> 00:06:46,570 I am going to stop this lecture here is gone. 86 00:06:46,640 --> 00:06:52,000 Of our six minutes are try and try not to make the lectures too long. 87 00:06:52,000 --> 00:06:56,560 So we're going to end here and we will continue in the next lecture. 88 00:06:56,860 --> 00:06:59,920 So we've created some controls in the next lecture. 89 00:06:59,920 --> 00:07:05,910 We are going to customize the controls using their proper to window this property here. 90 00:07:05,920 --> 00:07:08,100 This is a proper tool and I'm talking about. 91 00:07:08,230 --> 00:07:15,120 So we can use a property window here to customize the controls we have set up here. 92 00:07:15,760 --> 00:07:18,150 So see see you in the next lecture. 93 00:07:18,160 --> 00:07:19,720 Thank you so much for watching. 94 00:07:19,720 --> 00:07:20,220 Bye for now.