Chapter 13 – Advanced Topics Dr. Stephanos Mavromoustakos

Practice – Applying Styles In this exercise, you change the appearance of the GridView control. Open Genres.aspx from the Management folder Switch into the Design View and open the GridView control’s Smart Tasks panel At the top of the panel, click the Auto Format link From the list of format schemes on the left, choose Classic. The Preview window is now updated

Practice – Applying Styles

Click OK. Switch back to Markup View and inspect the various styles that have been generated. Some have been placed before and others below the element. Save the changes and request it to the browser. You should see the list of genres with the selected formatting scheme applied

Practice – Creating Advanced Style Solutions In this exercise, you move the various Style properties from the Genres.aspx into a separate.skin file. Additionally, you replace all the inline properties like BackColor, ForeColor, and so on with a single CssClass attribute and move all formatting-related information to a CSS file for the theme Right-click the App_Themes forder, choose Add ASP.NET foolder  Theme, and then type Management as the new theme Right-click this new folder and choose Add New Item. Add a skin file called GridView.skin. Next, add a Style Sheet and call it Management.css.

Practice – Creating Advanced Style Solutions Open the Genres.aspx in Markup View and then delete the styles for FooterStyle, RowStyle andSelectedStyle. For the remaining four styles, remove all attributes and replace them with a single CssClass attribute. You should end up with this code: Don’t worry if VWD adds red error lines under the CSS class names. Since the CSS classes aren’t defined yet, it can’t find them

Practice – Creating Advanced Style Solutions Select all four styles in the code editor and then cut them to the clipboard using Ctrl+X. Switch to the file GridView.skin, delete all existing code, and paste the four styles Wrap the four styles in an element with its runat attribute set to server and its CssClass attribute set to GridView. Don’t add an ID attribute, as skin files don’t need this. You should end up with this code:

Practice – Creating Advanced Style Solutions Open the Management.css and add the following CSS. The body selector should already be there, so you can reuse it: * { font-family: Verdana, Arial, Sans-Serif' } body { font-size:80%; }.GridView,.GridView a { color: #000; }

Practice – Creating Advanced Style Solutions.GridViewHeaderStyle,.GridViewPagerStyle,.GridViewEditRowStyle { background-color: #bee4cf; }.GridViewAlternatingRowStyle { background-color: #e1e1e1; }.GridViewHeaderStyle { text-align: left; }.GridViewHeaderStyle a { text-decoration: none; }

Practice – Creating Advanced Style Solutions Open the web.config file for the Management folder that you added earlier and set the theme to Management: Go back to Genres.aspx and in Markup View under the Columns element of the GridView control, delete the bound column for the Id (users typically don’t need to see the ID of items in the user interface as they are often meaningless to them). Set the ItemStyle-Width for the CommandField to 100px and for the Name column to 200px. Finally, set ShowSelectButton of the CommandField to False. You should end up with this GridView :

Practice – Creating Advanced Style Solutions <asp:CommandField ShowDeleteButton="True" ShowEditButton="True" ShowSelectButton="False" ItemStyle- Width="100px" /> <asp:BoundField DataField="SortOrder" HeaderText="SortOrder" SortExpression="SortOrder" /> Save all your changes and then open Genres.aspx in the browser

Practice – Creating Login and Sign Up Pages In this exercise, you finish the Login page that you created in Chapter 6. You also create a new page that allows a user to sign up for an account on the Planet Wrox web site. Open up the Login.aspx and switch it to Design View Drag a LoginStatus control from the Login category of the Toolbox and drop it in the page Next, drag a Login control and drop it on the LoginStatus, so it ends up right above it. The LoginStatus appears as a small Login link below the Login control (see next figure)

Practice – Creating Login and Sign Up Pages

Open the Properties Grid for the Login control and set the two properties as shown In the root of the site create a new page called SignUp.aspx based on your custom template and give it a Title of Sign Up for a New Account at Planet Wrox Switch the page to Design View and drag a CreateUserWizard into the main content area for the page. Save and close the page. PropertyValue CreateUserText Sign Up for a New Account at Planet Wrox Now! CreateUserUrl SignUp.aspx

Practice – Creating Login and Sign Up Pages Open the web.config file from the root of the site and locate the element. Change the mode attribute from Windows to Forms : Go back to Login.aspx and press Ctrl+F5. You are greeted with a Login box. Note that the Login status below the Login control is currently set to Login to indicate you are not logged in yet. Try to log in by entering a random user name and password. Obviously, this fails because you haven’t created an account yet.

Practice – Creating Login and Sign Up Pages

Follow the Sign Up link below the Login control to go to SignUp.aspx and then create an account be entering your personal details. Be default, the password needs to have a minimum length of seven characters and must contain at least one non-alphanumeric character. Note that numbers are not considered non- alphanumeric so you need to make sure your password contains at least a character like # or $ or *. Note also that the password is case sensitive. Write down the user name and password you just entered, as you will need this later.

Practice – Creating Login and Sign Up Pages

Click the Create User button to have the account created for you. Ignore the Continue button for now, but click the Login item from the main menu. The LoginStatus control indicates now that you are logged in. Click the Logout link and you will be logged out, causing the LoginStatus to display the text Login again. In the Login control, enter the user name and password you entered earlier and click the Log In button. You are logged in and redirected to the home page. On the menu click Login to return to the Login page again. Note that the LoginStatus has changed and now shows Logout again.

Practice – Working with the Login Controls In this exercise, you hide the Login control o the Login.aspx page when the user is already logged in and display a message instead. Additionally, you add a text to the footer of the page that displays the name of the user together with an option to log out again Open Login.aspx and switch to Design View. Drag a new LoginView on top of the Login control so it’s placed right above it in the page Open the Smart Tasks panel of the LoginView control and make sure that AnonymousTemplate is selected in the Templates drop-down list

Practice – Working with the Login Controls Click the Login control once and then press Ctrl+X to cut it to the clipboard. Click inside the small white rectangle that represents the LoginView to position your cursor in the control and then press Ctrl+V to paste your Login control into your LoginView Open the Smart Tasks panel of the LoginView again and switch to the LoggedInTemplate. Click inside the small white rectangle of the control again and type the text You are already logged in Switch to Markup View and look at the code. The Login control should be placed inside the AnonymousTemplate, while the text you typed should be displayed within the LoggedInTemplate tags:

Practice – Working with the Login Controls You are already logged in <asp:Login ID="Login1" runat="server" CreateUserText="Sign Up for a New Account at Planet Wrox Now!" CreateUserUrl="SignUp.aspx">

Practice – Working with the Login Controls Save and close the page Open the main master page MasterPage.master in Markup View and locate the Footer element at the bottom of the page. Remove the text Footer Goes Here and replace it with a new LoginName control by dragging it from the Toolbox into the element. Set its FormatString property to Logged in as {0} From the Toolbox, drag a new LoginView control and drop it below the LoginName control, but still in the Footer. Switch to Design View and on the Smart Tasks panel of the LoginView choose LoggedInTemplate, and then in the white rectangle for the active LoggedInTemplate, drag and drop a new LoginStatus control

Practice – Working with the Login Controls Switch to Markup View again and wrap the code for the LoginStatus in a pair of parentheses. You should end up with this code: ( ) Save your changes and then request Login.aspx in your browser. Log in with the account and password you created earlier. If don’t recall the information simply sign up for a new one.

Practice – Working with the Login Controls As soon as you are logged in, the footer displays the text visible

Practice – Working with the Login Controls Click the Login item in the Menu to go to the Login page. Instead of the Login control you should now see a message indicating you are already logged in Click the Logout link in the footer at the bottom of the page. The page refreshes and displays the Login control again. Additionally, the text from the footer has now disappeared

Practice – Sending Confirmation with CreateUserWizard For this exercise to work, you need to have configured the element of the web.config with a valid mail server name (as discussed in Chapter 9) Add a new Text file to the App_Data folder and call it SignUpConfirmation.txt Add the following text to the file and then save and close it: Hi, Thank you for signing up for a new account at Planet Wrox To log in to the site, use the following details: User name: Password: We look forward to your contributions. The Planet Wrox Team

Practice – Sending Confirmation with CreateUserWizard Open SignUp.aspx and make sure it’s in Design View. Then, on the Properties Grid of the CreateUserWizard control, locate the MailDefinition property and expand it. Click the BodyFileName property, click the ellipsis to browse and select SignUpConfirmation.txt, which you created in the App_Data folder Set the Subject property to Your New Account at Planet Wrox. When you’re done the Properties Grid should look like this:

Practice – Sending Confirmation with CreateUserWizard Save the changes and request SignUp.aspx in your browser. Enter the required details and click Create User to sign up for an account. After a while you should receive an that contains the welcome text you typed before

Practice –Password Recovery In this exercise, you learn how to allow users to change and recover their passwords. Open up Login.aspx in Markup View and locate the tag. Right after it, type two elements to create some room below Drag a PasswordRecovery control from the Toolbox right after the two Between the opening and closing tags of the PasswordRecovery control add a element and then set the Subject of the to Your New Password for Planet Wrox. Your code should now look like this:

Practice –Password Recovery Save your changes and then close the file In the root of your site create a new Web Form based on your template and call it MyProfile.aspx. Set the Title of the page to My Profile Switch to Markup View and in the cpMainContent content placeholder create an element with its inner text set to My Profile. Right below the heading type some text which explains that the My Profile page is used for things like changing passwords. Wrap the text in a pair of tags to denote a paragraph

Practice –Password Recovery Drag a ChangePassword control and drop it after the closing tag. You should end up with the following code: My Profile The My page profile allows you to make changes to your personal profile. For now, all you can do is change your password below.

Practice –Password Recovery Open Web.sitemap and add a new element about My Profile under the About section: Save all changes and close all open files. Right-click Login.aspx in the Solution Explorer and choose View in Browser. Below the Login control you should now see the the PasswordRecovery control

Practice –Password Recovery

Enter your first name and click the Submit button. Enter the answer to the security question and click Submit once more. After a while you should receive an message with your new, auto-generated password. Use this new password to log in to the site. When you’re in, choose the My Profile item from the Menu. The ChangePassword control appears Enter the auto-generated password that was sent to you by , type a new password that is easier to remember, and then retype the same password. Finally, click Change Password.

Practice –Password Recovery

Practice – Configuring Membership In this exercise, you see how to override the default behavior for the membership in the Planet Wrox site. You modify the settings to remove the security question and answer option and to change the rules for the password Locate the file machine.config in C:\Windows\Microsoft.NET\Framework\v \CONFIG. Open machine.config with Notepad and locate the element under. Copy the entire element to the clipboard Go back to VWD, open the web.config and paste it right before the element. Change minRequiredPasswordLength to 6 and set requiresQuestionAndAnswer to false Right before the element, add a statement. Your settings should look like this:

Practice – Configuring Membership <!-- The section enables configuration of the security authentication mode used by ASP.NET to identify an incoming user. -->

Practice – Configuring Membership Save all your changes and request SignUp.aspx in the browser. Note that the security question and answer no longer appear in the Sign Up form as they did originally. Fill in the form but for the password type something short like pass Click the Create User button. Note that the control forces you to enter a password with a minimum length of six characters as you defined in web.config Enter a password of at least six characters with at least one non-alphanumeric and click again the Create User button

Practice – Configuring Membership

Practice – Using the WSAT to Manage User Accounts and Roles In this exercise, you will learn how to create Managers role and assign a user to it using the Web Site Administration Tool (WSAT) From within VWD, choose Website  ASP.NET Configuration. Your browser opens and displays the WSAT Click the Security tab Make sure that under Users you see the Create user and Manage user links. If you don’t see them, but you see a note about Windows authentication instead, click the Select authentication type link, then select From the Internet, and finally click Done Enter Managers as the new role name and click the Add Role button. You should see the new role appear. Click the Back button at the bottom of the page to return to the main Security page

Practice – Using the WSAT to Manage User Accounts and Roles

Click the Create User link. Fill in the details. As a password you can enter something like Manager##123. Also, check the Managers role name in the list of roles on the right Click Create User to add the user to the system and then click Continue. Click Back to reach to the Security page On the Security page click the Manage users link. From there you can manage all users in the system. To see where your user and role ended up, close the browser and go back to VWD. On the Solution Explorer, double-click the ASPNETDB.MDF database in the App_Data folder to open it in the Database Explorer. Expand the Tables node, right-click the aspnet_Roles table, and choose Show Table Data. Open up some of the other tables like aspnet_Membership and aspnet_UsersInRoles and inspect the data the contain.

Practice – Using the WSAT to Manage User Accounts and Roles

Practice – Blocking Access to the Management Folder In this exercise, you see how to modify web.config to block the folder so only the user account you assigned to the Managers role earlier can access this folder and the files it contains Open the web.config file at the root of the site. Scroll all the way down to the closing tag and right before it type a element. Add a path attribute and set its value to Management. Your code should now look like this:

Practice – Blocking Access to the Management Folder Complete the configuration by entering the following XML settings:

Practice – Blocking Access to the Management Folder Save and close the web.config file Open the main master page for the site (MasterPage.master) in Design View and scroll down to the end of the file. Select the LoginView control and open its Smart Tasks panel. At the top of the panel, click the Edit RoleGroups link Then, click the Add button to insert a new RoleGroup and set the Roles property to Managers

Practice – Blocking Access to the Management Folder Click OK to insert the RoleGroup and return to Design View On the Smart Tasks of the LoginView, choose RoleGroup[0] – Managers from the Views drop-down list. This switches the current template to the RoleGroup for Managers, so you can add content that is only visible to Managers Drag a Hyperlink control and drop it into the LoginView. Set its Text property to Manage Site and set the NavigateUrl to ~/Management/Default.aspx (You can use the URL picker for the Hyperlink by clicking the small button with the ellipsis on it). Switch to Markup View and after the Hyperlink control type the word or followed by a LoginStatus control. Your LoginView should contain the following code:

Practice – Blocking Access to the Management Folder <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/Management/Default.aspx">Manage Site or

Practice – Blocking Access to the Management Folder Save your changes and then request Default.aspx in your browser. Click the Login link on the Menu and then log in with the Manager account you created earlier. Make sure you don’t check the Remember Me option. The page now shows the Manage Site link in the Footer of each page

Practice – Blocking Access to the Management Folder Click the Manage Site link to open the Management section. Copy the current URL from the browser’s address page bar to the clipboard. Click the Back button of your browser and then click the Logout button in the Footer. Close your browser and open a new instance again from VWD Paste the address you just copied in the address bar and press Enter. Instead of going to an address like: You are taken to the Login page: fManagement%2fDefault.aspx