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

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

AjaxBeginForm 帮助器旨在使用表单发布的结果更新页面上的一大块内容，处理 json 结果请参阅此问题：How to use Ajax.BeginForm MVC helper with JSON result?

Answer 3

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

<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 4

我有这些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()