如何在没有页面刷新的情况下成功发布后更新页面内容

时间:2018-04-19 05:25:38

标签: c# jquery ajax asp.net-mvc-5 page-refresh

我有一个MVC应用程序,这是我的ajax代码。我希望我的页面内容在成功后无需刷新页面即可自动更新。我看到很多文章,但我找不到对我有用的东西。我有一个JStree,我想在成功节点名称在没有刷新页面的树中自动更新后创建一个新节点。

$(".btn").click(function () {                  
                    var check = $(".newName").val();                   
                    if (check != "") {
                        $.ajax({
                            url: '@Url.Action("EditUserProfile", "Home")',
                            type: "POST",
                            cache: false,
                            data:{ folder:Name,subId:id},
                            success: function (data) {

                            }
                        });
                        e.preventDefault();
                    }

2 个答案:

答案 0 :(得分:0)

尝试使用jquery load()

$('#treeDivBlock').load(" #treeDivBlock", function() { 
     $(this).children().unwrap();
});

答案 1 :(得分:0)

您无需刷新即可更新页面内容:

  1. 确保Home Controller中的方法 EditUserProfile 具有足够的参数,并且它们与您的ajax方法具有相同的名称。在这种情况下,它们是:文件夹 subId

  2. 删除window.location.reload();并获取data.result以检查回复是否成功。

  3. 请参阅我的代码:

  4. 查看

    $.ajax({ url: '@Url.Action("EditUserProfile", "Home")', type: "POST", cache: false, data: { folder: Name, subId: id }, success: function(data) { if (data.result == true) // or something { // success } else { // fail } } });

    <强>控制器

    public JsonResult EditUserProfile(string folder, string subId) {
        // do something
    
        return Json(new {
            result = true; // false or anything else
        });
    }
    

    原因是您在html上显示数据时没有做任何事情。 Ajax只是帮助您在Controller中调用方法,但不能为您编辑当前的显示数据。

    所有你需要做的:

    • 指定包含您的数据的行

    • 在Ajax返回成功值后,使用Jquery更新该行的内容。