Question

我有一个带侧边栏菜单的页面。单击侧栏菜单时，我展开了一个jstree。单击此树的任何节点时，应重新加载主页上的部分页面。然而，这似乎并没有发生。

Simplified MainPage.html


<body class="claro">
    <div id="header">
            <div id="logindisplay">
                @Html.Partial("_LogOnPartial")
            </div>
     </div>
     <div id="menucontainer2">
        @Html.Partial("_SideLayout")
    </div>
    <div id="main">
            @RenderBody()
    </div>
</body>

我以jstree视图的形式创建侧边栏布局（呈现正常）并等待用户单击树节点。即。

SideBarLayout.html

<div id="divtree">
    <ul id="tree">
        <li>
           Manage Profile              
        </li>
        <li ><a>Settings</a>
            <ul>
                <li><a>Configuration Settings</a>
                    <ul>
                        <li><a>Customer Setup</a></li>
                        <li><a>Job Setup</a></li>
                    </ul>
                </li>
            </ul>
        </li>

    </ul>
</div>

script type="text/javascript">
    $(function () {
        $("#divtree").jstree();

        $("#divtree").bind(
        "select_node.jstree", function (evt, data) {
            debugger;
            var url = '@Url.Action("Index", "Order", new{ Area = "OrderModule"})'; -----> is this correct way to call the MVC 4 Controller ? 
            console.log(url);
            $.post(url, function (data, status) {
                alert("Data: " );
            });
        }
);
    });
</script>

1 .正如您所看到的，无论点击哪个树节点，我都会创建相同的url。一旦我可以在MainPage.html上更新我的部分视图，我将负责这一点。

2 .

_LogOnPartial工作正常，能够正确更新主页的局部视图。它只包含这样的东西

 @Html.ActionLink("Log Off", "LogOff", "Account")

但是我无法操纵jstree来更新局部视图。任何人都可以帮助我使用正确的jquery命令来调用MVC 4控制器，以便我的页面更新吗？

**EDIT**

我现在能够连接POST数据到服务器（我的警报说成功）。但是，主页面中的部分视图仍未呈现

即可。正确的Ajax调用：

    $.ajax({
        url: '@Url.Action("Index", "DpcmOrder", new { area = "AmethystWorkestraModule" })',
        type: 'POST',
        cache: false,
        async: false,
        data: $('form').serialize(),
        success: function (data) {
            //your ajax data    
            alert('success');
            $('#main').html(data);
        },
        error: function (e) {
            alert('fail');
            console.log(e);
        }
    });

Answer 1

 $.ajax({
        url: '/Index/Order',
        type: 'GET',
        cache: false,
        async: false,         
        data: {Area : "OrderModule"},
        success: function (data) {
         //your ajax data    
         }
     });

通过jquery调用MVC4控制器来更新局部视图

1 个答案: