ch 16 - p.596 - Checking the Existence of an ASP.NET Membership Username with ASP.NET

Tulsi · December 2nd, 2013, 02:29 PM

Imar,

Thank you so much for this article! I was able to successfully add this feature to the sign up page. Very excited to get this working! It helped me get a better understanding of how page methods work and when to use them.

I had a question related to the view source. When I try to view the source after successfully getting the "User name already taken" message to the right of the user name text box, I noticed that "User name already taken" span element is not visible in the source (under the Sign Up for Your New Account section). Is this the expected behavior?

Thanks so much.
Tulsi

Imar · December 2nd, 2013, 03:21 PM

Does your page contain an UpdatePanel? That would add the code dynamically so it doesn't show up when you view the source directly. You can use the IE Developer tools or Firebug to diagnose the run-time HTML.

Cheers,

Imar

Tulsi · December 3rd, 2013, 01:53 PM

Thank you for suggesting the IE Developer tools! I was not aware that there was such a useful tool to see exactly what data is sent to the browser. Using this tool, I am now able to see the span element for "User Name already taken".

I'm not sure as to why it doesn't show up when I view the source directly. The Signup.aspx page does not contain an UpdatePanel, but it is based off a MasterPage that has a reference to a scriptmanager Ajax control. Could this be the reason?

Thanks,
Tulsi

Imar · December 3rd, 2013, 02:09 PM

Hi Tulsi,

When are you looking at the source code? The code is only available after a postback (as far as I know) as it's a server side check so it doesn't make sense to submit it on the initial request. You can check it out by creating a new page with a plain CreateUserWizard control on it.

IMar

Tulsi · December 19th, 2013, 02:25 PM

Imar,

Thank you...I am now able to see the "User name already taken" message perfectly. This message is generated via the Javascript on the SignUp.aspx page.

I think my confusion was due to my misunderstanding of how "View Source" works.

Here's how I understand it now....It seems that "View Source" should display the resulting HTML that is sent to the browser by the server after processing the page. It should not show any HTML that is added dynamically by Javascript in the page. In order to view and diagnose the dynamically added HTML, one needs to use IE Developer tools or Firebug.

I've been trying different things with this tool and realizing how powerful it is. I'm even able to debug the client side javascript with it...this is awesome!

Thank you so much again!

Tulsi

Imar · December 19th, 2013, 02:47 PM

Quote:

Here's how I understand it now....It seems that "View Source" should display the resulting HTML that is sent to the browser by the server after processing the page. It should not show any HTML that is added dynamically by Javascript in the page. In order to view and diagnose the dynamically added HTML, one needs to use IE Developer tools or Firebug.

Yes, that's exactly how it is. Some browsers, such as FireFox, also have a "View Selection Source" menu command that shows the DOM (that includes the HTML added by JavaScript) instead of just the original source.

Quote:

I've been trying different things with this tool and realizing how powerful it is. I'm even able to debug the client side javascript with it...this is awesome!

I completely agree! ;-)

Cheers,

Imar

Tulsi · February 4th, 2014, 03:33 PM

Hi Imar,

I'm not sure as to why the following error just surfaced now when using IE ....

If I try to type in a pre-existing username, I successfully get the "User Name already taken message" message when using IE and Google Chrome.

But I run into the following error when I try to sign up for a new account and I click "Create User" in IE (works fine in Google Chrome): "Line: 252 Error: Unable to get property 'parentNode' of undefined or null reference".

I'm re-directed to screen which says "Your account is created successfully" followed by this WebPage Error.

I'm not sure what I'm doing incorrectly.

Thanks.
Tulsi

Imar · February 4th, 2014, 04:45 PM

Can you post the code that causes the error? Do you know where it's coming from?

Imar

Tulsi · February 4th, 2014, 10:21 PM

Here's the signup.aspx page:

Error happens on the following line: userNameRequiredMessage.parentNode.appendChild(err orMessage);

Quote:

<%@ Page Title="Sign Up for a New Account at Planet Wrox" Language="C#" MasterPageFile="~/MasterPages/FrontEnd.master" AutoEventWireup="true" CodeFile="Copy of SignUp.aspx.cs" Inherits="SignUp" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="cpMainContent" Runat="Server">
<asp:CreateUserWizard ID="CreateUserWizard1" runat="server" ClientIDMode="Static">
<MailDefinition BodyFileName="~/App_Data/SignUpConfirmation.txt"
Subject="Your New Account at PlanetWrox.com">
</MailDefinition>
<WizardSteps>
<asp:CreateUserWizardStep ID="CreateUserWizardStep1" runat="server">
</asp:CreateUserWizardStep>
<asp:CompleteWizardStep ID="CompleteWizardStep1" runat="server">
</asp:CompleteWizardStep>
</WizardSteps>
</asp:CreateUserWizard>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="cpClientScript" Runat="Server">
<script type="text/javascript">
var userNameTextBox = $get('UserName');
var userNameRequiredMessage = $get('UserNameRequired');
var errorMessage = document.createElement('span');
errorMessage.style.visibility = 'hidden';
errorMessage.style.color = 'Red';
errorMessage.innerHTML = 'User Name Already Taken';
userNameRequiredMessage.parentNode.appendChild(err orMessage);

$addHandler(userNameTextBox, 'blur', UserNameExists);

function UserNameExists() {
var userName = userNameTextBox.value;
PageMethods.UserNameExists(userName, UserNameExistsCallback);
}

function UserNameExistsCallback(result) {
errorMessage.style.visibility = result ? 'visible' : 'hidden';
}
</script>
</asp:Content>

Here's the Signup.cs file:

Quote:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Security;

public partial class SignUp : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{

}

// Check existence of ASP.Net Membership UserName with ASP.NET AJAX
[WebMethod]
public static bool UserNameExists(string yourName)
{
return Membership.GetUser(yourName) != null;
}

}

Thanks,
Tulsi

Imar · February 5th, 2014, 12:07 PM

Your custom code also fires after the postback in which case the controls like UserNameRequired are no longer present.

I see a few solutions:

1. Redirect the user to a "thank you for registering" page that doesn't have this code.
2. Wrap the code in a panel and set the Visible property to False when the user has been created so this code won't be sent to the browser.
3. Rewrite the JavaScript code so it takes the case where these controls don't exist into account.

Hope his helps,

Imar