In this post, I will explain you how to have an ajax call on custom validator control and check for the username in the database. This task will include two pages one is the form page (default.aspx in our case) in which we have the custom validator and the other one is the page which we call through AJAX to give us the result (validateUser.aspx). You can also have a web service instead of that page but in my scenario , I am using ASPX page.
So, the form will look like as following.
1: <form id="form1" runat="server">
2: <div>
3: <asp:Panel ID="pnl1" runat="server" DefaultButton="Button1">
4: <asp:TextBox ID="TextBox1" runat="server">
5: </asp:TextBox>
6: <asp:Button ID="Button1" runat="server" Text="Submit" />
7: <asp:HiddenField ID="hfOutput" runat="server" />
8: </asp:Panel>
9: <asp:customvalidator ID="Customvalidator1" runat="server" errormessage="Enter Valid User" ControlToValidate="TextBox1" ClientValidationFunction="ValidMe"></asp:customvalidator>
10: </div>
11: </form>
Default.aspx (Form)
Notice, the hiddent field called hfOutput which we will use to store the output of the AJAX call.
Where as the page which we call through AJAX will look like as follows
1: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="validateUser.aspx.cs" Inherits="LearnWebApp.validateUser" %>
validateUser.aspx
In short, we have deleted every thing from this page except page directive. Now if we call this page we will see the simple output without having any HTML tag. we did it because we want to get rid from all the html tags so that we can have a neat and clean output at the time we call this page from Javascript (AJAX). What we want this page to return us is either "True" or "False". If you look at the code behind file of this page you will have a good idea of what we actually upto. Here is the code for that.
1: protected void Page_Load(object sender, EventArgs e)
2: { 3: // We can also use a database call here ... right now we are compairing string.
4: if (Request.QueryString["username"] == "username")
5: { 6: Response.Write("true"); 7: }
8: else
9: { 10: Response.Write("false"); 11: }
12: }
validateUser.aspx.cs
As it is there on comments, here we are only comparing string. You can have a database call and return the result accordingly.
To call the validateUser.aspx from validMe function which we have defined in ClientValidationFunction property of custom validator, we need to write the following javascript on default.aspx
1: <script type="text/javascript">
2: var ajaxCalled = false;
3:
4: function ValidMe(source, args) { 5: callPage(args.Value)
6: while (document.getElementById("hfOutput").value != ""){ 7: if (document.getElementById("hfOutput").value == "true") { 8: args.IsValid = true;
9: }
10: else { 11: args.IsValid = false;
12: }
13: document.getElementById("hfOutput").value = ""; 14: return;
15: }
16: }
17:
18: function callPage(strName) { 19: var rnd = Math.random() * 1000000;
20:
21: if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... 22: request = new XMLHttpRequest();
23: } else if (window.ActiveXObject) { // IE6 and older 24: request = new ActiveXObject("Microsoft.XMLHTTP"); 25: }
26: var url = 'validateUser.aspx?username=' + strName + '&R=' + rnd;
27: request.open("GET", url, true); 28: request.onreadystatechange = SetPage;
29: request.send(null);
30:
31: }
32:
33:
34: function SetPage() { 35: if (request.readyState == 4) { 36: var objHf = document.getElementById("hfOutput"); 37: if (request.status == 200) { 38: if (objHf) { 39: objHf.value = request.responseText;
40: }
41: }
42: }
43:
44: }
45: </script>
Let me describe what we have done here, I am calling CallPage function from ValidMe which will call from the asp.net validation mechanism. CallPage function is an AJAX call which will call validateUser.aspx and SetPage function will be called once the AJAX call is finish and we have output ready to use.
And on that SetPage function we are setting the Hidden field called hfOutput to get used by ValidMe function.
That's it ..... :) . You can also download the complete project give below.