Question

What i want to do:

at page load to automatically pop up a jquery dialog fill in some data, post that to an action and close the dialog (regardless if the action succeeds or not).

in the View in which the pop up should occur i have the following:

<script type="text/javascript">
    $(function () {
        $('#PopUpDialog').dialog(
            {
                modal: true,
                open: function ()
                {
                    $(this).load('@Url.Action("Subscription", "PopUp")');
                },  
                closeOnEscape: false
            }
        );

        $('.ui-dialog-titlebar').hide();
        $('#closeId').live('click',function () {
                $('#PopUpDialog').dialog('close');               
                return false;
            }
        );

            $('#SubscriptionForm').submit(function () {
                $("#PopUpDialog").dialog("close");             
                $.ajax({
                    url: encodeURI('@Url.Action("Subscription", "PopUp")' ),
                    type: this.method,
                    data: $(this).serialize()
                })
                return fase;
            }
            );
    });
</script>

the Subscription view has the following:

@using (Html.BeginForm( new { id = "SubscriptionForm" }))
{

    @Html.ActionLink(Deals.Views.PopUp.SubscriptionResources.AlreadySubscribed, "", null, new { id = "closeId" })
    <br />
    <br />
    @Deals.Views.PopUp.SubscriptionResources.FillEmail 
    @Html.TextBoxFor(m => Model.Email)    
    <input type="submit" id="subscribeId" value="@Deals.Views.PopUp.SubscriptionResources.IWantToSubscribe"  />
    <br />    
}

which works fine.

The POST action is defined as follows:

[AcceptVerbs(HttpVerbs.Post)]
        public JsonResult Subscription(FormCollection formValues)
        //public void Subscription(FormCollection formValues)
        {
            Deals.ViewModels.PopUpSubscriptionVM VM = new ViewModels.PopUpSubscriptionVM();
            TryUpdateModel(VM);
            if (!String.IsNullOrEmpty(VM.Email))
            {
                //do the update to the dbms
            }
            return Json(new { success = true });
        }

The problem is that after posting back i get an empty screen with the success message, which i don’t want!
What am i doing wrong?

Answer 1

To see what i am doing wrong i set up a small project (ASP.NET MVC 3) with the following ingredients:

<script type="text/javascript">

    $(function () {
        // Does not cache the ajax requests to the controller e.g. IE7/9 is doing that...
        $.ajaxSetup({ cache: false });

        var $loading = $('<img src="@Url.Content("~/images/ajax-Loader.gif")"  alt="loading" class="ui-loading-icon">');
        var $url = '@Url.Action("Subscription", "PopUp")';
        var $title = 'Some title';
        var $dialog = $('<div></div>');
        $dialog.empty();        
        $dialog
            .append($loading)            
            .load($url)
            .dialog({
                autoOpen: false
                , closeOnEscape: false
                , title: $title
                , width: 500
                , modal: true
                , minHeight: 200
                , show: 'fade'
                , hide: 'fade'
            });

        $dialog.dialog("option", "buttons", {
            "Cancel": function () {
                $(this).dialog("close");
                $(this).empty();
            },
            "Submit": function () {
                var dlg = $(this);
                $.ajax({
                    url: $url,
                    type: 'POST',
                    data: $("#SubscriptionForm").serialize(),
                    success: function (response) {
                        //$(target).html(response);
                        dlg.dialog('close');
                        dlg.empty();

                });
            }
        });


        $dialog.dialog('open');
    })
</script>

The controllers’ actions:

public ActionResult Subscription()
        {

            Thread.Sleep(2000); //just for testing
            TestModalAjax.ViewModels.PopUpVM VM = new ViewModels.PopUpVM();
            return View(VM);
        }


        //POST
        [AcceptVerbs(HttpVerbs.Post)]
        //[OutputCache(CacheProfile = "ZeroCacheProfile")]
        public ActionResult Subscription(FormCollection formValues)
        {
            TestModalAjax.ViewModels.PopUpVM VM = new ViewModels.PopUpVM();
            TryUpdateModel(VM);
            return Json(new { success = true });

        }

…and the according View:

@model TestModalAjax.ViewModels.PopUpVM
@{
    Layout = null;
    ViewBag.Title = "Subscription";
}

<h2>Subscription</h2>
@* -----   NOTICE THE FOLLOWING!!! WITHOUT THIS DATA GETS NOT POSTED BACK!!!! ----  *@
@using (Html.BeginForm("Subscription","PopUp",FormMethod.Post, new { id="SubscriptionForm"})) 
{
    <h1> Give me your name</h1>
    @Html.TextBoxFor(M => Model.Name)
}

…so it seems everything works as expected!