通过 jquery 调用 MVC4 控制器更新部分视图答案

【问题标题】：Update partial view by calling MVC4 controller via jquery通过 jquery 调用 MVC4 控制器更新部分视图
【发布时间】：2014-02-14 04:05:06
【问题描述】：

我有一个带有侧边栏菜单的页面。单击侧栏菜单时，我展开一个 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 视图的形式创建了一个侧边栏布局（呈现良好）并等待用户单击树节点。 IE。

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

【问题讨论】：

标签： javascript jquery asp.net-mvc asp.net-mvc-4 jstree

【解决方案1】：

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

【讨论】：

我能够连接到服务器。但是我仍然没有看到部分页面更新:(
警报成功了吗？
是的，它成功了。此外，div 即 #main 使用嵌入在 div 中的 whole 页面进行重建。所以 UI 完全搞砸了。所以我怀疑在渲染取回的数据时有问题。
那么你的控制器方法必须返回带有页眉和页脚内容的整个页面
@rockstar 返回一个PartialView() 而不是View() - 这会让你得到视图本身的标记。否则，您也会得到布局。