0

我的代码目前的工作方式是当按下按钮时传递变量并且 Jquery 取消隐藏模式窗口并进行 AJAX 调用以获取我的控制器操作的 [HttpGet] 部分。这会在模式窗口中加载一个表单。模态有一个保存和取消按钮,当按下保存按钮时,表单使用 ajaxSubmit 提交。成功保存后,会将某些内容保存到数据库中,然后创建一个 url 并将其传递回 jquery,并使用 window.location.href 重定向用户。

我想要发生的是,当按下保存按钮时,控制器操作的 [HttpPost] 部分将做出一些逻辑选择,如果在操作中满足某个条件,则 return PartialView(model) 返回到带有错误消息或弹出的模态窗口,以便用户不必重新输入他们的信息并了解保存未通过的原因,并且可以快速编辑并再次尝试保存。

jQuery:

var createNewClaimSetup = function () {

    $(selectors.btnCreateNewClaim).live('click', function () {

        var serialNumber = $(this).attr(attributes.serialNumber);
        var spaRegistrationId = $(this).attr(attributes.spaRegistrationId);
        var customerNumber = $(this).attr(attributes.customerNumber);
        var customerStatementName = $(this).attr(attributes.customerStatementName);

        $(selectors.serialNumberHidden).val(serialNumber);
        $(selectors.spaRegistationIdHidden).val(spaRegistrationId);
        $(selectors.customerNumberHidden).val(customerNumber);
        $(selectors.customerStatementName).val(customerStatementName);

        $(selectors.dialog).attr(attributes.title, 'Create New Claim');

        $.ajax ({
            url: inputs.warrantyClaimCreateUrl,
            type: "GET",
            data: {
                   serialNumber: serialNumber,
                   customerNumber: customerNumber
                },
             cache: false,
             success: function (result) {
                $(selectors.dialog).html(result.toString());
                $(selectors.dialog).dialog ({
                     resizable: false,
                    height: 600,
                    width: 850,
                    modal: true,
                    buttons: {
                        'Save': function () {
                        // check to see if a value has been entered for problem description before submitting form
                        //
                        if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
                            $(selectors.createNewClaimForm).ajaxSubmit({
                                cache: false,
                                success: function (data) {
                                      if (data.length == 0) {
                                        location.reload();
                                        $(selectors.dialog).dialog('close');
                                    } else {
                                        $(selectors.dialog).dialog('close');
                                        window.location.href = data.redirectToUrl;
                                    }
                                }
                            });
                            else{
                                return alert('You must select a prefix and enter a description for the problem before saving');
                            }
                        },
                        Cancel: function () {
                            $(this).dialog('close');
                        }
                      }
                    });
                }

             });

        });
}

控制器操作 GET(为简洁而编辑):

public virtual ActionResult WarrantyClaimCreateNew(string serialNumber, string customerNumber, string customerStatementName)
    {
        WarrantyClaimModel model = wcs.CreateNewClaimInfo(serialNumber, customerNumber, false);

        ViewBag.InvalidPrefix = false;
        ViewBag.DupeWaNum = false;
        return View(model);
    }

控制器动作 POST(为简洁而编辑):

[HttpPost]
    public virtual ActionResult WarrantyClaimCreateNew(WarrantyClaimCreateNewModel model)
    {
        if (ModelState.IsValid)
        {

            WaNumberDupeModel WAdupe = new WaNumberDupeModel(model.WarrantyClaimNumber);
            // Rebuild WarrantyClaimModel object to pass back to view
            WarrantyClaimModel model2 = wcs.CreateNewClaimInfo(model.SerialNumber, model.CustomerNumber, false);

            // check if prefix is valid
            if (WAdupe.DupeType == WaDupeType.InvalidPrefix)
            {
                ViewBag.InvalidPrefix = true;
                return PartialView(model2);
                //return Json(new { Url = Url.Action("WarrantyClaimCreateNew", model2) });
            }
            // check if wa number already exists
            if (WAdupe.DupeExists)
            {
                ViewBag.DupeWaNum = true;
                return PartialView(model2);
            }

            // create/save the new claim
            if (wcs.CreateNewWarrantyClaim(model))
            {
                var redirectString = "WarrantyClaimDetail?warrantyClaimNumber=" + model.WarrantyClaimNumber;

                if (Request.IsAjaxRequest())
                {
                    return Json(new { redirectToUrl = redirectString }, JsonRequestBehavior.AllowGet);
                }

                return RedirectToAction(Actions.WarrantyClaimDetail(newClaimNumber));
            }

            return RedirectToAction(Actions.WarrantyClaimSaveFail());
        }
        else
        {
            return View(model);
        }
    }

如果满足控制器操作中的条件,则视图中的警报:

<%if (ViewBag.InvalidPrefix == true) { %>
        alert("Please choose a valid prefix for your warranty claim number.");
    <% } %>

    <%if (ViewBag.DupeWaNum == true) { %>
        alert("Warranty Claim Number already exists, please choose another manual WA number or try again.");
    <% } %>

我什至根本无法重新加载在模式中刷新的视图,更不用说更改为完整的绑定模型了。

我知道 AJAX 调用的第一部分(类型:“GET”)使用 URL 进入控制器操作 GET 并取回返回视图(模型),然后将其转换为 HTML 并将模式窗口 HTML 设置为它。我一直假设 ajaxSubmit 返回控制器并获取操作的 POST 版本,并且成功的数据部分:函数(数据)应该是视图返回,如果条件满足并且构建的 JSON URL 重定向如果不是。

我尝试将模态 html 设置为数据并确保满足控制器无效前缀条件,但是模态窗口中的内容似乎永远不会刷新。我还需要弄清楚如何在 JQUERY 中从逻辑上判断控制器是否通过 JSON 返回了视图或 URL,但我认为这并不难弄清楚。

我已经阅读了十几个 mvc jquery ajax modal 类似的问题,他们有帮助但没有

感谢您提供的帮助,让我了解如何在这里实现想要的目标。

4

1 回答 1

1

我正在寻找的部分答案。我现在意识到我的主要绊脚石是在将模式窗口构建为“返回警报(无论如何)”之前让我的测试警报,这显然是在返回警报而不是运行其余的代码,愚蠢。

我现在工作的解决方案是一个非常糟糕的黑客。我让它重建模式并将 POST 视图数据附加到它。但是,这不是循环的,因此如果您再次保存并失败,我已将其设置为提醒用户再次保存失败并重试,然后模式关闭,它们可以从头开始重新开始。

明天我会看到如何把它变成一个循环而不是嵌套结构。

新的“工作”JQuery 代码:

var createNewClaimSetup = function () {

    $(selectors.btnCreateNewClaim).live('click', function () {

        var serialNumber = $(this).attr(attributes.serialNumber);
        var spaRegistrationId = $(this).attr(attributes.spaRegistrationId);
        var customerNumber = $(this).attr(attributes.customerNumber);
        var customerStatementName = $(this).attr(attributes.customerStatementName);

        $(selectors.serialNumberHidden).val(serialNumber);
        $(selectors.spaRegistationIdHidden).val(spaRegistrationId);
        $(selectors.customerNumberHidden).val(customerNumber);
        $(selectors.customerStatementName).val(customerStatementName);

        $(selectors.dialog).attr(attributes.title, 'Create New Claim');

        $.ajax ({
            url: inputs.warrantyClaimCreateUrl,
            type: "GET",
            data: {
                   serialNumber: serialNumber,
                   customerNumber: customerNumber
                },
             cache: false,
             success: function (result) {
                $(selectors.dialog).html(result.toString());
                $(selectors.dialog).dialog ({
                     resizable: false,
                    height: 600,
                    width: 850,
                    modal: true,
                    buttons: {
                        'Save': function () {
                        // check to see if a value has been entered for problem description before submitting form
                        //
                        if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
                            $(selectors.createNewClaimForm).ajaxSubmit({
                                cache: false,
                                success: function (data) {
                                      if (data.length == 0) {
                                        location.reload();
                                        $(selectors.dialog).dialog('close');
                                    } else if(data.redirectToUrl) {
                                        $(selectors.dialog).dialog('close');
                                        window.location.href = data.redirectToUrl;
                                    } else {
                                        $(selectors.dialog).html(data.toString());
                                        $('#chkManualClaimNum').attr('checked','checked');
                                        $('#manualClaimInfo').toggle();
                                        $(selectors.dialog).dialog ({
                                             resizable: false,
                                            height: 600,
                                            width: 850,
                                            modal: true,
                                            buttons: {
                                                'Save': function () {
                                                    if(!$('#AddProblemModel_ProblemDesc').val().length==0 && (!$('#ClaimPrefix').val().length==0 || $('#chkManualClaimNum').is(':checked')))
                                                    $(selectors.createNewClaimForm).ajaxSubmit({
                                                        cache: false,
                                                        success: function (data) {
                                                              if (data.length == 0) {
                                                                location.reload();
                                                                $(selectors.dialog).dialog('close');
                                                            } else if(data.redirectToUrl) {
                                                                $(selectors.dialog).dialog('close');
                                                                window.location.href = data.redirectToUrl;
                                                            } else {
                                                                alert('Save failed again. Please start over.');
                                                                $(selectors.dialog).dialog('close');
                                                            }
                                                        }
                                                    });
                                                },
                                                Cancel: function () {
                                                    $(this).dialog('close');
                                                }
                                            }
                                        });
                                    }
                                }
                            });
                            else{
                                return alert('You must select a prefix and enter a description for the problem before saving');
                            }
                        },
                        Cancel: function () {
                            $(this).dialog('close');
                        }
                      }
                    });
                }

             });

        });
}

这至少显示了如何将 POST 视图传递回模式窗口。

于 2013-06-06T00:02:42.203 回答