將數據從JavaScript傳遞到MVC控制器

Question

我有一個使用Vis.js庫構建的樹層次結構。 我的項目在asp.net MVC中。

樹中的每個節點都有一個ID。 要求是，當我單擊任何節點時，應將id傳遞給控制器​​，並應呈現與調用的控制器操作方法相對應的視圖。

我有一個顯示樹的視圖，如下所示：

當我單擊樹中的任何節點（例如105）時，我希望將節點ID傳遞到控制器操作方法“ Tree1”。 方法Tree1將進行一些計算並呈現其自己的視圖。

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

要將ID從樹形視圖傳遞到Tree1控制器操作方法，我正在使用$ .ajax（）。 這是我在網上的各種論壇上發現的。

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

現在，這確實將數據發送到方法Tree1（調試時可以看到），但是未渲染Tree1的視圖。 取而代之的是，呈現了先前的視圖本身，該視圖顯示了樹。

我想將數據從javascript傳遞到控制器action方法，以便沒有響應發送回調用javascript代碼。 網上的所有材料都提出了解決方案，該解決方案將響應發送回給調用JavaScript。

你能幫我嗎？ 我缺少任何基本概念嗎？ 我如何將數據從javascript傳遞到控制器方法，而被調用方法不必將任何響應發送回調用javascript？

更新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

在原始視圖的HTML中，您應該有一個容器div，類似於：

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

然后，在成功響應上，您必須將其放入此容器中：

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

編輯：我忘記了您必須執行此操作返回部分視圖

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

Answer 2

由於您可能只想導航至視圖，因此可以使用以下代碼：

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