Question

I am working on an application which has a registration form and I have to display to the user whether the username exists or not.
I am using asp.net mvc3 and planned to use AJAX to achieve this.

I have a form

<tr>
<td>User Name*</td>
<td><input id="UserName" name="UserName" type="text" onblur="check(this.value);"/></td>
<td id= "UName"></td>
</tr>

which calls a .js file that has the folling contents

function check(User) {
    ...
    var url = "/UserNameCheck/Index";
    url += "?User=" + User;
    xmlHttp.onreadystatechange = state_Change;
    xmlHttp.open("GET", url, true);
    xmlHttp.send(null);
}
function state_Change() {
    if (xmlhttp.readyState == 4) {// 4 = "Response loaded"

        if (xmlhttp.status == 200) {// 200 = Response Error Free               
            document.getElementById("UName").innerHTML = xmlHttp.responseText
        }
        else {
            alert("Problem retrieving XML data");
        }
    }
}

I alerted the username and I am getting the correct value that i had entered. Now, the URL is /UserNameCheck/Index where UserNameCheck is a controller and Index is a method in that.

The controller has this code.

public ActionResult Index(string User)
        {
            string UserName;
            try
            {
                Response.Cache.SetCacheability(HttpCacheability.NoCache);
                UserName = Request.QueryString["User"];
                ConnectionPackage.ConnectionClass cc = new ConnectionPackage.ConnectionClass();
                conn = cc.con;
                string sql = "Select UserName FROM UserDetails where UserName = '" + UserName + "'";
                conn.Open();
                SqlCommand cmd = new SqlCommand(sql, conn);
                cmd.CommandType = CommandType.Text;
                object p = cmd.ExecuteScalar();
                cmd.ExecuteNonQuery();
                string u = (string)p;
                if (u.Length==0 || u.Equals("NULL") || u.Equals("null")||u.Equals("Null"))
                {
                    return View();
                }

                return null;
            }
            catch (Exception ex){
            }

and the view has

 String buffer = " <table><tr><td id = 'UName' >" This user name already exists. Please select some other unser name.
 buffer = buffer + "</td></tr></table>";
 response.getWriter().println(buffer);

I also tried writing

Response.Clear();
Response.Write("UserName already exists. Please select another UserName");
Response.End();

instead of returning View.
But in both the cases, I didn’t get any message that the username exists even though I typed a user name that was already present in the database.

The connection string work for inserting into the database, so I dont think there is a problem with that. Is there a problem with the URL that I have mentioned in the js file? Or is my entire approach wrong?
I am basically from java background so dont know much about asp.net. Please do help.

Thank you very much in advance.

Answer 1

You’re doing alright but you could make this a whole lot easier on yourself. If you are usinng MVC3 with Razor, your app already has jQuery installed.

1. Use the $.ajax() method to perform the calls to your controller action that checks names…

2. Bind the $.ajax() call “unobtrusively” which means instead of on your HTML control, bind the event to your control from the jquery/javascript.

3. Second, if you want a little fancy performance, you can bind it via the live() jquery function or keyup event, so that as you are typing the ajax call is made and you find out realtime.

Ultimately you will end up with a lot less javascript, and your JS stuff will be cleanly separated from your markup.

As far as your controller action is going, it looks fine for playing around and learning, but you’d want to think about either (a) putting your SQL statement as a stored procedure on the db server and calling that, or (b) writing a repository pattern class and then using LINQ to do your query work after the DB fetch.

Another possibility would be to use Entity Framework 4.1 via NuGet to eliminate both needs. It can have a bit of a learning curve, but there’s lots of good stuff out there and your example would be fairly simple to get started with.

Let me know if you have any specific concerns with your code and I can provide a more detailed answer.