Форма 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

Я подозреваю, что проблема с параметром UpdateTargetId для метода AjaxBeginForm. Я рекомендую не использовать помощника и просто добавлять код для перехвата отправки формы и отправки формы вручную через Ajax.

Помощник AjaxBeginForm предназначен для обновления фрагмента содержимого на странице с результатами публикации формы, для обработки результатов json обратитесь к этому вопросу: Как использовать помощник Ajax.BeginForm MVC с результатом JSON?

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-запрос.

Request.IsAjaxRequest()

Answer 4

Полагаю, вы забыли включить некоторые из этих библиотек:

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