0
آموزش نمایش پیغام ها با استفاد از Noty در MVC
آموزش نمایش پیغام ها با استفاد از Noty در MVC
یک از مشکلاتی که ممکن است بعضی از برنامه نویسان داشته باشند، نمایش پیغام ها در صفحات وب می باشد. روش های زیادی برای این کار وجود دارد. روش اول نمایش پیغام ها به صورت جاوااسکرپیتی و با تابع alert و روش دوم نمایش پیغام ها به صورتی Html ی و در مکان ثابت و روش های دیگر که وجود دارد.
اما با استفاده از پلاگین Noty شما می توانید پیغام ها را به صورت کاملا حرفه ای در MVC نمایش دهید که قابلیت نمایش به صورت ایجکسی و هم معمولی را دارد.
روش اول: نمایش پبغام ها در حالت عادی با Noty
اولین کاری که شما باید انجام دهید اضافه کردن پلاگین jquery و jquery noty به صفحه می باشد.
در مثال زیر دو حالت نمایش پیغام ها به صورت معمولی و نمایش پیغام ها به صورت مسیج باکس نوشته شده
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
</head>
<body>
// لینک جی کوئری
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
// لینک نوتی
<script src="~/Scripts/noty/packaged/jquery.noty.packaged.js"></script>
<script language="javascript" type="text/javascript">
generateAlert('success', 'سلام');
generateMessageBox('سلام', 'error', 'topCenter');
// متد نمایش پیغام
function generateAlert(type, message) {
var n = noty({
text: message,// متن پیغام
modal: true,// نمایش به صورت مدل باشد
type: type,// نوع پیغام
dismissQueue: true,// نمایش پیغام ها پشت سرهم باشد یا نه
timeout: 12000, // مدت نمایش پغام قبل از بسته شدن
closeWith: ['click'],// بسته شدن پیغام با کلیک کردن روی آن
layout: 'topCenter',//محل نمایش پیغام
theme: 'defaultTheme',// تم پیش فرض نمایش پیغام ها
maxVisible: 10 // بیشترین تعداد نمایش
});
console.log('html: ' + n.options.id);
}
// این متد یک میسج باکش در صفحه نمایش می دهد
function generateMessageBox(text, type, layout) {
var n = noty({
text: text,// متن پیغام
type: type, // نوع پیغام
modal: true, // نمایش به صورت مدل باشد
dismissQueue: true, // نمایش پیغام ها پشت سرهم باشد یا نه
layout: layout, //محل نمایش پیغام
theme: 'defaultTheme', // تم پیش فرض نمایش پیغام ها
// تعریف دکمه بستن
buttons: [
{
addClass: 'btn btn-primary', text: 'بستن', onClick: function ($noty) {
$noty.close();
}
}
]
});
console.log('html: ' + n.options.id);
}
</script>
</body>
</html>
با نگاه کردن به کدهای بالا متوجه می شوید که ما برای نمایش پیغام ها به صورت معمولی یک متد به نام generateAlert تعریف کردیم و برای نمایش پیغام ها به صورت مسیج باکس یک متد به نام generateMessageBox تعریف کردیم و توضیحات مورد نیاز هم بین کدها نوشته شده است.
نمایش پیغام با noty در MVC
برای نمایش پیغام ها ابتدا یک کلاس به نام MessageBox در پروژه خود ایجاد کنید و کدهای زیر را به آن اضافه کنید.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Web;
using System.Web.Mvc;
/// <summary>
/// کا کلاس میسیج باکس این می باشد که که پیغام ایجاد کرده و به صورت جاوااسکریپت برمیگرداند
/// </summary>
public class MessageBox
{
public static JavaScriptResult Show(string message, MessageType type = MessageType.Alert, bool modal = false, MessageAlignment layout = MessageAlignment.Center, bool dismissQueue = false, int timeOut = 6000)
{
string txt = "$.noty.closeAll(); noty({ text: \"" + message + "\", type: \"" + type.ToString().ToLower() + "\", layout: \"" + ToLowerFirst(layout.ToString()) + "\", dismissQueue: " + dismissQueue.ToString().ToLower() + ", modal: " + modal.ToString().ToLower() + ", timeout: " + timeOut + " });";
return new JavaScriptResult() { Script = txt };
}
/// <summary>
/// کار این متد این است که یک مقدار رشته دریافت می کند و سپس اولین کارکتر آن را به حروف کوچک تبدیل می کند
/// </summary>
/// <param name="str"></param>
/// <returns></returns>
public static string ToLowerFirst(string str)
{
return str.Substring(0, 1).ToLower() + str.Substring(1);
}
}
/// <summary>
/// کلاس جیسون دیتا برای ارسال چندین مقدا به صورت جیسون می باشد
/// نکته: در کلاس جیسون دیتا می توانید به هر تعداد که پراپرتی برای ارسال مقادیر نیاز دارید تعریف کنید
/// </summary>
public class JsonData
{
// با این پراپرتی می توانید یک مقدار اسکریپتی در داخل آن قرار دهید
public string Script { get; set; }
// با این پراپرتی می توانید یک مقدار اچ تی ام الی در داخل آن قرار دهید
public string Html { get; set; }
// با این پراپرتی می توانید وضعیت درخواست را مشخص کنید که آیا با موفقیت بوده یا نه
public bool Success { get; set; }
}
/// <summary>
/// ای نام های که نوع پیغام را مشخص می کند
/// </summary>
public enum MessageType
{
Success,
Error,
Information,
Warning,
Alert,
Notification
}
/// <summary>
/// اینام های که تراز بندی یا محل نمایش پیغام ها در صفحه را مشخص می کند
/// </summary>
public enum MessageAlignment
{
Bottom,
BottomCenter,
BottomLeft,
BottomRight,
Center,
CenterLeft,
CenterRight,
Inline,
Top,
TopCenter,
TopLeft,
TopRight
}
در کدهای بالا هر جای که نیاز به توضیح دارد در بین کدها نوشته شده است.
نمایش پیغام با noty در jquery ajax
فرض کنید ما یک اکشن به نام MvcJqueryAjax به صورت زیر داریم.
#region MvcJqueryAjax
[HttpGet]
public ActionResult MvcJqueryAjax()
{
return View();
}
[HttpPost]
[AjaxOnly]
[ValidateAntiForgeryToken]
public ActionResult MvcJqueryAjax(bool status)
{
// ایجاد 2 ثانیه وقفه
System.Threading.Thread.Sleep(2000);
// بررسی اینکه نوع درخواست ایجکس باشد
if (Request.IsAjaxRequest())
{
if (status)
{
// ارسال اطلاعات به صورت جیسون
return Json(new JsonData()
{
Script = MessageBox.Show("شما تیک چک باکس را زده اید", MessageType.Warning, true, MessageAlignment.Center, false, 7000).Script,
Success = false,
Html = string.Empty,
});
}
else
{
// ارسال اطلاعات به صورت جیسون
return Json(new JsonData()
{
Script = MessageBox.Show("شما تیک چک باکس را نزده اید", MessageType.Warning, true, MessageAlignment.Center, false, 7000).Script,
Success = false,
Html = string.Empty,
});
}
}
else
{
// ارسال پیغام خطا به ویو
return Content("درخواست شما به صورت ایجکس نمی باشد");
}
}
#endregion
در کدهای بالا ابتدا ما یک وقفه 2 ثانیه ایجاد کردیم و سپس بررسی کردیم که نوع درخواست به صورت ایجکس باشد در غیر این صورت خطا به کاربر نمایش می دهیم.
در صورتی که درخواست به صورت ایجکس بود یک شی از کلاس جیسون دیتا ایجاد کردیم و پراپرتی های مورد نظر را مقدار دهی کردیم و توسط جیسون json پاس دادیم.
حال به قسمت View اکشن MvcJqueryAjax و کدهای آن به شکل زیر می باشد.
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Mvc Jquery Ajax</title>
</head>
<body>
<div>
@using (Html.BeginForm("MvcJqueryAjax", "Home", FormMethod.Post))
{
// تصویر نمایش لود ایجکس
<img src="@Url.Content("~/Images/loading1.gif")" alt="ajax loder" id="loadingAnimation" style="display: none;" />
@Html.AntiForgeryToken()
@Html.CheckBox("status")
<input id="submit" type="submit" value="تایید" />
}
</div>
// لینک جی کوئری
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
// لینک نوتی
<script src="~/Scripts/noty/packaged/jquery.noty.packaged.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#submit").click(function (e) {
// غیر فعال کردن عمل دکمه سابمیت
e.preventDefault();
// نمایش دادن تصویر ایجکس لود
$("#loadingAnimation").css("display", "block");
var ajax = {};
ajax.url = "/Home/MvcJqueryAjax";
ajax.type = "POST";// مشخص کردن نوع درخواست
// ارسال وضعیت چک باکش
ajax.data = JSON.stringify({ status: $('#status').is(':checked') });
ajax.datatype = "json";// مشخص کردن نوع داده دریافتی
ajax.contentType = "application/json";
ajax.success = function (result) {
eval(result.Script);
};
ajax.error = function (jqXhr, textStatus, errorThrown) {
// نمایش خطای های اتفاق افتاده
alert(jqXhr + textStatus + errorThrown);
};
ajax.complete = function (jqXhr, textStatus, errorThrown) {
// مخفی کردن تصویر ایجکس لود بعد از تمام شدن درخواست ایجکس
$("#loadingAnimation").css("display", "none");
};
$.ajax(ajax);
});
});
</script>
</body>
</html>
اگر به کدهای بالا نگاه کنید کاری خاصی انجام ندادیم و فقط وضعیت چک باکس که تیک خورد یا نخورده را توسط جیسون که دو حالت True یا False دارد را توسط Ajax به اکشت MvcJqueryAjax ارسال کردیم و نتیجه دریافتی که به صورت آریه ای از جیسون می باشد و برای نمایش پیغام قسمت اسکریپت آن برای ما مهم است توصط eval پیغام را نمایش داده ایم.
نکته: مواری دیگری که توسط جیسون ارسال کردیم می توانید به آن ها دسترسی داشته باشید
نمایش پیغام با noty در MVC Ajax
اکشن MvcAjax همانند اکشن بالای می باشد و هیچ فرقی ندارد.
#region MvcAjax
[HttpGet]
public ActionResult MvcAjax()
{
return View();
}
[HttpPost]
[AjaxOnly]
[ValidateAntiForgeryToken]
public ActionResult MvcAjax(bool status)
{
// ایجاد 2 ثانیه وقفه
System.Threading.Thread.Sleep(2000);
// بررسی اینکه نوع درخواست ایجکس باشد
if (Request.IsAjaxRequest())
{
if (status)
{
// فراخوانی متد مسیج باکس و مقدار دهی آن
return MessageBox.Show("شما تیک چک باکس را زده اید", MessageType.Success, true, MessageAlignment.Center, false, 5000);
}
else
{
// فراخوانی متد مسیج باکس و مقدار دهی آن
return MessageBox.Show("شما تیک چک باکس را نزده اید.", MessageType.Warning, true, MessageAlignment.Center, false, 5000);
}
}
else
{
// ارسال پیغام خطا به ویو
return Content("درخواست شما به صورت ایجکس نمی باشد");
}
}
#endregion
قسمت View اکشن MvcAjax به صورت زیر می باشد
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>MvcAjax</title>
</head>
<body>
<div>
// تام گزینه های که ایجکس آپشن نیاز دارد در اینجا قرار داده شده
@using (Ajax.BeginForm("MvcAjax", "Home", new AjaxOptions { UpdateTargetId = "", HttpMethod = "Post", Url = "/Home/MvcAjax", Confirm = "", InsertionMode = InsertionMode.Replace, LoadingElementDuration = 2000, LoadingElementId = "loadingAnimation", OnComplete = "" }))
{
// تصویر نمایش لود ایجکس
<img src="@Url.Content("~/Images/loading1.gif")" alt="ajax loder" id="loadingAnimation" style="display: none;" />
@Html.AntiForgeryToken()
@Html.CheckBox("status")
<input id="submit" type="submit" value="ارسال" />
}
</div>
// لینک جی کوئری
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
// لینک نوتی
<script src="~/Scripts/noty/packaged/jquery.noty.packaged.js"></script>
// در صورتی که به خواهید با ایجکس خود ام وی سی کار کنید باید این لینک را در هر صفحه ای که با آن کار می کنید قرار دهید
<script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
</body>
</html>
در کدهای بالا کار خاصی انجام ندادیم و فقط از Ajax.BeginForm استفاده کردیم و ورودی های آن را مشخص کردیم.
نکته بسیار مهم این هستش که شما حتما وقتی از ایجکس خود MVC استفاده می کنید باید پلاکین jquery.unobtrusive-ajax را در صفحه خود داشته باشید در غیر این صورت MVC Ajax شما کار نخواهد کرد.
و نکته آخر که ما یک اتربیوت اختصاصی به صورت زیر ایجاد کردیم تا در بالای اکشن های مشخص کنیم که درخواست برای این اکشن حتما به صورت Ajax ی باشد.
using System;
using System.Web.Mvc;
namespace MVCNoty.Infrastructure
{
/// <summary>
/// کار این کلاس بررسی نوع درخواست به اکشن که باید به صورت ایجکس باشد
/// </summary>
[AttributeUsage(AttributeTargets.Class | AttributeTargets.Method)]
public sealed class AjaxOnlyAttribute : ActionFilterAttribute
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
if (filterContext.HttpContext.Request.IsAjaxRequest())
{
base.OnActionExecuting(filterContext);
}
else
{
throw new InvalidOperationException("This operation can only be accessed via Ajax requests");
}
}
}
}
در آموزش های بعدی نحوه نمایش پیغام ها از یک اکشن به اکشن را آموزش خواهیم داد.
این مطلب را به اشتراک بگذارید...
نظر / سوال