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:] Learn the Tips and Tricks of Experts?

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
Welcome to this video of tips and tricks. We thought this would be a great place to showcase a lot of the miscellaneous features around 2.0 that we found very useful during the creation of this video, but otherwise we needed a place to fit the features that didn't fit in the other videos. So we're going to start with a new website, like we do in all the videos. We'll call this Tricks, and I think 1 of the greatest features that we have here is something that I personally spend a lot of time with working around in 1.1, and that is encrypting sections in your web config. If you recall if you've seen the data video, the web config, the connections settings area, is where we store the connection information for our datasbase. Now frequently, you might have a username and password in here, and that's kind of the Achilles Heel, because you have to store the password information in cleartext, but there's a really easy way to encrypt that information and decrypt it, and I'll show you how that works right now. So we'll start by first creating—let me add a new page just for this piece. So we'll create a new web form for—then we'll use the protected section of the web config and let's see. We need some data to work with. I already have a connection to a separate machine that has a database installed on it, so I'll drag the customer's table over. And by doing this, I'll get a data grid and also a sequel data adapter. Now if I switch to the web config file, you'll see that the connection string was added automatically here, but look at the connection string. It's not a very good 1. It's not using integrated authentication. It's using the old sequel server style with a user ID and password. So we would like this information to be encrypted. So let's go back to the page. Let me remove some of the columns. We just don't need to see all of this. Okay, that's good. Okay, I need 2 buttons. The first button will enable the encryption on that section of the web config. Encrypt, and my second button will turn it off. I'll make this 1 clear. So let's add the handlers for both buttons. I'll just do it quickly by double-clicking on both. And I'm going to bring in some code I have sitting around here in this notepad. Let me copy this and paste it in and I will explain it. The first chunk of code goes here at the top, this import name space command, because we're using some features out of the system web config. And then we have a function called encrypt config that takes bullion true or false, and we'll call that—I think the first button enables encryption—encrypt config true. And encrypt config. False. Let me explain the code. So the relative path to our web.config file is located here off the name of our site. I use the web configuration manager to open the local config file, because you can these web configs at different layers, different levels in your site, so I'm the 1 at the top level. I'm going to get the connection string section from the config file, and then either encrypt it using protect section or decrypt it using unprotect section. And finally, just save it. So it's just a little, simple piece of code right there. So bring this up in a browser. Okay, we see that it works just fine right now, and just to double check, the web config section here's not encrypted. If I hit scroll down to the very bottom and hit encrypt, the page will refresh, the code runs, and if I switch back here, sure enough it says the file's been modified and there it is encrypted. If I go back and hit refresh, the page, the query still works just fine and I can hit cleartext to send it back to normal. You can see it's just a little bit of code to do that. Now you have to execute that code on every machine that's going to run this, but it's a very handy trick to know about. Actually, there's another handy trick. Notice that I have to scroll down to the bottom each time. Watch this. If I go to protect.asp and at the top put maintain scroll position on post back and set that equal to true, when I go here to the bottom and encrypt it again, and then go try cleartext, notice now it's keeping it at the bottom. So it's remembering the scroll position when I hit these buttons, even though the page is refreshing. It's very simple, it's something that's very frustrating if you have to implement that by hand. All right, let's move on to the next tip. So I don't need these 2 areas anymore. We're going to talk about something called cross page posting, and for that I need 2 pages. Page 1 and page 2. Page 2. Now on the first page, we want to have a simple form. And what we'll do, we'll take the contents of this text box and whatever we select in this calendar control and pass those 2 values to another page, page 2. Now normally you'd have to do this trick using some kind of session variable, so the button click would be handled inside page 1, you'd stick the 2 values of the text box in the calendar into a session variable, and there'd be a response that'd redirect or serve a transfer over to page 2. It's kind of cumbersome and doesn't really make it easy to work with. What we have to do instead is just go to the button . and find the post back URL and map that to page 2.aspx. And I think that's all we have to do for this page. Let me save it. Now go to page 2. This is the page we want to spit something back out, showing you what you typed in that label. And finally, we'll just drag page 1 on here to have a hyperlink to get back. So in the source code for this, I'm going to add a form page load method. So we'll execute this body of code if the page is not in the post back state. And we'll set the label 1 text equal to—you can see where the problem is. We want to set the sequel to data coming from the other page. So I'll set up a string dot format. Just to make it clean, I'll say hello 0, you clicked on 1. Now here's where we need to reference the controls from the previous page. And just as you would expect, there is a a option here called previous page. I do find control, and I want the text box 1. Now, it doesn't know what it's returning text box 1 as. In fact, let me do this, because this code is going to get a little bit complicated. Let's put it right here. So we know that text box 1 is a text box. I'll create a variable, t as text box, and I'll set it equal to the return value of the previous page, but I'm going to need to cast that to a text box. So to do that, I use C type and put all that inside of a text box. Okay. Same idea for the calendar control. I'll set that equal to the control in the previous page. Find control, calendar 1, and cast that to a calendar. I'm not sure if this is case sensitive, but I'll put that t like that. Okay, now I have access to t's text value and the selected value for the calendar, which I believe is selected date. So we'll see if this works. Ah, before I continue, got another trick to show you. I want to just start typing right now, but notice that the cursor's not set to this text box, and I'm guessing the enter key is not mapped to this button. There's a quick thing you can do to fix that, and this is new with 2.0. Inside the form tag, you can now set a default button and a default text box, and it will set the focus for you. So if I scroll to the form default button is button 1, and the control has the default focus is text box 1. Much better. So let's bring this up in the browser. Now I can start typing right away without setting the carat. If I hit enter, it goes straight to the page. I probably should have selected something. Let me try that again. January 31. Scott. There. So, you can see we did the cross page posting and we were able to enable something I really like, and that's the default button and default focus. Okay, so let me bring up default aspx and we'll do the rest of our work here. The first thing I want to show you, let's see. This demo will be about using the bulleted list control. So I'll just give a little header section there. So if we look down here, we have this thing called bulleted list, and this is new. I can tie it directly to a couple of items that I just add here. Let's say it's a list of hyperlinks, so the text can be Microsoft and I'll have the value be And for now I'll just have 1 entry in there. If we go into the properties for that control, I have have it interpret the value items as a hyperlink, and that is under display mode. I'll make them hyperlinks. I'll show you this in a browser and you can see it just changed it to an underline. And you can see this will go to if I click on it. But even more interesting if I can, like a lot of the other controls, bind it to a data source, so what I'll do, I'll create a list of hyperlinks. So I'll create an XML file. I'll call it hyperlinks. So very quickly, I'll show you a couple of the features of the XML editor. It's pretty easy, especially just to create a link on the fly. So our first link will be called Microsoft and the URL is Then I'll do a link for NSDN. Okay, and finally 1 for Okay, that's good, so we'll go back to our bulleted list control and bind it to a data source. I have to create a new data source. Choose XML file, and of course, I could bind it to other things, like a database or any arbitrary object. We'll go to the XML file and choose hyperlinks. Now this little wizard's smart enough to inspect it and see what options I have. I'll choose to bind the text to the text item and this to the URL and hit save. Now we have to bring it up here in order to see it. And here we have these 3. So that's pretty handy if you're using bulleted lists or you need a list of hyperlinks. It works great. Okay. Let's move to the next piece. I'm just going to use little HTML hr tags just to separate our little demos. Now I'm going to talk about the file upload control. If you need to have a means to upload files to your site, it's pretty easy. First you drag the file upload control, and here you get the browse button in a text box where a user would browse to the local path on their computer for awhile. I need a button to actually do the upload itself. So let me change the text to upload. And then I'll have a server side hyperlink, which I'll set to point to the resulting file that's been uploaded. So we'll save that. Now let me create a folder here, and this folder will hold the files that we upload. Upload. That's fine, upload. Okay, first we have to make sure that the indies are actually put in a file to be uploaded and they kist didn't hit the upload button. So if the file upload 1 control has a file to be uploaded, then we'll execute this code. We want to tell the upload control to go ahead and save that file, but I have to base it off the local folder here. I need to give it a local path. Let's see. Upload was the file name, or file path. Then I will pin to that the file upload 1.file name. I'm going to need that again a couple times, the actual file name. And we tell it to go. So that's going to save it, and then we'll set our hyperlink, text equal to the name of the file, and set the hyperlink navigate URL equal to upload/ and the name of the file. I think that will be good. And I have a—there it is. I have a file on my desktop that I can upload. And we can bring it up. Perfect. You can see the file upload is real easy to use. And you should probably do some scrubbing on the file name and path that's coming in. You'll probably need to lock down the folder a bit more, but I just wanted to show you it's pretty easy to get a file name and start the upload process. Now the next piece I want to show you is something called URL mapping. This is real handy if you have a file on your system or in your website that has a really obscure URL or something that's complicated, and you want to give it a simpler name or more human-readable name. And I have a handy guid right here, ready to go to demonstrate this. Let's say you have an HTML file called guid_ and then some crazy, long name. And this works with HTML or or any page really. So I have a really long name here. Actually, I better keep that. Yeah, I'll just keep that long name on here. And it's empty, so that's fine. But if I want to have a hyperlink to that on my site, I would normally just drag it over, but you have a pretty long name. Instead, let's say I want to have a hyperlink that's simpler. And I'll put 1 equal to just guid.htm. Now this page doesn't actually exist on our site. But that's okay, because in the web config, we can use the URL mapping to point to that file. So if I go to web config under system web, I turn on URL mappings, I need to enable it to true. Okay, I need to add an entry for the URL and make it relative to our site, guid.htm. And then the map URL is equal to that really long, ugly looking name. So we'll save that and go back to our page, and give our hyperlink a shot. So that 1 should work, but this is the 1 that we're testing, guid.htm. And it works. Well, it goes to a page that's empty, but believe me, it does work. So that is the URL mapping. The final piece I want to show you is a new control called the multiview. Now the multiview is quite interesting. It's a very easy way for you to have a body of— imagine div tags that you can show and hide dynamically, but you can do it programmically. In fact, I'm going to take these 3 little demos and make them all selectable inside this multiview. And the way it works, of course, is through some dragging and dropping. I'm bringing the multiview onto the page, and I need a view component for each one of these 3 sections, so that's our first one. View 1 will contain the whole bulleted list demo. Okay, view 2 is going to go right there. View 2 will have the file upload demo. And view 3 will contain the URL mapping demo. I'll just clean up these hrs. Okay good. Now I need a programmatic way to choose which view is active at any time. So for that, I'll use a radio button list and just drop it in right there and have it automatically post back so we get the change events, and I'm going to code these by hand. So we have 3 of them. Our first one is the bulleted list. And I'm going to give that a value of 0 and you'll see why in a second. List item 1 is the file upload. And the final 1 is URL mapping, which has a value of 2. And let me set this up so it's horizontal instead of vertical. Okay, now the code that's executed when you change that is selected indexed changed, so we'll drop into the handler for that, which is empty. So let's do this. So we have a multiview 1. The active view index, it's going to 0, 1, or 2, because we have 3 views. I'm going to set that equal to the radio button. Radio button list 1 to its selected index. Actually the selected value. Probably the same thing. So with just 1 line of code, we can switch between the views there. So let's save that and bring it up in a browser. So I'll choose bulleted list, file upload, URL mapping. It's a great way if you have a lot of code or a lot of design on your page that you need to hide, or if you need to be able to dynamically show and hide pieces, that's a good way to do it. So that's our tips and tricks video. Hope you enjoyed it, and get a chance to look at some of the other videos. I think you'll find a lot more hidden features that we didn't' specifically call out, but there's a lot here, and I hope you have a good chance to use some of these techniques in your next site.

Video Details

Duration: 18 minutes and 46 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Jul 12, 2013

View tips and tricks including encrypting sensitive information stored in the web.config file, posting content to a different page, simplifying complex URLs using URL remapping, and much, much more.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.