A Better ASP.Net Member/Role Management Page Pt. 1
Prologue:
**Author’s Note** – Thank you to everyone for your comments. It has come to my attention that I didn’t pay enough attention to a couple of the details. For that I apologize, I created the code that resulted in this page and then recreated it doing optimizations as I went and converting it from a page to a user control. Sometimes I didn’t get the optimizations reflected properly in front-end or back-end code that I posted to match what’s actually happening. Also I’m sad to say I didn’t proofread well enough and have some typos. I will try to make changes to the post so they are identifiable, and post comments about the changes. Thanks for your comments, your patience, your help and most of all support. – we now continue our regularly scheduled post **
We recently finished implementing a new corporate website. We had a consultant do much of the back end coding on the site and for the most part, it’s all very good. In our specifications, we requested that we use the ASP.Net membership provider to manage user accounts. Previously our site did have some user accounts, but they were hard coded and a mess. That was acceptable at the time since they only were for site content management. In the future that won’t be acceptable since we want to create accounts for outside users and start managing parts of our site. So we had the consultants use the ASP.Net membership provider, all good and wonderful. Of all the stuff the consultants did, the one part that feels lacking was the user administration page. It just isn’t quite all that (you can see where it was copy and pasted from here). So, over the next several posts, I’ve decided to create a better/more useful membership administration page.
Problem:
If you’ve ever used Visual Studio, you may have noticed that Microsoft included an ASP.net Web Site Administration Tool. It’s pretty useful. It’s attractively presented. It’s, well, just about what i was looking for. So I decided that I create one and I would pattern what I did after that (ok, I actually wanted to just take what they had and reuse the whole thing, but that’s not going to happen…). When you run Microsoft’s Web Site Administration Tool, you may notice that the files for it are actually on your local machine (under C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\ASP.NETWebAdminFiles) Thus, you can look them up and make use of your “copy and paste inheritance.” I’m a VB person, our site is VB, and all the Microsoft files are in C#, (so I actually rewrote what was there into VB), but Microsoft included nearly all the functionality I wanted there. Granted, the files and the code flow are pretty complicated because Microsoft wanted the tool to run from any web project and with any membership provider, so they really try to be generic enough to do it.
For my purposes I wanted to make these pages a little simpler (in some ways). So after playing their files for a little bit, I came up with the following criteria for creating my Member/Role Management Page. For the purposes of this series, we will use this same set of criteria and create “A Better ASP.Net Member/Role Management Page”:
1. We want to be able to use this page with other sites if we determine to do so. Maybe not in Microsoft’s fancy way, but we want it to be easy to use and integrate with other sites, so we’ll try to make it a user control.
2. The interface should be formatted nicely: i.e. it should be easy to use and be aesthetically pleasing. While Microsoft’s ‘Web Site Administration Tool’ actually fits this bill (usable and pretty), integrating it into my existing site actually posed a number of problems: a. There are A LOT of files involved to incorporate this functionality (129 files in 19 folders to be exact). I didn’t want that many pages. Ideally I wanted one, maybe two, b. it wouldn’t integrate with our site’s look and feel, since it has it’s own master page that it ties into, with it’s own functionality, c. I found that it actually lacks some of the membership and roles functionality that I was looking for (mostly because the functionality I was looking for isn’t included in the membership/roles providers), d. it’s written in C# and our site’s in VB and e. the code flow is very complex, weaving through a number of aspx files (inline) and app_code files as well.
Thus, while my page is based on the Microsoft code and files, much of it written interpreted from scratch (is that a real phrase, interpreted from scratch) or a streamlined rewrite of their code that fits our purposes.
3. Our management page should provide the following functionality for user account (member) administration: Create, Delete, Edit and Rename. We should also be able to Change/Reset the user’s password and/or their Security Question/Answer. (BTW, some of this functionality is not available using the Membership provider (renaming) and other functionality will depend on how we configured our provider (password and security question admin) so we may need to provide work-arounds/checks to accomodate different provider configurations.
4. It should provide the following functionality for Role administration: Create, Delete, Manage Assignments, and Rename (BTW, renaming isn’t a. recommended, or b. part of the Role provider’s functionality, but I wanted to include it anyhow because it would be helpful in certain situations – look for a discussion on this in future posts, when we get to this part.).
5. Obviously I wanted it to use the ASP.net Membership and Roles providers.
6. And lastly, I wanted to incorporate some AJAX functionality. This I did for two reasons, 1. Some of the control extenders we can use to provide additional functionality to controls that I really want to have but would be a pain to do a different way (and the AJAX Control Toolkit has some easy to use VERY cool controls) and b. I wanted the page to not do a full post back whenever we made any changes to user accounts (the page will get pretty big with ALL this functionality on one page).
Ok, that doesn’t seem like much of a problem statement, so let me boil it down to this: We want to take the user administration pages that Microsoft created and repurpose them in a different language, add some functionality, put them all together into one page and then AJAX-ify them. Is that enough of a problem for you? ;-)
Solution:
I hope by now you are getting the notion that I will be breaking this down into a number of smaller posts and handling them as such. Since this is actually a pretty big undertaking we’ll be doing a lot of setup in this post to get us started and then continue on in subsequent posts adding functionality to our control. Before we get down to any real coding, we’ll need to setup the following:
First off, let’s create a new project and create a user control (named UserAdminControl.ascx) and a new page to put it on (named TestUserAdminControl.aspx). Add your user control to the test page so we have our pages setup.
Next, we need to install the AJAX Extensions Control Toolkit. If you have VS2008, you’re in luck, you’ve already got the AJAX Extensions installed, you just now need to download the control toolkit and install it. I won’t walk you through it all, but basically, you download the toolkit, extract the files somewhere meaningful (I put mine in the VS.Net Program Files folder) and add them to the toolbox. (Three addendum notes to the article: 1. The article has you add reference to the toolkit’s controls, you can actually drag and drop the .dll file from it’s final resting spot to the toolbox and do it easier (look here and go down to step 1) 2. If you add control toolkit controls to your application, directly from the Bin directory of the sample site, remove all the other language directories from the BIN folder, or they ALL will get copied to YOUR in file when you run your app (or just copy the 3 files you want out of the Bin folder somewhere else then proceed to add). Finally, if you download the newest version of the toolkit (as I did) for the AJAX control toolkit controls to work, you must have the .Net Framework 3.5 SP1 installed on your computer. If the service pack is not installed, you’ll get an error when you try to run your application)
Also, you’ll need to configure a membership provider and have a membership database. First, you have to configure your application to use forms authentication. Then setup a member and role database and membership and roles providers that can connect you to them. Again I won’t go through it all, but some articles will walk you through it can be found here, here and/or here.
Finally, we’ll setup some CSS styles that we can use as defaults for our control formatting, just as a means of making formatting easy. Remember, that since we’re creating a control, you can add properties in the code-behind page and they can then be accessible when you add your control to a page. This means that you can set properties like CSSClass and other properties and override what we put here, but for our purposes, a default is a good idea. Add the following CSS to your TestUserAdminControl.ascx page. Currently, it should probably be the only thing in the page except your @Control directive. Add the following:
<style type="text/css">
.modalBackground
{
background-color: black;
filter:alpha(opacity=60);
opacity:0.6;
}
.modalPopup
{
background-color: #6699CC;
border-width: 3px;
border-style: solid;
border-color: Gray;
padding: 3px;
}
.bodyText
{
font-family:verdana;
font-size: .8em;
color: black;
letter-spacing:0;
line-height:150%;
padding-left:30;
padding-right: 20;
padding-top: 10;
}
.tableBorders
{
border-color: #CCDDEF;
border-style: solid;
border-width: 1px;
width: 550px;
border-spacing: 0px;
border-collapse: collapse;
background-color: white;
}
.tableHeadersNTitles
{
padding: 5px;
background-color: #6699CC;
font-size: 0.9em;
color: white;
font-weight:bold;
line-height:150%;
}
.tableBody
{
padding: 5px;
}
.userGridView, userGridview table
{
width: 550px;
border-color: #CCDDEF;
border-width: 1px;
}
.gridRowStyle
{
background-color:#FFFFFF;
color: black;
padding-top: 3;
padding-bottom: 3;
border-color: #CADBED;
border-style: solid;
border-width: 1px;
}
.gridAlternatingRowStyle, .gridAlternatingRowStyle td
{
color: black;
letter-spacing:0;
padding-left:30;
padding-right: 20;
padding-top: 3;
padding-bottom: 3;
background-color: #CADBED;
}
.gridPagerStyle
{
color:#000000;
background-color:#EEEEEE;
}
.watermarked
{
color:gray;
}
</style>
Basically I just put together a bunch of styles to make everything look good. Some of them we won’t use for a while, but we’ll eventually use them and we’ll be ready to make everything look good like the Microsoft pages (ok, yes, I even copied their color scheme, mostly).
Epilogue:
We’ve got our work cut out for us. And while we’ve got a lot of work head of us, the coding is actually not all that complicated once we get down to it, there’s just lots of functionality we’ll be adding. We’ll be diving into the code in the next postings. But for today, we’ll call it good and just know that we’ve got everything together and setup so that we can begin our challenge.