Ajax Form Redirect the page from inside Jquery Dialog

Question

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

model is:

public class FeedBack
{
    [Required]
    [Display(Name = "Feedback")]
    public string Feedback { get; set; }
}

i Render the partial view like this :

   @Html.Partial("MyFeedbackPartialView");

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!"}

although it supposed to make ajax request !

any idea why this is happening ?

Change the return type of method to JsonReult or PartialViewResult, maybe that is the cause. — Jahan Zinedine, Jan 18 '12 at 20:03

Darin Dimitrov · Accepted Answer · 2012-01-19T07:59:43.513

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.

Model:

public class FeedBack
{
    [Required]
    [Display(Name = "Feedback")]
    public string Feedback { get; set; }
}

Controller:

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

View (~/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>

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.

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" />
}

i dont get where is the ('#feedback') div in your code, i think i cant see it or im missing something — Stacker, Jan 19 '12 at 07:57
@Stacker, it's just below the anchor in my index view (last line). But you could put it anywhere you like in your DOM. It will basically be the placeholder for the dialog. — Darin Dimitrov, Jan 19 '12 at 07:58

score 1 · Answer 2 · edited May 23 '17 at 12:21

1

I suspect the problem is with the UpdateTargetId parameter to the AjaxBeginForm method. I recommend against using the helper and simply adding code to intercept the form submit and post the form via Ajax manually.

The AjaxBeginForm helper is meant to update a chunk of content on a page with the results of a form post, to handle json results refer to this question: How to use Ajax.BeginForm MVC helper with JSON result?

edited May 23 '17 at 12:21

Community

1
1

answered Jan 19 '12 at 02:20

Jason

15,915
3
48
72

That helper is a bit brittle in these situations, definitely. – Andrew Barber Jan 19 '12 at 22:55

score 0 · Answer 3 · answered Jan 18 '12 at 22:12

0

I guess, you forgot to include some of these libraries:

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

answered Jan 18 '12 at 22:12

Kath

1,834
15
17

not really i had this included, any way i just used ajax call from javascript and now it works. – Stacker Jan 18 '12 at 22:16
did you make sure that these libraries have been not only included but loaded also? Sometimes you can write something wrong. I just tried your code and it started working only after including these files so I think the problem was some lib has not actually been loaded. – Kath Jan 18 '12 at 22:23
Im so sure of that , i have been trying for hours, but what was strange is i had to put the ajax call in the parent page not inside the partial view if i put it inside the partial view it doesnt work !, maybe this is also caused the ajaxform to not post properly but im not sure. – Stacker Jan 18 '12 at 22:31

score 0 · Answer 4 · answered Jan 19 '12 at 02:09

0

I have these js libraries included, I guess this may be what you need.

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

Also try to test it from action method if it is a ajax request.

Request.IsAjaxRequest()

answered Jan 19 '12 at 02:09

superwalnut

319
5
11

Another answer, from Kate, which was posted four hours before this one, already suggested this, and was commented to be incorrect. – Andrew Barber Jan 19 '12 at 22:55

Ajax Form Redirect the page from inside Jquery Dialog

4 Answers4

Linked