Ajax表单从Jquery Dialog内部重定向页面

我在局部视图中有一个jquery对话框：

@model JQueryDialogPoc.Models.FeedBack @using (Ajax.BeginForm("GiveFeedback", "Home", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "emailDialog" }, new { id = "popForm" })) { 
 
 
 
 @Html.EditorFor(x => x.Feedback) @Html.ValidationMessageFor(x => x.Feedback) 
 
 
  
 } 

模型是：

 public class FeedBack { [Required] [Display(Name = "Feedback")] public string Feedback { get; set; } } 

我渲染局部视图像这样：

  @Html.Partial("MyFeedbackPartialView"); 

我有这个用于打开对话框的js文件：

 $("div.popUp").dialog({ title: "", close: function () { }, modal: true, show: "fade", hide: "fade", open: function (event, ui) { $(this).parent().appendTo($('#popForm')); $(this).load(options.url, function() { var $jQval = $.validator; $jQval.unobtrusive.parse($(this)); }); } 

}）;

 the actionMethod is : [HttpPost] public ActionResult GiveFeedback(string Feedback) { return Json(new {result = "Back from Server!"}); } 

现在问题是每次我点击提交按钮它重定向页面并告诉我这个：

 {"result":"Back from Server!"} 

虽然它应该提出ajax请求！

知道为什么会这样吗？

Answer 1

您还没有真正展示您在页面中包含的脚本，视图的标记是什么样的等等……允许我们重现您的问题的事情。 通常我对这些问题的处理方式是尝试提供一个我认为可能接近你想要做的完整的例子。

模型：

 public class FeedBack { [Required] [Display(Name = "Feedback")] public string Feedback { get; set; } } 

控制器：

 public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult GiveFeedback() { return PartialView(new FeedBack()); } [HttpPost] public ActionResult GiveFeedback(FeedBack model) { if (!ModelState.IsValid) { return PartialView(model); } return Json(new { result = "Thanks for submitting your feedback" }); } } 

查看（ ~/Views/Home/Index.cshtml ）：

       @Html.ActionLink("Give feedback", "GiveFeedback", null, new { id = "feedbackLink" }) 
 

备注：显然我在这个索引视图中显示的脚本与此无关。 应将它们移动到布局中，并将内联脚本移动到单独的javascript文件中并在布局中引用。 我只是将它们包含在内，以显示示例工作所需的脚本。

最后我们将部分包含反馈表（ ~/Views/Home/GiveFeedback.cshtml ）：

 @model FeedBack @using (Ajax.BeginForm("GiveFeedback", "Home", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "feedback", OnSuccess = "onSuccess" }, new { id = "popForm" })) { 
 
 @Html.EditorFor(x => x.Feedback) @Html.ValidationMessageFor(x => x.Feedback) 
 
  } 

Answer 2

我怀疑问题在于AjaxBeginForm方法的UpdateTargetId参数。 我建议不要使用帮助程序，只需添加代码来拦截表单提交，并通过Ajax手动发布表单。

AjaxBeginForm帮助器用于使用表单post的结果更新页面上的一大块内容，以处理json结果引用这个问题： 如何使用带有JSON结果的Ajax.BeginForm MVC助手？

Answer 3

我想，你忘了包含其中的一些库：

Answer 4

我有这些js库，我想这可能是你需要的。

如果它是一个ajax请求，也尝试从action方法测试它。

 Request.IsAjaxRequest()