- معماری لایه ای
- استفاده از جدیدترین نسخه ASP.NET Identity
- به روز رسانی لایه IocConfig برای یک برنامه ASP.NET Core با توجه به بخش روش تعویض IoC Container توکار ASP.NET Core با StructureMap و https://github.com/structuremap/StructureMap.Microsoft.DependencyInjection جهت استفاده از تنظیمات StructureMap در یک لایه مجزا (IocConfig) با کانفیگهای مختص برای آخرین نگارش MVC و Web API و SignalR و Entity Framework .
PM> Install-Package EFInteractiveViews
private static bool _isPreGeneratedViewCacheSet; private void InitializationPreGeneratedViews() { if (_isPreGeneratedViewCacheSet) return; var precompiledViewsFilePath = new FileInfo(Assembly.GetExecutingAssembly().Location).DirectoryName + @”\EF6PrecompiledViews.xml”; InteractiveViews.SetViewCacheFactory(this, new FileViewCacheFactory(precompiledViewsFilePath)); _isPreGeneratedViewCacheSet = true; }
dotnet new webapi -o SampleApi
<PackageReference Include="Microsoft.AspNetCore.Mvc.NewtonsoftJson" Version="3.1.3" /> <PackageReference Include="Microsoft.AspNetCore.OData" Version="7.4.0" />
using Microsoft.AspNet.OData.Extensions;
services.AddControllers().AddNewtonsoftJson(); // Add .AddNewtonsoftJson() to services.AddControllers(); services.AddOData(); // add this new line
app.UseEndpoints(endpoints => // Existing code { endpoints.MapControllers(); // Existing code endpoints.EnableDependencyInjection(); // Add this new line endpoints.Select().Expand().Filter().OrderBy().Count().MaxTop(20); // Add this new line });
// replace: [HttpGet] // Existing code // with: [HttpGet, EnableQuery] // new code
public class Customer { public int Id { get; set; } public string FirstName { get; set; } public string LastName { get; set; } public Gender Gender { get; set; } public AddressInfo Address { get; set; } } public class AddressInfo { public int StreetNo { get; set; } public string PostalCode { get; set; } } public enum Gender { Man, Woman, Other }
?$filter=Gender eq 'Woman'
?$filter=Gender eq 'Woman'&$orderby=Address/StreetNo
?$filter=contains(FirstName,'Ali')
if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } else { app.UseExceptionHandler("/Error"); }
//if (env.IsDevelopment()) //{ //app.UseDeveloperExceptionPage(); //} //else //{ app.UseExceptionHandler("/Error"); //}
@page "/counter" <PageTitle>Counter</PageTitle> <h1>Counter</h1> <p role="status">Current count: @currentCount</p> <button @onclick="IncrementCount">Click me</button> @code { private int currentCount = 0; private void IncrementCount() { currentCount++; throw new Exception("This is my Exception !!"); } }
مدلهای AuditLog (اصلاحیه)و ActivityLog
- استفاده از جداول جدا برای هر کدام از جداول به صورتیکه یک ارتباط یک به چند مابین آنها برقرار است. از این جداول تحت عنوان HistoryTable یاد میشود.
- استفاده از یک جدول برای نگهداری تاریخچهی تغییرات جداولی که نیازمند این امکان هستند.
/// <summary> /// Represent The Operation's log /// </summary> public class AuditLog { #region Ctor /// <summary> /// Create One Instance Of <see cref="AuditLog"/> /// </summary> public AuditLog() { Id = SequentialGuidGenerator.NewSequentialGuid(); OperatedOn = DateTime.Now; } #endregion #region Properties /// <summary> /// sets or gets identifier of AuditLog /// </summary> public virtual Guid Id { get; set; } /// <summary> /// gets or sets Type of Modification(create,softDelet,Delete,update) /// </summary> public virtual AuditAction Action { get; set; } /// <summary> /// sets or gets description of Log /// </summary> public virtual string Description { get; set; } /// <summary> /// sets or gets when log is operated /// </summary> public virtual DateTime OperatedOn { get; set; } /// <summary> /// sets or gets Type Of Entity /// </summary> public virtual string Entity { get; set; } /// <summary> /// gets or sets Old value of Properties before modification /// </summary> public virtual string XmlOldValue { get; set; } /// <summary> /// gets or sets XML Base OldValue of Properties (NotMapped) /// </summary> public virtual XElement XmlOldValueWrapper { get { return XElement.Parse(XmlOldValue); } set { XmlOldValue = value.ToString(); } } /// <summary> /// gets or sets new value of Properties after modification /// </summary> public virtual string XmlNewValue { get; set; } /// <summary> /// gets or sets XML Base NewValue of Properties (NotMapped) /// </summary> public virtual XElement XmlNewValueWrapper { get { return XElement.Parse(XmlNewValue); } set { XmlNewValue = value.ToString(); } } /// <summary> /// gets or sets Identifier Of Entity /// </summary> public virtual string EntityId { get; set; } /// <summary> /// gets or sets user agent information /// </summary> public virtual string Agent { get; set; } /// <summary> /// gets or sets user's ip address /// </summary> public virtual string OperantIp { get; set; } #endregion #region NavigationProperties /// <summary> /// sets or gets log's creator /// </summary> public virtual User Operant { get; set; } /// <summary> /// sets or gets identifier of log's creator /// </summary> public virtual long OperantId { get; set; } #endregion } public enum AuditAction { Create, Update, Delete, SoftDelete, }
- Action : از نوع AdutiAction است و برای مشخص کردن نوع عملیاتی که انجام شده است، میباشد.
- Description : اگر نیاز باشد توضیحاتی اضافی ثبت شوند، از این خصوصیت استفاده میشود.
- Entity : مشخص کنندهی نام مدل خواهد بود. شاید بهتر بود از یک Enum استفاده میشد. ولی این سیستم به احتمال زیاد قرار است افزونه پذیر باشد و استفاده از Enum، یعنی محدودیت و این امکان وجود نخواهد داشت که سایر افزونهها بتوانند از مدل بالا استفاده کنند. برا ی مثال BlogPost , NewsItem , ForumPost , ...
- EntitytId : آی دی رکوردی است که تاریخچهی آن ثبت شده است. از آنجائیکه بعضی از موجودیتها دارای آی دی از نوع long و برخی دیگر Guid ، لذا ذخیرهی رشتهای آن مفید خواهد بود.
- XmlOldValue : در برگیرندهی مقدار (قبل از اعمال تغییرات) خصوصیاتی است که لازم است از یک موجودیت مشخص، در قالب XML رشتهای ذخیره شوند.
- XmlNewValue : در برگیرندهی مقدار (بعد از تغییرات) خصوصیاتی است که لازم است از یک موجودیت مشخص، در قالب XML رشتهای ذخیره شوند.
- Operant, OperantId: برای برقراری ارتباط یک به چند مابین مدل کاربر و مدل بالا در نظر گرفته شدهاند که به عنوان انجام دهندهی این تغییرات بوده است.
/// <summary> /// Represents Activity Log record /// </summary> public class ActivityLog { #region Ctor /// <summary> /// Create one instance of <see cref="ActivityLog"/> /// </summary> public ActivityLog() { Id = SequentialGuidGenerator.NewSequentialGuid(); OperatedOn=DateTime.Now; } #endregion #region Properties /// <summary> /// gets or sets identifier /// </summary> public virtual Guid Id { get; set; } /// <summary> /// gets or sets the comment of this activity /// </summary> public virtual string Comment { get; set; } /// <summary> /// gets or sets the date that this activity was done /// </summary> public virtual DateTime OperatedOn { get; set; } /// <summary> /// gets or sets the page url . /// </summary> public virtual string Url { get; set; } /// <summary> /// gets or sets the title of page if Url is Not null /// </summary> public virtual string Title { get; set; } /// <summary> /// gets or sets user agent information /// </summary> public virtual string Agent { get; set; } /// <summary> /// gets or sets user's ip address /// </summary> public virtual string OperantIp { get; set; } #endregion #region NavigationProperties /// <summary> /// gets or sets the type of this activity /// </summary> public virtual ActivityLogType Type{ get; set; } /// <summary> /// gets or sets the type's id of this activity /// </summary> public virtual Guid TypeId { get; set; } /// <summary> /// gets or sets User that done this activity /// </summary> public virtual User Operant { get; set; } /// <summary> /// gets or sets Id of User that done this activity /// </summary> public virtual long OperantId { get; set; } #endregion } /// <summary> /// Represents Activity Log Type Record /// </summary> public class ActivityLogType { #region Ctor /// <summary> /// Create one Instance of <see cref="ActivityLogType"/> /// </summary> public ActivityLogType() { Id = SequentialGuidGenerator.NewSequentialGuid(); } #endregion #region Properties /// <summary> /// gets or sets identifier /// </summary> public virtual Guid Id { get; set; } /// <summary> /// gets or sets the system name /// </summary> public virtual string Name{ get; set; } /// <summary> /// gets or sets the display name /// </summary> public virtual string DisplayName { get; set; } /// <summary> /// gets or sets the description /// </summary> public virtual string Description { get; set; } /// <summary> /// indicate this log type is enable for logging /// </summary> public virtual bool IsEnabled { get; set; } #endregion }
- Comment : توضیحات کوتاهی از اکشنی که کاربر انجام داده است.
- Url : آدرس صفحهای که این عملیات در آنجا انجام شده است. این خصوصیت نالپذیر میباشد.
- Title : عنوان صفحهای که این عملیات در آنجا انجام شده است؛ اگر Url نال نباشد.
- Operant , OperantId : برای برقراری ارتباط یک به چند بین کاربر و مدل فعالیتها در نظر گرفته شدهاند.
- Type : از نوع ActivityLogType پیاده سازی شده در بالا میباشد. با استفاده از مدل ActivityLogType میتوان مثلا لاگ فعالیت مربوط به بخش اخبار را غیر فعال کند یا بالعکس و از این موارد.
- Name : نام سیستمی آن است. برای مثال : Login ، NewsComment ، NewsItem و ...
- IsEnabled : نشان دهندهی این است که این نوع لاگ فعال است یا خیر.
کلاس پایه تمام مدلها (اصلاحیه)
/// <summary> /// Represents the entity /// </summary> /// <typeparam name="TForeignKey">type of user's Id that can be long or long? </typeparam> public abstract class Entity<TForeignKey> { #region Properties /// <summary> /// gets or sets date that this entity was created /// </summary> public virtual DateTime CreatedOn { get; set; } /// <summary> /// gets or sets Date that this entity was updated /// </summary> public virtual DateTime ModifiedOn { get; set; } /// <summary> /// gets or sets IP Address of Creator /// </summary> public virtual string CreatorIp { get; set; } /// <summary> /// gets or set IP Address of Modifier /// </summary> public virtual string ModifierIp { get; set; } /// <summary> /// indicate this entity is Locked for Modify /// </summary> public virtual bool ModifyLocked { get; set; } /// <summary> /// indicate this entity is deleted softly /// </summary> public virtual bool IsDeleted { get; set; } /// <summary> /// gets or sets information of user agent of modifier /// </summary> public virtual string ModifierAgent { get; set; } /// <summary> /// gets or sets information of user agent of Creator /// </summary> public virtual string CreatorAgent { get; set; } /// <summary> /// gets or sets date that this entity repoted last time /// </summary> public virtual DateTime? ReportedOn { get; set; } /// <summary> /// gets or sets counter for Content's report /// </summary> public virtual int ReportsCount { get; set; } /// <summary> /// gets or sets count of Modification Default is 1 /// </summary> public virtual int Version { get; set; } /// <summary> /// gets or sets action (create,update,softDelete) /// </summary> public virtual AuditAction Action { get; set; } /// <summary> /// gets or sets TimeStamp for prevent concurrency Problems /// </summary> public virtual byte[] RowVersion { get; set; } #endregion #region NavigationProperties /// <summary> /// gets ro sets User that Modify this entity /// </summary> public virtual User ModifiedBy { get; set; } /// <summary> /// gets ro sets Id of User that modify this entity /// </summary> public virtual TForeignKey ModifiedById { get; set; } /// <summary> /// gets ro sets User that Create this entity /// </summary> public virtual User CreatedBy { get; set; } /// <summary> /// gets ro sets User that Create this entity /// </summary> public virtual TForeignKey CreatedById { get; set; } #endregion } /// <summary> /// Represents the base Entity /// </summary> /// <typeparam name="TKey">type of Id</typeparam> /// <typeparam name="TForeignKey">type of User's Id that can be long or long?</typeparam> public abstract class BaseEntity<TKey,TForeignKey> : Entity<TForeignKey> { #region Properties /// <summary> /// gets or sets Identifier of this Entity /// </summary> public virtual TKey Id { get; set; } #endregion }
مدل سیستم آگاه سازی
/// <summary> /// Represents the Notification Record /// </summary> public class Notification { #region Ctor /// <summary> /// create one instance of <see cref="Notification"/> /// </summary> public Notification() { Id = SequentialGuidGenerator.NewSequentialGuid(); ReceivedOn = DateTime.Now; } #endregion #region Properties /// <summary> /// gets or sets identifier /// </summary> public virtual Guid Id { get; set; } /// <summary> /// indicate that this notification is read by owner /// </summary> public virtual bool IsRead { get; set; } /// <summary> /// gets or sets notification's text body /// </summary> public virtual string Message { get; set; } /// <summary> /// gets or sets page url that this notification is related with it /// </summary> public virtual string Url { get; set; } /// <summary> /// gets or sets date that this Notification Received /// </summary> public virtual DateTime ReceivedOn { get; set; } /// <summary> /// gets or sets the type of notification /// </summary> public virtual NotificationType Type { get; set; } #endregion #region NavigationProperties /// <summary> /// gets or sets the id of user that is owner of this notification /// </summary> public virtual long OwnerId { get; set; } /// <summary> /// gets or sets the user that is owner of this notification /// </summary> public virtual User Owner { get; set; } #endregion } public enum NotificationType { NewConversation, NewConversationReply, ... }
- IsRead : مشخص کنندهی این است که یک اطلاع رسانی خوانده شده است یا خیر. در آخر هر روز اطلاع رسانیهایی که دارای خصوصیت IsRead با مقدار true هستند، حذف خواهند شد.
- Url : برای مواردی که لازم است کاربر با کلیک بر روی آن به صفحهی خاصی هدایت شود.
- OwnerId, Owner : برای برقراری ارتباط یک به چند بین کاربر و مدل Notification در نظر گرفته شدهاند.
- Type : از نوع NotificationType و مشخص کنندهی نوع اطلاع رسانی میباشد .
مدل Observation
public class Observation { #region Ctor /// <summary> /// create one instance of <see cref="Observation"/> /// </summary> public Observation() { LastObservedOn = DateTime.Now; Id = SequentialGuidGenerator.NewSequentialGuid(); } #endregion #region Properties public virtual Guid Id { get; set; } /// <summary> /// gets or sets datetime of last visit /// </summary> public virtual DateTime LastObservedOn { get; set; } /// <summary> /// gets or sets Id Of section That user is observing the entity /// </summary> public virtual string SectionId { get; set; } /// <summary> /// gets or sets section That user is observing in it /// </summary> public virtual string Section { get; set; } #endregion #region NavigationProperites /// <summary> /// gets or sets user that observed the entity /// </summary> public virtual User Observer { get; set; } /// <summary> /// gets or sets identifier of user that observed the entity /// </summary> public virtual long ObserverId { get; set; } #endregion }
مدل صفحات داینامیک
/// <summary> /// represents one custom page /// </summary> public class Page : BaseEntity<long, long> { #region Properties /// <summary> /// gets or sets the blog pot body /// </summary> public virtual string Body { get; set; } /// <summary> /// gets or sets the content title /// </summary> public virtual string Title { get; set; } /// <summary> /// gets or sets value indicating Custom Slug /// </summary> public virtual string SlugUrl { get; set; } /// <summary> /// gets or sets meta title for seo /// </summary> public virtual string MetaTitle { get; set; } /// <summary> /// gets or sets meta keywords for seo /// </summary> public virtual string MetaKeywords { get; set; } /// <summary> /// gets or sets meta description of the content /// </summary> public virtual string MetaDescription { get; set; } /// <summary> /// gets or sets /// </summary> public virtual string FocusKeyword { get; set; } /// <summary> /// gets or sets value indicating whether the content use CanonicalUrl /// </summary> public virtual bool UseCanonicalUrl { get; set; } /// <summary> /// gets or sets CanonicalUrl That the Post Point to it /// </summary> public virtual string CanonicalUrl { get; set; } /// <summary> /// gets or sets value indicating whether the content user no Follow for Seo /// </summary> public virtual bool UseNoFollow { get; set; } /// <summary> /// gets or sets value indicating whether the content user no Index for Seo /// </summary> public virtual bool UseNoIndex { get; set; } /// <summary> /// gets or sets value indicating whether the content in sitemap /// </summary> public virtual bool IsInSitemap { get; set; } /// <summary> /// gets or sets title for snippet /// </summary> public string SocialSnippetTitle { get; set; } /// <summary> /// gets or sets description for snippet /// </summary> public string SocialSnippetDescription { get; set; } /// <summary> /// gets or sets section's type that this page show on /// </summary> public virtual ShowPageSection Section { get; set; } /// <summary> /// indicate this page has not any body /// </summary> public virtual bool IsCategory { get; set; } /// <summary> /// gets or sets order for display forum /// </summary> public virtual int DisplayOrder { get; set; } #endregion #region NavigationProeprties /// <summary> /// gets or sets Parent of this page /// </summary> public virtual Page Parent { get; set; } /// <summary> /// gets or sets parent'id of this page /// </summary> public virtual long? ParentId { get; set; } /// <summary> /// get or set collection of page that they are children of this page /// </summary> public virtual ICollection<Page> Children { get; set; } #endregion } public enum ShowPageSection { Menu, Footer, SideBar }
نتیجهی تا این قسمت
اول اینکه، کیفیت دادههای ذخیرهشده در دستگاههای تلفن همراه کاربر بیشتر شخصی میشود تا مواردی دیگر! به غیر از ایمیل، پیامهای فوری، SMS / MMS ، لاگ تماسها، عکسها و پست صوتی وجود دارند که عموما توسعه دهندگان را دچار مشکل میکند.
برخی از گزینههای فوق بر روی یک کامپیوتر رومیزی هم وجود دارند، ولی اهمیت این دادهها بر روی اندروید و اجزای آن اهمیت فوق العادهای دارد. اطلاعات روی دستگاه موبایل شما به احتمال زیاد از ارزش بیشتری برخوردار خواهد بود، چرا که آنها را در یک صفحه 4 - 5 اینچی به همراه خود حمل میکنید و با خود هر کجا میبرید! این حالت، یک پلتفرم همگرا را بوجود میآورد؛ به این دلیل که سیستم رومیزی شما و تلفن همراه یک مجموعه غنی و کامل از اطلاعات حساس هستند که هردوی آنها شامل اطلاعات شخصی میباشند و برای شما اهمیت زیادی خواهند داشت. تصور کنید زمانیکه برای جلوگیری از نفوذ یا به سرقت رفتن شماره تلفنهای خود، یک پشتیبان بر روی سیستم رو میزی خود تهیه میکنید و فایل پشتیبان شمارههای تماس را بر روی سیستم شخصی نگه داری میکنید! آیا این همان پلتفرم همگرا نیست؟ آیا این دو سیستم مکمل هم نیستند؟حتی اگر همگامسازی را با یک مکان دوردست (Google Drive) انجام دهید، با این حال شما فقط در مقابل از دست دادن دادهها محافظت کردهاید و نه از دست دادن حریم خصوصی!
همچنین در نظر بگیرید که فرمت دادههای ذخیرهشده در دستگاههای تلفن همراه، تعیین و مشخص شوند! این کار اطلاعات حساس شما را به مرز سرقت نزدیکتر میکند. هر تلفن همراه SMS / MMS ، تماسها، و پست صوتی خواهد داشت. مکانهای ذخیره شده از روی GPS و مواردی دیگر که قطعا اطلاع دارید، تمامی اینها جزء مواردی هستند که خطرات امنیتی را در سیستم عامل اندروید شامل میشود. حالا در نظر بگیرید که این اطلاعات تا چه حد مهم است؟ برای کاربرانی که هیچ گونه پشتیبانی از اطلاعاتی از خود ندارند، از دست دادن دادهها قابل تصور نیست!
خطرناکترین نوع حملات بر روی پلتفرم اندروید انجام میشوند، در سکوت کامل و چندین هزار مایل دروتر از شما و فرد مهاجم نیازی به دسترسی فیزیکی و لمس تلفن همراه شما نخواهد داشت! این نوع حملات در هر زمانی ممکن است رخ دهد و اغلب میتواند به دلیل امنیت ضعیف در جای دیگری بر روی دستگاه رخ دهد.
در مطلب بعدی پیرامون امنیت معماری اندروید صبحت خواهیم کرد...
مجوز استفاده از فایلهای جاوا اسکریپتی آن MIT است؛ به این معنا که در هر نوع پروژهای قابل استفاده است. مجوز استفاده از کامپوننتهای سمت سرور آن که برای نمونه جهت ASP.NET MVC یک سری HTML Helper را تدارک دیدهاند، تجاری میباشد. در ادامه قصد داریم صرفا از فایلهای JS عمومی آن استفاده کنیم.
دریافت jqGrid
برای دریافت jqGrid میتوانید به مخزن کد آن، در آدرس https://github.com/tonytomov/jqGrid/releases و یا از طریق NuGet اقدام کنید:
PM> Install-Package Trirand.jqGrid
از jQuery UI برای تولید صفحات جستجوی بر روی رکوردها و همچنین تولید خودکار صفحات ویرایش و یا افزودن رکوردها استفاده میکند. به علاوه آیکنها، قالب و رنگ خود را نیز از jQuery UI دریافت میکند. بنابراین اگر قصد تغییر قالب آنرا داشتید تنها کافی است یک قالب استاندارد دیگر jQuery UI را مورد استفاده قرار دهید.
تنظیمات اولیه فایل Layout سایت
پس از دریافت بستهی نیوگت jqGrid، نیاز است فایلهای مورد نیاز اصلی آنرا به شکل زیر به فایل layout پروژه اضافه کرد:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <div> @RenderBody() </div> <script src="~/Scripts/jquery-1.7.2.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.11.min.js"></script> <script src="~/Scripts/i18n/grid.locale-fa.js"></script> <script src="~/Scripts/jquery.jqGrid.min.js"></script> @RenderSection("Scripts", required: false) </body> </html>
این گرید به همراه فایل زبان فارسی grid.locale-fa.js نیز میباشد که در کدهای فوق پیوست شدهاست. البته اگر فرصت کردید نیاز است کمی ترجمههای آن بهبود پیدا کنند.
تنظیمات ثانویه site.css
.ui-widget { } /*how to move jQuery dialog close (X) button from right to left*/ .ui-jqgrid .ui-jqgrid-caption-rtl { text-align: center !important; } .ui-dialog .ui-dialog-titlebar-close { left: .3em !important; } .ui-dialog .ui-dialog-title { margin: .1em 0 .1em .8em !important; direction: rtl !important; float: right !important; }
همچنین محل قرار گیری دکمهی بسته شدن دیالوگها و راست به چپ کردن عناوین آنها نیز در اینجا قید شدهاند.
مدل برنامه
در ادامه قصد داریم لیستی از محصولات را با ساختار ذیل، توسط jqGrid نمایش دهیم:
namespace jqGrid01.Models { public class Product { public int Id { set; get; } public string Name { set; get; } public decimal Price { set; get; } public bool IsAvailable { set; get; } } }
ساختار دادهای مورد نیاز توسط jqGrid
jqGrid مستقل است از فناوری سمت سرور. بنابراین هر چند در عنوان بحث ASP.NET MVC ذکر شدهاست، اما از ASP.NET MVC صرفا جهت بازگرداندن خروجی JSON استفاده خواهیم کرد و این مورد در هر فناوری سمت سرور دیگری نیز میتواند انجام شود.
using System.Collections.Generic; namespace jqGrid01.Models { public class JqGridData { public int Total { get; set; } public int Page { get; set; } public int Records { get; set; } public IList<JqGridRowData> Rows { get; set; } public object UserData { get; set; } } public class JqGridRowData { public int Id { set; get; } public IList<string> RowCells { set; get; } } }
Total، نمایانگر تعداد صفحات اطلاعات است. عدد Page، شماره صفحهی جاری است. عدد Records، تعداد کل رکوردهای گزارش را مشخص میکند. ساختار ردیفهای آن نیز تشکیل شدهاست از یک Id به همراه سلولهایی که باید با فرمت string، بازگشت داده شوند.
UserData اختیاری است. برای مثال اگر خواستید جمع کل صفحه را در ذیل گرید نمایش دهید، میتوانید یک anonymous object را در اینجا مقدار دهی کنید. خاصیتهای آن دقیقا باید با نام خاصیتهای ستونهای متناظر، یکی باشند. برای مثال اگر میخواهید عددی را در ستون Id، در فوتر گرید نمایش دهید، باید نام خاصیت را Id ذکر کنید.
کدهای سمت کلاینت گرید
در اینجا کدهای کامل سمت کلاینت گرید را ملاحظه میکنید:
@{ ViewBag.Title = "Index"; } <div dir="rtl" align="center"> <div id="rsperror"></div> <table id="list" cellpadding="0" cellspacing="0"></table> <div id="pager" style="text-align:center;"></div> </div> @section Scripts { <script type="text/javascript"> $(document).ready(function () { $('#list').jqGrid({ caption: "آزمایش اول", //url from wich data should be requested url: '@Url.Action("GetProducts","Home")', //type of data datatype: 'json', jsonReader: { root: "Rows", page: "Page", total: "Total", records: "Records", repeatitems: true, userdata: "UserData", id: "Id", cell: "RowCells" }, //url access method type mtype: 'GET', //columns names colNames: ['شماره', 'نام محصول', 'موجود است', 'قیمت'], //columns model colModel: [ { name: 'Id', index: 'Id', align: 'right', width: 50, sorttype: "number" }, { name: 'Name', index: 'Name', align: 'right', width: 300 }, { name: 'IsAvailable', index: 'IsAvailable', align: 'center', width: 100, formatter: 'checkbox' }, { name: 'Price', index: 'Price', align: 'center', width: 100, sorttype: "number" } ], //pager for grid pager: $('#pager'), //number of rows per page rowNum: 10, rowList: [10, 20, 50, 100], //initial sorting column sortname: 'Id', //initial sorting direction sortorder: 'asc', //we want to display total records count viewrecords: true, altRows: true, shrinkToFit: true, width: 'auto', height: 'auto', hidegrid: false, direction: "rtl", gridview: true, rownumbers: true, footerrow: true, userDataOnFooter: true, loadComplete: function() { //change alternate rows color $("tr.jqgrow:odd").css("background", "#E0E0E0"); }, loadError: function(xhr, st, err) { jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText); } //, loadonce: true }) .jqGrid('navGrid', "#pager", { edit: false, add: false, del: false, search: false, refresh: true }) .jqGrid('navButtonAdd', '#pager', { caption: "تنظیم نمایش ستونها", title: "Reorder Columns", onClickButton: function() { jQuery("#list").jqGrid('columnChooser'); } }); }); </script> }
Div سومی با id مساوی rsperror نیز تعریف شدهاست که از آن جهت نمایش خطاهای بازگشت داده شده از سرور استفاده کردهایم.
- در ادامه نحوهی فراخوانی افزونهی jqGrid را بر روی جدول list ملاحظه میکنید.
- خاصیت caption، عنوان نمایش داده شده در بالای گرید را مقدار دهی میکند:
- خاصیت url، به آدرسی اشاره میکند که قرار است ساختار JqGridData ایی را که پیشتر در مورد آن بحث کردیم، با فرمت JSON بازگشت دهد. در اینجا برای مثال به یک اکشن متد کنترلری در یک پروژهی ASP.NET MVC اشاره میکند.
- datatype را برابر json قرار دادهایم. از نوع xml نیز پشتیبانی میکند.
- شیء jsonReader را از این جهت مقدار دهی کردهایم تا بتوانیم شیء JqGridData را با اصول نامگذاری دات نت، هماهنگ کنیم. برای درک بهتر این موضوع، فایل jquery.jqGrid.src.js را باز کنید و در آن به دنبال تعریف jsonReader بگردید. به یک چنین مقادیر پیش فرضی خواهید رسید:
ts.p.jsonReader = $.extend(true,{ root: "rows", page: "page", total: "total", records: "records", repeatitems: true, cell: "cell", id: "id", userdata: "userdata", subgrid: {root:"rows", repeatitems: true, cell:"cell"} },ts.p.jsonReader);
- در ادامه mtype به GET تنظیم شدهاست. در اینجا مشخص میکنیم که عملیات Ajax ایی دریافت اطلاعات از سرور توسط GET انجام شود یا برای مثال توسط POST.
- خاصیت colNames، معرف نام ستونهای گرید است. برای اینکه این نامها از راست به چپ نمایش داده شوند، باید خاصیت direction به rtl تنظیم شود.
- colModel آرایهای است که تعاریف ستونها را در بر دارد. مقدار name آن باید یک نام منحصربفرد باشد. از این نام در حین جستجو یا ویرایش اطلاعات استفاده میشود. مقدار index نامی است که جهت مرتب سازی اطلاعات، به سرور ارسال میشود. تنظیم sorttype در اینجا مشخص میکند که آیا به صورت پیش فرض، ستون جاری رشتهای مرتب شود یا اینکه برای مثال عددی پردازش گردد. مقادیر مجاز آن text (مقدار پیش فرض)، float، number، currency، numeric، int ، integer، date و datetime هستند.
- در ستون IsAvailable، مقدار formatter نیز تنظیم شدهاست. در اینجا توسط formatter، نوع bool دریافتی با یک checkbox نمایش داده خواهد شد.
- خاصیت pager به id متناظری در صفحه اشاره میکند.
- توسط rowNum مشخص میکنیم که در هر صفحه چه تعداد رکورد باید نمایش داده شوند.
- تعداد رکوردهای نمایش داده شده را میتوان توسط rowList پویا کرد. در اینجا آرایهای را ملاحظه میکنید که توسط اعداد آن، کاربر امکان انتخاب صفحاتی مثلا 100 ردیفه را نیز پیدا میکند. rowList به صورت یک dropdown در کنار عناصر راهبری صفحه در فوتر گرید ظاهر میشود.
- خاصیت sortname، نحوهی مرتب سازی اولیه گرید را مشخص میکند.
- خاصیت sortorder، جهت مرتب سازی اولیهی گردید را تنظیم میکند.
- viewrecords: تعداد رکوردها را در نوار ابزار پایین گرید نمایش میدهد.
- altRows: سبب میشود رنگ متن ردیفها یک در میان متفاوت باشد.
- shrinkToFit: به معنای تنظیم خودکار اندازهی سلولها بر اساس اندازهی دادهای است که دریافت میکنند.
- width: عرض گرید، که در اینجا به auto تنظیم شدهاست.
- height: طول گرید، که در اینجا به auto جهت محاسبهی خودکار، تنظیم شدهاست.
- gridview: برای بالا بردن سرعت نمایشی به true تنظیم شدهاست. در این حالت کل ردیف یکباره درج میشود. اگر از subgird یا حالت نمایش درختی استفاده شود، باید این خاصیت را false کرد.
- rownumbers: ستون سمت راست شماره ردیفهای خودکار را نمایش میدهد.
- footerrow: سبب نمایش ردیف فوتر میشود.
- userDataOnFooter: سبب خواهد شد تا خاصیت UserData مقدار دهی شده، در ردیف فوتر ظاهر شود.
- loadComplete : یک callback است که زمان پایان بارگذاری صفحهی جاری را مشخص میکند. در اینجا با استفاده از jQuery سبب شدهایم تا رنگ پس زمینهی ردیفها یک در میان تغییر کند.
- loadError: اگر از سمت سرور خطایی صادر شود، در این callback قابل دریافت خواهد بود.
- در ادامه توسط فراخوانی متد jqGrid با پارامتر navGrid، در ناحیه pager سبب نمایش دکمه refresh شدهایم. این دکمه سبب بارگذاری مجدد اطلاعات گردید از سرور میشود.
- همچنین به کمک متد jqGrid با پارامتر navButtonAdd در ناحیه pager، سبب نمایش دکمهای که صفحهی انتخاب ستونها را ظاهر میکند، خواهیم شد.
پیشنیاز کدهای سمت سرور jqGrid
اگر به تنظیمات گرید دقت کرده باشید، خاصیت index ستونها، نامی است که به سرور، جهت اطلاع رسانی در مورد فیلتر اطلاعات و مرتب سازی مجدد آنها ارسال میگردد. این نام، بر اساس کلیک کاربر بر روی ستونهای موجود، هر بار میتوان متفاوت باشد. بنابراین بجای if و else نوشتنهای طولانی جهت مرتب سازی اطلاعات، میتوان از کتابخانهی معروفی به نام dynamic LINQ استفاده کرد.
PM> Install-Package DynamicQuery
کدهای سمت سرور بازگشت اطلاعات به فرمت JSON
در کدهای سمت کلاینت، به اکشن متد GetProducts اشاره شده بود. تعاریف کامل آنرا در ذیل مشاهده میکنید:
using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Web.Mvc; using jqGrid01.Models; using jqGrid01.Extensions; // for dynamic OrderBy namespace jqGrid01.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult GetProducts(string sidx, string sord, int page, int rows) { var list = ProductDataSource.LatestProducts; var pageIndex = page - 1; var pageSize = rows; var totalRecords = list.Count; var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize); var products = list.AsQueryable() .OrderBy(sidx + " " + sord) .Skip(pageIndex * pageSize) .Take(pageSize) .ToList(); var jqGridData = new JqGridData { UserData = new // نمایش در فوتر { Name = "جمع صفحه", Price = products.Sum(x => x.Price) }, Total = totalPages, Page = page, Records = totalRecords, Rows = (products.Select(product => new JqGridRowData { Id = product.Id, RowCells = new List<string> { product.Id.ToString(CultureInfo.InvariantCulture), product.Name, product.IsAvailable.ToString(), product.Price.ToString(CultureInfo.InvariantCulture) } })).ToList() }; return Json(jqGridData, JsonRequestBehavior.AllowGet); } } }
- امضای متد GetProducts نیز مهم است. دقیقا همین پارامترها با همین نامها از طرف jqGrid به سرور ارسال میشوند که توسط آنها ستون مرتب سازی، جهت مرتب سازی، صفحهی جاری و تعداد ردیفی که باید بازگشت داده شوند، قابل دریافت است.
- در این کدها دو قسمت مهم وجود دارند:
الف) متد OrderBy نوشته شده، به صورت پویا عمل میکند و از کتابخانهی Dynamic LINQ مایکروسافت بهره میبرد.
به علاوه توسط Take و Skip کار صفحه بندی و بازگشت تنها بازهای از اطلاعات مورد نیاز، انجام میشود.
ب) لیست جنریک محصولات، در نهایت باید با فرمت JqGridData به صورت JSON بازگشت داده شود. نحوهی این Projection را در اینجا میتوانید ملاحظه کنید.
هر ردیف این لیست، باید تبدیل شود به ردیفی از جنس JqGridRowData، تا توسط jqGrid قابل پردازش گردد.
- توسط مقدار دهی UserData، برچسبی را در ذیل ستون Name و مقداری را در ذیل ستون Price نمایش خواهیم داد.
برای مطالعهی بیشتر
بهترین راهنمای جزئیات این Grid، مستندات آنلاین آن هستند: http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs
همچنین این مستندات را با فرمت PDF نیز میتوانید مطالعه کنید: http://www.trirand.com/blog/jqgrid/downloads/jqgriddocs.pdf
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
jqGrid01.zip
مثالهای سری jqGrid تغییرات زیادی داشتند. برای دریافت آنها به این مخزن کد مراجعه کنید.
نیاز به sql server
پالایش درخواست ها در IIS
ابتدا بستهی نیوگت DNTCommon.Web.Core را نصب کنید:
PM> Install-Package DNTCommon.Web.Core
الف) آنرا پیش از هر میانافزار دیگری ثبت کنید:
public void Configure(IApplicationBuilder app) { app.UseAntiDos();
ج) این تنظیمات را به صورت زیر به برنامه معرفی کنید:
public void ConfigureServices(IServiceCollection services) { services.Configure<AntiDosConfig>(options => Configuration.GetSection("AntiDosConfig").Bind(options));