نظرات اشتراکها
چرا لینک سایت اصلی را گذاشته اید ، ایا واقعا فکر میکنید میتوان درخود github براحتی این متن فارسی را پیدا کرد که کدام پروژه بوده است؟ لینک دقیق بگذارید لطفا
در این مقاله قصد دارم شمارو را با امکانات لایبرری "ری اکت انگرید " برای ری اکت جی اس آشنا کنم. این لایبرری شامل یک کامپوننت گرید با قابلیتهای زیر هست:
3- در نهایت کامپوننت مورد نظر:
نمایی از گرید:
1-ساپورت راست به چپ
2- نمایش پیجینگ
3- نمایش لودر
4- امکان تغییر کلمات
5- امکان جاگذاری کامپوننت در هر سل
نحوه استفاده از این کامپوننت به این شکل هست:
1- تعریف ستونها:
2- تعریف استیتهای لازم برا ست کردن سطر ها، لودر، تعداد کل, شماره صفحه و بزرگی هر صفحه(دقت شود که امکان استفاده بدون پیجینگ هم وجود دارد و امکانات کامل را در لینک لایبرری میتوانید مطالعه نمایید)
نحوه استفاده از این کامپوننت به این شکل هست:
1- تعریف ستونها:
const columns = [ { field: "fullname", headerName: "First & last Name", description: "name of user", width: 50, }, { field: "age", headerName: "Age", description: "age of user", width: 50, renderCell:(info)=><strong>Age is : {info.data.age}</strong> } ]
2- تعریف استیتهای لازم برا ست کردن سطر ها، لودر، تعداد کل, شماره صفحه و بزرگی هر صفحه(دقت شود که امکان استفاده بدون پیجینگ هم وجود دارد و امکانات کامل را در لینک لایبرری میتوانید مطالعه نمایید)
... const [rows,setRows] = useState([]); const [loading,setLoading] = useState(false); const [totalCount,setTotalCount] = useState(0);
const [filter,setFilter] = useState({ pageSize:10, pageNumber:1 });
const _fetchData = async () => { if (!active) return; //mock api, you can call your api then set data to table like commented line below return new Promise((resolve) => { setLoading(true); setTimeout(() => { setRows(data);// SetRows, note that data comes from api and must be array of objects setTotalCount(7);//=== set total page size for pagination part resolve(); setLoading(false); }, 2000); }); }
import Angrid from "rect-angrid"; ... _handlePageChange = (newPage)=>{ setFilter(p=>({...p,pageNumber:newPage})) } ... <AnGrid loading={loading} columns={columns} rows={rows} showRowNumber={true} pageSize={filter.pageSize} pageNumber={filter.pageNumber} totalCount={totalCount} onPageChange={_handlePageChange} theme="dark" minHeight={300} emptyList={<strong>There Is No Info</strong>} />
در قسمت قبل بحث Style و Font را بررسی کردیم. در این قسمت قصد بررسی Animationها را داریم. Animation خود دارای دو قسمت است:
1- استفاده از Xamanimation
2- استفاده از Lottie
Xamanimation به شما کمک میکند تا در Xaml، انیمیشنهای خود را تعریف کنید. پس از نصب Package مربوطه، میتوانید مثال زیر را تست کنید:
<Button x:Name="DeleteButton" BackgroundColor="Orange" Text="Delete"> <Button.Triggers> <EventTrigger Event="Clicked"> <bitView:SetPropertyAction Property="BackgroundColor" Value="Red" /> <xamAnimation:BeginAnimation> <xamAnimation:BeginAnimation.Animation> <xamAnimation:ColorAnimation Target="{x:Reference DeleteButton}" ToColor="Orange" Duration="1000" /> </xamAnimation:BeginAnimation.Animation> </xamAnimation:BeginAnimation> </EventTrigger> </Button.Triggers> </Button>
در برخی مواقع Animationها به سادگی تغییر رنگ و Opacity و موقعیت اشیاء نیستند؛ اگر چه با ترکیب کردن همانها هم میتوان کلی کارهای جالب کرد. برای انیمیشنهای پیچیدهتر میشود از Adobe After Effects استفاده کرد. پس از ساخت انیمیشن مربوطه، با استفاده از Lottie انیمیشن به یک فایل JSON تبدیل میشود. دقت کنید که Animationهای After Effects به صورت فیلم و Gif نیستند، بلکه در آنها توصیف یک Animation ذخیره میشود که این یک نقطه قدرت After Effects است. در سایت Lottiefiles می توانید تعداد زیادی از این JSONهای آماده را دانلود کنید.
برای شروع ابتدا نسخه 2.6.3 پکیج Com.Airbnb.Xamarin.Forms.Lottie را روی پروژه نصب میکنیم. ما برای تست، از این JSON استفاده کردهایم و آن را در مسیرهای زیر قرار دادهایم:
XamApp.Android/Assets/Animations/LottieLogo1.json
XamApp.UWP/Assets/Animations/LottieLogo1.json
XamApp.iOS/Assets/Animations/LottieLogo1.json
البته همانند فونتها، برای این که یک فایل را سه بار در سورس کنترلر کپی نکنیم، از روش Add as link استفاده کردهایم.
سپس از کد زیر برای نمایش فایل مربوطه استفاده میکنیم:
<lottie:AnimationView Animation="{OnPlatform UWP='Assets/Animations/LottieLogo1.json', Android='Animations/LottieLogo1.json', iOS='Animations/LottieLogo1.json'}" AutoPlay="True" HeightRequest="500" HorizontalOptions="Center" Loop="True" VerticalOptions="Center" WidthRequest="500" />
در این قسمت قصد داریم با نحوه پیاده سازی امتیاز دهی ستارهای به مطالب، که نمونهای از آنرا در سایت جاری در قسمتهای مختلف آن مشاهده میکنید، آشنا شویم.
مدل برنامه
در ابتدای کار نیاز است تا ساختاری را جهت ارائه لیستی از مطالب که دارای گزینه امتیاز دهی میباشند، تهیه کنیم:
اگر با EF Code first آشنا باشید، خاصیت Rating تعریف شده در اینجا میتواند از نوع ComplexType تعریف شود که شامل جمع امتیازهای داده شده، تعداد کل رای دهندهها و همچنین میانگین امتیازهای حاصل است.
منبع داده فرضی برنامه
در این مثال نیز از یک منبع داده فرضی تشکیل شده در حافظه استفاده خواهیم کرد تا امکان اجرای پروژه پیوستی را بدون نیاز به بانک اطلاعاتی خاصی و بدون نیاز به مقدمات برپایی آن، به سادگی داشته باشید.
در این منبع داده ابتدا لیستی از مطالب تهیه شده و سپس کش میشوند. در ادامه توسط متد GetLatestBlogPosts بازهای از این اطلاعات قابل بازیابی خواهند بود که برای استفاده در حالات صفحه بندی اطلاعات بهینه سازی شده است.
آشنایی با طراحی افزونه jQuery Star Rating
افزودن CSS نمایش امتیازها در ذیل هر مطلب
برای نمایش ستارهها و کار با تصویر Images/star_rating.png (که در پروژه پیوست قرار دارد) ابتدا نیاز است CSS فوق را به پروژه خود اضافه نمائید.
افزودن افزونه jQuery Star rating
اطلاعات فوق، فایل jquery.StarRating.js را تشکیل میدهند که باید به پروژه اضافه گردند.
کاری که این افزونه انجام میدهد ردیابی حرکت ماوس بر روی ستارههای نمایش داده شده و سپس ارسال سه پارامتر ذیل به اکشن متدی که توسط پارامتر postInfoUrl مشخص میگردد، پس از کلیک کاربر میباشد:
همانطور که ملاحظه میکنید به ازای هر قطعه رای گیری که به صفحه اضافه میشود، Id مطلب، رای داده شده و نام قسمت جاری، به اکشن متدی خاص ارسال خواهند گردید. sectionType از این جهت اضافه گردیده است تا بتوانید با بیش از یک جدول کار کنید و از این افزونه در قسمتهای مختلف سایت به سادگی بتوانید استفاده نمائید.
در اینجا از errorHandler برای نمایش خطاها، از completeHandler برای نمایش تشکر به کاربر و از onlyOneTimeHandler برای نمایش اخطار مثلا «یکبار بیشتر مجاز نیستید به ازای یک مطلب رای دهید»، میتوان استفاده کرد.
بنابراین تا اینجا فایل layout برنامه تقریبا چنین مداخلی را خواهد داشت:
طراحی یک HTML helper برای نمایش ستارههای امتیاز دهی
ابتدا پوشه استاندارد app_code را به پروژه اضافه کرده و سپس فایلی را به نام StarRatingHelper.cshtml، با محتوای ذیل به آن اضافه نمائید:
از این Html helper برای تشکیل ساختار نمایش قطعه امتیاز دهی به یک مطلب استفاده خواهیم کرد که توسط افزونه جیکوئری فوق ردیابی میشود.
کنترلر ذخیره سازی اطلاعات دریافتی برنامه
در اینجا کنترلری را که کار پردازش کلیک کاربر را بر روی امتیازی خاص انجام میدهد، ملاحظه میکنید.
امضای اکشن متد SaveRatings دقیقا بر اساس سه پارامتر ارسالی توسط jquery.StarRating.js که پیشتر توضیح داده شد، تعیین گردیده است. در این متد ابتدا بررسی میشود که آیا اطلاعاتی دریافت شده است یا خیر. اگر خیر، null را بازگشت خواهد داد. سپس توسط متد CanUserVoteBasedOnCookies بررسی میشود که آیا کاربر میتواند (خصوصا مجددا) رای دهد یا خیر. این افزونه برای رای دهی کاربران وارد نشده به سیستم نیز مناسب است. به همین جهت از کوکیها برای ثبت اطلاعات رای دادن کاربران استفاده گردیده است. پیاده سازی متد CanUserVoteBasedOnCookies را در ادامه ملاحظه خواهید نمود.
در ادامه در متد SaveRatings، یک switch تشکیل شده است تا بر اساس نام قسمت مرتبط به رای گیری، اطلاعات را بتوان به سرویس خاصی در برنامه هدایت کرد. مثلا اطلاعات قسمت مطالب به سرویس مطالب و قسمت نظرات به سرویس نظرات هدایت شوند.
متدهایی برای کار با کوکیها در ASP.NET MVC
در اینجا یک سری متد الحاقی را ملاحظه میکنید که برای ثبت اطلاعات رای داده شده یک کاربر بر اساس Id مطلب و نام قسمت متناظر با آن در یک کوکی طراحی شدهاند. بدیهی است اگر تمام قسمتهای برنامه شما محافظت شده هستند و کاربران حتما نیاز است ابتدا به سیستم لاگین نمایند، میتوانید این قسمت را حذف کرده و اطلاعات postId و SectionType را به ازای هر کاربر، جداگانه در بانک اطلاعاتی ثبت و بازیابی نمائید (دقیقترین حالت ممکن؛ البته برای سیستمی بسته که حتما تمام قسمتهای آن نیاز به اعتبار سنجی دارند).
پیشنهادی در مورد نحوه ذخیره سازی اطلاعات دریافتی
همانطور که عنوان شد، سه داده Id مطلب، رای داده شده و نام قسمت متناظر به اکشن متد ارسال میشود. از نام قسمت، برای انتخاب سرویس ذخیره سازی اطلاعات استفاده خواهیم کرد. این سرویس میتواند شامل متدی به نام SaveRating، همانند کدهای فوق باشد که Id مطلب و عدد رای حاصل به آن ارسال میگردند. ابتدا بر اساس این Id، مطلب متناظر یافت شده و سپس اطلاعات Rating آن به روز خواهد شد. در پایان هم ذخیره سازی اطلاعات باید صورت گیرد.
Viewهای برنامه
قسمت پایانی کار ما در اینجا تهیه دو View است:
الف) یک Partial view که لیست مطالب را به همراه گزینه رای دهی به آنها رندر میکند.
ب) View کاملی که از این Partial View استفاده کرده و همچنین افزونه jquery.StarRating.js را فراخوانی میکند.
کدهای _ItemsList.cshtml را در اینجا ملاحظه میکند که در آن نحوه فراخوانی متد کمکی StarRatingHelper.AddStarRating ذکر شده است.
اگر به کدهای آن دقت کنید از Regex.Replace برای حذف فاصلههای خالی و خطوط جدید بین تگها استفاده گردیده است. اگر اینکار انجام نشود، نیمههای ستارههای نمایش داده شده، با فاصله از یکدیگر رندر میشوند که صورت خوشایندی ندارد.
و نهایتا View ایی که از این اطلاعات استفاده میکنید ساختار زیر را خواهد داشت:
در این View لیستی از مطالب دریافت و به partial view طراحی شده برای نمایش ارسال میشود. سپس افزونه StarRating نیز تنظیم و به صفحه اضافه خواهد گردید. نکته مهم آن تعیین صحیح اکشن متدی است که قرار است اطلاعات را دریافت کند و نحوه مقدار دهی آنرا توسط متغیر postInfoUrl مشاهده میکنید.
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample03.zip
مدل برنامه
در ابتدای کار نیاز است تا ساختاری را جهت ارائه لیستی از مطالب که دارای گزینه امتیاز دهی میباشند، تهیه کنیم:
namespace jQueryMvcSample03.Models { public class BlogPost { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } /// <summary> /// اطلاعات رای گیری یک مطلب به صورت یک خاصیت تو در تو یا پیچیده /// </summary> public Rating Rating { set; get; } public BlogPost() { Rating = new Rating(); } } }
namespace jQueryMvcSample03.Models { //[ComplexType] public class Rating { public double? TotalRating { get; set; } public int? TotalRaters { get; set; } public double? AverageRating { get; set; } } }
منبع داده فرضی برنامه
using System.Collections.Generic; using System.Linq; using jQueryMvcSample03.Models; namespace jQueryMvcSample03.DataSource { /// <summary> /// منبع داده فرضی /// </summary> public static class BlogPostDataSource { private static IList<BlogPost> _cachedItems; /// <summary> /// با توجه به استاتیک بودن سازنده کلاس، تهیه کش، پیش از سایر فراخوانیها صورت خواهد گرفت /// باید دقت داشت که این فقط یک مثال است و چنین کشی به معنای /// تهیه یک لیست برای تمام کاربران سایت است /// </summary> static BlogPostDataSource() { _cachedItems = createBlogPostsInMemoryDataSource(); } /// <summary> /// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است /// </summary> private static IList<BlogPost> createBlogPostsInMemoryDataSource() { var results = new List<BlogPost>(); for (int i = 1; i < 30; i++) { results.Add(new BlogPost { Id = i, Title = "عنوان " + i, Body = "متن ... متن ... متن " + i, Rating = new Rating { TotalRaters = i + 1, AverageRating = 3.5 } }); } return results; } /// <summary> /// پارامترهای شماره صفحه و تعداد رکورد به ازای یک صفحه برای صفحه بندی نیاز هستند /// شماره صفحه از یک شروع میشود /// </summary> public static IList<BlogPost> GetLatestBlogPosts(int pageNumber, int recordsPerPage = 4) { var skipRecords = pageNumber * recordsPerPage; return _cachedItems .OrderByDescending(x => x.Id) .Skip(skipRecords) .Take(recordsPerPage) .ToList(); } } }
در این منبع داده ابتدا لیستی از مطالب تهیه شده و سپس کش میشوند. در ادامه توسط متد GetLatestBlogPosts بازهای از این اطلاعات قابل بازیابی خواهند بود که برای استفاده در حالات صفحه بندی اطلاعات بهینه سازی شده است.
آشنایی با طراحی افزونه jQuery Star Rating
افزودن CSS نمایش امتیازها در ذیل هر مطلب
/* star rating system */ .post_rating { direction: ltr; } .rating { text-indent: -99999px; overflow: hidden; background-repeat: no-repeat; display: inline-block; width: 8px; height: 16px; } .rating.stars { background-image: url('Images/star_rating.png'); } .rating.stars.active { cursor: pointer; } .star-left_off { background-position: -0px -0px; } .star-left_on { background-position: -16px -0px; } .star-right_off { background-position: -8px -0px; } .star-right_on { background-position: -24px -0px; }
افزودن افزونه jQuery Star rating
// <![CDATA[ (function ($) { $.fn.StarRating = function (options) { var defaults = { ratingStarsSpan: '.rating.stars', postInfoUrl: '/', loginUrl: '/login', errorHandler: null, completeHandler: null, onlyOneTimeHandler: null }; var options = $.extend(defaults, options); return this.each(function () { var ratingStars = $(this); $(ratingStars).unbind('mouseover'); $(ratingStars).mouseover(function () { var span = $(this).parent("span"); var newRating = $(this).attr("value"); setRating(span, newRating); }); $(ratingStars).unbind('mouseout'); $(ratingStars).mouseout(function () { var span = $(this).parent("span"); var rating = span.attr("rating"); setRating(span, rating); }); $(ratingStars).unbind('click'); $(ratingStars).click(function () { var span = $(this).parent("span"); var newRating = $(this).attr("value"); var text = span.children("span"); var pID = span.attr("post"); var type = span.attr("sectiontype"); postData({ postID: pID, rating: newRating, sectionType: type }); span.attr("rating", newRating); setRating(span, newRating); }); function setRating(span, rating) { span.find(options.ratingStarsSpan).each(function () { var value = parseFloat($(this).attr("value")); var imgSrc = $(this).attr("class"); if (value <= rating) $(this).attr("class", imgSrc.replace("_off", "_on")); else $(this).attr("class", imgSrc.replace("_on", "_off")); }); } function postData(dataJsonArray) { $.ajax({ type: "POST", url: options.postInfoUrl, data: JSON.stringify(dataJsonArray), contentType: "application/json; charset=utf-8", dataType: "json", complete: function (xhr, status) { var data = xhr.responseText; if (xhr.status == 403) { window.location = options.loginUrl; } else if (status === 'error' || !data) { if (options.errorHandler) options.errorHandler(this); } else if (data == "nok") { if (options.onlyOneTimeHandler) options.onlyOneTimeHandler(this); } else { if (options.completeHandler) options.completeHandler(this); } } }); } }); }; })(jQuery); // ]]>
کاری که این افزونه انجام میدهد ردیابی حرکت ماوس بر روی ستارههای نمایش داده شده و سپس ارسال سه پارامتر ذیل به اکشن متدی که توسط پارامتر postInfoUrl مشخص میگردد، پس از کلیک کاربر میباشد:
{ postID: pID, rating: newRating, sectionType: type }
در اینجا از errorHandler برای نمایش خطاها، از completeHandler برای نمایش تشکر به کاربر و از onlyOneTimeHandler برای نمایش اخطار مثلا «یکبار بیشتر مجاز نیستید به ازای یک مطلب رای دهید»، میتوان استفاده کرد.
بنابراین تا اینجا فایل layout برنامه تقریبا چنین مداخلی را خواهد داشت:
<head> <title>@ViewBag.Title</title> <link href="@Url.Content("Content/starRating.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("Content/Site.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/jquery-1.9.1.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> <script src="@Url.Content("~/Scripts/jquery.StarRating.js")" type="text/javascript"></script> @RenderSection("JavaScript", required: false) </head>
طراحی یک HTML helper برای نمایش ستارههای امتیاز دهی
ابتدا پوشه استاندارد app_code را به پروژه اضافه کرده و سپس فایلی را به نام StarRatingHelper.cshtml، با محتوای ذیل به آن اضافه نمائید:
@using System.Globalization @helper AddStarRating(int postId, double? average = 0, int? postRatingsCount = 0, string type = "BlogPost", string tooltip = "لطفا جهت رای دادن کلیک نمائید") { string actIt = "active "; if (!average.HasValue) { average = 0; } if (!postRatingsCount.HasValue) { postRatingsCount = 0; } <span class='postRating' rating='@average' post='@postId' title='@tooltip' sectiontype='@type'> @for (double i = .5; i <= 5.0; i = i + .5) { string left; if (i <= average) { left = (i * 2) % 2 == 1 ? "left_on" : "right_on"; } else { left = (i * 2) % 2 == 1 ? "left_off" : "right_off"; } <span class='rating stars @(actIt)star-@left' value='@i'></span> } @if (postRatingsCount > 0) { var ratingInfo = string.Format(CultureInfo.InvariantCulture, "امتیاز {0:0.00} از 5 توسط {1} نفر", average, postRatingsCount); <span>@ratingInfo</span> } else { <span></span> } </span> }
کنترلر ذخیره سازی اطلاعات دریافتی برنامه
using System.Web.Mvc; using System.Web.UI; using jQueryMvcSample03.DataSource; using jQueryMvcSample03.Security; namespace jQueryMvcSample03.Controllers { public class HomeController : Controller { public ActionResult Index() { var postsList = BlogPostDataSource.GetLatestBlogPosts(pageNumber: 0); return View(postsList); //نمایش صفحه اصلی } [HttpPost] [AjaxOnly] [OutputCache(Location = OutputCacheLocation.None, NoStore = true)] public ActionResult SaveRatings(int? postId, double? rating, string sectionType) { if (postId == null || rating == null || string.IsNullOrWhiteSpace(sectionType)) return Content(null); //اعلام بروز خطا if (!this.HttpContext.CanUserVoteBasedOnCookies(postId.Value, sectionType)) return Content("nok"); //اعلام فقط یکبار مجاز هستید رای دهید switch (sectionType) //قسمتهای مختلف سایت که در جداول مختلفی قرار دارند نیز میتوانند گزینه امتیاز دهی داشته باشند { case "BlogPost": //الان شماره مطلب و رای ارسالی را داریم که میتوان نسبت به ذخیره آن اقدام کرد //مثلا //_blogPostsService.SaveRating(postId.Value, rating.Value); break; //... سایر قسمتهای دیگر سایت default: return Content(null); //اعلام بروز خطا } return Content("ok"); //اعلام موفقیت آمیز بودن ثبت اطلاعات } [HttpGet] public ActionResult Post(int? id) { if (id == null) return Redirect("/"); //todo: show the content here return Content("Post " + id.Value); } } }
امضای اکشن متد SaveRatings دقیقا بر اساس سه پارامتر ارسالی توسط jquery.StarRating.js که پیشتر توضیح داده شد، تعیین گردیده است. در این متد ابتدا بررسی میشود که آیا اطلاعاتی دریافت شده است یا خیر. اگر خیر، null را بازگشت خواهد داد. سپس توسط متد CanUserVoteBasedOnCookies بررسی میشود که آیا کاربر میتواند (خصوصا مجددا) رای دهد یا خیر. این افزونه برای رای دهی کاربران وارد نشده به سیستم نیز مناسب است. به همین جهت از کوکیها برای ثبت اطلاعات رای دادن کاربران استفاده گردیده است. پیاده سازی متد CanUserVoteBasedOnCookies را در ادامه ملاحظه خواهید نمود.
در ادامه در متد SaveRatings، یک switch تشکیل شده است تا بر اساس نام قسمت مرتبط به رای گیری، اطلاعات را بتوان به سرویس خاصی در برنامه هدایت کرد. مثلا اطلاعات قسمت مطالب به سرویس مطالب و قسمت نظرات به سرویس نظرات هدایت شوند.
متدهایی برای کار با کوکیها در ASP.NET MVC
using System; using System.Web; namespace jQueryMvcSample03.Security { public static class CookieHelper { public static bool CanUserVoteBasedOnCookies(this HttpContextBase httpContext, int postId, string sectionType) { string key = sectionType + "-" + postId; var value = httpContext.GetCookieValue(key); if (string.IsNullOrWhiteSpace(value)) { httpContext.AddCookie(key, key); return true; } return false; } public static void AddCookie(this HttpContextBase httpContextBase, string cookieName, string value) { httpContextBase.AddCookie(cookieName, value, DateTime.Now.AddDays(30)); } public static void AddCookie(this HttpContextBase httpContextBase, string cookieName, string value, DateTime expires) { var cookie = new HttpCookie(cookieName) { Expires = expires, Value = httpContextBase.Server.UrlEncode(value) // For Cookies and Unicode characters }; httpContextBase.Response.Cookies.Add(cookie); } public static string GetCookieValue(this HttpContextBase httpContext, string cookieName) { var cookie = httpContext.Request.Cookies[cookieName]; if (cookie == null) return string.Empty; //cookie doesn't exist // For Cookies and Unicode characters return httpContext.Server.UrlDecode(cookie.Value); } } }
پیشنهادی در مورد نحوه ذخیره سازی اطلاعات دریافتی
using jQueryMvcSample03.Models; namespace jQueryMvcSample03.DataSource { public interface IBlogPostsService { void SaveRating(int postId, double rating); } public class SampleService : IBlogPostsService { /// <summary> /// یک نمونه از متد ذخیره سازی اطلاعات پیشنهادی /// فقط برای ایده گرفتن /// بدیهی است محل قرارگیری اصلی آن در لایه سرویس برنامه شما خواهد بود /// </summary> public void SaveRating(int postId, double rating) { BlogPost post = null; //post = _blogCtx.Find(postId); // بر اساس شماره مطلب، مطلب یافت شده و فیلدهای آن تنظیم میشوند if (post == null) return; if (!post.Rating.TotalRaters.HasValue) post.Rating.TotalRaters = 0; if (!post.Rating.TotalRating.HasValue) post.Rating.TotalRating = 0; if (!post.Rating.AverageRating.HasValue) post.Rating.AverageRating = 0; post.Rating.TotalRaters++; post.Rating.TotalRating += rating; post.Rating.AverageRating = post.Rating.TotalRating / post.Rating.TotalRaters; // todo: call save changes at the end. } } }
Viewهای برنامه
قسمت پایانی کار ما در اینجا تهیه دو View است:
الف) یک Partial view که لیست مطالب را به همراه گزینه رای دهی به آنها رندر میکند.
ب) View کاملی که از این Partial View استفاده کرده و همچنین افزونه jquery.StarRating.js را فراخوانی میکند.
@using System.Text.RegularExpressions @model IList<jQueryMvcSample03.Models.BlogPost> <ul> @foreach (var item in Model) { <li> <fieldset> <legend>مطلب @item.Id</legend> <h5> @Html.ActionLink(linkText: item.Title, actionName: "Post", controllerName: "Home", routeValues: new { id = item.Id }, htmlAttributes: null) </h5> @item.Body <div class="post_rating"> @Html.Raw(Regex.Replace(@StarRatingHelper.AddStarRating(item.Id, item.Rating.AverageRating, item.Rating.TotalRaters, "BlogPost").ToHtmlString(), @">\s+<", "><")) </div> </fieldset> </li> } </ul>
اگر به کدهای آن دقت کنید از Regex.Replace برای حذف فاصلههای خالی و خطوط جدید بین تگها استفاده گردیده است. اگر اینکار انجام نشود، نیمههای ستارههای نمایش داده شده، با فاصله از یکدیگر رندر میشوند که صورت خوشایندی ندارد.
و نهایتا View ایی که از این اطلاعات استفاده میکنید ساختار زیر را خواهد داشت:
@model IList<jQueryMvcSample03.Models.BlogPost> @{ ViewBag.Title = "Index"; var postInfoUrl = Url.Action(actionName: "SaveRatings", controllerName: "Home"); } <h2> سیستم امتیاز دهی</h2> @{ Html.RenderPartial("_ItemsList", Model); } @section JavaScript { <script type="text/javascript"> $(document).ready(function () { $(".rating.stars.active").StarRating({ ratingStarsSpan: '.rating.stars', postInfoUrl: '@postInfoUrl', loginUrl: '/login', errorHandler: function () { alert('خطایی رخ داده است'); }, completeHandler: function () { alert('با تشکر! رای شما با موفقیت ثبت شد'); }, onlyOneTimeHandler: function () { alert('فقط یکبار میتوانید به ازای هر مطلب رای دهید'); } }); }); </script> }
دریافت کدها و پروژه کامل این قسمت
jQueryMvcSample03.zip
چه خطایی دریافت کردید؟ در مرورگر دکمهی F12 را فشار دهید تا developer tools آن باز شود. سپس در برگهی console آن، لیست خطاها ذکر میشوند و یا در برگهی network هم یکسری از درخواستها با رنگ قرمز مشخص میشوند. اگر بر روی هر کدام دوبار کلیک کنید، جزئیات آنها نمایش داده خواهند شد و یا اگر در همینجا response را هم مشاهده کنید، ممکن است به همراه خروجی خطای سمت سرور هم باشد. به علاوه اگر برنامه را از طریق دستور dotnet run اجرا میکنید، کنسول باز شده، خطاهای سمت سرور را لاگ میکند و یا اگر از ادیتور خاصی استفاده میکنید، خطاهای مرتبط در برگهی debug آنها ظاهر میشوند.
تعدادی از منابع داده پیش فرض PdfReport جهت کار مستقیم با بانکهای اطلاعاتی مختلف، کوئری نوشتن و نمایش نتایج آنها طراحی شدهاند.
در این بین با توجه به اینکه دات نت پشتیبانی توکاری از SQL Server دارد، اتصال و استفاده از توانمندیهای آن نیاز به کتابخانه جانبی خاصی ندارد. اما برای کار با بانکهای اطلاعاتی دیگر نیاز خواهد بود تا پروایدر ADO.NET آنها را تهیه و به برنامه اضافه کنیم.
چهار نمونه از منابع داده پیش فرضی که در متد MainTableDataSource قابل تعریف هستند به شرح زیر میباشند:
SqlDataReader برای کار با بانکهای اطلاعاتی SQL Server بهینه سازی شده است.
AccessDataReader قابلیت اتصال به بانکهای اطلاعاتی اکسس جدید (فایلهای accdb) و اکسس قدیم (فایلهای mdb) را دارد.
OdbcDataReader یک پروایدر عمومی است که از روز اول دات نت به همراه آن بوده است. برای مثال جهت اتصال به بانکهای اطلاعاتی فاکسپرو میتواند مورد استفاده قرار گیرد.
اما ... برای مابقی بانکهای اطلاعاتی چطور؟
برای سایر بانکهای اطلاعاتی، منبع داده عمومی زیر تدارک دیده شده است:
تنها تفاوت آن با نمونههای قبل، ذکر providerName آن است. برای مثال جهت اتصال به SQLite ابتدا پروایدر مخصوص ADO.NET آنرا دریافت و به پروژه خود اضافه نمائید. سپس پارامتر providerName فوق را با "System.Data.SQLite" مقدار دهی کنید.
یک نکته:
در تمام منابع داده فوق، امکان نوشتن کوئریهای پارامتری نیز پیش بینی شده است. فقط باید دقت داشت که پارامترهای معرفی شده باید با @ شروع شوند که یک نمونه از آنرا در مثال جاری ملاحظه خواهید نمود.
در ادامه نحوه تهیه گزارش از یک بانک اطلاعاتی SQLite را توسط PdfReport بررسی خواهیم کرد:
توضیحات:
- در مثال فوق نحوه استفاده از یک بانک اطلاعاتی SQLite را ملاحظه میکنید. این بانک اطلاعاتی نمونه در پوشه bin\data سورس به روز شده پروژه موجود است.
فرض بر این است که فایلهای System.Data.SQLite.dll و SQLite.Interop.dll را از سایت SQLite دریافت کرده و سپس ارجاعی را به اسمبلی System.Data.SQLite.dll به پروژه خود افزودهاید.
در مرحله بعد به کمک GenericDataReader میتوان به این پروایدر دسترسی یافت. همانطور که ملاحظه میکنید یک کوئری پارامتری با مقدار پارامتر مساوی 10 جهت تهیه گزارش، تعریف شده است.
همچنین باید دقت داشت که اگر پروژه جاری شما مبتنی بر دات نت 4 است، نیاز خواهید داشت چند سطر زیر را به فایل config برنامه اضافه نمائید تا با SQLite مشکلی نداشته باشد:
- مرحله بعد نوبت به معرفی ستونهای گزارش است. هر ستون، معادل یک فیلد معرفی شده در کوئری SQL ارسال شده به GenericDataReader خواهد بود (کوچکی و بزرگی حروف باید در اینجا رعایت شوند).
- در حین معرفی ستون AddDate، نحوه نمایش و تبدیل تاریخ دریافتی که با فرمت DateTime است را به تاریخ شمسی ملاحظه میکنید. متد PersianDate.ToPersianDateTime در فضای نام PdfRpt.Core.Helper قرار دارد. توسط DisplayFormatFormula، فرصت خواهید داشت مقدار متناظر با سلول در حال رندر را پیش از نمایش، به هر نحو دلخواهی فرمت کنید.
- در ستون url از قالب نمایشی پیش فرض Hyperlink، برای نمایش اطلاعات فیلد جاری به صورت یک لینک قابل کلیک استفاده شده است.
یک نکته:
ذکر قسمت MainTableColumns و تمام تعاریف مرتبط با آن در PdfReports اختیاری است. به این معنا که میتوانید قسمت گزارش سازی و تعاریف گزارشات برنامه خود را پویا کنید (شبیه به حالت auto generate columns در گریدهای معروف). کوئریهای SQL متناظر با گزارشات را در بانک اطلاعاتی ذخیره کنید و به گزارش ساز فوق ارسال نمائید. حاصل یک گزارش جدید است.
در این بین با توجه به اینکه دات نت پشتیبانی توکاری از SQL Server دارد، اتصال و استفاده از توانمندیهای آن نیاز به کتابخانه جانبی خاصی ندارد. اما برای کار با بانکهای اطلاعاتی دیگر نیاز خواهد بود تا پروایدر ADO.NET آنها را تهیه و به برنامه اضافه کنیم.
چهار نمونه از منابع داده پیش فرضی که در متد MainTableDataSource قابل تعریف هستند به شرح زیر میباشند:
public void SqlDataReader(string connectionString, string sql, params object[] parametersValues) //.mdb or .accdb files public void AccessDataReader(string filePath, string password, string sql, params object[] parametersValues) public void OdbcDataReader(string connectionString, string sql, params object[] parametersValues)
AccessDataReader قابلیت اتصال به بانکهای اطلاعاتی اکسس جدید (فایلهای accdb) و اکسس قدیم (فایلهای mdb) را دارد.
OdbcDataReader یک پروایدر عمومی است که از روز اول دات نت به همراه آن بوده است. برای مثال جهت اتصال به بانکهای اطلاعاتی فاکسپرو میتواند مورد استفاده قرار گیرد.
اما ... برای مابقی بانکهای اطلاعاتی چطور؟
برای سایر بانکهای اطلاعاتی، منبع داده عمومی زیر تدارک دیده شده است:
public void GenericDataReader(string providerName, string connectionString, string sql, params object[] parametersValues)
یک نکته:
در تمام منابع داده فوق، امکان نوشتن کوئریهای پارامتری نیز پیش بینی شده است. فقط باید دقت داشت که پارامترهای معرفی شده باید با @ شروع شوند که یک نمونه از آنرا در مثال جاری ملاحظه خواهید نمود.
در ادامه نحوه تهیه گزارش از یک بانک اطلاعاتی SQLite را توسط PdfReport بررسی خواهیم کرد:
using System; using PdfRpt.Core.Contracts; using PdfRpt.Core.Helper; using PdfRpt.FluentInterface; namespace PdfReportSamples.SQLiteDataReader { public class SQLiteDataReaderPdfReport { public IPdfReportData CreatePdfReport() { return new PdfReport().DocumentPreferences(doc => { doc.RunDirection(PdfRunDirection.RightToLeft); doc.Orientation(PageOrientation.Portrait); doc.PageSize(PdfPageSize.A4); doc.DocumentMetadata(new DocumentMetadata { Author = "Vahid", Application = "PdfRpt", Keywords = "Test", Subject = "Test Rpt", Title = "Test" }); }) .DefaultFonts(fonts => { fonts.Path(AppPath.ApplicationPath + "\\fonts\\irsans.ttf", Environment.GetEnvironmentVariable("SystemRoot") + "\\fonts\\verdana.ttf"); }) .PagesFooter(footer => { footer.DefaultFooter(DateTime.Now.ToString("MM/dd/yyyy")); }) .PagesHeader(header => { header.DefaultHeader(defaultHeader => { defaultHeader.RunDirection(PdfRunDirection.RightToLeft); defaultHeader.ImagePath(AppPath.ApplicationPath + "\\Images\\01.png"); defaultHeader.Message("گزارش جدید ما"); }); }) .MainTableTemplate(template => { template.BasicTemplate(BasicTemplate.SilverTemplate); }) .MainTablePreferences(table => { table.ColumnsWidthsType(TableColumnWidthType.Relative); table.NumberOfDataRowsPerPage(5); }) .MainTableDataSource(dataSource => { dataSource.GenericDataReader( providerName: "System.Data.SQLite", connectionString: "Data Source=" + AppPath.ApplicationPath + "\\data\\blogs.sqlite", sql: @"SELECT [url], [name], [NumberOfPosts], [AddDate] FROM [tblBlogs] WHERE [NumberOfPosts]>=@p1", parametersValues: new object[] { 10 } ); }) .MainTableSummarySettings(summarySettings => { summarySettings.OverallSummarySettings("جمع کل"); summarySettings.PreviousPageSummarySettings("نقل از صفحه قبل"); summarySettings.PageSummarySettings("جمع صفحه"); }) .MainTableColumns(columns => { columns.AddColumn(column => { column.PropertyName("rowNo"); column.IsRowNumber(true); column.CellsHorizontalAlignment(HorizontalAlignment.Center); column.IsVisible(true); column.Order(0); column.Width(1); column.HeaderCell("ردیف"); }); columns.AddColumn(column => { column.PropertyName("url"); column.CellsHorizontalAlignment(HorizontalAlignment.Center); column.IsVisible(true); column.Order(1); column.Width(2); column.HeaderCell("آدرس"); column.ColumnItemsTemplate(template => { template.Hyperlink(foreColor: System.Drawing.Color.Blue, fontUnderline: true); }); }); columns.AddColumn(column => { column.PropertyName("name"); column.CellsHorizontalAlignment(HorizontalAlignment.Center); column.IsVisible(true); column.Order(2); column.Width(2); column.HeaderCell("نام"); }); columns.AddColumn(column => { column.PropertyName("NumberOfPosts"); column.CellsHorizontalAlignment(HorizontalAlignment.Center); column.IsVisible(true); column.Order(3); column.Width(2); column.HeaderCell("تعداد مطلب"); column.ColumnItemsTemplate(template => { template.TextBlock(); template.DisplayFormatFormula(obj => obj == null ? string.Empty : string.Format("{0:n0}", obj)); }); column.AggregateFunction(aggregateFunction => { aggregateFunction.NumericAggregateFunction(AggregateFunction.Sum); aggregateFunction.DisplayFormatFormula(obj => obj == null ? string.Empty : string.Format("{0:n0}", obj)); }); }); columns.AddColumn(column => { column.PropertyName("AddDate"); column.CellsHorizontalAlignment(HorizontalAlignment.Center); column.IsVisible(true); column.Order(4); column.Width(2); column.HeaderCell("تاریخ ثبت"); column.ColumnItemsTemplate(template => { template.TextBlock(); template.DisplayFormatFormula(obj => obj == null ? string.Empty : PersianDate.ToPersianDateTime((DateTime)obj) /*((DateTime)obj).ToString("dd/MM/yyyy HH:mm")*/); }); }); }) .MainTableEvents(events => { events.DataSourceIsEmpty(message: "There is no data available to display."); }) .Export(export => { export.ToExcel(); }) .Generate(data => data.AsPdfFile(AppPath.ApplicationPath + "\\Pdf\\RptSqlDataReaderSample.pdf")); } } }
توضیحات:
- در مثال فوق نحوه استفاده از یک بانک اطلاعاتی SQLite را ملاحظه میکنید. این بانک اطلاعاتی نمونه در پوشه bin\data سورس به روز شده پروژه موجود است.
dataSource.GenericDataReader( providerName: "System.Data.SQLite", connectionString: "Data Source=" + AppPath.ApplicationPath + "\\data\\blogs.sqlite", sql: @"SELECT [url], [name], [NumberOfPosts], [AddDate] FROM [tblBlogs] WHERE [NumberOfPosts]>=@p1", parametersValues: new object[] { 10 } );
در مرحله بعد به کمک GenericDataReader میتوان به این پروایدر دسترسی یافت. همانطور که ملاحظه میکنید یک کوئری پارامتری با مقدار پارامتر مساوی 10 جهت تهیه گزارش، تعریف شده است.
همچنین باید دقت داشت که اگر پروژه جاری شما مبتنی بر دات نت 4 است، نیاز خواهید داشت چند سطر زیر را به فایل config برنامه اضافه نمائید تا با SQLite مشکلی نداشته باشد:
<?xml version="1.0"?> <configuration> <startup useLegacyV2RuntimeActivationPolicy="true"> <supportedRuntime version="v4.0" sku=".NETFramework,Version=v4.0"/> </startup> </configuration>
- در حین معرفی ستون AddDate، نحوه نمایش و تبدیل تاریخ دریافتی که با فرمت DateTime است را به تاریخ شمسی ملاحظه میکنید. متد PersianDate.ToPersianDateTime در فضای نام PdfRpt.Core.Helper قرار دارد. توسط DisplayFormatFormula، فرصت خواهید داشت مقدار متناظر با سلول در حال رندر را پیش از نمایش، به هر نحو دلخواهی فرمت کنید.
- در ستون url از قالب نمایشی پیش فرض Hyperlink، برای نمایش اطلاعات فیلد جاری به صورت یک لینک قابل کلیک استفاده شده است.
یک نکته:
ذکر قسمت MainTableColumns و تمام تعاریف مرتبط با آن در PdfReports اختیاری است. به این معنا که میتوانید قسمت گزارش سازی و تعاریف گزارشات برنامه خود را پویا کنید (شبیه به حالت auto generate columns در گریدهای معروف). کوئریهای SQL متناظر با گزارشات را در بانک اطلاعاتی ذخیره کنید و به گزارش ساز فوق ارسال نمائید. حاصل یک گزارش جدید است.
Code Map چیست؟
در نسخه Visual Studio 2012 Ultimate Update 1 قابلیتی به نام Code Map اضافه گردید که امکان تصویر سازی، روابط کدها را فراهم میسازد.
در نسخه Visual Studio 2012 Update 2 مایکروسافت Code Map را توسعه داد و با پشتیبانی از اشکال زدایی، با Code Map نیز میتوانید قدم به قدم کد را اشکال زایی نمایید. به زبان سادهتر Code Map فلوچارت اجرای برنامه است که در آن ارتباط بین متودها نمایش داده شده است.
چگونه از Code Map Debugging استفاده نماییم؟
در خطی از برنامه Break Point گذاشته و برنامه را اجرا نمایید. وقتی برنامه به خط مورد نظر رسید، نوار ابزار Debug را فعال و گزینه Code Map را انتخاب کنید تا پنجره Code Map باز شده و فلوچارت کد مورد نظر را رسم نماید. نوار قرمز رنگ دور گره، قسمتی از کد که در حال حاضر در حال اشکال زدایی است را نشان میدهد. وقتی با کلید F11 به درون متودی میروید گره متناظر آن نیز رسم میشود.
اگر بر روی فیلد Summary راست کلیک و گزینه Find All References on Code Map را انتخاب کنید، همه ارجاعهای که این فیلد در آنها صدا زده شده است را نمایش میدهد.
اگر بر روی هر کدام از گرهها موس خود را نگه دارید پنچره ای باز شده و اطلاعات درباره آن گره به شما نمایش میدهد. مثلا برای متودها امضای متود را نمایش میدهد.
بررسی ویژگیهای Code Map:
برای هر گره در صورت لزوم میتوانید یادداشتی اضافه نماید برای این کار گره مورد نظر را انتخاب تا نوار ابزاری در کنار آن ظاهر شود و گزینه create new comment node را انتخاب و یادداشت خود را ثبت نمایید.
می توانید code map را با دیگران از طریق ایمیل به اشتراک گذارید یا آن را ذخیره نمایید. برای این کار در بالای پنجره code map گزینه share را انتخاب و یکی از آینمها مورد نظر را کلیک نمایید.
علاوه بر این برای تعقیب کردن یک گره آن میتوانید آن را با یک پرچم و تغییر رنگ آن در پنجره code map از دیگر گرهها مجزا و تعقیب نمایید. برای این کار بر روی گره مورد نظر راست کلیک و گزینه Flag for Follow Up را انتخاب نمایید. از گزینه Other Flag Colors رنگ پیش فرض آن را میتوانید تغییر دهید.
بازبینی اشاره گر ها:
در کنار هر گره علامتی نمایان میشود که وضعیت code amp در آن لحظه برای آن گره را نمایش میدهد.
تغییر نمای دیاگرام:
برای تغییر نمای گراف code map و نمایش بهتر آن از گزینه layout یکی از حالات موجود را میتوانید انتخاب نمایید. هر وقت گره ای اضافه شود که قبلا اضافه شده باشد رنگ آن سبر میشود برای پاک کردن این چنین گرههای گزینه clear Result Highlighting را انتخاب نمایید.
چندی پیش در همین وبسایت مطلبی تحت عنوان «اعمال کلاسهای ویژه اعتبارسنجی Twitter bootstrap به فرمهای ASP.NET MVC» منتشر شد. این مقاله مرتبط با نسخه دوم فریمورک محبوب Bootstrap بود. قصد داریم به بازنویسی کدهای مرتبط بپردازیم و کلاسهای مرتبط با نسخه سوم این فریمورک را هم با فرمهای خودمان سازگار کنیم. مثل مقالهی ذکر شده توضیحات را با یک مثال همراه میکنم.
قرار هست که جدولی داشته باشیم با نام Product برای ثبت محصولات. مدل برنامه شامل خاصیتهای مرتبط و همچنین اعتبارسنجیهای مد نظر ما هست.
در قسمت کنترلر نیز اتفاق خاصی نیفتاده و کارهای پایه فقط انجام شده؛ ضمن اینکه آمدیم برای داشتن خطاهای سفارشی نام محصول را چک کردیم و گفتیم اگر نام محصول چیزی غیر از «پفک» بود، از سمت سرور خطایی را صادر کند و بگوید که فقط پفک قابل ثبت هست.
فایل View برنامه با Scafflod Templateها ساخته شده و چون از Visual Studio 2013 استفاده شده، بهصورت پیشفرض با بوتاسترپ سازگار هست. تغییری که ایجاد شده تعویض کلاس مربوط به ValidationSummary هست که به alert alert-danger تغییر پیدا کرده و همچین دو دکمه «ریست» و «بازگشت به لیست» هم به کنار دکمه «ثبت» اضافه شده.
مدل برنامه
using System.ComponentModel.DataAnnotations; using System.ComponentModel.DataAnnotations.Schema; namespace FormValidationWithBootstrap.Models { [Table("Product")] public class ProductModel { [Key] public int Id { get; set; } [Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")] [StringLength(50, ErrorMessage = "طول {0} باید کمتر از {1} کاراکتر باشد.")] [Display(Name = "نام کالا")] public string Name { get; set; } [Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")] [Display(Name = "قیمت")] [DataType(DataType.Currency)] public double Price { get; set; } [Required(ErrorMessage = "{0} یک فیلد اجباری است و باید آن را وارد کنید.")] [Display(Name = "موجودی")] public int Qty { get; set; } } }
کنترلر برنامه
using System.Web.Mvc; using FormValidationWithBootstrap.Models; namespace FormValidationWithBootstrap.Controllers { public class ProductController : Controller { // GET: Product public ActionResult Index() { return View(); } public ActionResult New() { return View(); } [HttpPost] public ActionResult New(ProductModel product) { if (!ModelState.IsValid) return View(product); if (product.Name != "پفک") { ModelState.AddModelError("", "لطفا مشکلات را برطرف کنید!"); ModelState.AddModelError("Name", "فقط محصولی با نام پفک قابل ثبت است :)"); return View(product); } // todo:save... return RedirectToAction("Index"); } } }
View برنامه
@model FormValidationWithBootstrap.Models.ProductModel @{ ViewBag.Title = "New"; } <h2>کالای جدید</h2> @using (Html.BeginForm()) { @Html.AntiForgeryToken() <div> <hr /> @Html.ValidationSummary(true, "", new { @class = "alert alert-danger" }) <div> @Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.Price, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Price, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Price, "", new { @class = "text-danger" }) </div> </div> <div> @Html.LabelFor(model => model.Qty, htmlAttributes: new { @class = "control-label col-md-2" }) <div> @Html.EditorFor(model => model.Qty, new { htmlAttributes = new { @class = "form-control" } }) @Html.ValidationMessageFor(model => model.Qty, "", new { @class = "text-danger" }) </div> </div> <div> <div> <input type="submit" value="ثبت" /> <input type="reset" value="ریست" /> @Html.ActionLink("بازگشت به لیست", "Index", "Product", null, new {@class="btn btn-default"}) </div> </div> </div> }
در فرم بالا شاهد هستیم که با کلیک بر روی دکمه ثبت تنها خطاهای مرتبط با هر ردیف ظاهر شدهاند و هیچ تغییر رنگی که حاصل از کلاسهای مرتبط با Bootstrap باشند حاصل نشده. برای رفع این مشکل کافیاست اسکریپت زیر، به انتهای فایل View برنامه اضافه شود تا پیشفرضهای jQuery Validator را تغییر دهیم و آنها را با بوتاسترپ سازگار کنیم. همچنین در حالت ارسال فرم به سرور و Postback و نمایش خطاهای سفارشی، قسمت بررسی field-validation-error صورت میگیرد و در صورتیکه موردی را پیدا کند، به سطر مرتبط با آن کلاس has-error اضافه خواهد شد.
@section Scripts { @Scripts.Render("~/bundles/jqueryval") <script> // override jquery validate plugin defaults $.validator.setDefaults({ highlight: function (element) { $(element).closest('.form-group').addClass('has-error'); }, unhighlight: function (element) { $(element).closest('.form-group').removeClass('has-error').addClass('has-success'); }, errorElement: 'span', errorClass: 'help-block', errorPlacement: function (error, element) { if (element.parent('.input-group').length) { error.insertAfter(element.parent()); } else { error.insertAfter(element); } } }); $(function () { $('form').each(function () { $(this).find('div.form-group').each(function () { if ($(this).find('span.field-validation-error').length > 0) { $(this).addClass('has-error'); } }); }); }); </script> }
با افزودن اسکریپت فوق، در حالت اعتبارسنجی فرمها به شکل زیر میرسیم:
همچنین هنگامیکه کاربر فیلد را به درستی وارد کرد، رنگ فیلد و همچین آن ردیف به سبز تغییر خواهد کرد.
و همچنین در حالت رخداد یک خطای سفارشی پس از postback از سمت سرور به حالت زیر خواهیم رسیذ.
نظرات مطالب
معرفی ELMAH
خلاصه بحث ارسال ایمیل:
- امکان ندارد هاست شما برای ارسال ایمیل نیاز به smtp authentication نداشته باشد (من ندیدم). بنابراین یا این اطلاعات را باید زنگ بزنید و از هاست بگیرید یا در کنترل پنل ایمیلهای سایت یک یوزر مخصوص را درست کنید تا بشود در برنامه از آن استفاده کرد.
- سپس تگ errorMail باید دقیقا مقدار دهی شود. آدرس و نام کاربری و غیره. (این موارد مرتبط به ارسال ایمیل است و با نام کاربری مثلا ftp سایت متفاوت میباشد)
- در IIS6 : باید در قسمت system.web -- httpModules ، مطابق مثال web.config پوشه sample کتابخانه، قسمت Elmah.ErrorMailModule را از کامنت خارج کنید.
- در IIS7 : باید در قسمت system.webServer فایل web.config شما Elmah.ErrorMailModule نیز مطابق مثال یاد شده ، ذکر شده باشد.
- امکان ندارد هاست شما برای ارسال ایمیل نیاز به smtp authentication نداشته باشد (من ندیدم). بنابراین یا این اطلاعات را باید زنگ بزنید و از هاست بگیرید یا در کنترل پنل ایمیلهای سایت یک یوزر مخصوص را درست کنید تا بشود در برنامه از آن استفاده کرد.
- سپس تگ errorMail باید دقیقا مقدار دهی شود. آدرس و نام کاربری و غیره. (این موارد مرتبط به ارسال ایمیل است و با نام کاربری مثلا ftp سایت متفاوت میباشد)
- در IIS6 : باید در قسمت system.web -- httpModules ، مطابق مثال web.config پوشه sample کتابخانه، قسمت Elmah.ErrorMailModule را از کامنت خارج کنید.
- در IIS7 : باید در قسمت system.webServer فایل web.config شما Elmah.ErrorMailModule نیز مطابق مثال یاد شده ، ذکر شده باشد.
مطالب
آغاز کار با الکترون
در مقاله «آشنایی با الکترون» با نحوه نصب و راه اندازی آن آشنا شدیم. در این مقاله با تعدادی اصطلاح،
آشنا شده و یک برنامه ساده را برای نوشتن و خواندن فایلها، مینویسیم.
فرآیندها (Processes) در الکترون به دو بخش تقسیم میشوند:
یک. فرآیند اصلی (Main Process) که همان فایل جاوااسکریپتی است و توسط main، در فایل package.json مشخص شدهاست .فرآیند اصلی تنها فرآیندی است که قابلیت دسترسی به امکانات گرافیکی سیستم عامل را از قبیل نوتیفیکشن ها، دیالوگها ،Tray و ... دارد. فرآیند اصلی میتواند با استفاده از شیء BrowserWindow که در قسمت قبلی کاربرد آن را مشاهده کردیم، render process را ایجاد کند. با هر بار ایجاد یک نمونه از این شیء، یک Render Process ایجاد میشود.
دو. فرآیند رندر (Render Process): از آنجا که الکترون از کرومیوم استفاده میکند و کرومیوم شامل معماری چند پردازشی است، هر صفحهی وب میتواند پردازش خود را داشته باشد که به آن Render Process میگویند. به طور معمول در مرورگرها، صفحات وب در محیطی به نام SandBox اجرا میشوندکه اجازه دسترسی به منابع بومی را ندارند. ولی از آنجا که الکترون میتواند از Node.js استفاده کند، قابلیت دسترسی به تعاملات سطح پایین سیستم عامل را نیز داراست.
در فرآیند اصلی، پنجرهها توسط BrowserWindow ایجاد میشوند و هر پنجرهای که صفحه وبی را برای خودش باز میکند، شامل Render Process خودش است و هر پنجرهای که کارش خاتمه یابد، فرآیند مربوط به خودش به اتمام میرسد. فرآیند اصلی، همه صفحات وب به همراه Render Process مربوط به خودشان را مدیریت میکند و هر فرآیند رندر، از دیگری مجزا و محافظت شده است و تنها تمرکزش بر روی صفحه وبی است که متعلق به خودش است.
در ابتدا قصد داریم یک منو برای برنامهی خود درست کنیم. برای ساخت منو، راههای متفاوتی وجود دارند که فعلا ما راه استفاده از template را بر میگزینیم که به صورت یک آرایه نوشته میشود. کدهای زیر را در فایل index.js یا هر اسمی که برای آن انتخاب کردهاید بنویسید:
تا به اینجای کار، بیشتر کدها برای شما آشناست و فقط تغییرات اندکی در آنها
ایجاد شدهاست. مثلا شیء app و سایر اشیاء به طور خلاصهتری نوشته شدهاند.
در اینجا دو شیء menu و dialogو shell برای شما جدید هستند. بعد از آن ما یک
آرایه را برای منو تدارک دیدهایم که نحوه ساخت آن و تعاریفی مثل عنوان،
کلید میانبر یا ترکیبی و نحوه انتساب رویدادها را میبینید.
در خطوط بعدی، یک کار اضافهتر را جهت آشنایی بیشتر انجام میدهیم. قصد داریم اگر سیستم عامل مکینتاش بود، نام برنامه هم در ابتدای نوار منو نمایش داده شود. به همین جهت در ادامه خطوط زیر را اضافه میکنیم:
با استفاده از process.platform در node.js میتوانیم نوع پلتفرم جاری را
دریافت کنیم. مقادیر زیر، مقادیری هستند که بازگردانده میشوند:
سپس نام برنامه را از شیء app دریافت میکنیم و با استفاده از متد unshift، مقادیر داده شده را به ابتدای آرایه اضافه میکنیم.
خصوصیت role شامل چندین نوع اکشن مانند minimize,close,undo,redo و... میباشد که لیست کاملتر آن در اینجا قرار دارد. اگر خصوصیت کلیک و role را همزمان استفاده کنید، خصوصیت role نادیده گرفته خواهد شد.
در انتها با اجرای دو دستور زیر، منو ساخته میشود:
در خط اول، منو توسط قالبی که با آرایهها ایجاد کردیم ساخته میشود و در خط دوم، منو به برنامه ست میشود.
حال قصد داریم برای زیرمنوی «باز کردن فایل» یک دیالوگ open درخواست کنیم. برای این کار از شیء dialog استفاده میکنیم. پس خطوط زیر را به رویداد کلیک این زیرمنو اضافه میکنیم:
این متد سه پارامتر دارد که اولین و آخرین پارامتر آن اختیاری میباشد.
اولین پارامتر آن شیء پنجره است. دومین پارامتر آن، تنظیم یک سری خصوصیات که
شامل (پسوندهای قابل قبول، عنوان، مسیر پیش فرض، قابلیت انتخاب چندگانه،
قابلیت باز کردن دایرکتوری و...) میشود که لیست کامل آن را میتوانید در
این صفحه ببینید.
سومین پارامتر هم که در کد بالا ذکر شده است، callback میباشد که خروجی آن،
مسیر فایل مورد نظر است و اگر انتخاب چندگانه باشد، آرایهای با نام فایلهاست، که همگی آنها به همراه مسیرشان میباشند. در صورتیکه کاربر از دیالوگ
انصراف بدهد، پارامتر دریافتی با خروجی undefined همراه است. آخرین دیالوگ
هم نمایش یک پیام ساده است که نام فایل جاری را بر میگرداند. اگر خصوصیت
buttons را با آرایه خالی مقداردهی کنید، دکمه Ok نمایش داده میشود و اگر
هم مقداردهی نکنید با خطا روبرو خواهید شد.
برای قسمت ذخیره هم کد زیر را مینویسیم:
حال بهتر است این دیالوگهای جاری را هدفمند کنیم و بتوانیم فایلهای متنی را به کاربر نمایش دهیم، یا آنها را ذخیره کنیم. به همین علت فایل html زیر را نوشته و طبق دستوری که در مقاله «آشنایی با الکترون» فرا گرفتیم، آن را نمایش میدهیم:
برای تشکیل ساختار HTML میتوانید عبارت HTML را تایپ نمایید تا بعد از زدن
Enter، ساختار آن به طور خودکار تشکیل شود. سپس محتوا را مثل بالا به شکل
دلخواه تغییر میدهیم.
کاری که میخواهیم انجام دهیم این است که فایل متنی را باز کرده و محتوای آن را در کادر متنی نشان دهیم و موقع ذخیره نیز محتوای نوشته شده در کادر متنی را در فایلی ذخیره کنیم. از آنجا که main Process به المانهای DOM یا Render Process دسترسی ندارد، باید از طریقی، ارتباط آن را برقرار کنیم. یکی از راههای برقراری این ارتباط، IPC است. IPC در واقع یک فرستنده و یک شنونده است که هر کدام در یک سمت قرار گرفته اند. فرستنده پیام را تحت یک عنوان ارسال میکند و شنونده منتظر دریافت پیامی تحت همان عنوان میماند و پیام دریافتی را پاسخ میدهد. در این مقاله، ما فقط قسمتی از این نوع ارتباطات را بررسی میکنیم.
در نتیجه محتوای callback کدهای دیالوگ open و save را به شکل زیر تغییر میدهیم:
Open
Save
دستور win.webContents.send یک پیام را به صورت Async به سمت RenderProcess
مربوطه ارسال میکند. پارامتر اول، عنوان IPC است و پارامتر دوم، پیام IPC
است.
برای ایجاد شنونده هم کد زیر را به فایل index.html اضافه میکنیم:
در اینجا شوندههایی را از نوع ipcRenderer ایجاد میکنیم و با استفاده از متد on، به پیامهایی تحت عنوانهای مشخص شده گوش فرا میدهیم. پیامهای ارسالی را که حاوی آدرس فایل میباشند، به شیءای که از نوع fs میباشد، میدهند و آنها را میخوانند یا مینویسند. خواندن و نوشتن فایل، به صورت همزمان صورت میگیرد. ولی اگر دوست دارید که به صورت غیر همزمان پیامی را بخوانید یا بنویسید، باید عبارت Sync را از نام متدها حذف کنید و یک callback را به عنوان پارامتر دوم قرار دهید و محتوای آن را از طریق نوشتن یک پارامتر در سازنده دریافت کنید.
فایلهای پروژه
فرآیندها (Processes) در الکترون به دو بخش تقسیم میشوند:
یک. فرآیند اصلی (Main Process) که همان فایل جاوااسکریپتی است و توسط main، در فایل package.json مشخص شدهاست .فرآیند اصلی تنها فرآیندی است که قابلیت دسترسی به امکانات گرافیکی سیستم عامل را از قبیل نوتیفیکشن ها، دیالوگها ،Tray و ... دارد. فرآیند اصلی میتواند با استفاده از شیء BrowserWindow که در قسمت قبلی کاربرد آن را مشاهده کردیم، render process را ایجاد کند. با هر بار ایجاد یک نمونه از این شیء، یک Render Process ایجاد میشود.
دو. فرآیند رندر (Render Process): از آنجا که الکترون از کرومیوم استفاده میکند و کرومیوم شامل معماری چند پردازشی است، هر صفحهی وب میتواند پردازش خود را داشته باشد که به آن Render Process میگویند. به طور معمول در مرورگرها، صفحات وب در محیطی به نام SandBox اجرا میشوندکه اجازه دسترسی به منابع بومی را ندارند. ولی از آنجا که الکترون میتواند از Node.js استفاده کند، قابلیت دسترسی به تعاملات سطح پایین سیستم عامل را نیز داراست.
در فرآیند اصلی، پنجرهها توسط BrowserWindow ایجاد میشوند و هر پنجرهای که صفحه وبی را برای خودش باز میکند، شامل Render Process خودش است و هر پنجرهای که کارش خاتمه یابد، فرآیند مربوط به خودش به اتمام میرسد. فرآیند اصلی، همه صفحات وب به همراه Render Process مربوط به خودشان را مدیریت میکند و هر فرآیند رندر، از دیگری مجزا و محافظت شده است و تنها تمرکزش بر روی صفحه وبی است که متعلق به خودش است.
در ابتدا قصد داریم یک منو برای برنامهی خود درست کنیم. برای ساخت منو، راههای متفاوتی وجود دارند که فعلا ما راه استفاده از template را بر میگزینیم که به صورت یک آرایه نوشته میشود. کدهای زیر را در فایل index.js یا هر اسمی که برای آن انتخاب کردهاید بنویسید:
const electron = require('electron'); const {app,dialog,BrowserWindow,Menu,shell} = electron; let win; app.on('ready', function () { win = new BrowserWindow({width: 800, height: 600}); win.loadURL(`file://${__dirname}/index.html`); var app_menu=[ { label:'پرونده', submenu:[ { label:'باز کردن', accelerator:'CmdOrCtrl+O', click:()=>{ } }, { label:'ذخیره', accelerator:'CmdOrCtrl+S', click:()=>{ } } ] }, { label:'سیستم', submenu:[ { label:'درباره ما', click:()=> { shell.openExternal('https://www.dntips.ir'); } }, { label:'خروج', accelerator:'CmdOrCtrl+X', click:()=> { win=null; app.quit(); } } ] } ];
در خطوط بعدی، یک کار اضافهتر را جهت آشنایی بیشتر انجام میدهیم. قصد داریم اگر سیستم عامل مکینتاش بود، نام برنامه هم در ابتدای نوار منو نمایش داده شود. به همین جهت در ادامه خطوط زیر را اضافه میکنیم:
if(process.platform=="darwin") { const app_name=app.getName(); app_menu.unshift({ label:app_name }) }
ویندوز | win32 حتی اگر 64 بیتی باشد. |
لینوکس | linux |
مک | darwin |
فری بی اس دی | freebsd |
سولاریس | sunos |
دستو shell در بالا به شما اجازه میدهد با محیط دسکتاپ، یکپارچگی خود
را حفظ کنید و دستوراتی از قبیل باز کردن url، باز کردن یک مسیر دایرکتوری،
باز کردن یک فایل، انتقال فایل به سطل آشغال یا بازیافت و صدای بوق سیستم
(بیپ) را به شما میدهد. مستندات این شیء را در اینجا مطالعه فرمایید.
{ label:'خروج', accelerator:'CmdOrCtrl+X', role:'close' }
در انتها با اجرای دو دستور زیر، منو ساخته میشود:
var menu=Menu.buildFromTemplate(app_menu); Menu.setApplicationMenu(menu);
حال قصد داریم برای زیرمنوی «باز کردن فایل» یک دیالوگ open درخواست کنیم. برای این کار از شیء dialog استفاده میکنیم. پس خطوط زیر را به رویداد کلیک این زیرمنو اضافه میکنیم:
dialog.showOpenDialog({ title:'باز کردن فایل متنی', properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ] ,filters:[ {name:'فایلهای نوشتاری' , extensions:['txt','text']}, {name:'جهت تست' , extensions:['doc','docx']} ] }, (filename)=>{ if(filename===undefined) return; dialog.showMessageBox({title:'پیام اطلاعاتی',type:"info",buttons:['تایید'],message:`the name of file is [${filename}]`}); });
برای قسمت ذخیره هم کد زیر را مینویسیم:
dialog.showSaveDialog({ title:'باز کردن فایل متنی', properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ] ,filters:[ {name:'فایلهای نوشتاری' , extensions:['txt','text']} ] }, (filename)=>{ if(filename===undefined) return; });
حال بهتر است این دیالوگهای جاری را هدفمند کنیم و بتوانیم فایلهای متنی را به کاربر نمایش دهیم، یا آنها را ذخیره کنیم. به همین علت فایل html زیر را نوشته و طبق دستوری که در مقاله «آشنایی با الکترون» فرا گرفتیم، آن را نمایش میدهیم:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> Fie Content:<br/> <textarea id="TextFile" cols="100" rows="50"></textarea> </body> </html>
کاری که میخواهیم انجام دهیم این است که فایل متنی را باز کرده و محتوای آن را در کادر متنی نشان دهیم و موقع ذخیره نیز محتوای نوشته شده در کادر متنی را در فایلی ذخیره کنیم. از آنجا که main Process به المانهای DOM یا Render Process دسترسی ندارد، باید از طریقی، ارتباط آن را برقرار کنیم. یکی از راههای برقراری این ارتباط، IPC است. IPC در واقع یک فرستنده و یک شنونده است که هر کدام در یک سمت قرار گرفته اند. فرستنده پیام را تحت یک عنوان ارسال میکند و شنونده منتظر دریافت پیامی تحت همان عنوان میماند و پیام دریافتی را پاسخ میدهد. در این مقاله، ما فقط قسمتی از این نوع ارتباطات را بررسی میکنیم.
در نتیجه محتوای callback کدهای دیالوگ open و save را به شکل زیر تغییر میدهیم:
Open
dialog.showOpenDialog({ title:'باز کردن فایل متنی', properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ] ,filters:[ {name:'فایلهای نوشتاری' , extensions:['txt','text']}, {name:'جهت تست' , extensions:['doc','docx']} ] }, (filename)=>{ if(filename===undefined) return; win.webContents.send('openFile',filename); // dialog.showMessageBox({title:'پیام اطلاعاتی',type:"info",buttons:['تایید'],message:`the name of file is [${filename}]`}); });
dialog.showSaveDialog({ title:'باز کردن فایل متنی', properties: [ 'openFile']//[ 'openFile', 'openDirectory', 'multiSelections' ] ,filters:[ {name:'فایلهای نوشتاری' , extensions:['txt','text']} ] }, (filename)=>{ if(filename===undefined) return; win.webContents.send('saveFile',filename); });
برای ایجاد شنونده هم کد زیر را به فایل index.html اضافه میکنیم:
<script> const {ipcRenderer} = require('electron'); var fs=require('fs'); ipcRenderer.on('openFile', (event, arg) => { var content= fs.readFileSync(String(arg),'utf8'); document.getElementById("TextFile").value=content; }); ipcRenderer.on('saveFile', (event, arg) =>{ var content=document.getElementById("TextFile").value; fs.writeFileSync(String(arg),content,'utf8'); alert('ذخیره شد'); }); </script>
در اینجا شوندههایی را از نوع ipcRenderer ایجاد میکنیم و با استفاده از متد on، به پیامهایی تحت عنوانهای مشخص شده گوش فرا میدهیم. پیامهای ارسالی را که حاوی آدرس فایل میباشند، به شیءای که از نوع fs میباشد، میدهند و آنها را میخوانند یا مینویسند. خواندن و نوشتن فایل، به صورت همزمان صورت میگیرد. ولی اگر دوست دارید که به صورت غیر همزمان پیامی را بخوانید یا بنویسید، باید عبارت Sync را از نام متدها حذف کنید و یک callback را به عنوان پارامتر دوم قرار دهید و محتوای آن را از طریق نوشتن یک پارامتر در سازنده دریافت کنید.
فایلهای پروژه