MVC中Ajax POST成功后如何无刷新更新页面及JStree节点

嘿，我来帮你搞定这个JStree不刷新更新的需求！核心思路就是在Ajax请求成功后，直接调用JStree的官方API来操作节点，不用整个页面刷新。下面分两种场景给你具体的实现方案：

场景1：编辑现有节点的名称 #

如果是修改已选中节点的名称，你可以这样调整代码：

$(".btn").click(function () {
    var newName = $(".newName").val().trim();
    if (newName === "") {
        alert("请输入有效的节点名称！");
        return;
    }

    // 获取JStree实例和当前选中的节点
    var treeInstance = $('#your-tree-container').jstree(true);
    var selectedNode = treeInstance.get_selected()[0];
    
    if (!selectedNode) {
        alert("请先选择要编辑的节点！");
        return;
    }

    $.ajax({
        url: '@Url.Action("EditUserProfile", "Home")',
        type: "POST",
        cache: false,
        // 传递必要参数给后端，注意参数名要和后端Action对应
        data: { 
            folderId: selectedNode, // 建议传节点ID而非名称，避免重复名称问题
            newFolderName: newName 
        },
        success: function (response) {
            if (response.success) {
                // 调用JStree的rename_node方法更新节点文本
                treeInstance.rename_node(selectedNode, response.newName);
                alert("节点名称更新成功！");
            } else {
                alert("更新失败：" + response.message);
            }
        },
        error: function (xhr, status, error) {
            alert("请求出错啦：" + error);
        }
    });
});

场景2：创建新的子节点 #

如果是在选中的父节点下创建新节点，代码可以这样写：

$(".btn").click(function () {
    var newName = $(".newName").val().trim();
    if (newName === "") {
        alert("请输入新节点名称！");
        return;
    }

    var treeInstance = $('#your-tree-container').jstree(true);
    // 获取父节点，没有选中则默认添加到根节点（JStree中根节点标识为"#"）
    var parentNode = treeInstance.get_selected()[0] || "#";

    $.ajax({
        url: '@Url.Action("CreateNewNode", "Home")', // 假设你的创建节点接口是这个
        type: "POST",
        cache: false,
        data: { 
            parentId: parentNode !== "#" ? parentNode : null,
            nodeName: newName 
        },
        success: function (response) {
            if (response.success) {
                // 调用create_node方法添加新节点到树中
                treeInstance.create_node(
                    parentNode,
                    { 
                        id: response.nodeId, 
                        text: response.nodeName 
                    },
                    "last", // 把新节点放在父节点的子节点最后
                    function (newNode) {
                        // 可选：自动选中刚创建的节点
                        treeInstance.select_node(newNode);
                    }
                );
                alert("新节点创建成功！");
                $(".newName").val(""); // 清空输入框
            } else {
                alert("创建失败：" + response.message);
            }
        },
        error: function (xhr, status, error) {
            alert("请求出错啦：" + error);
        }
    });
});

后端Action的注意事项 #

你的MVC后端需要返回JSON格式的响应，这样前端才能正确处理。举个编辑节点的Action示例：

[HttpPost]
public JsonResult EditUserProfile(int folderId, string newFolderName)
{
    try
    {
        // 这里写你的业务逻辑：比如更新数据库中的节点名称
        // 例如：_yourRepository.UpdateFolderName(folderId, newFolderName);
        
        return Json(new { success = true, newName = newFolderName });
    }
    catch (Exception ex)
    {
        return Json(new { success = false, message = ex.Message });
    }
}

关键提醒 #

• 把#your-tree-container替换成你实际的JStree容器ID
• 确保JStree已经正确初始化，否则jstree(true)会获取不到实例
• 前端传递的参数名要和后端Action的参数名完全一致，否则会出现参数绑定失败的问题
• 如果你的节点有额外属性（比如图标、状态），可以在create_node的第二个参数里添加对应的字段

内容的提问来源于stack exchange，提问作者Surbhi Singhal