我的jquery ajax表格帖有什么问题?

时间:2013-08-19 19:17:26

标签: jquery ajax asp.net-mvc asp.net-mvc-3 asp.net-mvc-4

    $("button[name='advocate-create-button']").on("click", function () {
    $.ajax({            
        url: '/Vendor/AdvocateCreate',
        type: 'post',
        dataType: 'json',
        data: $('form#advocate-create-form').serialize(),
        success: function() {
            $(".modal_overlay").css("opacity", "0");
            $(".modal_container").css("display", "none");
        }    
    }).done(function (data) {
        var $target = $("#advocate-list-view");
        var $newHtml = $(data);
        $target.replaceWith(data);
        $newHtml.effect("highlight");
    });
    return false;
});

几乎得到了这个,只需要一点帮助就可以完成它...我正在尝试将表单数据发布到'/ Vendor / AdvocateCreate'并且一旦它保存,我希望对话消失并且后面的列表它要更新。

它背后的列表是AdvocateList视图,并从同一控制器中的AdvocateList方法中提取其数据

AdvocateCreate方法

[HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult AdvocateCreate(Advocate advocate, int page = 1)
    {
        if (!ModelState.IsValid) return View(advocate);
        db.Advocates.Add(advocate);
        db.SaveChanges();

        var userId = WebSecurity.GetUserId(User.Identity.Name);

        var model = (from a in db.Advocates.ToList()
                     where a.VendorId == userId
                     select a).ToPagedList(page, 15);
        if (Request.IsAjaxRequest()) return PartialView("_AdvocateListPartial", model);
        return View(model);
    }
因此,

表单标记为:<form class="form" id="advocate-create-form">

创建方法确实被调用,数据确实被保存,但成功的行:不要触发,#advocate-list-view中的数据不会更新

感谢

1 个答案:

答案 0 :(得分:1)

您的服务看起来应该返回html,并且您将其视为 - 如果它应该是html,那么我将假设它是html。您需要删除dataType选项,或将其设置为html。由于html无效json,jQuery触发错误处理程序而不是成功。

$("button[name='advocate-create-button']").on("click", function () {
    $.ajax({            
        url: '/Vendor/AdvocateCreate',
        type: 'post',
        /*dataType: 'json',*/
        data: $('#advocate-create-form').serialize(),
        success: function() {
            $(".modal_overlay").css("opacity", "0");
            $(".modal_container").css("display", "none");
        }    
    }).done(function (data) {
        var $target = $("#advocate-list-view");
        var $newHtml = $(data); // dunno what is 
        $target.replaceWith(data); // goin on here
        $newHtml.effect("highlight"); // or here
    });
    return false;
});