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: enter image description here

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>

Can you show the html for a typical node (how is the id value stored in the html) — user3559349
– user3559349, Commented Jun 21, 2015 at 10:26
actually you could just navigate to the Tree1 action, instead of using Ajax, the view shoud be shown anyway — Manjar
– Manjar, Commented Jun 21, 2015 at 10:26
@StephenMuecke: I have updated the question with the code which creates the nodes. Again, I have used vis.js library for creating the tree here. — AnkitMittal
– AnkitMittal, Commented Jun 21, 2015 at 10:31
@Balder: Yes. I have. Although it does nothing useful at the moment. — AnkitMittal
– AnkitMittal, Commented Jun 21, 2015 at 10:36

Manjar · Accepted Answer · 2015-06-21 11:14:08Z

1

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;
});

edited Jun 21, 2015 at 11:14

answered Jun 21, 2015 at 11:00

Manjar

3,2781 gold badge35 silver badges45 bronze badges

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

5 Comments

Manjar Over a year ago

This approach is called direct navigation, I personally prefer single page approach because is more user friendly, but both ways work.

AnkitMittal Over a year ago

Will this pass my data to the action method Tree1?

AnkitMittal Over a year ago

It does render the view Tree1. But, the data is not being passed. How can I make sure the data is being passed to action method Tree1?

AnkitMittal Over a year ago

Ok. I get it. Its in the query string.

Manjar Over a year ago

oh sorry i forgot to put the parameter in the querystring, as you see, know there is an "a=" in the url

Manjar · Accepted Answer · 2015-06-21 10:54:58Z

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();
}

answered Jun 21, 2015 at 10:54

Manjar

3,2781 gold badge35 silver badges45 bronze badges

3 Comments

Manjar Over a year ago

This way is called "single page" because you load all of it through ajax

AnkitMittal Over a year ago

This way is good. But I would have to take care and clear the HTML of the original view first and then render the new HTML. I would love the way which can directly render the Tree1 view.

Manjar Over a year ago

while using partial view you dont have to clear the HTML of the layout, it will only renders the HTML for you view, however my other answer just navigates directly

Collectives™ on Stack Overflow

Pass data from javascript to MVC controller

2 Answers 2

5 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related