Calling a code-behind function from JavaScript

How to run server side code called from JavaScript, receive a result, and update your web page.

Introduction

I've been searching in CodeProject for an article about this same topic, and couldn't find something exactly about this, so I hope this could help someone.

As the title of this post says, today I want to share how to call a function or method in the code-behind from JavaScript, or in other words, run some server side code called from the client and then update our web page.

Background

I needed to add some functionality to some ASPX pages so they would look more responsive, more like a desktop app. The thing is that I did not want to write the functionality in JavaScript. I wanted to implement something a little bit complex, but as I already coded it in code-behind, I thought I'd try to rewrite it in JavaScript if it is possible to call a function or method from it (in this case).

Simple Scenario

Let's imagine the following simple scenario, just for the purpose of showing how we can achieve our goal today. Imagine that we have two text boxes: txtName and txtLastName. We want the user to write his full name and then greet him with a message when the last text box loses focus.

We could easily do this all in JavaScript, but remember that it is just for the purpose of demonstrating how to call a server side method from the client side and update our web page.

Greet: Receives the ClientId of the txtName, txtLastName, and txtMsg textboxes. Then it gets the objects for txtName and txtLastName, concatenates their value, and calls the code-behind function "greetUser". We are passing to that function four values: the full name we've got by concatenating the txtName and txtLastName values, the function which will be called if everything goes OK, the function which is going to be called if something fails, and we can pass whatever we want in the last parameter, in this case, the ClientId of the txtMsg text box. Notice that "greetUser" is our code-behind function and that we are using PageMethods to access it.

GreetSuccess is the function that is going to be called if everything goes OK. Receives the result of the code-behind function and a parameter: the ClientID of the txtMsg text box, so we can get the object itself and assign to it the result of the code-behind function as its value.

GreetFailed: Receives the same two parameters as GreetSuccess. In this case, we are just going to show an alert with the error that happened.

Why am I assigning the attribute "onblur" to our txtLastName text box in our code instead of doing it directly in the ASPX page? Just for demonstration. You could add this attribute from the ASPX page, but if you have a more complex scenario, let's say a GridView, or a DataList with DataTemplates, or if you are creating controls dynamically... then you could for example get the control you need from code in the GridView_DataBound method or in the function you are creating your dynamic layout, and call the JavaScript function the way it is shown above.

OK, here comes the important part of the article. The code behind function that we are calling from JavaScript:

Please notice that we are giving this function the System.Web.Services.WebMethod attribute; this is the reason why we can access this function from JavaScript using PageMethods. In this function, we are receiving the full name that we got by joining the values from txtName and txtLastName in our "Greet" JavaScript function.

Final Words

I guess that's it. This was a really simple scenario, but you could think of really complex operations inside a GridView. As ever, please feel free to leave your comments, questions, suggestions, or whatever you want to tell. You can also read the original post from my blog.

Hi,
as AspDotNetDev said, I forgot to say that you have to EnablePageMethods in your Script Manager. Set that property to true and it will be solved. I'm trying to update this article with a sample project and screenshots. Sorry about that mistake.

A vote of 3 for the reasons I stated in a previous message, as well as the fact that you do not have any screenshots. Showing the output in a screenshot would benefit readers. Let me know if you make any changes (e.g., adding images, mention EnablePageMethods, provide download) and I may increase my vote. Your article has potential if you can find the time to dedicate to improving it.

FYI, I used this to understand Page Methods. I've also seen page methods described on Code Project here, here, here, here, and here. I'm not really sure what you article adds to all that.

Also, I didn't see a mention of ScriptManager in your article or the fact that EnablePageMethods needs to be set to true in order for page methods to work.

Finally, you didn't include a download. While you may not be able to use the article submission wizard after your article has been edited, you can still email your files to Code Project to have them update the article for you. I think you can also use the article upload form. You can read more about both of those options here.

FYI? What does it mean?
Anyway, As I explained in the article I looked for a similar solution even inside CodeProject.com and I found nothing but forum's threads... but no articule was found with a search similar to my article's title. So that's why I learnt by myself and wrote this to share it.

You are completely right, I did not mention the EnablePageMethods attribute for the ScriptManager, big mistake. I will update the article. Thanks for reminding it. But regarding the code sample, as I already answer to other people, I will include a download in my next article, but now it is impossible for prepare sample code for me because of time limitation.

FYI means "For Your Information". You can think of it as a transition that helps ease the reader into a thought (similar to "Anyway" at the beginning of one of your sentences above). I could have just as well said "just to let you know".

nereo.lopez wrote:

But regarding the code sample, as I already answer to other people, I will include a download in my next article, but now it is impossible for prepare sample code for me because of time limitation.

I recommend that instead of making anther article, you use that time to update this article with sample code. But that's entirely up to you, of course.

Hi! That's a nice question! I only use this "trick" when complex things need to be done, and would be a pain through javascript. I never had the scenario to commit a single command from javascript so I never tried directly. If you want to insert or update things into your Sql Database you could call the code-behind method that does it from your javascript as shown in this article.
Do not hesitate replying if you have further questions or need more specific help
Hope that helps!