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; }
}

i渲染部分视图如下：

   @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()

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

4 个答案: