نمایش و بسته شدن پیغام هشدار به صورت خودکار در ASP.Net

در این مقاله انیمیشن bootstrap alert message box ،که به طور خودکار با افکت اسلایدبالا (slide up) نمایش میدهد و پس از چند ثانیه بسته (محو) میشود را با استفاده از asp.net توضیح میدهیم.

توضیحات: در اینجا با استفاده از توییتر bootstrap alert ، نمایش پیام ها در جعبه هشدار را نشان میدهیم ، که 5 ثانیه پس از نمایش پیام هشدار به طور خودکار بسته میشود و یا به صورت دستی با فشردن دکمه Close موجود در کادر هشدار بسته میشود.

پیاده سازی: یک صفحه وب نمونه برای نشان دادن اجرای bootstrap alert message boxes در ایجاد میکنیم asp.net

صفحه index.aspx را باز کرده و کدهای زیر را در آن وارد میکینم.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="index.aspx.cs" Inherits="Exame2.index" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>




    <style type="text/css">

        .messagealert {

            width: 100%;

            position: fixed;
             top:0px;

            z-index: 100000;

            padding: 0;

            font-size: 15px;

        }

    </style>

    <script type="text/javascript">

        function ShowMessage(message, messagetype) {

            var cssclass;

            switch (messagetype) {

                case 'Success':

                    cssclass = 'alert-success'

                    break;

                case 'Error':

                    cssclass = 'alert-danger'

                    break;

                case 'Warning':

                    cssclass = 'alert-warning'

                    break;

                default:

                    cssclass = 'alert-info'

            }

            $('#alert_container').append('<div id="alert_div" style="margin: 0 0.5%; -webkit-box-shadow: 3px 4px 6px #999;" class="alert fade in ' + cssclass + '"><a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a><strong>' + messagetype + '!</strong> <span>' + message + '</span></div>');




            setTimeout(function () {

                $("#alert_div").fadeTo(2000, 500).slideUp(500, function () {

                    $("#alert_div").remove();

                });

              }, 5000);//5000=5 seconds

        }

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
      <div class="messagealert" id="alert_container">

            </div>


             <div style="margin-top: 100px; text-align:center;">

            <asp:Button ID="btnSuccess" runat="server" Text="Submit" CssClass="btn btn-success"

                OnClick="btnSuccess_Click" />

            <asp:Button ID="btnDanger" runat="server" Text="Danger" CssClass="btn btn-danger"

                OnClick="btnDanger_Click" />

            <asp:Button ID="btnWarning" runat="server" Text="Warning" CssClass="btn btn-warning"

                OnClick="btnWarning_Click" />

            <asp:Button ID="btnInfo" runat="server" Text="Info" CssClass="btn btn-info"

                OnClick="btnInfo_Click" />
            </div>

        </div>
   
    </form>
</body>
</html>

در قسمت index.aspx.cs کدهای زیر را وارد میکنیم.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Exame2
{
    public partial class index : System.Web.UI.Page
    {
        public enum MessageType { Success, Error, Info, Warning };
        protected void Page_Load(object sender, EventArgs e)
        {

        }
       

       
        protected void ShowMessage(string Message, MessageType type)
        {

            ScriptManager.RegisterStartupScript(this, this.GetType(), System.Guid.NewGuid().ToString(), "ShowMessage('" + Message + "','" + type + "');", true);

        }

        protected void btnSuccess_Click(object sender, EventArgs e)
        {

            ShowMessage("رکورد با موفقیت ثبت شد", MessageType.Success);

        }

        protected void btnDanger_Click(object sender, EventArgs e)
        {

            ShowMessage("مشکلی در ارسال اطلاعات رخ داده است", MessageType.Error);

        }

        protected void btnWarning_Click(object sender, EventArgs e)
        {

            ShowMessage("مشکلی در اتصال به اینترنت وجود دارد", MessageType.Warning);
            

        }

        protected void btnInfo_Click(object sender, EventArgs e)
        {

            ShowMessage("لطفا اطلاعات را قبل از ارسال بررسی کنید", MessageType.Info);

        }


    }
}

در این مرحله برنامه را اجرا کنید

فایل های ضمیمه

4797_Exame2.rar

مرجع تخصصی برنامه نویسان

انجمن تخصصی برنامه نویسان فارسی زبان

دوره های در حال ثبت نام آکادمی برنامه نویسان

نمایش و بسته شدن پیغام هشدار به صورت خودکار در ASP.Net

فایل های ضمیمه

برنامه نویسان

اگر نیاز به یک مشاور در زمینه طراحی سایت ، برنامه نویسی و بازاریابی الکترونیکی دارید