A new approach for cross-platform .NET GUI development, introducting Qml.Net.
We are happy to release .NET 6 Release Candidate 1. It is the first of two “go live” release candidate releases that are supported in production.
The Firebug extension isn't being developed or maintained any longer. We invite you to use the Firefox built-in DevTools instead.
So yes, Web API will return dynamic types. This isn't a surprise given that it needs to support any model type that we would normally throw at it.
در این قسمت به پیاده سازی و توضیح مدل‌های انجمن خواهیم پرداخت. قبل از شروع پیشنهاد می‌کنم مقالات قبلی را مطالعه کنید.
همکاران این قسمت:
سلمان معروفی
سید مجتبی حسینی
پیشنیاز این قسمت:
مقالات SQL Antipattern
سعی کردیم چندین پروژه‌ی سورس باز را هم بررسی کنیم و در نهایت کاملترین و بهترین روش را پیاده سازی کنیم. NForum ، MyBB ، MVCForum ، بخش CMS مربوط به SmartStore و ساختار دیتابیس StackOverFlow ازجمله‌ی آنها هستند.
ساختار انجمن‌ها اغلب به شکل سلسله مراتبی میباشد و این مورد در دسته بندی آنها خیلی مفید خواهد بود. صرف اینکه بتوان برای این مورد یک مدل خود ارجاع در نظر گرفت کاری خاصی ندارد. ولی مشکل از آنجا شروع می‌شود که بخواهیم برای انجمن هایمان مدیرانی هم تعیین کنیم یا فقط تا عمق مشخصی را واکشی کنیم و خیلی چالش برانگیزتر از اینها، اگر لازم باشد دسترسی‌های مدیران یک انجمن قابلیت اعمال بر زیرشاخه‌ها را داشته باشد و در مقابل زیرشاخه‌ها هم بتوانند از این ارث بری ممانعت کنند و از این نوع چالش‌های شیرین دیگر.
مدل انجمن
/// <summary>
/// Represents the Forum
/// </summary>
public class Forum
{
#region Properties
/// <summary>
/// gets or sets Id that Identify Forum
/// </summary>
public virtual long Id { get; set; }
/// <summary>
/// gets or sets Forum's title
/// </summary>
public virtual string Title { get; set; }
/// <summary>
/// gets or sets Description of forum
/// </summary>
public virtual string Description { get; set; }
/// <summary>
/// gets or sets value indicating Custom Slug
/// </summary>
public virtual string SlugUrl { get; set; }
/// <summary>
/// gets or sets order for display forum
/// </summary>
public virtual long DisplayOrder { get; set; }
/// <summary>
/// Indicating This Forum is Active or Not
/// </summary>
public virtual bool IsActive { get; set; }
/// <summary>
/// Indicating This Forum is Close or Not
/// </summary>
public virtual bool IsClose { get; set; }
/// <summary>
/// Indicating This Forum is Private or Not
/// </summary>
public virtual bool IsPrivate { get; set; }
/// <summary>
/// sets or gets password for login to Private forums
/// </summary>
public virtual string PasswordHash { get; set; }
/// <summary>
/// sets or gets depth of forum in tree structure of forums
/// </summary>
public virtual int Depth { get; set; }
/// <summary>
/// sets or gets Count of posts That they are Approved
/// </summary>
public virtual long ApprovedPostsCount { get; set; }
/// <summary>
/// sets or gets Count of topics That they are Approved
/// </summary>
public virtual long ApprovedTopicsCount { get; set; }
/// <summary>
/// Gets or sets the id of last topic
/// </summary>
public virtual long LastTopicId { get; set; }
/// <summary>
/// gets or sets date of creation of last topic
/// </summary>
public virtual DateTime? LastTopicCreatedOn { get; set; }
/// <summary>
/// gets or sets title of last topic
/// </summary>
public virtual string LastTopicTitle { get; set; }
/// <summary>
/// gets or sets creator of last topic
/// </summary>
public virtual string LastTopicCreator { get; set; }
/// <summary>
/// gets or sets id of creator that create last topic
/// </summary>
public virtual long LastTopicCreatorId { get; set; }
/// <summary>
/// Indicate in this Forum Moderate Topics Before Display
/// </summary>
public virtual bool ModerateTopics { get; set; }
/// <summary>
/// Indicate in this Forum Moderate Posts Before Dipslay
/// </summary>
public virtual bool ModeratePosts { get; set; }
/// <summary>
/// gets or sets Count of posts that they are UnApproved
/// </summary>
public virtual long UnApprovedPostsCount { get; set; }
/// <summary>
/// gets or sets Count of topics that they are UnApproved
/// </summary>
public virtual long UnApprovedTopicsCount { get; set; }
/// <summary>
/// gets or sets Rowversion
/// </summary>
public virtual byte[] RowVersion { get; set; }
/// <summary>
/// gets or sets icon name with size 200*200 px for snippet
/// </summary>
public virtual string SocialSnippetIconName { get; set; }
/// <summary>
/// gets or sets title for snippet
/// </summary>
public virtual string SocialSnippetTitle { get; set; }
/// <summary>
/// gets or sets description for snippet
/// </summary>
public virtual string SocialSnippetDescription { get; set; }
/// <summary>
/// gets or sets path for tree structure antipattern (1/3/4/23)
/// </summary>
public virtual string Path { get; set; }
/// <summary>
/// Indicate this forum inherit moderators from parent forum
/// </summary>
public virtual bool IsModeratorsInherited { get; set; }
/// <summary>
/// gets or set datetime that Last Post is Created In this forum. used for ForumTracking
/// </summary>
public virtual DateTime? LastPostCreatedOn { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// sets or gets identifier forum's parent
/// </summary>
public virtual long? ParentId { get; set; }
/// <summary>
/// sets or gets forum's parent
/// </summary>
public virtual Forum Parent { get; set; }
/// <summary>
/// sets or gets sub forums of forum
/// </summary>
public virtual ICollection<Forum> Children { get; set; }
/// <summary>
/// set or get topics of forum
/// </summary>
public virtual ICollection<ForumTopic> Topics { get; set; }
/// <summary>
/// get or set moderators of this forum
/// </summary>
public virtual ICollection<ForumModerator> Moderators { get; set; }
/// <summary>
/// get or set Subscriptions List
/// </summary>
public virtual ICollection<User> Subscribers { get; set; }
/// <summary>
/// get or set Announcements Collection of this Forum
/// </summary>
public virtual ICollection<ForumAnnouncement> Announcements { get; set; }
/// <summary>
/// get or set Trackers List Of this Forum
/// </summary>
public virtual ICollection<ForumTracker> Trackers { get; set; }
/// <summary>
/// get or set Posts List that Posted in this forum for increase Performance for get Posts Count
/// </summary>
public virtual ICollection<ForumPost> Posts { get; set; }
/// <summary>
/// get or set
/// </summary>
public virtual ICollection<ForumTopicTracker> TopicTrackers { get; set; }
#endregion مدل بالا نشان دهنده‌ی ساختار انجمن‌های ما میباشد. خصوصیت هایی که نیاز به توضیح دارند به شکل زیر می‌باشند:
- IsActive : مشخص کننده‌ی این است که در این انجمن امکان ارسال تاپیک و پست وجود دارد و در صورت false بودن این خصوصیت، بر تمام زیر انجمن‌ها هم اعمال خواهد شد و برای زمانی مفید است که میخواهیم برای مدتی به هر دلیل خاصی امکان ارسال تاپیک و پست را برای انجمن خاصی، ندهیم.
- IsColsed : خصوصت اولی که مطرح شد اگر مقدار false بگیرد، همچنان کاربران می‌توانند تایپک‌ها و پست‌های قبلی را مشاهده و مطالعه کنند. ولی با مقدار دهی این خصوصیت با مقدار false، امکان کلیه‌ی فعالیت‌ها و مشاهده‌ای را از محتوای این انجمن و زیر انجمن‌های آن نخواهیم داشت.
- IsPrivate : برای مواقعی که لازم است برای انجمن خاصی کلمه‌ی عبور در نظر بگیریم تا افراد خاص که کلمه‌ی عبور آن را دارند بتوانند در آن انجمن فعالیت کنند، در نظر گرفته شده است.
- ApprovedPostsCount , UnApprovedPostsCount,ApprovedTopicsCount,UnApprovedTopicsCount : برای بالا بردن کارآیی سیستم به مانند مدل‌های قبل در نظر گرفته شده‌اند.
- LastTopicId, LastTopicTitle , LastTopicCreator , LastTopicCreatorId , LastTopicCreatedOn: همچنین برای افزایش کارآیی سیستم و نمایش به عنوان قسمتی از مشخصات قابل مشاهده از هر انجمن، در نظر گرفته شده‌اند.
- Depth : برای نشان دادن عمق گره در درخت استفاده می‌شود که هنگام درج انجمن، این مورد از نتیجه‌ی جمع عمق پدر انتخاب شده و یک، به دست خواهد آمد. این مورد هنگام واکشی برای مثال 4 سطح اول برای نمایش آنها در صفحه‌ی اول انجمن به صورت سلسله مراتبی خیلی مفید خواهد بود.
- Path : برای استفاده از SQL Antipattern شمارش مسیر در نظر گرفته شده است. این مورد جزء Best Practiceها می‌تواند باشد. چون هم با استفاده از ساختار خود ارجاع، درخت خود را داریم و با این Antipattern کوئری‌های مربوط به درخت خیلی راحت خواهد بود.
- IsModeratorsInherited : اگر لازم است مدیران انجمن، پدر را به عنوان مدیر خود قبول کنند، این خصوصیت مقدار true خواهد گرفت.
- Subscribers : هر انجمنی می‌تواند یکسری مشترک نیز داشته باشد (به منظور اطلاع رسانی با درج یک تاپیک جدید در خود انجمن یا زیر انجمن‌های آن) .
- Posts : به منظور افزایش کارایی هنگام محاسبه تعداد پست‌های ارسالی در یک انجمن ، در نظر گرفته شده است.
- TopicTrackers : در مقاله بعد توضیح داده خواهد شد.
- LastPostCreatedOn : به منظور استفاده از آن برای سیستم Tracking انجمن‌ها استفاده خواهد شد .
ساختار درختی آن هم قابل مشاهده بوده و نیاز به توضیح خاضی ندارد. در هر انجمن ما، یکسری تاپیک مطرح خواهد شد و برای این منظور لیستی از ForumTopic را در این کلاس معرفی کردهایم.
علاوه بر اینها انجمن‌های ما مدیرانی هم خواهند داشت که برای این منظور نیز لیستی از ForumModerator را در مدل بالا تعریف کردهایم. همچنین تصمیم گرفتیم امکانی را برای سیستم انجمن در نظر بگیرم تا اگر لازم بود یک سری اعلان در بالای انجمن‌ها نشان داده شوند و در بخش مدیریت بتوان این امکان را هندل کرد؛ که لیستی است از ForumAnnouncementهای مدل بالا.
/// <summary>
/// Represents The Moderator For Forum
/// </summary>
public class ForumModerator
{
#region NavigationProperties
/// <summary>
/// gets or sets Forum
/// </summary>
public virtual Forum Forum { get; set; }
/// <summary>
/// gets or sets identifier of forum
/// </summary>
public virtual long ForumId { get; set; }
/// <summary>
/// gets or sets user that moderate forum
/// </summary>
public virtual User Moderator { get; set; }
/// <summary>
/// gets or sets id of user that moderate forum
/// </summary>
public virtual long ModeratorId { get; set; }
/// <summary>
/// gets or sets permission of user that moderate forum
/// </summary>
public virtual ForumModeratorPermissions Permissions { get; set; }
/// <summary>
/// indicate moderator's permissions in this forum apply with
/// </summary>
public virtual bool ApplyChildren { get; set; }
#endregion
}
[Flags]
public enum ForumModeratorPermissions
{
CanEditPosts=1,
CanDeletePosts=2,
CanManageTopics=4,
CanOpenCloseTopics=8,
...
} این مدل نشان می‌دهد که کاربر x به عنوان مدیر انجمن y میباشد و یکسری دسترسی‌ها را نیز در این انجمن خواهد داشت.
- ApplyChildren : برای اعمال دسترسی‌های مدیریتی کاربر x به زیر انجمن‌های انجمن y البته اگر خصوصیت IsModeratorsInherited زیر انجمن‌های مورد نظر با مقدار true مقدار دهی شده باشد.
- Permissions : از نوع ForumModeratorPermissions و نگهدارنده دسترسی‌های کاربر x به عنوان مدیر انجمن y، میباشد.
- نکته : برای این مدل آی دی در نظر گرفته نشده است و از کلید مرکب متشکل از ForumId و ModeratorId استفاده خواهیم کرد.
مدل اعلان‌های انجمن
/// <summary>
/// Represents the Announcement that shown Top Of Forums
/// </summary>
public class ForumAnnouncement
{
#region Ctor
/// <summary>
/// create one instance of <see cref="ForumAnnouncement"/>
/// </summary>
public ForumAnnouncement()
{
Id = SequentialGuidGenerator.NewSequentialGuid();
CreatedOn = DateTime.Now;
}
#endregion
#region Properties
/// <summary>
/// gets or sets Identifier
/// </summary>
public virtual Guid Id { get; set; }
/// <summary>
/// gets or sets DateTime That this Announcement Will be Shown
/// </summary>
public virtual DateTime StartOn { get; set; }
/// <summary>
/// gets or sets DateTime That this Announcement Will be Finished
/// </summary>
public virtual DateTime? ExpireOn { get; set; }
/// <summary>
/// gets or sets Content of this Announcement
/// </summary>
public virtual string Message { get; set; }
/// <summary>
/// Indicate this Announcement Will be shown on Children Forums
/// </summary>
public virtual bool ApplyChildren { get; set; }
/// <summary>
/// gets or sets datetime that this record created
/// </summary>
public virtual DateTime CreatedOn { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// gets or sets Forum that associated With this Announcement
/// </summary>
public virtual Forum Forum { get; set; }
/// <summary>
/// gets or sets Identifier of Forum that associated With this Announcement
/// </summary>
public virtual long ForumId { get; set; }
#endregion
} - ApplyChildren : برای مشخص کردین نمایش این اعلان در زیر انجمن‌های انجمن مورد نظر
- ExpireOn : به این دلیل نال پذیر در نظر گرفته شده است که اگر لازم بود، در زمان مشخصی به پایان نرسد و با null مقدار دهی شود.
کلاس پایه AuditBaseEntity
/// <summary>
/// Represents a base class for AuditLog
/// </summary>
public abstract class AuditBaseEntity
{
#region Properties
/// <summary>
/// sets or gets identifier
/// </summary>
public virtual long Id { get; set; }
/// <summary>
/// gets or sets datetime that is created
/// </summary>
public virtual DateTime CreatedOn { get; set; }
/// <summary>
/// gets or sets datetime that is modified
/// </summary>
public virtual DateTime? LastModifiedOn { get; set; }
/// <summary>
/// gets or sets reason of Last Update for increase performance
/// </summary>
public virtual string LastModifyReason { get; set; }
/// <summary>
/// gets or sets displayName of Last Modifier for increase performance
/// </summary>
public virtual string LastModifier{ get; set; }
/// <summary>
/// indicate this entity is Locked for Modify
/// </summary>
public virtual bool ModifyLocked { get; set; }
/// <summary>
/// gets or sets rowversion for synchronization problem
/// </summary>
public virtual byte[] RowVersion { get; set; }
/// <summary>
/// gets or sets count of this content's Updates
/// </summary>
public virtual int ModifyCount { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// gets or sets creator of this record
/// </summary>
public virtual User Creator { get; set; }
/// <summary>
/// gets or sets creator's Id of this record
/// </summary>
public virtual long CreatorId { get; set; }
#endregion
} ModifyLocked : برای زمانی مفید است که مدیریت امکان ویرایش یک مطلب را به صورت دستی غیرفعال میکند.
مدل تاپیک ها
/// <summary>
/// Represents the Topic in the Forums
/// </summary>
public class ForumTopic
{
#region Ctor
/// <summary>
/// create one instance of <see cref="ForumTopic"/>
/// </summary>
public ForumTopic()
{
CreatedOn = DateTime.Now;
}
#endregion
#region Properties
/// <summary>
/// sets or gets identifier
/// </summary>
public virtual long Id { get; set; }
/// <summary>
/// gets or sets datetime that is created
/// </summary>
public virtual DateTime CreatedOn { get; set; }
/// <summary>
/// gets or sets Title Of this topic
/// </summary>
public virtual string Title { get; set; }
/// <summary>
/// gets or sets name of tags that assosiated with
/// this content fo increase performance
/// </summary>
public virtual string TagNames { get; set; }
/// <summary>
/// indicate this topic is Sticky and will be shown top of forum
/// </summary>
public virtual bool IsSticky { get; set; }
/// <summary>
/// indicate this topic is closed
/// </summary>
public virtual bool IsClosed { get; set; }
/// <summary>
/// gets or sets identifier of last post in this topic
/// </summary>
public virtual long LastPostId { get; set; }
/// <summary>
/// gets or sets identifier of Last user that post in this topic
/// </summary>
public virtual long LastPosterId { get; set; }
/// <summary>
/// gets or sets title of last Post in this topic
/// </summary>
public virtual string LastPostTitle { get; set; }
/// <summary>
/// gets or sets displayName of user that create lastpost in this topic
/// </summary>
public virtual string LastPoster { get; set; }
/// <summary>
/// gets or sets datetime that last post posted in this topic
/// </summary>
public virtual DateTime? LastPostCreatedOn { get; set; }
/// <summary>
/// indicate this topic is approved
/// </summary>
public virtual bool IsApproved { get; set; }
/// <summary>
/// indicate this topic is type of Announcements and shown in Annoucements sections
/// </summary>
public virtual bool IsAnnouncement { get; set; }
/// <summary>
/// gets or sets viewed count
/// </summary>
public virtual long ViewCount { get; set; }
/// <summary>
/// gets or sets count of posts that they are approved
/// </summary>
public virtual int ApprovedPostsCount { get; set; }
/// <summary>
/// gets or sets count of posts that they are Unapproved
/// </summary>
public virtual int UnApprovedPostsCount { get; set; }
/// <summary>
/// gets or sets specifications of this topic's rating
/// </summary>
public virtual Rating Rating { get; set; }
/// <summary>
/// gets or sets datetime that this topic closed
/// </summary>
public virtual DateTime? ClosedOn { get; set; }
/// <summary>
/// gets or sets reason that this topic colsed
/// </summary>
public virtual string ClosedReason { get; set; }
/// <summary>
/// gets or sets count of reports
/// </summary>
public virtual int ReportsCount { get; set; }
/// <summary>
/// indicate the posts of this topic should be Moderate Before Dipslay
/// </summary>
public virtual bool ModeratePosts { get; set; }
/// <summary>
/// gets or sets Level of this topic
/// </summary>
public virtual ForumTopicLevel Level { get; set; }
/// <summary>
/// gets or sets type of this topic
/// </summary>
public virtual ForumTopicType Type { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// gets or sets Collection of tags that associated with this topic
/// </summary>
public virtual ICollection<Tag> Tags { get; set; }
/// <summary>
/// gets or sets forum
/// </summary>
public virtual Forum Forum { get; set; }
/// <summary>
/// gets or sets identifier of Forum
/// </summary>
public virtual long ForumId { get; set; }
/// <summary>
/// gets or sets Posts Of this topic
/// </summary>
public virtual ICollection<ForumPost> Posts { get; set; }
/// <summary>
/// get or set Subscriptions List
/// </summary>
public virtual ICollection<User> Subscribers { get; set; }
/// <summary>
/// get or set Trackkers list of this Topic
/// </summary>
public virtual ICollection<ForumTopicTracker> Trackers { get; set; }
/// <summary>
/// gets or sets creator of this record
/// </summary>
public virtual User Creator { get; set; }
/// <summary>
/// gets or sets creator's Id of this record
/// </summary>
public virtual long CreatorId { get; set; }
#endregion
}
public enum ForumTopicType
{
Non,
Tutorial,
Conversation,
Question,
News,
Article
}
public enum ForumTopicLevel
{
Professional,
Intermediate,
Beginner
} - LastPostId , LastPosterId, LastPoster , LastPostTitle ,LastPostCreatedOn: برای افزایش کارآیی سیستم در نظر گرفته شده‌اند.
- ModeratePosts : اگر لازم است پست‌های یک تاپیک خاص، قبل از نمایش مدیریت شوند، با true مقدار دهی خواهد شد.
- Tags : لیستی از برچسب‌ها که برای اعمال رابطه‌ی چند به چند با مدل برچسب‌های معرفی شده‌ی در مقاله اول، در نظر گرفته شده است.
- Posts : در هر تاپیکی یک سری پست به عنوان جواب‌های آن ارسال خواهد شد.
- Subscribers : به مانند انجمن‌ها، تاپیک‌های ما هم می‌توانند یک سری مشترک داشته باشند، تا از تغییرات این تاپیک مطلع شوند .
- Trackers : مربوط به سیستم Tracking تاپیک میباشد. و در مقاله بعد توضیح داده خواهد شد.
حتما لازم خواهد بود تاریخچه‌ی تغییرات برای پست‌های ارسالی ذخیره شوند؛ در مقاله‌ی بعدی به این موضوع هم خواهیم پرداخت.
نتیجه این قسمت
در قسمت قبل، سرویس و کامپوننت دریافت اطلاعات اتاق‌ها را از Web API برنامه، تکمیل کردیم. در این قسمت با استفاده از اطلاعات مهیا شده، UI آن‌را نیز تکمیل خواهیم کرد.
نمایش منتظر بمانید در حین بارگذاری اولیه‌ی کامپوننت
کامپوننت‌هایی که قرار است اطلاعات را از یک Web API دریافت کنند، مدتی باید منتظر بمانند تا عملیات رفت و برگشت به سرور، تکمیل شود. در این بین می‌توان یک loading را به کاربر نمایش داد:
- فیلد Rooms را در قسمت قبل، در متد LoadRooms، از Web API دریافت و مقدار دهی کردیم. تا زمان تکمیل عملیات این متد، فیلد Rooms، فاقد عضوی است؛ بنابراین قسمت else شرط فوق اجرا می‌شود که یک loading را نمایش خواهد داد. مابقی UI برنامه در قسمت if آن قرار می‌گیرد.
- هر زمانیکه کار روال رویدادگردان OnInitializedAsync به پایان برسد (که شامل اجرای متد LoadRooms نیز هست)، سبب فراخوانی خودکار StateHasChanged می‌شود. این فراخوانی، UI را مجددا رندر میکند. به همین جهت است که پس از پایان کار، محتوای if، رندر خواهد شد.
- از این loading سفارشی که در میانه‌ی صفحه نمایش داده می‌شود، می‌توان در فایل wwwroot\index.html نیز بجای loading پیش‌فرض آن استفاده کرد:
افزودن خواصی جدید به HotelRoomDTO
میخواهیم به کاربر امکان تغییر تعداد روزهای اقامت را بدهیم. این انتخاب باید در لیست اتاق‌های نمایش داده شده، با تغییر تعداد روزهای اقامت (TotalDays) و هزینه‌ی جدید متناظر با آن (TotalAmount)، منعکس شود. به همین جهت این خواص را به HotelRoomDTO، اضافه می‌کنیم:
محاسبات مربوط به این خواص را هم می‌توان در همان کامپوننت HotelRooms.razor، پس از بارگذاری لیست اتاق‌ها از Web API، انجام داد:
افزودن امکان تغییر تعداد روزهای اقامت در همان صفحه‌ی نمایش لیست اتاق‌ها
همانطور که در تصویر فوق هم مشاهده می‌کنید، میخواهیم در این صفحه نیز کاربر بتواند زمان شروع اقامت و مدت مدنظر را تغییر دهد. به همین جهت، HomeModel ای را که در قسمت قبل از Local Storage دریافت کردیم، به فرم زیر متصل می‌کنیم تا اجزای آن در این فرم، نمایش داده شده و قابل تغییر شوند:
نکته‌ی مهم این فرم، مدیریت قسمت کلیک بر روی دکمه‌ی Update است که سبب فراخوانی روال رویدادگران OnValidSubmit می‌شود:
در ابتدای عملیات، فیلد جدید IsProcessing را به true تنظیم می‌کنیم. این مورد سبب می‌شود تا برچسب دکمه‌ی Update به Processing... تغییر کند. سپس فیلد محاسباتی EndDate را بر اساس اطلاعات جدید فرم، به روز رسانی می‌کنیم. در ادامه، مجددا این اطلاعات را در Local Storage ذخیره سازی کرده و کار LoadRoomsAsync را انجام می‌دهیم که به همراه آن، خواص جدید تعداد روزها و هزینه‌ی اقامت نیز مجددا محاسبه می‌شوند. در آخر برچسب دکمه‌ی Update را به حالت اول باز می‌گردانیم.
سؤال: زمانیکه IsProcessing به true تنظیم می‌شود که هنوز کار متد رویدادگردان SaveBookingInfo به پایان نرسیده‌است و فراخوانی خودکار StateHasChanged در پایان متدهای رویدادگردان صورت می‌گیرد. پس چطور است که سبب رندر مجدد UI و تغییر برچسب دکمه‌ی Update می‌شود؟
پاسخ به این سؤال را در قسمت 6 این سری با بررسی چرخه‌ی حیات کامپوننت‌ها، مشاهده کردیم:
«البته متدهای رویدادگردان async، دوبار سبب فراخوانی ضمنی StateHasChanged می‌شوند؛ یکبار زمانیکه قسمت sync متد به پایان می‌رسد (در این مثال یعنی تا قبل از اولین await نوشته شده) و یکبار هم زمانیکه کار فراخوانی کلی متد به پایان خواهد رسید»
نمایش لیست اتاق‌ها
نمایش لیست اتاق‌ها مطابق تصویر فوق، دو قسمت اصلی را دارد:
الف) نمایش لیست تصاویر منتسب به یک اتاق، توسط کامپوننت carousel بوت استرپ
- هرچند این قطعه کد، طولانی به نظر می‌رسد اما قسمت‌های مختلف آن صرفا بر اساس مستندات سایت بوت استرپ، جهت تشکیل ساختار ابتدایی و استاندارد کامپوننت carousel، تهیه شده‌اند.
- سپس در حلقه‌ای که برای نمایش لیست اتاق‌ها تهیه کردهایم، قسمت‌های مختلف carousel را تکمیل می‌کنیم که در اینجا نیاز به ایندکس تصاویر، لیست تصاویر و یک Id منحصربفرد برای این carousel خاص را دارد تا بتوان چندین وهله از آن‌را در صفحه قرار داد که این id را بر اساس Id اتاق مشخص کردهایم.
دو نکته:
- در این مثال برای تعریف لینک به تصاویر، کد زیر را مشاهده می‌کنید:
و این ImagesBaseAddress، به صورت زیر تعریف شده که همان آدرس برنامه‌ی blazor server ای است که مشخصات اتاق‌ها و تصاویر را ثبت میکند:
بنابراین اگر می‌خواهید تصاویر را هم مشاهده کنید، باید برنامه‌ی مجزای blazor server این سری نیز در حال اجرا باشد.
- کامپوننت carousel برای اجرا، نیاز به فایل lib/bootstrap/dist/js/bootstrap.bundle.min.js را نیز دارد. به همین جهت مدخل اسکریپت آن‌را باید به فایل wwwroot\index.html اضافه کرد.
ب) نمایش جزئیات نام و هزینه‌ی اتاق
قسمت دوم حلقه‌ی foreach نمایش لیست اتاق‌ها، جهت نمایش جزئیات هر اتاق تعریف شده‌است:
- در این مثال از MarkupString استفاده شده تا بتوان یک محتوای HTML ای را در صفحه نمایش داد.
- هر اتاق نمایش داده شده، لینکی را به صفحه‌ی خاص خودش نیز دارد که آن‌را در قسمت بعدی تکمیل می‌کنیم.
- در اینجا TotalAmount و TotalDays محاسباتی و قابل تغییر بر اساس انتخاب کاربر نیز درج شده‌اند.
یک تمرین: در برنامه‌ی Blazor Server، سرویسی را جهت درج مشخصات امکانات رفاهی هتل تهیه کردیم. این امکانات رفاهی را از طریق Web API برنامه دریافت و سپس در برنامه‌ی سمت کلاینت نمایش دهید.
بنابراین تکمیل این تمرین شامل تهیه‌ی موارد زیر است که کدنویسی آن، با دو قسمت اخیر این سری دقیقا یکی است و نکته‌ی جدیدی را به همراه ندارد (و کدهای کامل آن را از انتهای بحث می‌توانید دریافت کنید):
- تهیه‌ی HotelAmenityController در پروژه‌ی Web API که به کمک IAmenityService، لیست امکانات رفاهی را بازگشت می‌دهد.
- تهیه‌ی ClientHotelAmenityService در پروژه‌ی WASM که همانند ClientHotelRoomService قسمت قبل ، از Web API، لیست HotelAmenityDTOها را دریافت میکند.
- ثبت سرویس جدید ClientHotelAmenityService در Program.cs.
- در آخر حلقه‌ای را بر روی لیست HotelAmenityDTO دریافتی از ClientHotelRoomService در کامپوننت Index.razor تشکیل داده و آنها را نمایش می‌دهیم.
کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: Blazor-5x-Part-28.zip
نمایش منتظر بمانید در حین بارگذاری اولیه‌ی کامپوننت
کامپوننت‌هایی که قرار است اطلاعات را از یک Web API دریافت کنند، مدتی باید منتظر بمانند تا عملیات رفت و برگشت به سرور، تکمیل شود. در این بین می‌توان یک loading را به کاربر نمایش داد:
@page "/hotel/rooms"
@if (Rooms is not null && Rooms.Any())
{
}
else
{
<div style="position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px;">
<img src="images/loader.gif" />
</div>
}
@code {
IEnumerable<HotelRoomDTO> Rooms = new List<HotelRoomDTO>();
// ...
} - هر زمانیکه کار روال رویدادگردان OnInitializedAsync به پایان برسد (که شامل اجرای متد LoadRooms نیز هست)، سبب فراخوانی خودکار StateHasChanged می‌شود. این فراخوانی، UI را مجددا رندر میکند. به همین جهت است که پس از پایان کار، محتوای if، رندر خواهد شد.
- از این loading سفارشی که در میانه‌ی صفحه نمایش داده می‌شود، می‌توان در فایل wwwroot\index.html نیز بجای loading پیش‌فرض آن استفاده کرد:
<body>
<div id="app">
<div
style="
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
"
>
<img src="images/ajax-loader.gif" />
</div>
</div> افزودن خواصی جدید به HotelRoomDTO
میخواهیم به کاربر امکان تغییر تعداد روزهای اقامت را بدهیم. این انتخاب باید در لیست اتاق‌های نمایش داده شده، با تغییر تعداد روزهای اقامت (TotalDays) و هزینه‌ی جدید متناظر با آن (TotalAmount)، منعکس شود. به همین جهت این خواص را به HotelRoomDTO، اضافه می‌کنیم:
namespace BlazorServer.Models
{
public class HotelRoomDTO
{
// ...
public int TotalDays { get; set; }
public decimal TotalAmount { get; set; }
}
} @code
{
HomeVM HomeModel = new HomeVM();
// ...
private async Task LoadRoomsAsync()
{
Rooms = await HotelRoomService.GetHotelRoomsAsync(HomeModel.StartDate, HomeModel.EndDate);
foreach (var room in Rooms)
{
room.TotalAmount = room.RegularRate * HomeModel.NoOfNights;
room.TotalDays = HomeModel.NoOfNights;
}
}
} افزودن امکان تغییر تعداد روزهای اقامت در همان صفحه‌ی نمایش لیست اتاق‌ها
همانطور که در تصویر فوق هم مشاهده می‌کنید، میخواهیم در این صفحه نیز کاربر بتواند زمان شروع اقامت و مدت مدنظر را تغییر دهد. به همین جهت، HomeModel ای را که در قسمت قبل از Local Storage دریافت کردیم، به فرم زیر متصل می‌کنیم تا اجزای آن در این فرم، نمایش داده شده و قابل تغییر شوند:
@if (Rooms is not null && Rooms.Any())
{
<EditForm Model="HomeModel" OnValidSubmit="SaveBookingInfo" class="bg-light">
<div class="pt-3 pb-2 px-5 mx-1 mx-md-0 bg-secondary">
<DataAnnotationsValidator />
<div class="row px-3 mx-3">
<div class="col-6 col-md-4">
<div class="form-group">
<label class="text-warning">Check in Date</label>
<InputDate @bind-Value="HomeModel.StartDate" class="form-control" />
</div>
</div>
<div class="col-6 col-md-4">
<div class="form-group">
<label class="text-warning">Check Out Date</label>
<input @bind="HomeModel.EndDate" disabled="disabled"
readonly="readonly" type="date" class="form-control" />
</div>
</div>
<div class=" col-4 col-md-2">
<div class="form-group">
<label class="text-warning">No. of nights</label>
<select class="form-control" @bind="HomeModel.NoOfNights">
<option value="Select" selected disabled="disabled">(Select No. Of Nights)</option>
@for (var i = 1; i <= 10; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
</div>
<div class="col-8 col-md-2">
<div class="form-group" style="margin-top: 1.9rem !important;">
@if (IsProcessing)
{
<button class="btn btn-success btn-block form-control">
<i class="fa fa-spin fa-spinner"></i>Processing...
</button>
}
else
{
<input type="submit" value="Update" class="btn btn-success btn-block form-control" />
}
</div>
</div>
</div>
</div>
</EditForm> @code {
bool IsProcessing;
// ...
private async Task SaveBookingInfo()
{
IsProcessing = true;
HomeModel.EndDate = HomeModel.StartDate.AddDays(HomeModel.NoOfNights);
await LocalStorage.SetItemAsync(ConstantKeys.LocalInitialBooking, HomeModel);
await LoadRoomsAsync();
IsProcessing = false;
}
} سؤال: زمانیکه IsProcessing به true تنظیم می‌شود که هنوز کار متد رویدادگردان SaveBookingInfo به پایان نرسیده‌است و فراخوانی خودکار StateHasChanged در پایان متدهای رویدادگردان صورت می‌گیرد. پس چطور است که سبب رندر مجدد UI و تغییر برچسب دکمه‌ی Update می‌شود؟
پاسخ به این سؤال را در قسمت 6 این سری با بررسی چرخه‌ی حیات کامپوننت‌ها، مشاهده کردیم:
«البته متدهای رویدادگردان async، دوبار سبب فراخوانی ضمنی StateHasChanged می‌شوند؛ یکبار زمانیکه قسمت sync متد به پایان می‌رسد (در این مثال یعنی تا قبل از اولین await نوشته شده) و یکبار هم زمانیکه کار فراخوانی کلی متد به پایان خواهد رسید»
نمایش لیست اتاق‌ها
نمایش لیست اتاق‌ها مطابق تصویر فوق، دو قسمت اصلی را دارد:
الف) نمایش لیست تصاویر منتسب به یک اتاق، توسط کامپوننت carousel بوت استرپ
@foreach (var room in Rooms)
{
<div class="row p-2 my-3 " style="border-radius:20px; border: 1px solid gray">
<div class="col-12 col-lg-3 col-md-4">
<div id="carouselExampleIndicators_@room.Id"
class="carousel slide mb-4 m-md-3 m-0 pt-3 pt-md-0"
data-ride="carousel">
<ol class="carousel-indicators">
@{
int imageIndex = 0;
int innerImageIndex = 0;
}
@foreach (var image in room.HotelRoomImages)
{
if (imageIndex == 0)
{
<li data-target="#carouselExampleIndicators_@room.Id"
data-slide-to="@imageIndex" class="active"></li>
}
else
{
<li data-target="#carouselExampleIndicators_@room.Id"
data-slide-to="@imageIndex"></li>
}
imageIndex++;
}
</ol>
<div class="carousel-inner">
@foreach (var image in room.HotelRoomImages)
{
var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}";
if (innerImageIndex == 0)
{
<div class="carousel-item active">
<img class="d-block w-100" style="border-radius:20px;"
src="@imageUrl" alt="First slide">
</div>
}
else
{
<div class="carousel-item">
<img class="d-block w-100" style="border-radius:20px;"
src="@imageUrl" alt="First slide">
</div>
}
innerImageIndex++;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators_@room.Id"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators_@room.Id"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
} - سپس در حلقه‌ای که برای نمایش لیست اتاق‌ها تهیه کردهایم، قسمت‌های مختلف carousel را تکمیل می‌کنیم که در اینجا نیاز به ایندکس تصاویر، لیست تصاویر و یک Id منحصربفرد برای این carousel خاص را دارد تا بتوان چندین وهله از آن‌را در صفحه قرار داد که این id را بر اساس Id اتاق مشخص کردهایم.
دو نکته:
- در این مثال برای تعریف لینک به تصاویر، کد زیر را مشاهده می‌کنید:
var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}"; @code {
string ImagesBaseAddress = "https://localhost:5006"; - کامپوننت carousel برای اجرا، نیاز به فایل lib/bootstrap/dist/js/bootstrap.bundle.min.js را نیز دارد. به همین جهت مدخل اسکریپت آن‌را باید به فایل wwwroot\index.html اضافه کرد.
ب) نمایش جزئیات نام و هزینه‌ی اتاق
قسمت دوم حلقه‌ی foreach نمایش لیست اتاق‌ها، جهت نمایش جزئیات هر اتاق تعریف شده‌است:
@foreach (var room in Rooms)
{
<div class="col-12 col-lg-9 col-md-8">
<div class="row pt-3">
<div class="col-12 col-lg-8">
<p class="card-title text-warning" style="font-size:xx-large">@room.Name</p>
<p class="card-text">
@((MarkupString)room.Details)
</p>
</div>
<div class="col-12 col-lg-4">
<div class="row pb-3 pt-2">
<div class="col-12 col-lg-11 offset-lg-1">
<a href="@($"hotel/room-details/{room.Id}")" class="btn btn-success btn-block">Book</a>
</div>
</div>
<div class="row ">
<div class="col-12 pb-5">
<span class="float-right">
<span class="float-right">Occupancy : @room.Occupancy adults </span><br />
<span class="float-right pt-1">Room Size : @room.SqFt sqft</span><br />
<h4 class="text-warning font-weight-bold pt-4">
<span style="border-bottom:1px solid #ff6a00">
@room.TotalAmount.ToString("#,#.00;(#,#.00#)")
</span>
</h4>
<span class="float-right">Cost for @room.TotalDays nights</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
} - هر اتاق نمایش داده شده، لینکی را به صفحه‌ی خاص خودش نیز دارد که آن‌را در قسمت بعدی تکمیل می‌کنیم.
- در اینجا TotalAmount و TotalDays محاسباتی و قابل تغییر بر اساس انتخاب کاربر نیز درج شده‌اند.
یک تمرین: در برنامه‌ی Blazor Server، سرویسی را جهت درج مشخصات امکانات رفاهی هتل تهیه کردیم. این امکانات رفاهی را از طریق Web API برنامه دریافت و سپس در برنامه‌ی سمت کلاینت نمایش دهید.
بنابراین تکمیل این تمرین شامل تهیه‌ی موارد زیر است که کدنویسی آن، با دو قسمت اخیر این سری دقیقا یکی است و نکته‌ی جدیدی را به همراه ندارد (و کدهای کامل آن را از انتهای بحث می‌توانید دریافت کنید):
- تهیه‌ی HotelAmenityController در پروژه‌ی Web API که به کمک IAmenityService، لیست امکانات رفاهی را بازگشت می‌دهد.
- تهیه‌ی ClientHotelAmenityService در پروژه‌ی WASM که همانند ClientHotelRoomService قسمت قبل ، از Web API، لیست HotelAmenityDTOها را دریافت میکند.
- ثبت سرویس جدید ClientHotelAmenityService در Program.cs.
- در آخر حلقه‌ای را بر روی لیست HotelAmenityDTO دریافتی از ClientHotelRoomService در کامپوننت Index.razor تشکیل داده و آنها را نمایش می‌دهیم.
کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: Blazor-5x-Part-28.zip
When you start working on a new web application you will probably need to analyze different tools to deal with the different functionalities that you have to work on. As soon as you start searching for alternatives you are going to run across Angular and React, they are without any doubt two of the major options to consider, at least till today.
Like many other modern JSON databases, RethinkDB is schemaless: the developer doesn’t have to define a fixed structure or specify field types when creating a new table. In cases where validation is desirable, it’s up to the developer to build it into their application.
When you’re dealing with complex and structured data, you need to determine whether the data is valid or not. JSON-Schema is the standard of JSON documents that describes the structure and the requirements of your JSON data. In this two-part series, you’ll learn how to use JSON-Schema to validate data.
WinMerge is an Open Source differencing and merging tool for Windows. WinMerge can compare both folders and files, presenting differences in a visual text format that is easy to understand and handle.
