阿贾克斯形成了从jQuery的对话框里面重定向页面 [英] Ajax Form Redirect the page from inside Jquery Dialog

问题描述

我有一个jQuery的对话框中的部分观点：

i have a jquery Dialog in a partial view:

@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 Render the partial view like this :

   @Html.Partial("MyFeedbackPartialView");

我有这个js文件，我用它来打开对话框：

i have this js file which i use to open the dialog:

$("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!"});
        }

现在的问题是，每次我点击提交按钮，它重定向的页​​面，并显示我：

now the problem is everytime i click on the submit button it redirect the page and show me this :

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

虽然它应该使Ajax请求！

although it supposed to make ajax request !

任何想法，为什么发生这种情况？

any idea why this is happening ?

推荐答案

您还没有真正显示有什么脚本，你包括在您的网页，请问您的看法的标记样子，等...事情让我们重现您的问题。通常我做什么这样的问题是试图提供一个完整的例子，我认为可能会接近你正在尝试做的。

You haven't really shown what scripts have you included in your page, how does the markup of your view looks like, etc... things allowing us to reproduce your problem. Usually what I do with such questions is to try to provide a full example that I think might be close to what you are trying to do.

型号：

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

查看（〜/查看/主页/ 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文件，并在布局引用。我只是将它们包括显示需要哪些脚本工作的例子。

Remark: obviously the scripts I have shown in this Index view have nothing to do there. They should be moved to the layout and the inline script moved into a separate javascript file and referenced in the layout. I just included them to show what scripts are required for the example to work.

最后，我们有部分包含反馈表（〜/查看/主页/ GiveFeedback.cshtml ）

And finally we have the partial containing the feedback form (~/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" />
}

这篇关于阿贾克斯形成了从jQuery的对话框里面重定向页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！