Ajax的形式重定向从Jquery的对话框内的页面

Question

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

@model JQueryDialogPoc.Models.FeedBack 
@using (Ajax.BeginForm("GiveFeedback", "Home", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "emailDialog" }, new { id = "popForm" })) 
{ 
    <div class="popUp"> 
     <div> 
      <ul> 
       <li> 
        @Html.EditorFor(x => x.Feedback) 
        @Html.ValidationMessageFor(x => x.Feedback) </li> 
      </ul> 
     </div> 
     <input type="submit" /> 
    </div> 
} 

模型为：

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）：

<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(function() { 
     $('#feedbackLink').click(function() { 
      $('#feedback').dialog({ 
       modal: true, 
       open: function (event, ui) { 
        $(this).load($(this).data('url'), function() { 
         $.validator.unobtrusive.parse($(this)); 
        }); 
       } 
      }); 
      return false; 
     }); 
    }); 

    var onSuccess = function (data) { 
     if (data.result) { 
      alert(data.result); 
      $('#feedback').dialog('close'); 
     } else { 
      $.validator.unobtrusive.parse($('#popForm')); 
     } 
    } 
</script> 

@Html.ActionLink("Give feedback", "GiveFeedback", null, new { id = "feedbackLink" }) 
<div id="feedback" data-url="@Url.Action("GiveFeedback")"></div> 

备注：很明显，我已经在这个索引视图中显示的脚本无关那里。他们应该被移动到布局，内联脚本移动到一个单独的JavaScript文件并在布局中引用。我只是将它们包括在内以显示该示例工作所需的脚本。

最后，我们有部分包含反馈形式（~/Views/Home/GiveFeedback.cshtml）：

@model FeedBack 

@using (Ajax.BeginForm("GiveFeedback", "Home", null, new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "feedback", OnSuccess = "onSuccess" }, new { id = "popForm" })) 
{ 
    <ul> 
     <li> 
      @Html.EditorFor(x => x.Feedback) 
      @Html.ValidationMessageFor(x => x.Feedback) 
     </li> 
    </ul> 
    <input type="submit" /> 
} 

Answer 2

我猜，你忘了，包括一些库：

<script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> 

Answer 3

我有这些JS库在内，我想这可能是你所需要的。

<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/modernizr-1.7.min.js")" type="text/javascript"></script> 
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.js")"></script> 

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

Request.IsAjaxRequest() 

Answer 4

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

的AjaxBeginForm助手是为了与窗体后的结果页面上更新的内容块，处理JSON结果是指这样一个问题：How to use Ajax.BeginForm MVC helper with JSON result?