CODEWITHSUNDEEP
c#jqueryasp.net-mvcjquery-ui
Stacker
Stacker

Reputation: 8237

Ajax Form Redirect the page from inside Jquery Dialog

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 ?

Upvotes: 0

Views: 2998

Answers (4)

Darin Dimitrov
Darin Dimitrov

Reputation: 1038850

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

Upvotes: 2

Jason
Jason

Reputation: 15931

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?

Upvotes: 1

superwalnut
superwalnut

Reputation: 319

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

Upvotes: 0

Kath
Kath

Reputation: 1854

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>

Upvotes: 0

Related Questions