Показать Flash Сообщение, как Gamil в Mvc

Question

Привет, я разрабатываю проект mvc, используя C#. имею в виду, для отображения сообщений об ошибках на взгляд, как Gmail флэш сообщения

позволяет заглянуть в мой контроллер

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

Я хочу, чтобы отобразить сообщение viewbag на виду, когда возникли ошибки durinf формы после ..message должен отображаться как gmail (например, отправлено электронное письмо), после чего он должен исчезнуть через некоторое время, пожалуйста, помогите мне. Ваша помощь будет принята с благодарностью.

Answer 1

Для этого вы можете использовать библиотеку JS библиотеки toastr.

Он очень прост в использовании и настройке в соответствии с потребностями, например. Вы можете установить позицию сообщения, длительность для отображения и т.д. Для примера,

  // 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!'); 
       } 

Update:

После установки пакета Nuget в любом представлении (.cshtml) вам нравится отображать уведомление toastr, вы можете добавить его на любой вызов AJAX. Я добавил один на document.ready для демонстрации. Но вы можете использовать любой метод AJAX или метод ошибки. Не забудьте включить js и css (может включать в макет).

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>