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


        

Answer 1

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

Answer 2

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

Answer 3

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>

Answer 4

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?