0

私がやりたいこと：

ページの読み込み時にjqueryダイアログを自動的にポップアップしてデータを入力し、それをアクションに投稿してダイアログを閉じます（アクションが成功したかどうかは関係ありません）。

ポップアップが発生するビューでは、次のようになります。

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

サブスクリプションビューには次のものがあります。

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

これは正常に動作します。

POSTアクションは次のように定義されます。

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

問題は、投稿した後、成功メッセージが表示された空の画面が表示されることです。これは望ましくありません。私は何が間違っているのですか？

4

2 に答える 2

0

私が間違っていることを確認するために、次の要素を使用して小さなプロジェクト (ASP.NET MVC 3) をセットアップしました。

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

コントローラーのアクション:

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

        }

...そしてそれに応じたビュー:

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

...すべてが期待どおりに機能しているようです!

于 2012-06-04T20:52:31.027 に答える
0

成功とエラーのコールバックを処理できます。

 $('#SubscriptionForm').submit(function () {
                $("#PopUpDialog").dialog("close");             
                $.ajax({
                    url: encodeURI('@Url.Action("Subscription", "PopUp")' ),
                    type: this.method,
                    data: $(this).serialize(),
                   success: function (result) {
                   //Do Whatever you want to do here 
                  },
                   error: function (x, e) {
                  //Do Whatever you want to do here
                 }
                })
                return fase;
            }
于 2012-06-04T11:25:48.143 に答える