使用 SweetAlert 返回錯誤消息

Question

在AccountController ，我注意到示例注冊代碼捕獲UserFriendlyException並在ViewBag返回錯誤消息。

我如何從 SweetAlert 中退回它？

[HttpPost]
public virtual async Task<ActionResult> Register(RegisterViewModel model)
{
    try
    {
        // Code omitted for brevity
    }
    catch (UserFriendlyException ex)
    {
        ViewBag.ErrorMessage = ex.Message; // I need to return this using SweetAlert

        return View("Register", model);
    }
}

html代碼

  <form action="javascript:;" id="register-form" class="login-form" method="post">
        <div class="alert alert-danger display-hide">
            <button class="close" data-close="alert"></button>
            <span>Enter required fields. </span>
        </div>

        @if (@ViewBag.ErrorMessage != null)
        {
            <div class="alert alert-danger">
                <i class="fa fa-warning"></i> @ViewBag.ErrorMessage
            </div>
           <script>abp.message.error("@ViewBag.ErrorMessage");</script>
            <input type="hidden" value=" @ViewBag.ErrorMessage" id="hf_error" >
        }



        <div class="row">
            <div class="col-xs-12">

                <input type="text" class="form-control form-control-solid placeholder-no-fix form-group" autocomplete="off" name="name" placeholder="@L("Name")" required autofocus id="name">
            </div>
            <div class="col-xs-12">
                <input class="form-control form-control-solid placeholder-no-fix form-group" type="text" autocomplete="off" placeholder="@L("Surname")" name="surname" required id="surname"  />
            </div>

            <div class="col-xs-12">

                <input type="password" class="form-control form-control-solid placeholder-no-fix form-group" autocomplete="off" name="password" placeholder="@L("Password")" required autofocus id="password">
            </div>

        </div>
        <div class="row">
            <div class="col-sm-6 text-left">
                <div class="forgot-password" style="margin-top: 5px;">
                    <a href="@Url.Action("Login")" id="register-btnd" class="forget-password">Login To Your Account</a>
                </div>
            </div>
            <div class="col-sm-6 text-right">
                <button class="btn green" id="btnSubmit" type="submit">Register</button>
            </div>
            <hr />
        </div>
    </form>

下面的jquery函數

 var jsonObject = {
            Name: name,
            Surname: surname,
            //EmailAddress: email,
           // UserName: username,
            Password: password
        };


        abp.ajax({
            url: abp.appPath + 'Account/Register',
            type: 'POST',
            data: JSON.stringify(jsonObject)
        }).done(function(data) {

            alert("done");


        }).fail(function(data) {

           alert("fail");
        });

Answer 1

由於該方法返回一個View結果，因此對錯誤消息使用ViewBag是有意義的。

要顯示 SweetAlert，請在Register.cshtml 的@section Scripts中添加以下內容：

@section Scripts {
    // ...

    @if (ViewBag.ErrorMessage != null)
    {
        <script>abp.message.error("@ViewBag.ErrorMessage");</script>
      /*<script>swal("@ViewBag.ErrorMessage", "", "error");</script>*/
    }
}

兩個<script>標簽都會觸發相同的彈出窗口。