How to display ajax returned message using toaster in C#?

Question

As being the beginner in C#, I am struggling on displaying a toast message. I have an aspx page in which I have to display toast message once a button is clicked. I had added a hidden field for toast message:

<button class="BtnCart" onclick="return addToCart(event)" title="Add"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to Cart </button>
<asp:HiddenField runat="server" Value="0"/>

I have a ajax call which returns the message that I need to display in the toast. I had initiated doing as following please help me out here.

<script src="scripts/toastr.min.js" type="text/javascript"></script>
   <script type="text/javascript">
        $(document).ready(function () {
            $(".showToast").click(function () {
            });
        });
        function addToCart(event) {
            console.log(event.target);
            var Id = $(event.target).parent().find('.Id').val();
            var qty = $(event.target).parents('#searchbottom').find('#qty').val();

            console.log(Id);
            console.log(qty);
            var item = {};
            item.Id = Id;
            item.quantity = qty;        

            $.ajax({
                type: 'POST',
                url: '/api/shop/Add',
                data: JSON.stringify(item),
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            }).done(log);

            return false;
        }
        function log(data) {
            console.log(data);
           // alert(data.message);            
        }       

        function pageLoad(sender, args) {
            if (args.get_isPartialLoad()) {

                toastr.options = {
                    "closeButton": false,
                    "debug": false,
                    "newestOnTop": false,
                    "progressBar": false,
                    "positionClass": "toast",
                    "preventDuplicates": false,
                    "onclick": null,
                    "showDuration": "10",
                    "hideDuration": "10",
                    "timeOut": "5000",
                    "extendedTimeOut": "10",
                    "showEasing": "swing",
                    "hideEasing": "linear",
                    "showMethod": "fadeIn",
                    "hideMethod": "fadeOut",
                    'body-output-type': 'trustedHtml'
                }
                toastr.success(data.value); 

Answer 1

Change your tag button like this:

<button class="BtnCart" id="AddToCart" title="Add"><i class="fa fa-shopping-cart" aria-hidden="true"></i> Add to Cart </button>

And your script like this:

<script src="scripts/toastr.min.js" type="text/javascrip"></script>
<script type="text/javascript">

$(function(){
	toastr.options = {
		"closeButton": false,
        "debug": false,
        "newestOnTop": false,
        "progressBar": false,
        "positionClass": "toast-top-right",
        "preventDuplicates": false,
        "onclick": null,
        "showDuration": "100000",
        "hideDuration": "1000",
        "timeOut": "5000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut",
        'body-output-type': 'trustedHtml'
    };

    $("#AddToCart").on("click", function (event) {
        console.log(event.target);
        var Id = $(event.target).parent().find('.Id').val();
        var qty = $(event.target).parents('#searchbottom').find('#qty').val();

        console.log(Id);
        console.log(qty);
        var item = {};
        item.Id = Id;
        item.quantity = qty;        

        $.ajax({
            type: 'POST',
            url: '/api/shop/Add',
            data: JSON.stringify(item),
            contentType: 'application/json; charset=utf-8',
            dataType: 'json'
        }).done(function (data) {
			log(data);//console.log(data);
			toastr.success(data.value);//you display your message in here
		});

        return;
    });

    function log(data) {
        console.log(data);//I see this unnecessary                     
    };                      
});
</script>