Using Javascript events with ASP.net AJAX

Question

I can't believe that this hasn't been covered before, but I have been having a hard time finding an answer to this one on Google.

I am learning AJAX with ASP.NET, and I have a working prototype. My only problem is that I want to kick off my AJAX validation on a JavaScript event (onKeyUp to be exact) however, ASP.NET seems to only support its server side events for its version of AJAX. How do I call my AJAX from a client side event?

Thanks

UPDATE

Just wanted to add that I did find this trick out there, but this causes the website to do a postback, which makes no sense to me if your trying to do AJAX.

txtFirstName.Attributes.Add("onKeyUp","__doPostBack('ctl00_ContentPlaceHolder1_txtFirstName','')");

What exactly are you validating? Form fields or something else on the client side? Or are you validating the data being passed by your AJAX code on the server side? Also just curious; are you working on an MVC app or Web Forms? — Colin Pear
– Colin Pear, Commented May 31, 2012 at 19:42
I want to validate what has been entered in a textbox against the server side. — Limey
– Limey, Commented May 31, 2012 at 19:44

Colin Pear · Accepted Answer · 2012-05-31 20:08:49Z

1

It sounds like you're doing Web Forms stuff and you want to validate some content as its being typed or at least after they submit the data.

You might want to take a look at the ASP.NET Ajax Toolkit. You can download the .dll and add it as a reference to your project.

Take a look at the ValidatorCallOut

answered May 31, 2012 at 20:08

Colin Pear

3,1101 gold badge32 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Colin Pear Over a year ago

If you don't want to use Microsofts toolkit stuff and you want to do something more customized you might want to look into UpdatePanels and partial postbacks

Colin Pear Over a year ago

And to more directly answer your question the "trick" you found is on the right path. You want to do that sort of in conjunction with a partial postback and not a full post back. See here

Limey Over a year ago

I think I found an even better way to do this. Instead of doing any kind of post back, I ignored .NET all together for this portion of my ajax. I just wrote a javascript function to call a server side page for validation and added it to the onkeyUp event. I will post some code shortly.

Limey · Accepted Answer · 2012-05-31 20:49:10Z

Ok, so I "Borrowed" this code from w3Schools.com, So I want to give them credit

<script type="text/javascript">
  function val() {
    var xmlhttp;
    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    }
    else {// code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("spnFirstName").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("POST", "server.aspx", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.send();
    //xmlhttp.send("fname=Henry&lname=Ford"); //This is if you want to send values
  }
</script>



First Name: <asp:TextBox ID="txtFirstName" runat="server" OnTextChanged="txtFirstName_TextChanged" AutoPostBack="True" onkeyup="Val()"></asp:TextBox>
<span id="spnFirstName" runat="server" style="color:Red"> </span>

Server.aspx is an empty page that just has the word "Hello" in it. As you can see, I tied this simple javascript function to the onKeyUp Event. This also seems not to interfer with the ASP.NET AJAX validation.

I like doing this much better than adding a dll, because as long as I stick with the core asp.net product, I don't have to worry about other developers having to dig up libraries they might not have.

Collectives™ on Stack Overflow

Using Javascript events with ASP.net AJAX

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related