"> نمایش پیغام در ASP.NET به سبک مترو

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

پیغام در ASP.NET

تا به حال شده در محیطASP.NET بخواید پیغامی نمایش بدید و در آن به مشکل برخوردید که این کارو انجام بدید .در این نمونه سورس با نمایش پیغام در ASP.NET آشنا میشود.در این پروژه با نمایش پیغام با سبک مترو در محیط ASP.NET و در زبان سی شارپ و توسط jQuery آشنا میشود و باید گفت این کار توسط این چند زبان به صورت ساده و گرافیکی امکان پذیر است.دوست داران ASP.Net از دست ندن این پروژه را.

بریم سراغ آموزش ساخت این پروژه جذاب و کاربردی:

بعد ساخت پروژه ای در ویژوال استدیو باید یک کلاس به پروژه خود اضافه کنید نام کلاس را همانند تصویر Message بزارید.

پیغام در ASP.NET

و کد زیر را به آن اضافه کنید !


namespace Helper
{
public static class Message
{
public enum Type
{
success, error, info
};

public static class Text
{
public const string START_INFO = "Click on the buttons
to show different messages. This message will automatically hide after 10 seconds.";

public const string SUCCESS_SERVER = "This is a Success message from Server Side.";
public const string ERROR_SERVER = "This is an Error message from Server Side.";
public const string INFO_SERVER = "This is a general Info message from Server Side.";

public const string SUCCESS_CLIENT = "This is a Success message from  Client Side.";
public const string ERROR_CLIENT = "This is an Error message from Client Side.";
public const string INFO_CLIENT = "This is an Info message from Client Side.
This is used for general purpose.";
}
}
}

بعد از اینکه کارهای ساخت کلاس را انجام دادید یک Web User Control به پروژه خود اضافه کنید همانند تصویر زیر با همون نام هم باشه بد نیست !

پیغام در ASP.NET

و بعد کد زیر به آن اضافه میکنیم.


<script type="text/javascript">
var msgBoxTimeout;
var timeToShow = 10000; //The message will hide after this time interval. Currently it is 10 seconds
var msgBoxRight = -320; //this the message box right value. This is used as Style attribute

//Call this function from anywhere with a message and Message Type which is your CSS Class name from enum
function ShowMessage(msg, type) {
clearInterval(msgBoxTimeout);
$("#divMessageBody").css("right", msgBoxRight);

var classAttr = "message-box " + type;
$("#divMessage").html(msg);
$("#divMessageBody").attr("class", classAttr);

$("#divMessageBody").stop().animate({
right: "0px"
}, ۷۰۰, "easeInOutCirc");

msgBoxTimeout = setTimeout(function () {
HideMessage();
}, timeToShow);
}

function HideMessage() {
$("#divMessageBody").stop().animate({
right: msgBoxRight
}, ۹۰۰, "easeInOutCirc");

clearInterval(msgBoxTimeout);
}
</script>
<div id="divMessageBody" class="message-box">
<a class="close-btn" onclick="HideMessage();">x</a>
<div id="divMessage" class="message"></div>
</div>

 

روی کنترلری که ساختید دوبار کلیک کرده و کد زیر را قرار بدید برای نمایش پیغام.


public void ShowMessage(string msg, string type)
{
Page.ClientScript.RegisterStartupScript(GetType(), "Script", "<script type=\"text/javascript\">ShowMessage(\"" + msg + "\",\"" + type + "\");</script>");
}

یک فایل CSS بسازید و کد های زیر را به آن اضافه کنید و در صفحه اصلی آن را لینک کنید.


.message-box {
width: 270px;
display: inline;
height: auto;
padding: 30px 20px;
position: fixed;
right: -320px;
top: 40px;
font-size: 15px;
color: #fff;
}

.close-btn {
position: absolute;
right: 6px;
top: 0;
cursor: pointer;
}

.close-btn:hover {
opacity: 0.7;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
filter: alpha(opacity=70);
}

.message {
width: 100%;
}

.success {
background-color: #72A101;
border: 2px solid #4d6d01;
}

.error {
background-color: #d04a01;
border: 2px solid #983600;
}

.info {
background-color: #0285c2;
border: 2px solid #00577f;
}

یک نمایی کلی از آموزش بود که برای اینکه بیشتر با پروژه آشنا بشید پیشنهاد میکنم نمونه سورس پروژه را دانلود کنید بد نیست ، یکسری از فایل jQuery در کنار فایل ضمیمه شده که میتونید استفاده کنید.موفق باشید.

 

مسعود شریفی پور

از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.

نوشته‌های مرتبط

دیدگاه‌ها

*
*

این سایت از اکیسمت برای کاهش هرزنامه استفاده می کند. بیاموزید که چگونه اطلاعات دیدگاه های شما پردازش می‌شوند.

    tops پاسخ

    با سلام
    لطفا نحوه اسفاده از فیلم های آموزشی خود را توضیح دهید البته یک سری خودم بررسی کردم اما متوجه این نشدم که با ثبت نامی که انجام میدهم و مبلغی که اکانت خودم رو شارژ میکنم مثلا 5 هزار تومان با این مبلغ چقدر میتوانم از فیلم های آموزشی که وجود داره استفاده کنم و دانلود کنم ؟ سوال بعدی آیا می بایست برای هر فیلم آموزشی مبلغی جدگانه پرداخت؟ ممنون میشم توضیح دهید

      مسعود شریفی پاسخ

      مطالب آموزشی ام اس پی سافت رایگان است ! و فقط برخی پروژه ها نیاز به پرداخت دارد !

    علیرضا پاسخ

    سایت بسیار خوبی دارید مطالب بسیار روان آموزش داده شده

    سعدی پاسخ

    اینکه پروژه رو هم تشریح می کنید هم سورس در اختیار خوانندگان قرار میدید قابل تقدیره .

    موفق باشید

      مسعود شریفی پاسخ

      ممنونیم.شما نیز موفق باشید.