Thursday, 10 March 2016

Loading Image display in MVC

Page Loading Image display in MVC using Javascript

Step1: index.cshtml

 <div class="mytotload" id="totload" style="display: none">
                                            <div class="center">
                                                <img alt="" src="~/images/loading.gif" />
                                            </div>
        </div>
Step2:

<style type="text/css">
    .modalload {
        position: fixed;
        z-index: 999;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
    }

    .center {
        margin: 150px auto;
        width: 25px;
    }
</style>

step3:
index.cshtml

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
 $(document).on("click", ".rating", function(){
            $(".mytotload").show();

                $.ajax({
                    type: "POST",
                    url: "/UserBlogs/CreateRating",
                    data: { id: BlokSk, RatingUserSK: RatingUserSK },
                    dataType: "json",
                    success: function (response, value) {
                        window.close();
                    },
                    error: function (xhr, ajaxOptions,thrownError ) {
                        $(".mytotload").hide();
                        window.close();
                    }
                }).done(function (data) {
                  alert(data);
                    $(".mytotload").hide();
                });
});
</script>

No comments: