Using sweetalert/toastr javascript library in Asp.Net Core MVC

hi everyone welcome back this is modern in this demo I'm going to show you how we can use a suite a lot or toaster blindsight library in our s we donate for MBC application to send feedback to the clients so whenever we do something then we want to send the feedback to the client so here is the demo application and I have created the two buttons here so if I click on this save then we see this type of the success message and if I click on this remove then we see the error type of the confirmation dialog so this is the suite a lot and this application is configurable to use either so it a lot or toaster so at this time we are it is displaying the suite a lot message and if we change the configuration to if we change it to use the toaster then it will show us the toaster and we don't need to change anything inside the code we just need to change the value of this notification provider to change the type of the notification we want to so the type of the feedback we want to show so I have change the value to the toaster and let's restart the application since we need to restart it after changing the value of type settings and then it has started let's refresh and let me show you so at this time it is showing the toaster so success type of toaster and error type of this toaster and here is the webpage of the suite a lot and it has so given you can find different examples of using suite a lot and let's try this one here try me then this is the suite a lot so for this we need a couple of things here so we need the icon and I can specify this type of the dialog so if it is error then we see the error icon here there is if it is success then we see the success title here so it is in this case the icon is warning here and let's try when we see the different type of icon here so in this demo we are going to use this one but we don't use the footer of course you can use footer so for the basic suite a lot we need a con and a title and text and here is the example of the toaster and if I click on the toaster then this is the type of toaster that we want to see and in order to generate the toaster we need this command you can grab it from the website so in order to use sweet a lot and the toaster we need to download the library and install that into our folder in this case I'm going to use the CDN because it is very simple simple to use CDN so for the suite a lot you need to grab this CDN here and for the toaster you need to grab these two CDN for a toaster we need to have a JavaScript and then CSS so for toaster we need to have both files - files - links but for sweet alot we need only one link here so I have grabbed those links into the layout dot CSS DML so if we go to this here and layout dot CSS DML then here I have grabbed the CDN link for the toaster dot CSS as you can see and here I have grabbed the CDN link for the JavaScript suite a lot and the toaster so let's close this and after that what I have done is in the model folder I have created a one ennum called notification type so this is not a class this is an Impala kind of notification type and it is specifies type of notification we want to send it would be either it could be either error success warning of course you can add other values here as well but for this demo we are going to use only these two these three values here and after that I have created the base controller here and because we can reuse the methods or the functions in the base controller by on the base controller we can reuse the methods from base controller into all other controllers of our application so this base controller is extracting the common functionalities of our application since the sending notification or feedback to the client is the common functionality that's why I have kept this method into the base controller and this inherits from the controller class so here I have created a notify method and this notify method expect us to pass the couple of parameters your message title and the notification types so message if we compare these those parameters with the suite a lot then in this suite a lot we need to pass let's use the simple examples so for the basic suite alert we need icon title and text so your text would be the message and title is the title of our application and I have set the default value of our application different name of our application to the title and the notification type and this notification type is the one that we created here so once we get in the end now this method construct the anonymous object and we pass in this anonymous object we pass in the couple of properties here so message we pass the incoming message title is the one and for the sweet alert we need icon and for the toaster we need type in case of toaster we don't need to have a icon we just need to have a type of the error so if I click on this demo here and if I click on store toast then in the toaster we need the type of the toast message it could be success error warning or the info and then we can pass the title and the message or we can simply pass message as well so in case of toaster we don't need icon that's why this type and the value of type and icon are the same so this icon would be used for sweet alert and this type value would be used for twister and I have set the another property provider do the get provider method and this provider get provider gets the value of this F setting that JSON notification provider key here so this could be this would be toaster or D so it a lot and I have created the private method here get provider and this get provider reads the value of DF settings translation and it clears the configuration so from that configuration we can access the value of the F setting status in JSON so this is just the boilerplate code and you can just copy and paste it here so instead of doing this get provider I can directly inject the I configuration into the constructor and use that I configuration and this key to get the value of the value of the notification provider but I'm not doing this in this case because if I inject that I configuration into our base controller then when we inherit that base controller from our home controller then we need to supply that parameter by using the base keyword so we don't need to I don't want to do this just to get the value of the high configuration and pass it to the best controller so I prefer it this way but you can directly inject I configuration into the constructor and get the value of the notification provider from the F settings transition and if you have been watching my previous videos then you know how to do this and after we construct the message we are sending that message or this anonymous object into the temp data dictionary with the key of the message and in this case I have serialized and be anonymous object since in asp.net core MVC we cannot directly pass value into the temp data without your serializing it works fine in asp.net MVC but you will get yourself into trouble if you pass the value into the temp data without serializing like this way so we need to do this and this temp data message will be available in our views so in the home controller I have created the two methods save and the delete method to simulate the notification or the feedback process so in the same method I have used the try cats and here we can try to save data try to save data into the database database and if we succeed that then will notify this part of the code runs and this will send call the notify action of the hour based controller and only the necessary parameter for this is the message since title and the notification type are set default values so if we need to send the success method a success message to decline then we can only pass the we can only pass the one parameter here and here I have created another method to simulate the error condition so in the try I have thrown the unauthorized access exception you can throw any type of exception this is this is our simulating the error condition here so whenever the exception occurs let's say we try to delete the database in this data from the database in this section and we could not succeed then our code falls back to the cat section and we as we will say that the error type of the notification so we call the method notify and we say send the message could not save could not until it let's say could not delete data and then in this case we need to pass the notification type to the error because the default value for this is the success and before this notification type we have the another parameter here title so if we try to just send the notification type dot error then we get error here because we need to pass another parameter in the middle here because our notify method expect us to pass that parameter before notification type this title but we don't want to change this title because this is the title of our application so there is a workaround for this for this in this case in this situation we can use named parameters so in case of the named parameter we can pass named parameter by naming them so the our parameter is notification type and then we can give column colon and the notification type dot error so this works now this sends notify method and these notify method creates the temp data dictionary with the value of the notification message variable or the object and sends that to the view so after doing this I have created the parcel view here notification parcel here and since those are the we need the toaster and the suite a lot are the JavaScript libraries so we need to run those inside the script and in the parcel I have created the script section and then first of all we need to load we need to get the temp data from the from the temp we need to get the message or the data or the notification coming into the temp data dictionary so here I am checking the values so first of all I'm checking if temp data message is null or not so if it is not null then I am using HTML dot Rob because we need the data that is sent from the controller in the exact format so whatever the controller sends I need that data there so I have used HTML data raw and if it is null then I'm going to just return the undefined and wrap that inside the HTML dot raw because if I do not wrap this inside the HTML dot or then we run into the error because this is a ternary operator and we cannot send we cannot use two different data types types of the values so in this case I'm just simply wrapping this inside the HTML tour to raw and then pass the undefined here so first of all I'm just going to log this into the console console dot log message and let us see what data we are getting from this so I have Lucas on it running and then if i refresh it let's rephrase it and then let's open the console here and then let's click on save then we get the serialized JSON data here so we have a message here title here icon and the type and the provider so we check if the provider is toaster or sweet a lot and choose the appropriate library accordingly so we got the message here and if message that means if it is not undefined and then we are going to select there we are going to check the whether the provider is sweet a lot or not so if message that provider is sweet a lot the provider this key here filled here and then if it is a sweet alert then we fire the sweet a lot notification so in order to clear the sweet a lot we need to use this SW l sawl dot fire and we can pass title text and icon and you can get more information about this from this documentation here soldered fire and we can pass those values otherwise if it is not that if the provider is not sue it a lot and in this case we are seeing the provider is toaster in our view and if it is a toaster then we generate the toaster message toaster we pass the type of the toaster it could be success error warning and we pass the message text that we want to display and the title of the toaster here and finally I have rendered these partial page into the layout dot CSS DML of our application so at this place here I have to await HTML that parcel I sync and load that partial page here in this way now if we run our demo let's run the demo and see if it still works so at this time it is showing us the toaster now let's change the type of the notification to sweet a lot receive this and then I'm going to restart the application and let's refresh and now it is showing Asti sweet a lot type of feedback are the notification here and you can also inspect the values coming from the same data so these steps let's review it once very sort first of all I have created the notification type ennum and then I have created the base controller here and in the base controller I have created the notify method so that this method can be used throughout all the controllers of our application I have created the private method get' provider here so that we get the values from the app settings translation file and from the controller we can inherit base controller and then we can call the notify method whenever we want to send notifications or the feedback to the client and after that we have included the CDN library for the Jabez for the sweet alert and toaster into our layout file and I have created notification parcel page here and this gets the data from the temp data and converts that into this sweet alot or toaster type of the notification and finally we have rendered that notification parcel into our layout dot CSS DML so in this way you can customize the type of notifications of feedback you want to display in your MVC application so this is it for now friends and if you like this video then please don't forget to share and subscribe thanks for watching and have a great day

Channel: Madan Uprety

Views: 13,908

Keywords: sweetalert, toastr, toastr.js, using sweetalert in asp.net core mvc, how to use sweetalert in asp.net core mvc, how to use toastr in asp.net core, how to use toastr.js in asp.net core mvc, using toastr in asp.net core mvc, mvc, sweetalert in .net core, toastr in .net core, toast notification in asp.net core mvc, toast message in asp.net core mvc, c#, .net core, asp.net core, .net, sweetalert in asp.net core, toastr in asp.net core, sweetalert popup in asp.net core mvc

Id: 2HiOUZt9cBs

Length: 16min 55sec (1015 seconds)

Published: Mon Jun 15 2020