Question

我想做什么：

在页面加载时自动弹出一个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 });
        }

问题是回帖后我得到一个空白的屏幕，上面有成功的消息，我不想要！我做错了什么？

Answer 1

您可以处理成功和错误回调：

 $('#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;
            }

Answer 2

为了看看我做错了什么我设置了一个小项目（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)
}

...所以看起来一切都按预期工作了！

Jquery对话框＆amp; Ajax发布错误（？）导致ASP.NET MVC3（razor）

2 个答案: