Chapter 13 – Advanced TopicsDr. Stephanos Mavromoustakos

Practice – Applying StylesIn this exercise, you change the appearance of

the GridView control.Open Genres.aspx from the Management folderSwitch 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

Practice – Applying StylesClick OK. Switch back to Markup View and

inspect the various styles that have been generated. Some have been placed before and others below the <Columns> 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 SolutionsIn 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 foolderTheme, 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 SolutionsOpen 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:

<PagerStyle CssClass="GridViewPagerStyle" /> <HeaderStyle CssClass="GridViewHeaderStyle" />

<EditRowStyle CssClass="GridViewEditRowStyle" />

<AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />

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 <asp:GridView> 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:

<asp:GridView runat="server" CssClass="GridView">

<PagerStyle CssClass="GridViewPagerStyle" />

<HeaderStyle CssClass="GridViewHeaderStyle" />

<EditRowStyle CssClass="GridViewEditRowStyle" />

<AlternatingRowStyle CssClass="GridViewAlternatingRowStyle" />

</asp:GridView>

Practice – Creating Advanced Style SolutionsOpen 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 SolutionsOpen the web.config file for the Management folder that

you added earlier and set the theme to Management: <system.web> <pages theme="Management"></pages> </system.web>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<Columns> <asp:CommandField ShowDeleteButton="True" ShowEditButton="True"

ShowSelectButton="False" ItemStyle-Width="100px" />

<asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" ItemStyle-Width="200px" />

<asp:BoundField DataField="SortOrder" HeaderText="SortOrder"

SortExpression="SortOrder" /> </Columns>Save all your changes and then open Genres.aspx in

the browser

Practice – Creating Login and Sign Up PagesIn 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

Practice – Creating Login and Sign Up PagesOpen 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.

Property Value

CreateUserText Sign Up for a New Account at Planet Wrox Now!

CreateUserUrl SignUp.aspx

Practice – Creating Login and Sign Up PagesOpen the web.config file from the root of the site

and locate the <authentication> element. Change the mode attribute from Windows to Forms:

<authentication mode="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

Practice – Creating Login and Sign Up PagesFollow 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

Practice – Creating Login and Sign Up PagesClick 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 ControlsIn 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 ControlsClick 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<asp:LoginView ID="LoginView1" runat="server"> <LoggedInTemplate> You are already logged in </LoggedInTemplate> <AnonymousTemplate> <asp:Login ID="Login1" runat="server"

CreateUserText="Sign Up for a New Account at Planet Wrox Now!"

CreateUserUrl="SignUp.aspx"> </asp:Login> </AnonymousTemplate> </asp:LoginView>

Practice – Working with the Login ControlsSave and close the pageOpen the main master page MasterPage.master in

Markup View and locate the Footer <div> 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 <div> 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 <div>. 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:

<div id="Footer"> <asp:LoginView ID="LoginView1" runat="server">

<LoggedInTemplate> (<asp:LoginStatus ID="LoginStatus1" runat="server" />)

</LoggedInTemplate> </asp:LoginView> <asp:LoginName ID="LoginName1" runat="server" FormatString="Logged in as {0}" />

</div> 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 ControlsClick 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 Email with CreateUserWizardFor this exercise to work, you need to have configured the

<system.net> 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 <% UserName %>,

Thank you for signing up for a new account at Planet Wrox

To log in to the site, use the following details:User name: <% UserName %>Password: <% Password %>

We look forward to your contributions.The Planet Wrox Team

Practice – Sending Confirmation Email with CreateUserWizardOpen 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 Email with CreateUserWizardSave 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 email that contains the welcome text you typed before

Practice –Password RecoveryIn this exercise, you learn how to allow users to change and recover

their passwords. Open up Login.aspx in Markup View and locate the </asp:Login>

tag. Right after it, type two <br /> elements to create some room below

Drag a PasswordRecovery control from the Toolbox right after the two <br />

Between the opening and closing tags of the PasswordRecovery control add a <MailDefinition> element and then set the Subject of the email to Your New Password for Planet Wrox. Your code should now look like this:

</asp:Login><br /><br /> <asp:PasswordRecovery ID="PasswordRecovery1" runat="server">

<MailDefinition Subject="Your New Password for Planet Wrox"></MailDefinition>

</asp:PasswordRecovery>

Practice –Password RecoverySave your changes and then close the fileIn 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 <h1> 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 <p> tags to denote a paragraph

Practice –Password RecoveryDrag a ChangePassword control and drop it after the

closing < /p> tag. You should end up with the following code:

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">

<h1>My Profile</h1><p>The My page profile allows you to make changes to your personal profile. For now, all you can do is change your password below.</p>

<asp:ChangePassword ID="ChangePassword1" runat="server">

</asp:ChangePassword></asp:Content>

Practice –Password RecoveryOpen Web.sitemap and add a new element about

My Profile under the About section:<siteMapNode url="~/About/AboutUs.aspx" title="About Us" description="About Us" />

<siteMapNode url="~/MyProfile.aspx" title="My Profile" description="My Profile" />

</siteMapNode>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

Practice –Password RecoveryEnter 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 email 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 email, type a new password that is easier to remember, and then retype the same password. Finally, click Change Password.

Practice –Password Recovery

Practice – Configuring MembershipIn 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\v2.050727\CONFIG.

Open machine.config with Notepad and locate the <membership> element under <system.web>.

Copy the entire <membership> element to the clipboardGo back to VWD, open the web.config and paste it right

before the <authentication> element.Change minRequiredPasswordLength to 6 and set requiresQuestionAndAnswer to false

Right before the <add> element, add a <clear /> statement. Your settings should look like this:

Practice – Configuring Membership <membership> <providers> <clear /> <add name="AspNetSqlMembershipProvider"

type="System.Web.Security.SqlMembershipProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="LocalSqlServer" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" applicationName="/" requiresUniqueEmail="false" passwordFormat="Hashed" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="1" passwordAttemptWindow="10" passwordStrengthRegularExpression="" />

</providers> </membership> <!-- The <authentication> section enables configuration of the security authentication mode used by ASP.NET to identify an incoming user. --> <authentication mode="Forms" />

Practice – Configuring MembershipSave 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 RolesIn 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 WebsiteASP.NET Configuration. Your browser opens and displays the WSAT

Click the Security tabMake 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

Practice – Using the WSAT to Manage User Accounts and RolesClick 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 FolderIn 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 </configuration> tag and right before it type a <location> element. Add a path attribute and set its value to Management. Your code should now look like this:

</system.net> <location path="Management"></location></configuration>

Practice – Blocking Access to the Management FolderComplete the configuration by entering the

following XML settings:</system.net> <location path="Management"></location> <system.web> <authorization> <allow roles="Managers"/> <deny users="*"/> </authorization> </system.web></configuration>

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 FolderClick OK to insert the RoleGroup and return to Design

ViewOn 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:LoginView ID="LoginView1" runat="server"> <RoleGroups> <asp:RoleGroup Roles="Managers">

<ContentTemplate> <asp:HyperLink ID="HyperLink1" runat="server"

NavigateUrl="~/Management/Default.aspx">Manage Site</asp:HyperLink> or

<asp:LoginStatus ID="LoginStatus2" runat="server" />

</ContentTemplate> </asp:RoleGroup> </RoleGroups>

Practice – Blocking Access to the Management FolderSave 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 FolderClick 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:

http://localhost:49761/Management/Default.aspx

You are taken to the Login page:

http://localhost:49761/login.aspx?ReturnUrl=%2fManagement%2fDefault.aspx