ورود / ثبت نام
0
0

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

688 بازدید
پیغام در 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 در کنار فایل ضمیمه شده که میتونید استفاده کنید.موفق باشید.

 

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=10769
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
مسعود شریفی پور
از سال 88 که با برنامه نویسی آشنا شدم خیلی علاقه مند بودم یک بستر آموزشی بسازم در فضای وب و به انتشار آموزش های در این زمینه بپردازم.حالا یک تیم داریم و با قدرت رو به جلو حرکت میکنیم.
مطالب بیشتر
برچسب ها:

نظرات

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

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

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

    ۲