Question

您正在使用c＃开发mvc项目。我想在视图上显示错误消息，如gmail flash消息

让我们看看我的控制器

public ActionResult CreateEmployeeEducationDetails(EmployeeSuperClass employeeSuperClass, int i = 0)
        {
    if(ModelState.isvalid)
    {
    return "somewhere";
    }
    else
    {
    ViewBag.Message = "Education required";}
        return view("employeeSuperClass");
        }

我希望在发生任何错误时在视图上显示viewbag消息durinf表单post ..message应该像gmail一样显示（例如：发送电子邮件）然后它必须在一段时间后消失请帮助我你的帮助将不胜感激

Answer 1

您可以使用toastr JS库来实现此目的。

根据需要使用和配置非常简单，例如您可以设置消息的位置，显示的持续时间等。例如，

            // Set toastr for error notification and display error 1 at a time
            toastr.options.closeButton = true;
            toastr.options.positionClass = 'toast-top-full-width';
            toastr.options.showMethod = 'slideDown';
            toastr.options.hideMethod = 'slideUp';
            toastr.options.showDuration = '1000';
            toastr.options.hideDuration = '1';
            toastr.clear();
            toastr.error('Your request cannot be processed right now. Please try again later!');

对于ajax调用，您可以成功调用调用或错误方法，如：

                .success(function (result) {
                    //debugger;
                    toastr.success('Order saved successfully!');
                }

更新

安装Nuget软件包之后，在任何视图（.cshtml）中，您希望显示toastr通知，您可以在任何AJAX调用中添加一个。我在document.ready上添加了一个用于演示。但是你可以在任何AJAX调用成功或错误方法。不要忘记包含js和css（可以包含在Layout中）。

<强> About.cshtml

<script src="~/Scripts/toastr.min.js"></script>
<link href="~/Content/toastr.css" rel="stylesheet" />

@{
    ViewBag.Title = "About";
}

<hgroup class="title">
    <h1>@ViewBag.Title.</h1>
    <h2>@ViewBag.Message</h2>
</hgroup>

<article>
    <p>
        Use this area to provide additional information.
    </p>

    <p>
        Use this area to provide additional information.
    </p>

    <p>
        Use this area to provide additional information.
    </p>
</article>

<aside>
    <h3>Aside Title</h3>
    <p>
        Use this area to provide additional information.
    </p>
    <ul>
        <li>@Html.ActionLink("Home", "Index", "Home")</li>
        <li>@Html.ActionLink("About", "About", "Home")</li>
        <li>@Html.ActionLink("Contact", "Contact", "Home")</li>
    </ul>
</aside>

<script>
    $(document).ready(function () {
        toastr.success('toastr loaded successfully!');
    });
</script>

在Mvc中显示类似Gmail的Flash消息

1 个答案: