Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Create a

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
[male speaker] New controls like the Wizard control. I'll be covering field validators and also the SMTP component for sending a piece of email. We'll combine these various techniques to build a simple web page that you can add to your site to collect some kind of feedback from your users. We'll start by creating a new website. I'll call it Feedback. Now, we'll do most of our work in design mode where I'm going to start by dropping in this new component called the Wizard. To make it look a little nicer, let me turn on auto formatting. I'll choose Colorful, and I'll need a little bit more room than this. I'll stretch it out. Now, unfortunately, when I stretch it out there is way too much space here for the left side, so I can modify the properties right here. You can see that these components are divided into 2 parts. The left side is the list of steps that the Wizard will go through, and the right side is where you put the text boxes and the things where you get the feedback from the user, and at the bottom it manages the next and previous buttons for you. What I'd like to do first is take that sidebar style and change the width to something a little bit smaller. I'll change it to 150 pixels. That should do. And finally, the step style, which is the area over here. I happen to know to make this look good we want to change the vertical alignment to the top. Okay, now I have a space to plan. Let's first add the 4 steps to our dialog. If I go into add/remove wizard steps, you can see we have 2 for us already. Let me remove these, and I'll add our 4. The first step we'll collect the name and email. This will be our contact info that we'll get from our user. The next step will be the comments, and the third step will be a summary of what we're going to submit to the website. Now, because this is pretty much the final step before something happens, I'll change this to finish. This will give us a finish button on the page, and then this final one here is the step that you'll see when the entire process is complete. That will be a page where it won't link someplace else. Now we have the basic layout of our site. You can see as I click here the buttons change to show you what the user is going to see next and previous. Here we have the finish button. On the first page, let's collect the name and email, and I'll do that to help us with the layout. Let me insert a table that is—I think 3 rows is fine and 3 columns. Actually, that's just right. I'll put a little padding in here. We'll have the first name here. Actually, I'll say "Your name, email," and I'll use this area here for something else in just a second. For the name and email address, we'll use a text box for both of these. I'll give it something meaningful, text name. And we need another text box for the email. Now, what I'm going to do with this third column right here, that's where I'll put the field validation controls. Down here in a separate area under validation, we have several different components that we can drag on to constrain our form or dialog to only accept a certain kind of input. Now, for your name it's going to be pretty easy. We'll use the required field validator. That means you have to enter something there, and for all these controls, you'll see you need to associate it with a control to validate, and here we have 2 controls, email and name. Let's use name. And this is a neat trick. If I change, first of all, the error message to "Please enter your name," now, that's a lot of text to display right here. What you can do is simply put an asterisk where it says text, and that will be shown if the user did not enter the correct information. And this error message will be displayed right here where we have the validation summary. If I drop the validation summary here, and let me merge these 2 cells to give it a little bit more room. If there is a problem with the site, if there is a problem with the form, all the error messages will be collected in 1 space right here, and you'll see that comes in handy, because for the email we're going to use 2 validation controls. First we'll use the required field validator just like the other one. Not exactly friendly messages, but it gets the point across. I'll put the little star, and we need 1 more. We're going to use the regular expression validator, and if we look down here under the validation expression we have an ellipsis. We have some built-in regular expressions here that represent valid inputs. We'll choose Internet email address. Set it up to the control to validate, which is email, and error message we'll say "Enter a valid email address." And change the text. Now, I forgot to associate this control, so let me do that, email. Okay, this should be good. We have 3 validation controls on 2 inputs, and we're using the validation summary. Let's test this control. Right off the bat before we do anything, let's see what happens if we try to go to the next page. Good, so we have to have a name and an email address. Once I start typing something here and tab away, watch. That star goes away. That's because there is some client-side validation going on at the same time. If I go next, you see that 1 error message goes away. Now I can type something in for email, but it's more than just required. It has to be in a specific format, so I'll do [email protected] Perfect, so now we move on to the second step, and that's where I'll show you another validation control. If we go to comments, let's insert a table layout again. It will have space for our comments and also a rating. For the comments, we need a text box, and this time we'll turn on the multi-line option, and let me make a little more space for it. And for the rating area, I'll also use the text box. And for the comments I need to give it a better control name. Okay, for these 2 we're going to use different validations. Under the comments we'll use the custom validator, and I'm going to do something kind of funny here. I'm going to say that comments are limited to no more than 10 characters, which is kind of silly, but it's going to make it easier to test. In order to hook this up, because that's not built in here as a validation control, again, I need to still map it to the control to validate comments, but I can handle a server side event called server validate. If I double click on that, this code will be executed when the page posts back, and this is where we'll put in our code to check and see if it's good. I can do "if txtComments." If the text itself, if the length is greater than 10 characters, then I'll say that it's not valid. I do that by using this argument right here. I can type "args.IsValid = False." Otherwise it's okay. We still have to do everything else like we did with the other controls. We have to set the text property and everything else. Right here, the error message, I'll put "No more than 10 characters please" and set the text equal to star. And this also means I'll need that summary validation control. I'll do the same thing by merging these 2 cells and drop it in here. And let's see this one work. Now, by leaving this page on the comments right here, watch. When I bring it up it's going to go directly to that step. It doesn't start a contact info. That's important to remember. Before you finish, make sure you reset your page back to contact info. But if I try to go forward with too many characters, we see that web page flash. We actually made a round trip to the server, and you can see that it says no more than 10 characters. If I put in a couple, it works fine. But let me try something else, watch. If I put in a lot of characters and go forward, I'm getting a server round trip. Now, if you want to prevent a round trip to the server, you can also inject a little bit of JavaScript client-side code. See right here where it says "client validation function?" If I type in "validate comments" it's going to look for a piece of JavaScript on the client. We can write that here in source mode. We don't get a lot of assistance here in writing this, but that's all right. I think I can handle it. We need a regular JavaScript script block, so I'll choose the language as JavaScript. And I need a simple function called "validate comments," and it takes 2 parameters. And I just happen to know by looking at the help file we need 2, one called sender and another args, and I'll get some space here. Like the server-side function that we did we can say if args it has a value, and if the length is greater than 10, then I'll set args is valid equal to false. Otherwise just like the server code, set it to true, and that should do it. Let's test our client code. Now when I'm in here and have too many characters and tab away I get the asterisk right away. When it's less than 10 it goes away. Cool. The last validation control I want to put on here is the range validation, so for this rating, this one is pretty easy. We'll drop in the range validator and associate it with that control, the rating. And I'll say use—this will be easy. "Use a number between 1 and 5." I set a maximum value of 5, and a minimum of 1 and bring that up in a browser. Try it with 589. There we go. It's not accepting it. I'm going to go forward with the 2. Perfect. Okay, so now we've got our different field validations. We have our different controls. Let's say for the summary page— normally here is where we would show an example of the email we're about to send. But I'm going to leave it alone. You can refer back to any of the controls on the page from this step pretty easily. Instead what I want to do is handle the finish button, and for that, right here where it says "finish button click" if I double click that, that will create a handler for us. And this code will be called when the user wants to move on and execute the final step. I have some code I'm going to copy here from the clipboard, and this is a helper method I wrote to send the mail. Now, it's complaining right here, and the reason why I want to show you this is because the SMTP components are all handled now in a new name space. The name space was moved to system.net.mail. Here I already have our Exchange server set up, and everything should work fine. And the finish button click, what I'll do is simply call send mail and make it from the email text and we'll send the comments. I don't have any kind of error checking here or anything, but I think that's fine for this sample. Let's close all these pages and go try it out. Remember, I have to reset the form back to the contact info so I get the whole thing. Oops. Simple. How's that? Okay, now when I hit finish it sends the piece of email. This would be the page where we would show something like it's complete, and when I go to my email, there we go. We have the email [email protected], and there is our simple. It's pretty easy to send a piece of email, and it's pretty easy to set up your Wizard page. It would be nice if I had something a little bit nicer looking there, but I think you get the idea. You can see that with a little bit of custom code and some validation controls you can build a pretty functioning Wizard component.

Video Details

Duration: 13 minutes and 59 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 22, 2013

Build a web page to collect information from the user with the Wizard control, validate that information, and use the System.Net.Mail classes to send a confirmation email message.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.