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

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

935 بازدید
نمایش پیغام

نمایش پیغام نمایش پیغام نمایش پیغام

همانطور که برخی از شما نیز ممکن است بدانید نمایش پیغام  MessageBox همیشه برای اکثر برنامه نویسان در برنامه نویسی وب کاری سخت بوده است.همه عموما از Page.ClientScript.RegisterStartupScript یا متد ScriptManager.RegisterClientScriptBlock برای صدازدن جاوا سکریپت خطا و تایید توابع برای نمایش یک MessageBox تولید شده در صفحه ی وب استفاده میکنند.در این مقاله ما یک یا چند نمایش پیغام را ساخته و در اختیار شما قرار میدهیم ، پیش از این مقاله  نمایش پیغام در ASP.NET به سبک مترو  را نیز برای نمایش پیغام به سبک مترو را نیز برای شما نوشته بودیم و سورس آن را نیز در اختیار شما قرار دادیم

من با یک پروژه ای کار میکردم که پیش از آن از تعداد زیادی پنجره ی پیام برای نمایش بی درنگ یک پیام بر اساس برخی اقدامات به کاربر نهایی استفاده میشد. در ابتدا من به سادگی از جاوا سکریپت خطا و تایید توابع برای ارسال سریع یک پیام به کاربران استفاده میکردم تا اینکه متوجه شدم که استفاده از آن صفحه را از نظر دیداری و زیبایی زشت میکند زیرا نمیتوانم آن را سفارشی کنم تا هماهنگ با رنگ طرح صفحه ی وب باشد. چیز دیگر این است که من نیاز به انجام عملیات های بی درنگ بر اساس عملیات های متنوعی دارم. به عنوان مثال من نیاز به نمایش یک پنجره ی موفقیت آمیز زمانی که یک عملیات موفق انجام شد , دارم و استفاده از یک جاوا سکریپت خطا برای نمایش یک پیام موفقیت آمیز ممکن است کاربران را گیج کند زیرا از تصویر اخطار پیش فرض استفاده میکند. برای حل این مشکلات میتوانم به راحتی یک پنل Modal درون صفحه بسازیم و با دریافت چند CSS از نظر دیداری و احساسی MessageBox را تنظیم کنیم اما این روش خوبی برای من نیست. چرا؟ دو دلیل اصلی : نگهداری و استفاده ی مجدد. از آنجایی که من نیاز به پنجره ی پیامی دارم که بتواند در طول چندین برنامه استفاده ی مجدد شود و به راحتی بتوان آن را ذخیره کرد. از این رو من تصمیم به ساخت یک کنترل مرکب برای ساخت کنترل های سفارشی گرفتم.

ویژگی های اصلی

این کنترل های سفارشی به گونه ای طراحی شده اند که برنامه نویسان بتوانند به راحتی یک پیغام فوری در متن ایجاد کنند. چه از آن از طریق سرور استقاده کنند یا از طریق مشتری بدون نیاز به کد زیادی و برای نمایش یک پیام دوستانه به کاربر انجام میشود.

این به عنوان یک کنترل معمولی که بتواند در طول برنامه استفاده مجدد شود ساخته شده است. نگهداری برای این کنترل بسیار آسان تر است زیرا هر تغییری از طرف آن بر تمام چیز هایی که از آن استفاده میکنند تاثیر میگذارد.

این کنترل ها گزینه هایی به برنامه نویسان ارائه میکنند تا نوع پیامی که میخواهند به کاربر نمایش دهند که در آن جاوا سکریپت اخطار و تایید وجود ندارد را انتخاب کنند. همچنین این یک مزیت برای کاربران است زیرا این کنترل ها رابط های کاربری دوستانه ایجاد میکنند و هر پیام با رنگ طرح و آیکون متفاوتی ارائه میشوند تا کاربر بتواند به راحتی پیام را تشخیص دهد. این به برنامه نویسان کمک میکند تا یک MessageBox استوار در برنامه داشته باشد و MessageBox های زیباتری را به کاربر ارائه میدهد.

آخرین ورژن (ورژن ۴) کنترل , برخی از خصوصیاتی که شما میتوانید از آنها برای تغییر دیداری و احساسی استفاده کنید , افشا شدند.

ورژن های کنترل و جایی برای دانلود آنها

دانلود در انتهای مطلب

استفاده از کنترل ها

کنترل MessageBox : این کنترل به برنامه نویسان گزینه ی ارسال فوری چندین نوع پیام را ارائه میدهد. پیام هایی نظیر اطلاع رسانی , اخطار , موفقیت آمیز و خطا . این کنترل میتواند از طریق سرور یا مشتری فراخوانی شود. در زیر چند تصویر از این پیام ها را میتوانید ببینید :نمایش پیغام

نمایش پیغام

 

نمایش پیغام

نمایش پیغام

چگونه از آن استفاده کنیم؟

ProudMonkey.Commen.Controls.dll را دانلود و اکسترکت نمایید.

ProudMonkey.Commen.Controls.dll و AjaxControlToolkit را به Solution پروژه تان بیافزایید.

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

بر روی Tab جستجوگر کلیک کنید و دو DLL ای که در گام دوم مشخص شدند را انتخاب کنید.

بر روی تایید کلیک کنید.

کنترل ها را ثبت نام کنید با افزودن کد های زیر در بالاترین قسمت صفحه تان. همچنین میتوانید آن را در فایل Web.config نیز ثبت نام کنید.

<%@ Register assembly="ProudMonkey.Common.Controls"

namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>

<%@ Register assembly="AjaxControlToolkit"

namespace="AjaxControlToolkit" tagprefix="asp" %>

 

از آنجایی که کنترل MessageBox از ورژن های بالای Ajax و ASP.NET استفاده میکند پس مطمئن باشید که از ToolkitScriptManager به جای ScriptManager استفاده کنید. ToolkitScriptManager را میتوانید در کنترل های AjaxControlToolKit بیابید.

سپس MessageBox را همانند زیر مشخص کنید :

<cc1:MessageBox ID=”MessageBox1″ runat=”server” />

حال شما آماده اید.

استفاده از کنترل MessageBox

روش سرور (Code behind)

MessageBox1.ShowError("Your Message");//Displaying an Error message

MessageBox1.ShowWarning("Your Message");//Displaying a Warning message

MessageBox1.ShowInfo("Your Message");//Displaying an Information message

MessageBox1.ShowSuccess("Your Message");//Displaying a Successful message

 

استفاده از کد بالا به شما این اجازه را میدهد تا MessageBox را در اندازه ی پیش فرضش نمایش دهید (ارتفاع ۱۲۵ پیکسل و پهنا ۳۰۰ پیکسل). به یاد داشته باشید که اندازه ها در فرمت پیکسل میباشد. اگر میخواهید که اندازه MessageBox را به طور دستی تنظیم کنید آنگاه باید از متد Overload همانند زیر استفاده کنید :

ShowMsgBox(‘Error’,’Sample Success Message.’,125,300);

به یاد داشته باشید که اگر میخواهید یک Postback ایجاد کنید بعد از کلیک بر روی تایید پس مطمئن باشید که شامل “return false” بعد از فراخوانی متد ShowMsgBox() در جاوا سکریپت مشتری.

استفاده ی مشتری از کنترل MessageBox کمی متفاوت است زیرا ما باید به متد بگوییم که کدامیک از انواع پیام را برای نمایش به مشتری میخواهیم با مشخص کردن اولین پارامتر در بالا نشان داده شده است. پس اگر میخواهید انواهع مختلفی از پیام ها را نمایش دهید از طریق جاوا سکریپت سپس از این ارزش های زیر به عنوان اولین پارامتر استفاده کنید:

Error

Success

Info

Warning

کنترل ConfirmBox :

این کنترل سفارشی ساخته شده است تا نمای بهتر و زیباتری به پیام تایید ارائه دهد و گزینه ی “دوباره از من نپرس” را به آن بیافزایید. همانطور که میدانیم استاندارد های ما بسیار در هر گام برنامه که به کاربر اجازه میدهیم که عملیات های حذف و ضروری را انجام دهد , تایید شامل میشود. برای بعضی از کاربران این گام تایید کمی آزاردهنده میشود. پس من تصمیم گرفتم تا نگاهی به آنچه که نیاز است برای موضوع CheckBox”دوباره از من نپرس” برای کنترل ConfirmationBox ام , بیاندازم.

در زیر تصویری از مثال کنترل ConfirmationBox آورده شده است:

نمایش پیغام یادداشت:

گزینه ی “دوباره از من نپرس” تنها در طول جلسات به یاد خواهد ماند. پس اگر صفحه دوباره لود شود یا رفرش شود ConfirmationBox بخ صورت معمولی نمایش داده خواهد شد.

گزینه ی “دوباره از من نپرس” برای هر کنترلی که آن را فراخوانی میکند منحصر به فرد است. پس اگر بخواهید که ConfirmBox را برای دکمه ی Delete نمایش دهید پس “دوباره از من نپرس” تنها برای کنترل آن دکمه مورد قبول میباشد.

تمرکز پیش فرض را بر NO تنظیم کنید.

کنترل تنها میتواند از طریق مشتری ممکن است.

نمونه ی استفاده از کنترل ConfirmBox

ASPX Markup

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<cc1:ConfirmBox ID="ConfirmBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click"
OnClientClick="ShowConfirmBox(this,'Are you Sure'); return false;" />
</div>
</form>
</body>

 

Code Behind

using System;
using System.Web;
public partial class YetAnotherTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e) {
}
protected void Button1_Click(object sender, EventArgs e) {
Label1.Text = "PostBack Occured!";
}
}

 

کنترل FrameBox

این کنترل سفارشی ساخته شد تا به برنامه نویسان اجازه ی نمایش انواع Modal های پنجره برای نشان دادن سایت های داخلی و خارجی در درون آن بدهد. این کنترل خصوصیتی ارائه میدهد که در آن برنامه نویسان میتوانند به صورت داینامیکی چارچوب متن سرتیتر را تغییر دهد. نگاهی به نمونه ی نشان داده شده در زیر بیاندازید:

نمایش پیغام نمونه ی مورد استفاده از کنترل FrameBox

<%@ Register assembly="ProudMonkey.Common.Controls" namespace="ProudMonkey.Common.Controls" tagprefix="cc1" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
•
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
•
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
<cc1:FrameBox ID="FrameBox1" runat="server" />
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="ShowFrameBox('Vinz Blog','http://geekswithblogs.net/dotNETvinz/Default.aspx');returnse;" />
</form>
</body>
</html>

 

سفارشی ساختن ModalBox

سفارشی سازی ظاهری Modal تنها محدود به ورژن جدید کنترل ProudMonkey (ورژن ۲ و ۳ با ASP.NET 4.0). ورژن های جدید چند خصوصیت ارائه میدهد که شما میتوانید سفارشی سازی کنترل های Modal را که شامل سرتیتر و دکمه و رنگ پس زمینه و فونت سر تیتر و غیره میباشد را تنظیم کنید.

MessageBox خصوصیات زیر را ارائه میدهد :

HeaderImageUrl : این ویژگی ImageUrl را به عنوان تصویر پس زمینه در قسمت سر تیتر MessageBox قرار میدهد. به یاد داشته باشید که تصویر باید در اندازه ی ۲*۲۸ باشد زیرا تصویر به صورت افقی تکرار میشود.

HeaderBackgroungColor : این ویژگی رنگ پس زمینه سر تیتر MessageBox را تنظیم میکند. شما میتوانید از این ویژگی در صورتی که نمیخواهید از رنگ پیش فرض سر تیتر استفاده کنید یا نمیخواهید تصویری برای سرتیتر قرار دهید , سود ببرید.

HeaderTextColor : این ویژگی رنگ اصلی متن سرتیتر MessageBox تان را تنظیم میکند.

HeaderTextFont : این ویژگی فونت اصلی متن سرتیتر MessageBox تان را تنظیم میکند.

BodyBackgroungColor : این ویژگی رنگ پس زمینه ی بدنه MessageBox جایی که متن اصلی وارد میشود را تنظیم میکند.

BodyTextColor : این ویژگی رنگ متن اصلی وارد شده در بدنه را تنظیم میکند.

BodyTextFont : این ویژگی فونت متن اصلی وارد شده در بدنه را تنظیم میکند.

OKButtonImageUrl : این ویژگی میتواند یک تصویر را به عنوان پس زمینه در دکمه ی OK تنظیم کند.

CloseButtonImageUrl : این ویژگی میتواند یک تصویر را به عنوان یک پس زمینه در دکمه ی Close تنظیم کند.

به یاد داشته باشید که اگر هیچکدام از خصوصیات تنظیم نشود , استایل های پیش فرض برای آنها در نظر گرفته میشود.

نمونه مورد استفاده

<cc1:MessageBox ID="MessageBox1" runat="server"
HeaderImageUrl="Images/header.png"
HeaderTextColor="White"
HeaderTextFont="Arial Black"
BodyBackgroundColor="#E1E5F0"
BodyTextFont="Tahoma"
BodyTextColor="#263F75"
OKButtonImageUrl="Images/btnOK.jpg"
CloseButtonImageUrl="Images/btnClose.jpg" />

 

خروجی های واقعی

نمایش پیغام نمایش پیغام نمایش پیغام نمایش پیغام ConfirmBox نیز خصوصیات مشابهی مانند MessageBox را ارائه میدهد. تنها خصوصیت اضافه تر اینها هستند :

YesButtonImageUrl : این ویژگی تصویر پس زمینه ای برای دکمه ی Yes تنظیم میکند.

NoButtonImageUrl : این ویژگی تصویر پس زمینه ای برای دکمه ی NO تنظیم میکند.

دوباره اگر شما هیچ خصوصیتی را تنظیم نکنید , استایل های پیش فرض برای هرکدام از آنها تنظیم میشود.

نمونه ی مورد استفاده

<cc1:ConfirmBox ID="ConfirmBox1" runat="server"
YesButtonImageUrl="Images/btnYes.jpg"
NoButtonImageUrl="Images/btnNo.jpg"
CloseButtonImageUrl="Images/btnClose.jpg"
HeaderImageUrl="Images/header.png"
HeaderTextColor="White"
HeaderTextFont="Arial Black" />

 

خروجی واقعی

نمایش پیغام FrameBox ویژگی های زیر را دارد :

HeaderImageUrl : این ویژگی یک تصویر به عنوان پس زمینه در سرتیتر FrameBox تنظیم میکند. به یاد داشته باشید که اندازه تصویر باید ۲*۲۸ باشد زیرا تصویر به صورت افقی تکرار میشود.

HeaderBackgroundColor : این ویژگی رنگ پس زمینه ی سرتیتر FrameBox را تنظیم میکند.

HeaderTextColor : این ویژگی رنگ متن وارد شده در سرتیتر FrameBox را تنظیم میکند.

HeaderTextFont : این ویژگی فونت متن وارد شده در سر تیتر را تنظیم میکند.

CloseButtonImageUrl : این ویژگی آدرس عکسی را که به عنوان پس زمینه ی دکمه ی Close استفاده میشود را تنظیم میکند.

نمونه ی مورد استفاده

<cc1:FrameBox ID="FrameBox1" runat="server"
HeaderImageUrl="Images/header.png"
HeaderTextColor="White"
HeaderTextFont="Arial Black"
CloseButtonImageUrl="Images/btnClose.jpg" />

 

خروجی واقعی

نمایش پیغام

تموم شد ! امیدوارم این کنترل ها برایتان مفید واقع شوند . لطفا اگر باگی مشاهده کردید به بنده اطلاع رسانی کنید. همچنین نظرات و پیشنهادات خود را با من در میان بگذارید.

آیا این مطلب را می پسندید؟
https://www.mspsoft.com/?p=14033
اشتراک گذاری:
واتساپتوییترفیسبوکپینترستلینکدین
داریوش فرخی
داریوش فرخی هستم از سال 92 شروع به یادگیری برنامه نویسی و از سال 93 در بخش برنامه نویسی و تولید محتوای سایت mspsoft.com مشغول هستم. فعالیتم نیز بیشتر در زمینه های برنامه نویسی با سی شارپ و asp.net بوده است. اوقات فراغتم را هم غالبا با تماشای فیلم یا بازی های کامپیوتری پر میکنم .
مطالب بیشتر
برچسب ها:

نظرات

4 نظر در مورد کنترل های سفارشی نمایش پیغام و هشدار برای فرم های ASP.Net

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

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

  1. با عرض سلام من همه کارهای مربوط به message box را انجام دادم ولی اجرا نشد.
    پیغام خطا این است که cc1 را نمی شناسد. لطفا مرا راهنمایی کنید.ممنون

    لایک