Objective: This article describes how to do display clickable email links (mailto:) in a ASP.NET GridView.

Background: Often in our projects, it is a requirement to display clickable email links in a GridView perhapse along other information. Because of the initial and seemingly convoluted nature of ASP.NET, even a simple task as such can seem daunting. Well, fear not because this is really simple to do.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008, SQL Server Express 2005.

1. Create a new web form in your site and name it anything.
2. Drag and drop a GridView onto the page.
3. Configure your DataSource. Select a table that displays email addresses.
4. Once you have configured your GridView and DataSource, click on the GridView’s smart tag and select “edit columns”.
5. In the selected fields window click to highlight the field that contains the email addresses.
6. On the right side, click on the “convert this field into a TemplateField link.
7. Click OK to close this window and go into source view look at GridView’s ItemTemplate. It should look something like this:

   <ItemTemplate>
       <asp:Label ID="Label1" runat="server" Text='<%# Bind("Email") %>'></asp:Label>
   </ItemTemplate>

8. Now let’s modify this code to create clickable mailto: email addresses. To do this, replace the above code with the one below.

   <ItemTemplate>
       <a href="Mailto:<%# Eval("email") %>"><%#Eval("email")%></a>
   </ItemTemplate>

   This will result looking something like the image below:

   

9. If you don’t want to show the actual email addresses as the link maybe to have all the links a uniform look and size, you can do something like the following.

   <ItemTemplate>
       <a href="Mailto:<%# Eval("email") %>">Click To Email</a>
   </ItemTemplate>

   This will result in something like the image below.

   

10. That’s it! Enjoy.

Objective: This article describes how to maintain scroll position on postback in ASP.NET.

Background: Gets or sets a value indicating whether to return the user to the same position in the client browser after postback. This property replaces the obsolete SmartNavigation property. This is a very simple procedure that takes but a second or two to achieve.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

1. On the page you require this functionality, simply add the following attribute to your page directive on the very top of your page:

   <!-- Adding the maintain scroll position attribute to page directive -->
   <%@ Page Language="VB" MaintainScrollPositionOnPostback="true" %>

2. To test out how this works, I use the NorthWind database.
3. In design view, let’s drop a GridView on to the page and configure a DataSource for it.
4. Select the Customers table because it has enough data to make it a long page without paging. For this example I selected the CustomerID, CompanyName and ContactName columns.
5. Click on the Advanced button and check both checkboxes to create the Insert, Delete, Edit statements.
6. When you are finished, open the smart tag on the GridView and select the Enable Editing and Enable Selection checkboxes.
7. Save the page and load it into your browser.
8. Scroll down half way and click on either the Select or Edit button. Although the page will post back due to a server side action, it will now not reposition you to the top of the page, instead it will maintain the same exact position. It is nice not having to manually scroll into position every time you click a button.

   

9. That’s it! Enjoy.

Objective: This article provides step by step instruction for how to add delete confirmation to a GridView in ASP.NET.

Background: In a previous article I have illustrated a simple way of adding a client side confirm popup action to any button on your page. In this article we will use the same technique for the GridView delete button. It is a very simple procedure with the only tricky part being for the beginner is to learn how to expose this part of the GridView so we can assign a few simple properties to it. To read my previous tutorial please click ** Here **.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008, SQL Server 2005 Express and the NorthWind database.

1. Let’s start by adding a new web form to your site and name it anything you want.
2. From the Data tab of your toolbox, drag and drop a a GridView onto the page.
3. If its not already open, click to open the GridView’s Smart Tag and add a new DataSource.

   
   

4. For simplicity’s sake, let’s create a simple SqlDataSource of your choosing. For this article I’m using the NorthWind database from Microsoft.
5. From the Employees table, I select the following columns: EmployeeID, LastName, and FirstName.
6. Then I click on the “Advanced” button and check the “Generate Insert, Update and Delete Statements” checkbox and also the (Use optimistic concurrency” checkbox and click OK.

   
   

7. Then I click Next and Finish to finish creating my GridView.
8. Now from the GridView’s Smart Tag I check the boxes for Enable Paging, Enable Editing, and Enable Deleting. Really, the Enable Deleting is the only one we need, I’m just playing along to make things a bit more realistic.

   
   

9. Now from the GridView’s Smart Tag and click on the Edit Column link.
10. Then from the Selected Fields area I click to highlight the CommandField on top of the list to expose its CommandField properties on the right.

    
    

11. From the ButtonType property I then select the Button instead of the Link display type and click the “convert this field into a template field” link and finally click OK.
12. Now that I have converted this field into a template field and exposed its properties, I can go into code view an add a couple of properties to it. So, let’s go into code view and find the Delete button. It should look like below. Showing both the Edit and Delete button between the ItemTemplate tags:

    <ItemTemplate>
        <asp:Button ID="Button1" runat="server" CausesValidation="False"
            CommandName="Edit" Text="Edit" />
        &nbsp;<asp:Button ID="Button2" runat="server" CausesValidation="False"
            CommandName="Delete" Text="Delete" />
    </ItemTemplate>

13. Finally, I add the following client side javascript property to my Delete button: OnClientClick=”return confirm(‘Are you sure?’);”. The result should look like the code below:

    <ItemTemplate>
        <asp:Button ID="Button1" runat="server" CausesValidation="False"
            CommandName="Edit" Text="Edit" />
        &nbsp;<asp:Button
                ID="Button2" runat="server"
                CausesValidation="False"
                CommandName="Delete"
                Text="Delete"
                OnClientClick="return confirm('Are you sure?');" />
    </ItemTemplate>

14. Change the message for the popup dialogue as desired. Load the page into your browser to give it a spin.

    

15. That’s it! Enjoy.

Objective: This article describes the request validation feature of ASP.NET which, by default, prevents the processing of unencoded HTML content submitted to the server. This request validation feature can be disabled when the application has been designed to safely process HTML data.

Background: More often than not, I use a rich text editor in my administrative forms to replace a multi-line text box for its obvious advantages. Rich text box editors are useful because they allow us to create layouts of text and images just like a word processor would providing a layer of aesthetics and convenience. This rich functionality is made possible by rapping the content with HTML/XHTML markup. This is all good and well with exception that ASP.NET 1.1 and above by default stops the submission of forms with such content for reasons of security – preventing the execution of malicious code. To allow such functionality to take place, we can simply add a directive at the top of our page to turn off request validation.

Procedure:

1. Open the web form where HTML markup is going to be submitted in your form. Below is an example:

   
   

2. Add the following to the page directive on top of the page like shown below. ValidateRequest=”False”.

   <%@ Page Language="VB" ValidateRequest="False" %>

3. That’s it! Enjoy.

Objective: This article provides a quick solution to the Unhandled Exception message when the generated SQL update command by default assigns the equal (=) operator to the @Original parameter for the ntext and nvarchar data types.

Background: The generated error message would look something similar to the following: System.Data.SqlClient.SqlException: The data types ntext and nvarchar are incompatible in the equal to operator. This is a common problem seen in ASP.NET when working with an existing database that worked just fine with classic ASP using good old Dreamweaver. Although it can be attributed to incorrect or faulty database design that should be taken into consideration at design time, it seems rather rigid and very annoying at the least especially if you have already spent a considerable amount of time constructing dozens of dynamic data driven pages in your site relying on the very same tables in your database. If you change the data column types in your database to remedy the problem, you will end up having to fix all of your already constructed pages to reflect the changes taking precious time out of your schedule.

So, my quick solution is to simply change all the equal (=) operators in the @Original parameter to the LIKE operator. This had worked fine for me on many occasion when I had to deal with this particular problem and I hope it saves you some time as well. Refer to the example below to get a better idea of how this is done.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008 and SQL Server Express 2005 .

Option A. Generating correct SqlDataSource at design time.

1. When you create your SqlDataSource and Auto generate the Update, Insert and Delete statements make sure you actually take a look at query being generated and make corrections before clicking the finish button. Note: in case you don’t know, when selecting the table columns in the query designer, if you forget to select the ID (primary key) column, you won’t be able to automatically generate the Update, Insert and Delete statements. So, make sure you remember to do that.
   
   
   
2. You can also do this visually by clicking the Query Builder button and make corrections to the filter options like shown below to change the = @Original.. to LIKE @Original at each instance of a nvarchar or ntext column.

   

Option B. Editing the query statement in code view.

If you have already created your SqlDataSource and spent lots of time designing your GridView or your choice of data view, you may want to consider to make your corrections in code view instead. The reason for this is that when you modify an already existing data source, Visual Web Developer will regenerate your data view overriding all your precious customization that you spent your whole afternoon on getting it just right.

1. Switch to code view in your page.
2. Locate the SqlDataSource in question.
3. Locate the UpdateCommand.
4. In the UpdateCommand find the WHERE clause and comb through everything that comes after it. Identify all the columns that are nvarchar or ntext data type and change the equal signs to LIKE. You may have to refer to your database to refresh your memory. An example is provided below:

   UpdateCommand="UPDATE [agents] SET [FirstName] = @FirstName, [LastName] = @LastName, [Designations] = @Designations, [Address] = @Address, [City] = @City, [State] = @State, [Zip] = @Zip, [HomePhone] = @HomePhone, [HomePhoneExt] = @HomePhoneExt, [CellPhone] = @CellPhone, [WorkPhone] = @WorkPhone, [WorkPhoneExt] = @WorkPhoneExt, [HomeFax] = @HomeFax, [WorkFax] = @WorkFax, [Email] = @Email, [Website] = @Website, [AgentBio] = @AgentBio, [AgentPhoto] = @AgentPhoto, [mlsURL] = @mlsURL, [mlsURL2] = @mlsURL2, [UserName] = @UserName, [Password] = @Password, [Approved] = @Approved, [AccountActive] = @AccountActive WHERE [Agent_ID] = @original_Agent_ID AND [FirstName] LIKE @original_FirstName AND [LastName] LIKE @original_LastName AND [Designations] LIKE @original_Designations AND [Address] LIKE @original_Address AND [City] LIKE @original_City AND [State] LIKE @original_State AND [Zip] LIKE @original_Zip AND [HomePhone] LIKE @original_HomePhone AND [HomePhoneExt] LIKE @original_HomePhoneExt AND [CellPhone] LIKE @original_CellPhone AND [WorkPhone] LIKE @original_WorkPhone AND [WorkPhoneExt] LIKE @original_WorkPhoneExt AND [HomeFax] = @original_HomeFax AND [WorkFax] LIKE @original_WorkFax AND [Email] LIKE @original_Email AND [Website] LIKE @original_Website AND [AgentBio] LIKE @original_AgentBio AND [AgentPhoto] LIKE @original_AgentPhoto AND [mlsURL] = @original_mlsURL AND [mlsURL2] LIKE @original_mlsURL2 AND [UserName] LIKE @original_UserName AND [Password] LIKE @original_Password AND [Approved] LIKE @original_Approved AND [AccountActive] LIKE @original_AccountActive">

Option C. Data Access Layer instead of SqlDataSource.

1. It really does not matter what kind of data access method you are using. Your task is to change your update query. If you are for instance using Data Access Layer with a DataSet, go to your App_code folder, open the DatSet in question and make your change there.

That’s it! Enjoy.

Objective: This article describes how to achieve server and client side validation for a multi line text field.

Background: Multi line text field validation is a very common procedure. It allows us to make sure that no more than the allowed number of characters are input or entered into a particular text field on our form. In this example the validation is done both on client and server side to assure accurateness and only a single text field is used to avoid too much confusing code on the page. I boiled the chicken fat away for you so you can study just what’s important.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

1. Start by creating a new web form for your site and name it anything you want.
2. Go into code view and replace the entire code with the following.

   <%@ Page Language="VB" %>
   
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
   
   <script runat="server">
   
       '.......................Serverside Textfield Validation Start....................
       'create protected subprocedure for textfield validation
       'if the length of text is longer than max characters allowed then
       'show error message
       'else allow to proceed
       'end if statement
       'end subprocedure
       Protected Sub CustomValidator1_ServerValidate(ByVal source As Object, ByVal args As System.Web.UI.WebControls.ServerValidateEventArgs)
   
           If tbxTextField.Text.Length > 10 Then
               args.IsValid = False
           Else
               args.IsValid = True
           End If
   
       End Sub
       '.......................Serverside Textfield Validation End....................
   
       '............................Submit Button Click Start.........................
       'when clicking the submit button
       'set the entered text of the textfield equal to the text of label1
       'end subprocedure
       Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
           Label1.Text = "You typed: " & tbxTextField.Text
       End Sub
       '.............................Submit Button Click End..........................
   
   </script>
   
   <html xmlns="http://www.w3.org/1999/xhtml">
   <head runat="server">
       <title>Untitled Page</title>
   </head>
   <body>
       <form id="form1" runat="server">
       <div>
           <table cellpadding="2" cellspacing="0" style="width: 37%">
               <tr>
                   <td style="width: 138px">
   
                       <!-- The label for the TextBox -->
                       <asp:Label
                       ID="lblTextField"
                       runat="server"
                       Text="Multiline Textfield:">
                       </asp:Label>
   
                   </td>
                   <td style="width: 262px">
   
                       <!-- The multiline TextBox -->
                       <asp:TextBox
                       ID="tbxTextField"
                       runat="server"
                       Height="76px"
                       TextMode="MultiLine"
                       Width="258px"
                       EnableViewState="False">
                       </asp:TextBox>
   
                   </td>
                   <td style="width: 11px">
   
                       <!-- The front end of the server side validation -->
                       <asp:CustomValidator
                       ID="CustomValidator1"
                       runat="server"
                       ControlToValidate="tbxTextField"
                       ErrorMessage="Exceeded max. 10 char."
                       OnServerValidate="CustomValidator1_ServerValidate">
                       *
                       </asp:CustomValidator>
   
                       <!-- Make sure the form is not submitted empty -->
                       <asp:RequiredFieldValidator
                       ID="RequiredFieldValidator1"
                       runat="server"
                       ControlToValidate="tbxTextField"
                       ErrorMessage="Please type a message!">
                       *
                       </asp:RequiredFieldValidator>
   
                       <!-- Makes sure the max. allowed chars. are not exceeded -->
                       <!-- Notice that it allows only 10 characters -->
                       <asp:RegularExpressionValidator
                       ID="RegularExpressionValidator1"
                       runat="server"
                       ControlToValidate="tbxTextField"
                       ErrorMessage="Exceeded max. 10 char."
                       ValidationExpression="^[\s\S]{1,10}$">
                       *
                       </asp:RegularExpressionValidator>
   
                   </td>
               </tr>
               <tr>
                   <td style="width: 138px">
                       &nbsp;
                   </td>
                   <td style="width: 262px">
   
                       <!-- The Submit Button -->
                       <asp:Button ID="btnSubmit"
                       runat="server"
                       Text="Submit For Validation"
                       Width="258px"
                       onclick="btnSubmit_Click" />
   
                   </td>
                   <td style="width: 11px">
                   </td>
               </tr>
               <tr>
                   <td style="width: 138px">
                   </td>
                   <td colspan="2">
   
                       <!-- The validation summary displayed at bottom -->
                       <asp:ValidationSummary
                       ID="ValidationSummary1"
                       runat="server" />
   
                   </td>
               </tr>
               <tr>
                   <td style="width: 138px">
                   </td>
                   <td colspan="2">
   
                       <!-- The label that displays the submitted text -->
                       <asp:Label ID="Label1"
                       runat="server"
                       EnableViewState="False"
                       Visible="True">
                       </asp:Label>
   
                   </td>
               </tr>
           </table>
       </div>
       </form>
   </body>
   </html>
   

3. Save the page and give it a spin in your browser.
4. That’s it! Enjoy.

Objective: This article describes how to add a horizontal VwdCms.SplitterBar to your asp.net page or pages. You can download this free server component from http://www.codeproject.com/KB/aspnet/VwdCmsSplitterBar.aspx. You’ll have to register and login to get access to the downloads.

Background: VwdCms.SplitterBar is a free server control that allows you to easily add resizing to your web page layout. Use the splitter bar to resize a panel, div, table cell, or just about any control. It is ideal replacement of frames for pages that have a tree or a list of data items that vary in width. I recently was building a mass email application and needed to be able to resize the upper or lower portion to make more room for one or the other. The splitter bar was a quick and stylish choice that worked exactly the way I envisioned it.

Procedure:

1. Download the free sever component and related files and extract them to a place of your choice.
2. Create new site if you haven’t already.
3. Create a new folder in your site and name it AjaxSplitter.
4. Right click on the site name on top in your solution explorer, scroll to Add ASP_Net Folder and select App-Code folder. This is a special ASP.NET folder that will hold our SplitterBar server control.
5. From the extracted files, open the App_Code folder and drag the SplitterBar.cs file into our newly created App_Code folder like shown in the picture below. Although the file is written C#, you can use it just fine in your VB.Net applications.

   
   

6. Drag and drop the hsplitter.gif file into the root of your site. (that’s where the script files are looking for it)
7. Drag and drop the following files into the AjaxSplitter folder we created earlier.
8. hsplitter.gif, License.txt, vsplitter.gif, and VwdCmsSplitterBar.js
9. Now if you haven’t already, add a web.config file to your site and open it.
10. Find the <pages><controls> tags and paste inside the following code: <add tagPrefix=”VwdCms” namespace=”VwdCms”/>. This is to register the SplittBar server component with our site. It should look something like below:

    <pages>
        <controls>
            <add tagPrefix="VwdCms" namespace="VwdCms"/>
        </controls>
    </pages>

11. Now that we have all the files in place, let’s create a new web form and replace all of the code with the following. There is no server side code here but make sure you go over it line by line to understand how the application comes together.

    <%@ Page Language="VB" %>
    
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <script runat="server">
    
    </script>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
        <title>Untitled Page</title>
        <!-- ...........................Splitter Bar Javascript..................... -->
        <!-- Add a reference to the Javascript file -->
    
        <script src="AjaxSplitter/VwdCmsSplitterBar.js" type="text/javascript"></script>
    
        <!-- Create resize function for the Splitter Bar -->
    
        <script language="javascript" type="text/javascript">
        function splitterOnResize(width)
        {
            if (typeof width == "string")
            {
                width = new Number(width.replace("px",""));
            }
        }
        </script>
        <!-- ...........................Splitter Bar Javascript..................... -->
        <link href="default.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <!-- Table for Splitter Bar  -->
            <table border="0" cellpadding="0" cellspacing="0" style="width: 100%; height: 406px;
                border: solid 0px #6699CC; overflow: hidden;">
                <tr id="trTop">
                    <td runat="server" id="tdTop" style="height: 200px;" align="left" valign="top">
                        <div style="height: 100%; overflow: auto;">
                            </div>
                    </td>
                </tr>
                <tr style="height: 6px;">
                    <td style="height: 6px; font-size: 0pt;">
                        &nbsp;
                    </td>
                </tr>
                <tr id="trBottom">
                    <td runat="server" id="tdBottom" style="height: 200px;" align="left" valign="top">
                        <div style="height: 100%; overflow: auto;">
                            </div>
                    </td>
                </tr>
            </table>
            <!-- Splitter Bar Server Control -->
            <VwdCms:SplitterBar runat="server" ID="hsbSplitter"
            Orientation="horizontal"
            TopResizeTargets="tdTop"
            BottomResizeTargets="tdBottom"
            MinHeight="30"
            MaxHeight="370"
            TotalHeight="406"
            BackgroundColor="lightsteelblue"
            BackgroundColorLimit="firebrick"
            BackgroundColorHilite="steelblue"
            BackgroundColorResizing="purple"
            SaveHeightToElement="txtHeight"
            Style="background-image: url(hsplitter.gif);
            background-position: center center; background-repeat: no-repeat;" />
        </div>
        </form>
    </body>
    </html>
    

12. Load it up into your browser and give it a spin.

    

13. That’s it! Enjoy.

Objective: This article gives step by step instructions how to create a flexible and sophisticated image upload application that prefixes the file name with a unique ID, it enforces file size and file type restrictions, checks for upload problems, displays success and or error message, displays the uploaded file type, file size, and file location, displays all uploaded images present in the upload folder and shows their truncated file names. Uses pure asp.net server side code for the upload function with additional client side validation to stop execution of the form if no file is present.

Background: It is safe to say that almost all sophisticated web applications with backend functionality require image or file upload capabilities. To write such an application is not too difficult once you understand its mechanism, but for the beginning asp.net developer it can be one of those hair pulling, eye poking and other types of chain yanking experiences that drains the life force (Chi) and leaves a person old before his or her time. I have searched for weeks online for an example of how this is done and to this date I have not found one that would feel like a complete, well rounded application. After much self inflicted injury as mentioned above, I whipped up something that I know you are going to love.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

1. Let’s start by creating a new empty web site in VB and name it MyImageUpload.
2. Create a new web form in your site and name it FileUpload.aspx. Don’t use code behind so you can better see how the puzzle fits together without having tab back and forth between pages.
3. Now let’s go into code view and add an important name space that allows our upload to work. Copy and paste the following under the page directive at the top of the page:
   <%@ Import Namespace=”System.IO” %>

4. Now let’s create a new folder in our site and name it UploadFolder. This is where our uploaded images will be stored.
5. Let’s go into code view and copy and paste the following code between the Form tags of your page. These are the visual elements on the page. Go over it line by line to get an idea what’s going on. It won’t make complete sense until we have our “code behind” code in place which will be our next step.

   <!-- File upload server control -->
   <asp:FileUpload
   ID="upImage"
   runat="server"/>
   <br />
   
   <!-- Client Side Required Field Validator for the File Upload server control -->
   <!-- Making sure the form is not submitted unless a file has been selected -->
   <asp:RequiredFieldValidator
   ID="RequiredFieldValidator1"
   runat="server"
   ControlToValidate="upImage"
   ErrorMessage="Please select a file first!"
   SetFocusOnError="True"
   Display="Static" style="font-size: small" >
   </asp:RequiredFieldValidator>
   
   <br />
   
   <!-- This is the Upload Submit Button to initiate the upload process -->
   <asp:Button
   ID="btnAdd"
   Text="Upload Image"
   OnClick="btnAdd_Click"
   runat="server" />
   
   <!-- This Label displays the upload success or error message -->
   <asp:Label
   ID="lblMsg"
   runat="server"
   style="color: #FF0000; font-size: small;" />
   <br />
   
   <!-- This Label displays the uploaded file's type i.e. JPG, PNG etc. -->
   <asp:Label
   id="lblFileContentType"
   runat="server"
   style="color: #808080;font-size: small;" />
   <br />
   
   <!-- This Label displays the uploaded file's size in KB -->
   <asp:Label
   id="lblFileSize" 
   
   runat="server"
   style="color: #808080;font-size: small;" />
   <br />
   
   <!-- This label displays the uploaded file's location on the server relative to the root -->
   <asp:Label
   id="lblFileLocation"
   runat="server"
   style="color: #808080;font-size: small;" />
   <br />
   
   <!-- This is the DataList that displays all uploaded images present in the UploadImages folder -->
   <!-- Take a look at the subprocedure on top "display uploaded images" to understand how it works -->
   <!-- Notice below how the Substring property is used to truncate the image names -->
   <asp:DataList
   ID="dlstImages"
   RepeatColumns="6"
   runat="server">
       <ItemTemplate>
           <asp:Image
           ID="Image1"
           ImageUrl='<%# Eval("Name", "~/UploadImages/{0}") %>'
           Style="width: 100px; margin:5px;"
           runat="server" />
           <br />
           <asp:Label
           ID="Label1"
           runat="server"
           Text='<%#Eval("Name").Substring(0, 15) & " ..."%>'
           ToolTip='<%#Eval("Name")%>'
           style="color: #808080;font-size: x-small"
           >
           </asp:Label>
       </ItemTemplate>
   </asp:DataList>

6. OK, now copy and paste the following code between the script blocks on top. These are all the procedures and functions that creates our application. I put it inside text box because the code is too wide to display properly in a table. Go over the code line by line and read all the comments until everything makes sense. Try to change or modify the code based on your assumptions and test it in your browser to see what happens.

   '.......................File Upload Button Click Event Start.......................
   'create subprocedure for upload button click event
   'if the file upload field is not empty then
   'declare the maximum allowable file size as whatever bytes
   'declare a variable fileSize and set it equal to the file size of the uploading image
   'if the file exceeds the maximum allowable size then
   'end the upload and display the warning message
   'else
   'declare the GUID and set it equal to GUID function created below
   'if the file extension complies with CheckFileType function then
   'declare the upload file path and set it equal to the name of the folder & GUID & file name
   'save the image to the file path
   'display upload success message
   'display file type extension
   'display file size
   'display the location of the saved file
   'else
   'display upload aborted message
   'display a zero for all other labels
   'end all if statements
   'end subprocedures Sub btnAdd_Click(ByVal sender As Object, ByVal e As EventArgs)
   
       If (upImage.HasFile) Then
           Dim maxFileSize As Integer = 1024000 'adjust max. file size as needed
           Dim fileSize As Integer = upImage.PostedFile.ContentLength
           If fileSize > maxFileSize Then
               lblMsg.Text = "File size exceeded the maximum limit of " & maxFileSize / 1024 & " Kb."
           Else
               Dim strGuid = fnGuid()
               If (CheckFileType(upImage.FileName)) Then
                   Dim filePath As String = "~/UploadImages/" & strGuid & upImage.FileName
                   upImage.SaveAs(MapPath(filePath))
                   lblMsg.Text = "File Upload Success!"
                   lblFileContentType.Text = "File type: " & upImage.PostedFile.ContentType
                   lblFileSize.Text = "File size: " & CStr(upImage.PostedFile.ContentLength / 1024) & " Kb"
                   lblFileLocation.Text = "File Location: /UploadImages/" & strGuid & upImage.FileName Else
                   lblMsg.Text = "Wrong file type! Upload Aborted."
                   lblFileContentType.Text = "File type: 0"
                   lblFileSize.Text = "File size: 0"
                   lblFileLocation.Text = "File Location: 0"
               End If
           End If
       End If
   End Sub
   '.......................File Upload Button Click Event End.......................
   
   '................Function To Check For Valid File Extension Start................
   'declare a function as true or false boolean to check for file type extension to be allowed
   'declare a variable named "ext" as a string and set it equal to the extention of the file to be uploaded
   'if this file extension matches .gif .png .jpg or .jpeg then set the boolean to True (allow it)
   'otherwise set the boolean to False (do not allow it)
   'end the conditional statement
   'end the function Function CheckFileType(ByVal fileName As String) As Boolean
       Dim ext As String = Path.GetExtension(fileName)
       Select Case ext.ToLower()
           Case ".gif" ' add or remove file types as needed
               Return True
           Case ".png"
               Return True
           Case ".jpg"
               Return True
           Case ".jpeg"
               Return True
           Case Else
               Return False
       End Select
   End Function
   '................Function To Check For Valid File Extension End................
   
   '..................Function To Create GUID For File Name Start.................
   'declare a function to create a GUID based on the current date and time to be added to the _
   'file extension of the uploaded file so as to make it unique.
   'declare a variable named strGuid and set it equal to nothing for now
   'using the try exception handling, set the strGuid variable equal to current date and time
   'if there is a problem creating the GUID, throw an exception
   'end try
   'return the generated GUID
   'end the function
   Function fnGuid() As String
       Dim strGuid As String = ""
       Try
           With Today
               strGuid = .Year & .Month & .Day & Now.Hour & Now.Minute & Now.Second End With
       Catch ex As Exception
           Throw ex
       End Try
       Return strGuidEnd Function
   '..................Function To Create GUID For File Name End.................
   
   '................Subprocedure To Display Uploaded Images Start...............
   'create a sub procedure to display uploaded images
   'declare a variable named upfolder and set it equal to the path of the uploaded images folder
   'declare a variable named dir as the directory info of the uploaded images folder
   'create a datasource from the contents of this directory/folder
   'and bind to each image in the folder
   Sub Page_PreRender()
       Dim upFolder As String = MapPath("~/UploadImages/")
       Dim dir As New DirectoryInfo(upFolder)
       dlstImages.DataSource = dir.GetFiles()
       dlstImages.DataBind()
   End Sub'................Subprocedure To Display Uploaded Images End...............
   

7. That’s it! Enjoy.

   

Objective: This article describes how to add a client side confirm popup window to your buttons.

Background: The confirm window is an essential element often required on submission forms. It provides a last warning to the user before executing a particular code. When the submit button is pressed by the user, a warning window pops up with the option to go ahead (OK) or to cancel. It is a very simple client side Javascript that can be use in many different ways and in many different situations.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008.

1. Drag and drop an asp:button onto your page from the Standard tab of your toolbox.
2. In the properties manager window find the the OnClientClick property under the Behaviors section.
3. Copy and paste the following short Javascript in there:
   return confirm(‘Are you sure?’);

4. As you can see, the message above will be “Are you sure?” You can change this to whatever you want your message to be.
5. Now let’s go into code view and set a couple of other properties for this button to create a mouse over action as well. Add the following code to your button:
   onmouseover=”this.value=’Click Here!’”
   onmouseout=”this.value=’Submit’”

6. Your final code for the button should look like the following:

   <!-- Button with clientside confirm -->
   <asp:Button ID="Button1" runat="server"
    OnClientClick="return confirm('Are you sure?');"
    onmouseover="this.value='Click Here!'"
    onmouseout="this.value='Submit'"
    Text="Submit"/>

7. That’s it! Enjoy.
8. and the final result…

   

Objective: This article describes how you can add two columns bound data to a DropDownList.

Background: Almost always when I use a data bound drop down list, I find it necessary to display data from more than one column of my database table. In classic ASP this used to be a no brainer but as you may have noticed in asp.net things are a little different which sometimes leads to quite a bit of hair pulling, eye poking and other types of chain yanking. So, to avoid injury, my quick solution for this is to concatenate or combine the data columns in my query string. Surely, there are other ways of doing this, but this is quick and requires no extra strenuous code writing and it does the job very well.

Procedure: Follow instructions below to accomplish this task. This article uses Visual Web Developer Express 2008 and SQL Server Express 2005 with the NorthWind database as an example.

1. Create a new web form in your site and name it anything you want.
2. In design view, drag and drop a DropDownList control onto your page from the standard tab of your toolbox.

   
   

3. Click on the smart tag if its not already open and click on Choose Data Source. (image above)

   
   

4. In the Data Source Configuration Wizard select New Data Source. (image above)

   
   

5. Select “Database” and click OK. (image above)
6. In the next window I choose the NorthWind connection string that I already added earlier to my site as shown in the image below. If you don’t have a connection string configured yet for your database, click the “New Connection” button to configure one.

   
   

7. On the next window, select the first option to specify a custom SQL statement as shown below and click Next.

   
   

8. In the next window click the Query Builder button and then add the Employees table to the query builder as shown below and close the add table window.

   
   

9. I Use the following SQL statement to combine the employees First and Last Name. I also selected the EmployeeID column to use as the postback value for our drop down list control.
   SELECT EmployeeID, FirstName + ‘ ‘ + LastName AS EmployeeName FROM Employees

10. Now click Next, then click Finish to close that window.
11. In the remaining window configure the fields as show in the picture below.

    
    

12. Click OK and you are done. Load the page into your browser. You should see something like the image below.

    
    

13. That’s it! Enjoy.