Making a registration system with Asp.Net and Linq-to-SQL (part 3)

Now that it's all up and working, we can make it friendlier and add some cool AJAX effects

After part 2 the system works just fine, but I wanted to take it a step further.This will be the last entry in this series, which I will follow up with a tutorial on how to retrieve passwords and log the registered users in.

what are we going to accomplish?

Like I said before, the system works, this is just the frosting on the cake, we are going to add some jquery and use the MasterPage to make this more accessible to the users.

markup

On the MasterPage, I added quite a few things, and on the registration page I added one key element:

demo.master
<h1>
  <span class="right">
    <a href="default.aspx">Home</a>
    <a href="register.aspx" class="triggerRegister">Register</a>
  </span>
  Registration Demo
</h1>

<div><asp:ContentPlaceHolder id="body" runat="server" /></div>

<div id="footer">
  <a href="default.aspx">Home</a> |
  <a href="register.aspx" class="triggerRegister">Register</a>
</div>

<div class="jqmWindow" id="register">
  <h3>
    <asp:UpdateProgress ID="uppRegister" runat="server">
      <ProgressTemplate>
        <div class="status">working...</div>
      </ProgressTemplate>
    </asp:UpdateProgress>
    <a href="#" class="x jqmClose">X</a>
    Register
  </h3>
  <cc:register ID="ccRegister" runat="server" />
</div>

register.aspx
cc:register ID="reg" runat="server" in_page="true" />

First of all, you have to realize, since the <div id="register" ... > has a CSS class of 'jqmWindow, it will not be visible when the page loads. This is because it is going to be within a modal popup window. Also, you will notice that there is a <cc:register ... > control within. That is what causes the small change to register.aspx as the attribute 'in_page' is added.What this does is elimiate errors that may occur if two or more of these controls are on a single page, so the validators only validate the controls they are pertinant to. The code is in the Utils.cs file if you would like to examine it.

I am also using an UpdatePanel within the modal so the user is able to see their feedback; if it wasn't (or something similar) used, the modal would be hidden after postback.

Also, some links with the class 'triggerRegister' are added, these will be the links that will trigger the modal popup (using jqModal) with the following JS:

demo.master
$('#register').jqm({ trigger: false }).jqmAddTrigger($('.triggerRegister'));

And just that simply we made the registration available multiple ways across the entire project! If the user has javascript turned off, it will will still work just fine as we have a 'backup' register.aspx page that will handle the request.Ahh the beauty of jQuery.


« Part 1« Part 2

Add comment

Loading