将数据从 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 传递到控制器操作方法，这样就不会将响应发送回调用 javascript 代码。网络上的所有 material 建议将响应发送回调用 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;
});

将数据从 javascript 传递到 MVC 控制器

Pass data from javascript to MVC controller

javascript

asp.net-mvc

asp.net-ajax

vis.js