Pass data from javascript to MVC controller

Question

I have a tree hierarchy which I have built using Vis.js library. My project is in asp.net MVC.

Every node in the tree has an id. The requirement is that when I click on any of the node, the id should be passed to a controller and the view corresponding to the called controller action method should be rendered.

I have a view which displays the tree as follows:

When I click any of the nodes in the tree, say 105, I want the node id to be passed to a contoller action method 'Tree1'. The method Tree1 will do some computation and render its own view.

[HttpPost]
public ActionResult Tree1(string a)
{
    return View();
}

To pass the id from my tree view to the Tree1 controller action method, I am using $.ajax(). This I found on various forums on the net.

network.on('selectNode',function(properties)
    {
        $.post({url: '@Url.Action("Tree1")',a:properties.nodes.toString()});
                                    @*$.ajax({
                                        url: '@Url.Action("Tree1")',
                                        type: 'POST',
                                        data: {a:properties.nodes.toString()},
                                        success: function(result) {
                                         //process the results from the controller
                                        }
                                    });*@
                                }
                ); 

Now, this does send the data to the method Tree1(I can see that when I debug), but the view of Tree1 is not rendered. Instead, the previous view itself is rendered which shows the tree.

I want to pass the data from javascript to the controller action method such that no response is sent back to the calling javascript code. All the material on the net suggests solution which send back responses back to the calling javascript.

Can you please help me with this? Is there any basic concept that I am missing? How can I pass data from javascript to a controller method without the called method having to send any response back to the calling javascript?

Update 1

<script type="text/javascript">
    // create an array with nodes
    var nodes = new vis.DataSet([]);

        @foreach(DataRow @dr in Model.Tree.Tables[0].Rows)
        {
            @:nodes.add({id: @dr[0], label:@dr[0].ToString(), level:@dr[3]});
        }

    var edges = new vis.DataSet([]);
        @foreach(DataRow @dr in Model.Tree.Tables[0].Rows)
        {
            if(@dr[2].ToString()!="")
            {
                @:edges.add({from:@dr[2], to:@dr[0]});
            }
        }

    // create a network
    var container = document.getElementById('mynetwork');

    // provide the data in the vis format
    var data = {
        nodes: nodes,
        edges: edges
    };
    var options = {nodes:{shape:'ellipse'},edges:{arrows: 'to'},physics:true};

    // initialize your network!
    var network = new vis.Network(container, data, options);

    network.on('selectNode',function(properties)
    {

                                    $.ajax({
                                        url: '@Url.Action("Tree1")',
                                        type: 'POST',
                                        data: {a:properties.nodes.toString()},
                                        success: function(result) {
                                         //process the results from the controller
                                        }
                                    });
                                }
                );


</script>

Answer 1

Within the HTML of the original view you should have a container div, something like:

<div id="container">
... Original tree is here
<div id="container">

Then on the success response you have to put it inside this container:

$.ajax({
    url: '@Url.Action("Tree1")',
    type: 'POST',
    data: {a:properties.nodes.toString()},
    success: function(result) {
        $("#container").html(result);
    }
});

EDIT: I forgot that you must do this returning partial view

[HttpPost]
public ActionResult Tree1(string a)
{
    return PartialView();
}

Answer 2

Since you wanted to maybe just navigate to the view, you can just use this:

network.on('selectNode',function(properties)
{
    var url = '@Url.Action("Tree1")' + '?a=' +properties.nodes.toString();
    document.location = url;
});