javascript - Display message in a toastr after controller method finish - Stack Overflow

admin管理员组

文章数量:1336289

i have controller method that upload image file, not using jQuery AJAX, from <input> type "file", the method returns:

Return Redirect(Request.UrlReferrer.PathAndQuery)

Because i want to stay in the same view after the submit click.

I want to show after the success image upload, toastr.success.

How i can do it?

i have controller method that upload image file, not using jQuery AJAX, from <input> type "file", the method returns:

Return Redirect(Request.UrlReferrer.PathAndQuery)

Because i want to stay in the same view after the submit click.

I want to show after the success image upload, toastr.success.

How i can do it?

• javascript
• jquery
• asp-mvc
• toastr

Share Follow asked Feb 4, 2017 at 22:31 Ballon UraBallon Ura 92211 gold badge1313 silver badges3737 bronze badges 3

• 1 If you want to stay on the same page then use ajax. Alternatively if you redirecting back to the same page or another page), then you need to pass the message to it. – user3559349 Commented Feb 4, 2017 at 22:35
• How i pass the message? – Ballon Ura Commented Feb 4, 2017 at 22:38
• 1 Numerous ways - e.g. from the POST method to the GET method via TempData and then to the view using ViewData if your redirecting. This is way to broad. – user3559349 Commented Feb 4, 2017 at 22:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

In your http post action method, after successful upload, set an entry to TempData dictionary and read it in the next view which is loaded by the Redirect method and display the toastr message.

TempData["Msg"] = "Uploaded successfully";
return Redirect(Request.UrlReferrer.PathAndQuery);

in your view

<script>
  $(function(){
     var msg = "@(TempData["Msg"] as string)";
     if (msg !== "") {
         toastr.success(msg);
     }
  });
</script>

There is another way.

1. Create a Toastr model that includes Message, Title, Type, SessionID and Date.

   public class Toastr
   {
       public string Title { get; set; }
       public string Message { get; set; }
       public ToastrType Type { get; set; }
       public string SessionId { get; set; }
       public DateTime Date { get; set; }
   
       public Toastr(string message, string title = "Information" , ToastrType type = ToastrType.Info)
       {
           this.Message = message;
           this.Title = title;
           this.Type = type;
           this.Date = DateTime.Now;
       }
   }
   
   public enum ToastrType
   {
       Info = 0,
       Success = 1,
       Warning = 2,
       Error = 3
   }
   

2. Create a Service or Manager where you define your basic functions (add, remove toasts)

   private static List<Toastr> _toasts = new List<Toastr>();
   
   private static string GetSession()
   {
       return HttpContext.Current.Session.SessionID;
   }
   public static void AddToUserQueue(Toastr toastr)
   {
       toastr.SessionId = GetSession();
       _toasts.Add(toastr);
   }
   public static void AddToUserQueue(string message, string title, ToastrType type)
   {
   
       var toast = new Toastr(message, title, type);
       toast.SessionId = GetSession();
       AddToUserQueue(toast);
   }
   public static bool HasQueue()
   {
       return _toasts.Any(t => t.SessionId == GetSession());
   }
   public static void RemoveUserQueue()
   {
       _toasts.RemoveAll(t => t.SessionId == GetSession());
   }
   public static void ClearAll()
   {
       _toasts.Clear();
   }
   public static List<Toastr> GetUserQueue()
   {
       if (HasQueue())               
           return _toasts.Where(t => t.SessionId == GetSession())
                       .OrderByDescending(x=>x.Date)
                       .ToList();
       return null;
   }
   public static List<Toastr> GetAndRemoveUserQueue()
   {
       var list = GetUserQueue();
       RemoveUserQueue();
   
       return list;
   }
   

3. In your layout / page make use of the functions by creating some helpers.

   @helper ProcessToasts()
   {
       List<Toastr> toasts = ToastrManager.GetAndRemoveUserQueue();
       if (toasts != null && toasts.Count > 0)
       {
           foreach (var item in toasts)
           {
               @ShowToastr(item);
           }
       }
   }
   @helper ShowToastr(Toastr item)
   {
       switch (item.Type)
       {
           case ToastrType.Info:
               @ToastrInfo(item.Message, item.Title)
               break;
           case ToastrType.Success:
               @ToastrSuccess(item.Message, item.Title)
               break;
           case ToastrType.Warning:
               @ToastrWarning(item.Message, item.Title)
               break;
           case ToastrType.Error:
               @ToastrError(item.Message, item.Title);
               break;
       }
   }
   
   @helper ToastrInfo(string message, string title)
   {
       <script>
            toastr.info("@message","@title")
       </script>
   }
   @helper ToastrSuccess(string message, string title)
   {
       <script>
            toastr.success("@message","@title")
       </script>
   }
   @helper ToastrWarning(string message, string title)
   {
       <script>
            toastr.warning("@message","@title")
       </script>
   }
   @helper ToastrError(string message, string title)
   {
       <script>
            toastr.error("@message","@title")
       </script>
   }
   

4. Since the helpers are below closing HTML tag, you need just to add the @ProcessToasts() right before the body closing tag.

本文标签： javascriptDisplay message in a toastr after controller method finishStack Overflow