如何使用 Unobtrusive Ajax 使用 sweetalert 实现 data-ajax-confirm？

How to implement data-ajax-confirm with sweetalert using Unobtrusive Ajax?

提问人：Azri Zakaria 提问时间：11/19/2020 更新时间：11/19/2020 访问量：839

问：

给定这样的 ajax 形式

<form method="post"
        data-ajax="true" 
        data-ajax-method="post" 
        data-ajax-complete="completed" 
        data-ajax-confirm="Are you sure you want to do this?">
    <input type="text" name="name" /><input type="submit"/>
</form>

我已经设置了，但是知道如何使用sweetalert实现吗？data-ajax-confirm

例

<script>
swal({
  title: "Are you sure?",
  text: "Once deleted, you will not be able to recover this imaginary file!",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    //Submit ajax here
  } else {
    swal("Your imaginary file is safe!");
  }
});

completed = function (xhr) {
            if (xhr.status == "200") {
                swal("Success", xhr.responseText, "success")
                    .then(() => {
                        location.reload();
                    });
            }
            else {
                swal("Error", xhr.responseText, "error")
            }

        };
</script>

如何在提交前显示带有sweetalert的对话框

jquery asp.net-core razor-pages unobtrusive-ajax

评论

0赞 react_or_angluar 11/19/2020
sweetalert 在哪里定义？

答：

1赞 mj1313 11/19/2020 #1

您可以像下面这样操作：

<form method="post"
      id="myform"
      data-ajax="true"
      data-ajax-method="post"
      data-ajax-complete="completed">
    <input type="text" name="name" />
</form>

<input id="submit" type="button" value="submit" />

脚本：

@section scripts{
    <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.2/sweetalert.min.js"></script>
    <script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.js"></script>
    <script>
        $("#submit").click(function () {
            swal({
                title: "Are you sure?",
                text: "Once deleted, you will not be able to recover this imaginary file!",
                icon: "warning",
                buttons: true,
                dangerMode: true,
            })
                .then((willDelete) => {
                    if (willDelete) {
                        $("#myform").submit();
                    } else {
                        swal("Your imaginary file is safe!");
                    }
                });

            completed = function (xhr) {
                if (xhr.status == "200") {
                    swal("Success", xhr.responseText, "success")
                        .then(() => {
                            location.reload();
                        });
                }
                else {
                    swal("Error", xhr.responseText, "error")
                }
            };
        })
    </script>
}

控制器：

public IActionResult Index()
{
    return View();
}

[HttpPost]
public IActionResult Index(string name)
{
    if(name != null)
    {
        return Ok();
    }
    return NotFound();
}

结果：

enter image description here

上一个：如何序列化取消选中复选框？

下一个：使用泛型的 LINQ 联接