Consuming Web Service from javascript in .net page

Question

How to do it? I am completely new to this and wish to start learning it. I am going to have a tree structure, most probably a html/Javascript tree which will need to be saved into the database through Web Services.

What is the most efficient way to do this with ASP .net web services + asp.net 3.5?

UPDATED: thanks for all the answers, I am still missing some pieces to this scenario, namely: 1) when the node is to be added to the tree, a user will get a pop-up, where some info will be entered, saved in the database, and a integer code returned from the database. Upon it's return, I need do some logic, and insert a node(or several) into the node selected. And so on, so forth. SO from what i understand, this logic (the meat of the code) will have to be performed on the client, in my Javascript code. 2) What would trigger the tree "refresh" after the pop-up is closed? 3) Where is .net with this picture at all? From what I gather, no server-side coding is performed here at all (aside from Web Services). Is that the general direction these days, step away from server-side coding with .net controls and use a Javascript lib of choice + web services?

Thanks everyone.

Answer 1

You can achieve this by using ASP.net Ajax calls. On the server-side you create a webservice (WCF or asmx) having the attribute ScriptService:

namespace MyCompany.Project.Services
{
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService]
    public class MyWebServiceClass : System.Web.Services.WebService
    {

        [WebMethod]
        public string GreetFromServer(string name)
        {
            return "Hello, " + name;
        }
    }
}

On the page, you add a ScriptManager referencing your webservice.

<asp:ScriptManager id="scriptManager" runat="server">
   <Services>
      <asp:ServiceReference Path="~/Services/MyWebServiceClass"/>
   </Services>
</asp:ScriptManager>

Then on the client side (JavaScript):

function invokeService(){
   MyCompany.Project.Services.MyWebServiceClass.GreetFromServer("Juri", onSuccess, onFailure);
}

function onSuccess(result){
  //check if result different null etc..It will be in JSON format, so deserialize
  //use result
}

function onFailure(){
   //handle errors
}

That should just be a hint on how to create a service and access it from within JavaScript. I mostly wrote it out of my head now, without checking it.
A hint: use Firebug! It's really great for verifying the data that is sent back and forth between your JavaScript client code and the webservice on the server-side.

I've just written a blog post with a downloadable example that describes the communication of client-server using asmx as well as WCF webservices.

Answer 2

I would suggest you use jquery on the client side in your html / Javascript tree. Here is a tutorial to get you started on using jquery with asp.net

http://dotnetslackers.com/articles/ajax/Using-jQuery-with-ASP-NET.aspx

Answer 3

Encosia.com has everything you need:

Using jQuery to Consume ASP.NET JSON Web Services

Answer 4

Have a look

Consuming a Web Service using ASP.NET Ajax