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>
Since you wanted to maybe just navigate to the view, you can just use this: