使用 SweetAlerts 对话框确认

Question

我是 ASP.Net Core 2.1 MVC 和 C# 的新手，我无法弄清楚代码有什么问题。在任何 post 操作之前，我使用 Sweet Alerts 作为对话确认，它有效，但它立即重定向到索引页面，下面的行甚至没有正确执行。

swal("Saved!", "Your record has been saved.", "success");

我希望它仅在用户单击 'OK' 并且警报正确关闭（如淡出）后重定向到索引页面

$(function () {
    $("#btnSave").click(function (e) {
        e.preventDefault();
        swal({
            title: "Save Changes?",
            text: "",
            type: "info",
            showCancelButton: true,
            cancelButtonClass: 'btn-secondary waves-effect',
            confirmButtonClass: 'btn-success waves-effect waves-light',
            confirmButtonText: "Yes",
            closeOnConfirm: false
        }, function () {
            $("#studentForm").submit();
            swal("Saved!", "Your record has been saved.", "success");
        });
    });
});

我试过换行

$("#studentForm").submit();

swal("Saved!", "Your record has been saved.", "success");

到

swal("Saved!", "Your record has been saved.", "success");

$("#studentForm").submit();

但是没用。

这是我的编辑视图：

@model CIMS.Models.Plans

@{
    ViewData["Title"] = "Edit";
}



<div class="row">
    <div class="col-xs-12">
        <div class="page-title-box">
            <h4 class="page-title">Edit Plan</h4>

            <div class="clearfix"></div>
        </div>
    </div>
</div>

<div class="row">
    <div class="col-sm-12">
        <div class="card-box table-responsive">
            <form asp-action="Edit" id="studentForm">
                <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                <input type="hidden" asp-for="PlanID" />
                <div class="form-group">
                    <label asp-for="PlanName" class="control-label">Plan Name</label>
                    <input asp-for="PlanName" class="form-control" />
                    <span asp-validation-for="PlanName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Description" class="control-label"></label>
                    <input asp-for="Description" class="form-control" />
                    <span asp-validation-for="Description" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="BillCutOffLimit" class="control-label">Bill Cut-off Limit</label>
                    <input asp-for="BillCutOffLimit" class="form-control" />
                    <span asp-validation-for="BillCutOffLimit" class="text-danger"></span>
                </div>

                <br />
                <div class="form-group">
                    <button type="submit" value="Save" class="btn btn-success waves-effect waves-light w-sm" id="btnSave">
                        <span class="btn-label"><i class="fa fa-check"></i></span>
                        Save
                    </button>
                    <a asp-action="Index" class="btn btn-primary waves-effect waves-light w-sm">
                        <span class="btn-label"><i class="fa fa-arrow-left"></i></span>
                        Back
                    </a>
                </div>
            </form>


        </div>
    </div>
</div>

这是控制器下的 http post 编辑操作：

// POST: Plans/Edit/5
        // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
        // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
        [HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Edit(string id, [Bind("PlanID,PlanName,Description,BillCutOffLimit,ModifiedBy,DateModified,ModifiedByComputerUsed")] Plans plans)
        {
            if (id != plans.PlanID)
            {
                return NotFound();
            }

            if (ModelState.IsValid)
            {
                try
                {
                    _context.Attach(plans);

                    plans.ModifiedBy = User.Identity.Name;
                    plans.DateModified = DateTime.Now;
                    plans.ModifiedByComputerUsed = Environment.MachineName;
                    
                    _context.Entry(plans).Property(x => x.PlanName).IsModified = true;
                    _context.Entry(plans).Property(x => x.Description).IsModified = true;
                    _context.Entry(plans).Property(x => x.BillCutOffLimit).IsModified = true;

                    _context.Entry(plans).Property(x => x.DateModified).IsModified = true;
                    _context.Entry(plans).Property(x => x.ModifiedBy).IsModified = true;
                    _context.Entry(plans).Property(x => x.DateModified).IsModified = true;

                    //_context.Update(plans);
                    await _context.SaveChangesAsync();
                }
                catch (DbUpdateConcurrencyException)
                {
                    if (!PlansExists(plans.PlanID))
                    {
                        return NotFound();
                    }
                    else
                    {
                        throw;
                    }
                }
                return RedirectToAction(nameof(Index));
            }
            return View(plans);
        }

有什么想法吗？

Answer 1

不确定您使用的 sweetalert.js 是哪个版本，但下面的代码适用于 https://sweetalert.js.org/

的 2.1.0

您需要为 sweetalert 使用基于 Promise 的设计。当您在保存更改之前单击第一个 confirm 时，它 returns 一个 Promise 布尔值，表示用户是否已确认该操作。您需要解决承诺以根据此值检查此布尔值 value.Based 您需要创建 swal 的另一个实例并类似地解决它以进行 Ajax 调用，如下所示 -

Ajax调用的示例代码

$(function () {
        $("#btnSave").click(function (e) {
            e.preventDefault();
            swal({
                title: "Save Changes?",
                text: "",
                type: "info",
                showCancelButton: true,
                cancelButtonClass: 'btn-secondary waves-effect',
                confirmButtonClass: 'btn-success waves-effect waves-light',
                confirmButtonText: "Yes",
                closeOnConfirm: false
            })
            .then(val => {
               if (!val) throw null;
               swal("Saved!", "Your record has been saved.", "success")
                 .then((confirm) => {
                  $("#studentForm").submit();
                })            
            });
        });
        
       $("#studentForm").on('submit',function(){
         alert('form POST');
       })
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<link href="http://tristanedwards.me/u/SweetAlert/lib/sweet-alert.css" rel="stylesheet"/>
<form id="studentForm" method="POST">
 name : <input type="text" id="fullname" /> <br>
 <button id="btnSave">
 Save
 </button>
</form>

工作 fiddle：http://jsfiddle.net/3e7fgtop/

使用 SweetAlerts 对话框确认

Using SweetAlerts dialog confirmations

c#

asp.net-core-mvc

sweetalert

asp.net-core-2.1