How access Jquery TreeView on the server?

Question

How do I access Jquery Treeview inside the .aspx file upon form submit? also, Can I add nodes to Jquery Treeview on the fly? (on the client side)

I am using asp.net web forms, c#

EDITED: someone mentioned the following in one of the questions: "on form submit, someone is going to have to write code on the client to collect that data and send it via Ajax to a server method"

how is this done?????

Answer 1

Since jQuery Treeview is a client-side component, you can't access it from the server-side. So in order to pass any data from your tree to the server, you have to write client-side javascript code (actually jQuery code). The same thing regarding adding nodes to the treeview on the fly: only using client-side jQuery code. Remember that your C# on the server-side has no idea about your TreeView.

The integration between jQuery and ASP.NET WebForms is rather problematic and "not so natural", because ASP.NET is built on different concept... So if you are working with ASP.NET WebForms, I would suggest you to use server-side components instead (it can be Microsoft's own ASP:TreeView or other 3rd-party WebForms-aimed components). Alternatively, you can try the new ASP.NET MVC Framework - it is built on more common (for other web-development platforms) concept, and the integration between it and jQuery is straightforward (actually jQuery is even shipped with it).

Don't get me wrong... I am not saying that the integration between jQuery and ASP.NET WebForms is totally impossible. It is possible. But you'll need to do "not-so-beautiful" things and work hard for every simple operation. If you still want to use jQuery, then use it only for the client-side animations...

UPDATE: As for this quote - "on form submit, someone is going to have to write code on the client to collect that data and send it via Ajax to a server method" - well, this is exactly what I am talking about. On the client-side you call javascript method when submitting the form (for example, by setting onclick='mymethod();' on your "Submit" button). This code does what it needs to do and then... it is supposed to perform AJAX call using jQuery nice syntax. But this won't work with ASP.NET WebForms, as I've explained before. Well, you can read about Microsoft AJAX Client-side library (here: http://msdn.microsoft.com/en-us/magazine/cc163300.aspx), perhaps this will help. But I still think that this integration won't be easy and straightforward. Use jQuery for the animation and ASP.NET server-side components for all other things!

Answer 2

Well, I think I've found what you want. Take a look here.

In brief, you must define a WebMethod on your server side, and then you can easily access it using jQuery. An exellent working example is under the link above, and here I'll modify it to show how you can pass arguments. So...

In your page code-behind *.cs:

// We'll use this class to communicate
public class Dog
{
    public string Name { get; set; }
    public string Color { get; set; }
}

// This is your page, in my case Default.aspx
public partial class _Default : System.Web.UI.Page
{
    [WebMethod]
    public static string ProcessData(Dog myDog)
    {
        return "Your " + myDog.Color + " dog's name is " + myDog.Name + "!";
    }
}

Then on your *.aspx:

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="json2.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function() {
        $("#btnProcess").click(function() {
            // This is what we want to send to the server
            var dogItem =
            {
                 Color: $("#txtColor").val(),
                 Name: $("#txtName").val()
            };

            // And this is how it should be sent - in serialized way
            var dogItemSerialized = JSON.stringify(dogItem);

            $.ajax({
                type: "POST",
                url: "Default.aspx/ProcessData",
                data: "{'myDog':" + dogItemSerialized + "}",    
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function(msg) {
                    $("#result").text(msg.d);
                }
            });
        });
    });

</script>
Color: <input id="txtColor" type="text" /><br />
Name: <input id="txtName" type="text" /><br />
<input id="btnProcess" type="button" value="Click Me" />
<div id="result"></div>

So here you fill textboxes and then your data is sent to the server which understands it as a Dog object. Pay attention to arguments passing, because this is the most confusing part. You should pass them in JSON format, which is a little bit "too-much-stringy". So I use here json2.js script which helps to convert usual javascript object into JSON-serialized string (JSON.stringify() method). It is available here. But it is still rather ugly =) It is important that I pass argument called "myDog" which value is the serialized dogItem. Because this is exactly what the server expects to get (so, for example, I can't change the argument name, this won't work:

data: "{'someAnotherArgumentName':" + dogItemSerialized + "}"

And the last thing. Pay attention to the following line:

success: function(msg) {
            $("#result").text(msg.d);
         }

If you are working with ASP.NET prior to 3.5 (for example, ASP.NET 2.0), then you'll need to write just $("#result").text(msg) instead of msg.d. Only ASP.NET 3.5 encapsulates all the data under "d" member for some reason...

Anyway, in the above article you can find useful links (both inside the article and in comments), so you can read more about arguments, "msg.d" and so on.

I hope this helps!