ASP.NET Logo Back to WebMatrix Home

 
Build an End-to-End Application
Create Registration page
In this walkthrough, you will create a new ASP.NET page that will save new user information to the Users table.
  1. Select New from the File menu. You will see the New File dialog box appear.
  2. Select (General) from the Templates pane.
  3. Select the ASP.NET Page template.
  4. Type a file path in the Location box.
  5. Type NewUser.aspx in the Filename box.
  6. Select Visual Basic in the Language drop-down box.
  7. Click OK. The NewUser.aspx file will open in Design view.
  8. From the Web Controls tab in the Toolbox, drag three Label controls, two TextBox controls and a Button control onto the ASP.NET page. 

    Add basic Web Controls

  9. Set the Text property of the top Label to UserName:.
  10. Set the Text property of the middle Label to UserPassword:.
  11. Set the Text property of the bottom Label to empty (no text).
  12. Set the ID property of the bottom Label to Message.
  13. Set the ID property of the top TextBox to txtUserName.
  14. Set the ID property of the bottom TextBox to txtUserPassword.
  15. Set the TextMode property of the user password TextBox to Password.

    Note This property gets or sets the behavior mode of the text box. In this instance, because a password is sensitive information, the TextBox will automatically mask the user input.

  16. Select the Code tab.

     
  17. From the Code Builders tab in the Toolbox, drag an INSERT Data Method Code Builder onto the ASP.NET page. 

    Insert Code Builder

  18. You will see the Connect to Database dialog box appear.

     
  19. Type localhost in the Server box.

     
  20. Click the Database drop-down. ASP.NET Web Matrix will connect to the data source and populate the Database drop-down with database names. Select the Orders database and click OK.

     
  21. You will see step one of the Code Builder Wizard appear; it is called the Construct INSERT Query dialog box.

     
  22. Select Users in the Tables list view.

    Note Leave the Column check boxes set to their default values.

  23. Click Next

    Insert Query Dialog

  24. You will see step two of the Code Builder Wizard appear; it is called the Enter A Caption dialog box. Type AddUser into the method name box.

     
  25. Click Finish

    Enter Caption

  26. The Wizard will close and ASP.NET Web Matrix will place a function called AddUser in Code view. The function accepts a userName and userPassword as input parameters and returns an Integer as an output parameter. The Integer value will represent the total number of affected rows:

     

    Function AddUser(ByVal userName As String, ByVal userPassword As String) As Integer
        Dim connectionString As String = _
            "server='localhost'; trusted_connection=true; Database='Orders'"
            
        Dim sqlConnection As System.Data.SqlClient.SqlConnection = _
            New System.Data.SqlClient.SqlConnection(connectionString)
        
        Dim queryString As String = "INSERT INTO [Users] ([UserName], [UserPassword]) " & _
            "VALUES (@UserName, @UserPassword)"
            
        Dim sqlCommand As System.Data.SqlClient.SqlCommand = _
            New System.Data.SqlClient.SqlCommand(queryString, sqlConnection)
        
        sqlCommand.Parameters.Add("@UserName", System.Data.SqlDbType.VarChar).Value = _
            userName
            
        sqlCommand.Parameters.Add("@UserPassword", System.Data.SqlDbType.VarChar).Value = _
            userPassword
        
        Dim rowsAffected As Integer = 0
        sqlConnection.Open
        
        Try 
            rowsAffected = sqlCommand.ExecuteNonQuery
        Finally
            sqlConnection.Close
        End Try
        
        Return rowsAffected
    End Function
    
  27. Select the Design tab.

     
  28. Double-click the Button control. ASP.NET Web Matrix will open the Code view at the Button1_Click event.

     
  29. Add code to the Button Click event so it calls the AddUser function, passing the TextBox values as UserName and UserPassword parameters:

     

    Sub Button1_Click(sender As Object, e As EventArgs)
    
        If AddUser(txtUserName.Text, txtUserPassword.Text) > 0
            Message.Text = "Success"
        Else
            Message.Text = "Failure"
        End If
        
    End Sub
    
  30. Save and run the ASP.NET page.

     
  31. Your ASP.NET page will automatically appear in a new instance of your Web browser.

     
  32. Type a new user name in the UserName box.

     
  33. Type a user password in the UserPassword box.

     
  34. Click the Button.

    Note The message Label will contain the new user insert status. 

    Save New User

     

  35. Close the Web browser instance.

     
  36. Open the Login.aspx file you developed earlier in this walkthrough. You will provide the user the option of running the NewUser.aspx page if their login credentials are incorrect.

     
  37. Select the Code tab.

     
  38. Modify the Login button Click event code so that it provides a link to the NewUser page in the message Label text:

     

    Msg.Text = "Invalid Credentials: Please try again or " + _
        "<a href='newuser.aspx'>register a new user</a>"
    
  39. Save and run the ASP.NET page.

     
  40. Your ASP.NET page will automatically appear in a new instance of your Web browser.

     
  41. Type an invalid user name in the UserName box.

     
  42. Type a user password in the UserPassword box.

     
  43. Click the Button.

    Note The user now has the option of supplying valid login credentials or follow the register a new user link. 

    Invalid User

     

  44. Close the Web browser instance.

Next Step >>