public class BaseEntity : IBaseEntity { [JsonIgnore] int Id { get; set; } [JsonIgnore] string? Audit { get; set; } }
public class AuditSourceValues { [JsonProperty("hn")] public string? HostName { get; set; } [JsonProperty("mn")] public string? MachineName { get; set; } [JsonProperty("rip")] public string? RemoteIpAddress { get; set; } [JsonProperty("lip")] public string? LocalIpAddress { get; set; } [JsonProperty("ua")] public string? UserAgent { get; set; } [JsonProperty("an")] public string? ApplicationName { get; set; } [JsonProperty("av")] public string? ApplicationVersion { get; set; } [JsonProperty("cn")] public string? ClientName { get; set; } [JsonProperty("cv")] public string? ClientVersion { get; set; } [JsonProperty("o")] public string? Other { get; set; } }
public class EntityAudit<TEntity> { [JsonProperty("type")] [JsonConverter(typeof(StringEnumConverter))] public EntityEventType EventType { get; set; } [JsonProperty("user", NullValueHandling = NullValueHandling.Include)] public int? ActorUserId { get; set; } [JsonProperty("at")] public DateTime ActDateTime { get; set; } [JsonProperty("sources")] public AuditSourceValues? AuditSourceValues { get; set; } [JsonProperty("newValues", NullValueHandling = NullValueHandling.Include)] public TEntity NewEntity { get; set; } = default!; public string? SerializeJson() { return JsonSerializer.Serialize(this, options: new JsonSerializerOptions { WriteIndented = false, IgnoreNullValues = true }); } }
دقت کنید که این کلاس به صورت جنریک تعریف شده است تا اگر بعدا بخواهیم آن را Deserialize کنیم و مثلا از آن API بسازیم، یا استفادهی خاصی را از آن داشته باشیم، بهراحتی به Entity مد نظر تبدیل شود. در این مقاله فقط به ذخیرهی آن پرداخته میشود و استفاده از این فیلد که به راحتی و با کمک DbFunctionها در Entity Framework قابل انجام است به خواننده واگذار میشود.
public enum EntityEventType { Create = 0, Update = 1, Delete = 2 }
public interface IAuditSourcesProvider { AuditSourceValues GetAuditSourceValues(); }
public class AuditSourcesProvider : IAuditSourcesProvider { protected readonly IHttpContextAccessor HttpContextAccessor; public AuditSourcesProvider(IHttpContextAccessor httpContextAccessor) { HttpContextAccessor = httpContextAccessor; } public virtual AuditSourceValues GetAuditSourceValues() { var httpContext = HttpContextAccessor.HttpContext; return new AuditSourceValues { HostName = GetHostName(httpContext), MachineName = GetComputerName(httpContext), LocalIpAddress = GetLocalIpAddress(httpContext), RemoteIpAddress = GetRemoteIpAddress(httpContext), UserAgent = GetUserAgent(httpContext), ApplicationName = GetApplicationName(httpContext), ClientName = GetClientName(httpContext), ClientVersion = GetClientVersion(httpContext), ApplicationVersion = GetApplicationVersion(httpContext), Other = GetOther(httpContext) }; } protected virtual string? GetUserAgent(HttpContext httpContext) { return httpContext.Request?.Headers["User-Agent"].ToString(); } protected virtual string? GetRemoteIpAddress(HttpContext httpContext) { return httpContext.Connection?.RemoteIpAddress?.ToString(); } protected virtual string? GetLocalIpAddress(HttpContext httpContext) { return httpContext.Connection?.LocalIpAddress?.ToString(); } protected virtual string GetHostName(HttpContext httpContext) { return httpContext.Request.Host.ToString(); } protected virtual string GetComputerName(HttpContext httpContext) { return Environment.MachineName; } protected virtual string? GetApplicationName(HttpContext httpContext) { return Assembly.GetEntryAssembly()?.GetName().Name; } protected virtual string? GetApplicationVersion(HttpContext httpContext) { return Assembly.GetEntryAssembly()?.GetName().Version.ToString(); } protected virtual string? GetClientVersion(HttpContext httpContext) { return httpContext.Request?.Headers["client-version"]; } protected virtual string? GetClientName(HttpContext httpContext) { return httpContext.Request?.Headers["client-name"]; } protected virtual string? GetOther(HttpContext httpContext) { return null; } }
حالا برای تامین اطلاعات کلاس EntityAudit کار مشابهی میکنیم. ابتدا اینترفیس IEntityAuditProvider را به صورت زیر تعریف میکنیم:
public interface IEntityAuditProvider { string? GetAuditValues(EntityEventType eventType, object? entity, string? previousJsonAudit = null); }
و سپس کلاس EntityAuditProvider را ایجاد میکنیم:
public class EntityAuditProvider : IEntityAuditProvider { private readonly IHttpContextAccessor _httpContextAccessor; private readonly IAuditSourcesProvider _auditSourcesProvider; #region Constructor Injections public EntityAuditProvider(IHttpContextAccessor httpContextAccessor, IAuditSourcesProvider auditSourcesProvider) { _httpContextAccessor = httpContextAccessor; _auditSourcesProvider = auditSourcesProvider; } #endregion public virtual string? GetAuditValues(EntityEventType eventType, object? newEntity, string? previousJsonAudit = null) { var httpContext = _httpContextAccessor.HttpContext; int? userId; var user = httpContext.User; if (!user.Identity.IsAuthenticated) userId = null; else userId = user.Claims.Where(x => x.Type == "UserID").Select(x => x.Value).First().ToInt(); var auditSourceValues = _auditSourcesProvider.GetAuditSourceValues(); var auditJArray = new JArray(); // Update & Delete if (eventType == EntityEventType.Update || eventType == EntityEventType.Delete) { auditJArray = JArray.Parse(previousJsonAudit!); } // Delete => No NewValues if (eventType == EntityEventType.Delete) { newEntity = null; } JObject newAuditJObject = JObject.FromObject(new EntityAudit<object?> { EventType = eventType, ActorUserId = userId, ActDateTime = DateTime.Now, AuditSourceValues = auditSourceValues, NewEntity = newEntity }, new JsonSerializer { NullValueHandling = NullValueHandling.Ignore, Formatting = Formatting.None }); auditJArray.Add(newAuditJObject); return auditJArray.SerializeToJson(true); } }
public class AuditSaveChangesInterceptor : SaveChangesInterceptor { private readonly IEntityAuditProvider _entityAuditProvider; #region Constructor Injections public AuditSaveChangesInterceptor(IEntityAuditProvider entityAuditProvider) { _entityAuditProvider = entityAuditProvider; } #endregion public override InterceptionResult<int> SavingChanges(DbContextEventData eventData, InterceptionResult<int> result) { ApplyAudits(eventData.Context.ChangeTracker); return base.SavingChanges(eventData, result); } public override ValueTask<InterceptionResult<int>> SavingChangesAsync(DbContextEventData eventData, InterceptionResult<int> result, CancellationToken cancellationToken = new CancellationToken()) { ApplyAudits(eventData.Context.ChangeTracker); return base.SavingChangesAsync(eventData, result, cancellationToken); } private void ApplyAudits(ChangeTracker changeTracker) { ApplyCreateAudits(changeTracker); ApplyUpdateAudits(changeTracker); ApplyDeleteAudits(changeTracker); } private void ApplyCreateAudits(ChangeTracker changeTracker) { var addedEntries = changeTracker.Entries() .Where(x => x.State == EntityState.Added); foreach (var addedEntry in addedEntries) { if (addedEntry.Entity is IBaseEntity entity) { entity.Audit = _entityAuditProvider.GetAuditValues(EntityEventType.Create, entity); } } } private void ApplyUpdateAudits(ChangeTracker changeTracker) { var modifiedEntries = changeTracker.Entries() .Where(x => x.State == EntityState.Modified); foreach (var modifiedEntry in modifiedEntries) { if (modifiedEntry.Entity is IBaseEntity entity) { var eventType = entity.IsArchived ? EntityEventType.Delete : EntityEventType.Update; // Maybe Soft Delete entity.Audit = _entityAuditProvider.GetAuditValues(eventType, entity, entity.Audit); } } } private void ApplyDeleteAudits(ChangeTracker changeTracker) { var deletedEntries = changeTracker.Entries() .Where(x => x.State == EntityState.Deleted); foreach (var modifiedEntry in deletedEntries) { if (modifiedEntry.Entity is IBaseEntity entity) { entity.Audit = _entityAuditProvider.GetAuditValues(EntityEventType.Delete, entity, entity.Audit); } } } }
و سپس آن را به سیستم معرفی میکنیم:
services.AddDbContext<ATADbContext>((serviceProvider, options) => { options .UseSqlServer(...) // Interceptors var entityAuditProvider = serviceProvider.GetRequiredService<IEntityAuditProvider>(); options.AddInterceptors(new AuditSaveChangesInterceptor(entityAuditProvider)); });
نمونهی کامل فیلد Audit که در JsonFormatter قرار داده شده است، بعد از ایجاد شدن و یکبار آپدیت و سپس حذف نرم رکورد:
[ { "type":"Create", "user":1, "at":"2020-11-24T23:05:54.2692711+03:30", "sources":{ "hn":"localhost:44398", "mn":"DESKTOP-N1GAV2U", "rip":"::1", "lip":"::1", "ua":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36", "an":"Server.Api", "av":"1.0.0.0" }, "newValues":{ "Name":"Farshad" } }, { "type":"Update", "user":1, "at":"2020-11-24T23:06:20.0838188+03:30", "sources":{ "hn":"localhost:44398", "mn":"DESKTOP-N1GAV2U", "rip":"::1", "lip":"::1", "ua":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36", "an":"Server.Api", "av":"1.0.0.0" }, "newValues":{ "Name":"Edited Farshad" } }, { "type":"Delete", "user":null, "at":"2020-11-24T23:06:28.601837+03:30", "sources":{ "hn":"localhost:44398", "mn":"DESKTOP-N1GAV2U", "rip":"::1", "lip":"::1", "ua":"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36", "an":"Server.Api", "av":"1.0.0.0" }, "newValues":null } ]
ولی روش گفته شده در این مقاله، همین عملیات را به صورت کاملتری و فقط بر روی یک ستون همان جدول انجام میدهد که باعث ذخیرهی دیتای کمتر، یکپارچگی بهتر و دسترسیپذیری و راحتی استفاده از آن میشود.
- بسیار سبک ورزن است و تنها نیاز به نصب بستهی npm آنرا دارد.
- با فایلهای متنی معمولی کار میکند که ویرایش و copy/paste در آنها بسیار سادهاست.
- قرار دادن فایلهای نهایی متنی آن در ورژن کنترل بسیار سادهاست.
- امکان نوشتن درخواستهای به هم وابسته و آزمودن نتایج حاصل را دارا است.
- چون یک ابزار خط فرمان است، امکان استفادهی از آن به سادگی در فرآیندههای توسعهی مداوم وجود دارد.
- ابزارهای npm، چندسکویی هستند.
نصب strest
در ادامه قصد داریم مطلب «آزمایش Web APIs توسط Postman - قسمت ششم - اعتبارسنجی مبتنی بر JWT» را با استفاده از strest بازنویسی کنیم. به همین جهت در ابتدا نیاز است بستهی npm آنرا به صورت سراسری نصب کنیم:
npm i -g @strest/cli
مرحله 1: خاموش کردن بررسی مجوز SSL برنامه
مرحله 2: ایجاد درخواست login و دریافت توکنها
مجوز SSL آزمایشی برنامهی ASP.NET Core ما، از نوع خود امضاء شدهاست. به همین جهت اگر سعی در اجرای strest را با درخواستهای ارسالی به آن داشته باشیم، باشکست مواجه خواهند شد. بنابراین در ابتدا، خاصیت allowInsecure را به true تنظیم میکنیم:
version: 2 variables: baseUrl: https://localhost:5001/api logResponse: false allowInsecure: true
- همچنین در ابتدای این تنظیمات، روش تعریف متغیرها را نیز مشاهده میکنید که برای مثال توسط آنها baseUrl تعریف شدهاست.
درست در سطر پس از این تنظیمات، دستور اجرا و اعتبارسنجی درخواست Login را مینویسیم:
requests: loginRequest: request: url: <$ baseUrl $>/account/login method: POST postData: mimeType: application/json text: username: "Vahid" password: "1234" log: <$ logResponse $> validate: - jsonpath: content.access_token type: [string] - jsonpath: content.refresh_token type: [string]
- درخواستها با requests شروع میشوند. سپس ذیل آن میتوان نام چندین درخواست یا request را ذکر کرد که برای مثال نام درخواست تعریف شدهی در اینجا loginRequest است. این نام مهم است؛ از این جهت که با اشارهی به آن میتوان به فیلدهای خروجی response حاصل، در درخواستهای بعدی، دسترسی یافت.
- سپس، آدرس درخواست مشخص شدهاست. در اینجا روش کار با متغیرها را نیز مشاهده میکنید.
- نوع درخواست POST است.
- در ادامه جزئیات اطلاعات ارسالی به سمت سرور باید مشخص شوند. برای مثال در اینجا با فرمت application/json قرار است یک شیء تشکیل شدهی از username و password ارسال شوند.
- در سطر بعدی، خاصیت log با متغیر logResponse مقدار دهی شدهاست. اگر به true تنظیم شود، اصل خروجی response را توسط برنامهی خط فرمان strest میتوان مشاهده کرد. اگر اینکار خروجی را شلوغ کرد، میتوان آنرا به false تنظیم کرد و این خروجی را در فایل strest_history.json نهایی که حاصل از اجرای آزمایشهای تعریف شدهاست، در کنار فایل JWT.strest.yml خود یافت و مشاهده کرد.
- سپس به قسمت آزمودن نتیجهی درخواست میرسیم. در اینجا انتظار داریم که درخواست حاصل که با فرمت json است، دارای دو خاصیت رشتهای access_token و refresh_token باشد.
مرحلهی 3: ذخیره سازی توکنهای دریافتی در متغیرهای سراسری
مرحلهی 3: ذخیره سازی مراحل انجام شده
در حین کار با strest نیازی به ذخیره سازی نتیجهی حاصل از response، در متغیرهای خاصی نیست. برای مثال اگر بخواهیم به نتیجهی حاصل از عملیات لاگین فوق در درخواستهای بعدی دسترسی پیدا کنیم، میتوان نوشت <$ loginRequest.content.access_token $>
در اینجا درج متغیرها توسط <$ $> صورت میگیرد. سپس loginRequest به نام درخواست مرتبط اشاره میکند. خاصیت content.access_token نیز مقدار خاصیت access_token شیء response را بر میگرداند.
همچنین ذخیره سازی مراحل انجام شده نیز نکتهی خاصی را به همراه ندارد. یک تک فایل متنی JWT.strest.yml وجود دارد که آزمایشهای ما در آن درج میشوند.
مرحلهی 4: دسترسی به منابع محافظت شدهی سمت سرور
در ادامه روش تعریف دو درخواست جدید دیگر را در فایل JWT.strest.yml مشاهده میکنید که از نوع Get هستند و به اکشن متدهای محافظت شده ارسال میشوند:
myProtectedApiRequest: request: url: <$ baseUrl $>/MyProtectedApi method: GET headers: - name: Authorization value: Bearer <$ loginRequest.content.access_token $> log: <$ logResponse $> validate: - jsonpath: content.title expect: "Hello from My Protected Controller! [Authorize]" mProtectedAdminApiRequest: request: url: <$ baseUrl $>/MyProtectedAdminApi method: GET headers: - name: Authorization value: Bearer <$ loginRequest.content.access_token $> log: <$ logResponse $> validate: - jsonpath: content.title expect: "Hello from My Protected Admin Api Controller! [Authorize(Policy = CustomRoles.Admin)]"
- چون نیاز است به همراه درخواست خود، هدر اعتبارسنجی مبتنی بر JWT را که به صورت Bearer value است نیز به سمت سرور ارسال کنیم، خاصیت headers را توسط یک name/value مشخص کردهایم. همانطور که عنوان شد در فایلهای yaml، فاصلهها و تو رفتگیها مهم هستند و حتما باید رعایت شوند.
- سپس دومین آزمون نوشته شده را نیز مشاهده میکنید. در قسمت validate، مشخص کردهایم که خاصیت title دریافتی از response باید مساوی مقدار خاصی باشد.
دقیقا همین نکات برای درخواست دوم به MyProtectedAdminApi تکرار شدهاند.
مرحلهی 5: ارسال Refresh token و دریافت یک سری توکن جدید
اکشن متد account/RefreshToken در سمت سرور، نیاز دارد تا یک شیء جیسون با خاصیت refreshToken را دریافت کند. مقدار این خاصیت از طریق response متناظر با درخواست نامدار loginRequest استخراج میشود که در قسمت postData مشخص شدهاست:
refreshTokenRequest: request: url: <$ baseUrl $>/account/RefreshToken method: POST postData: mimeType: application/json text: refreshToken: <$ loginRequest.content.refresh_token $> log: <$ logResponse $> validate: - jsonpath: content.access_token type: [string] - jsonpath: content.refresh_token type: [string]
مرحلهی 6: آزمایش توکن جدید دریافتی از سرور
در قسمت قبل، توکنهای جدیدی صادر شدند که اکنون برای کار با آنها میتوان از متغیر refreshTokenRequest.content.access_toke استفاده کرد:
myProtectedApiRequestWithNewToken: request: url: <$ baseUrl $>/MyProtectedApi method: GET headers: - name: Authorization value: Bearer <$ refreshTokenRequest.content.access_token $> log: <$ logResponse $> validate: - jsonpath: content.title expect: "Hello from My Protected Controller! [Authorize]"
مرحلهی 7: آزمایش منقضی شدن توکنی که در ابتدای کار پس از لاگین دریافت کردیم
اکنون که refresh token صورت گرفتهاست، دیگر نباید بتوانیم از توکن دریافتی پس از لاگین استفاده کنیم و برنامه باید آنرا برگشت بزند:
myProtectedApiRequestWithOldToken: request: url: <$ baseUrl $>/MyProtectedApi method: GET headers: - name: Authorization value: Bearer <$ loginRequest.content.access_token $> log: <$ logResponse $> validate: - jsonpath: status expect: 401
مرحلهی 8: آزمایش خروج از سیستم
در اینجا نیاز است به آدرس account/logout، یک کوئری استرینگ را با کلید refreshToken و مقدار ریفرشتوکن دریافتی از درخواست نامدار refreshTokenRequest، به سمت سرور ارسال کنیم:
logoutRequest: request: url: <$ baseUrl $>/account/logout method: GET headers: - name: Authorization value: Bearer <$ refreshTokenRequest.content.access_token $> queryString: - name: refreshToken value: <$ refreshTokenRequest.content.refresh_token $> log: <$ logResponse $> validate: - jsonpath: content expect: true
مرحلهی 9: بررسی عدم امکان دسترسی به منابع محافظت شدهی سمت سرور، پس از logout
در مرحلهی قبل، از سیستم خارج شدیم. اکنون میخواهیم بررسی کنیم که آیا توکن دریافتی پیشین هنوز معتبر است یا خیر؟ آیا میتوان هنوز هم به منابع محافظت شده دسترسی یافت یا خیر:
myProtectedApiRequestWithNewTokenAfterLogout: request: url: <$ baseUrl $>/MyProtectedApi method: GET headers: - name: Authorization value: Bearer <$ refreshTokenRequest.content.access_token $> log: <$ logResponse $> validate: - jsonpath: status expect: 401
مرحلهی 10: اجرای تمام آزمونهای واحد نوشته شده
همانطور که در ابتدای بحث نیز عنوان شد فقط کافی است دستور strest JWT.strest.yml را در خط فرمان اجرا کنیم تا آزمونهای ما به ترتیب اجرا شوند:
فایل نهایی این آزمایش را در اینجا میتوانید مشاهده میکنید.
دریافت آخرین نگارش Froala WYSIWYG Editor
برای دریافت فایلهای آخرین نگارش این ادیتور وب میتوانید به سایت آن، قسمت دریافت فایلها مراجعه نمائید.
http://editor.froala.com/download
و یا به این آدرس مراجعه کنید:
https://github.com/froala/wysiwyg-editor/releases
ساختار پروژه و نحوهی کپی فایلهای آن
در هر دو مثالی که فایلهای آنرا از انتهای بحث میتوانید دریافت کنید، این ساختار رعایت شده است:
فایلهای CSS و فونتهای آن، در پوشهی Content قرار گرفتهاند.
فایلهای اسکریپت و زبان آن (که دارای زبان فارسی هم هست) در پوشهی Scripts کپی شدهاند.
یک نکته
فایل font-awesome.css را نیاز است کمی اصلاح کنید. مسیر پوشهی فونتهای آن اکنون با fonts شروع میشود.
تنظیمات اولیه
تفاوتی نمیکند که از وب فرمها استفاده میکنید یا MVC، نحوهی تعریف و افزودن پیش نیازهای این ادیتور به نحو ذیل است:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Content/font-awesome.css" rel="stylesheet" /> <link href="Content/froala_editor.css" rel="stylesheet" /> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/froala_editor.min.js"></script> <script src="Scripts/langs/fa.js"></script> </head> <body> <form id="form1" runat="server"> </form> </body> </html>
استفاده از Froala WYSIWYG Editor در ASP.NET MVC
در ادامه نحوهی فعال سازی ادیتور وب Froala را در یک View برنامههای ASP.NET MVC ملاحظه میکنید:
@{ ViewBag.Title = "Index"; } <style type="text/css"> /*تنظیم فونت پیش فرض ادیتور*/ .froala-element { } </style> @using (Html.BeginForm(actionName: "Index", controllerName: "Home")) { @Html.TextArea(name: "Editor1") <input type="submit" value="ارسال" /> } @section Scripts { <script type="text/javascript"> $(function () { $('#Editor1').editable({ buttons: ["bold", "italic", "underline", "strikeThrough", "fontFamily", "fontSize", "color", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "selectAll", "createLink", "insertImage", "insertVideo", "undo", "redo", "html", "save", "inserthorizontalrule"], inlineMode: false, inverseSkin: true, preloaderSrc: '@Url.Content("~/Content/img/preloader.gif")', allowedImageTypes: ["jpeg", "jpg", "png"], height: 300, language: "fa", direction: "rtl", fontList: ["Tahoma, Geneva", "Arial, Helvetica", "Impact, Charcoal"], autosave: true, autosaveInterval: 2500, saveURL: '@Url.Action("FroalaAutoSave", "Home")', saveParams: { postId: "123" }, spellcheck: true, plainPaste: true, imageButtons: ["removeImage", "replaceImage", "linkImage"], borderColor: '#00008b', imageUploadURL: '@Url.Action("FroalaUploadImage", "Home")', imageParams: { postId: "123" }, enableScript: false }); }); </script> }
سپس این ادیتور را بر روی المان TextArea قرار گرفته در صفحه، فعال میکنیم.
در قسمت مقادیر buttons، تمام حالات ممکن پیش بینی شدهاند. هر کدام را که نیاز ندارید، حذف کنید.
نحوهی تعریف زبان و راست به چپ بودن این ادیتور را با مقدار دهی پارامترهای language و direction ملاحظه میکنید.
پارامترهای autosave، saveURL و saveParams کار تنظیم ارسال خودکار محتوای ادیتور را جهت ذخیرهی آن در سرور به عهده دارند. بر اساس مقدار autosaveInterval میتوان مشخص کرد که هر چند میلی ثانیه یکبار اینکار باید انجام شود.
/// <summary> /// ذخیره سازی خودکار /// </summary> [HttpPost] [ValidateInput(false)] public ActionResult FroalaAutoSave(string body, int? postId) // نام پارامتر بادی را تغییر ندهید { //todo: save body ... return new EmptyResult(); }
چون قرار است تگهای HTML به سرور ارسال شوند، ویژگی ValidateInput به false تنظیم شدهاست.
saveParams آن، برای مقدار دهی پارامترهای اضافی است که نیاز میباشند تا به سرور ارسال شوند. مثلا شماره مطلب جاری نیز به سرور ارسال گردد.
در اینجا نام پارامتری که ارسال میگردد، دقیقا مساوی body است. بنابراین آنرا تغییر ندهید.
پارامترهای imageUploadURL و imageParams برای فعال سازی ذخیره تصاویر آن در سرور کاربرد دارند.
اکشن متد مدیریت کنندهی آن به نحو ذیل میتواند تعریف شود:
// todo: مسایل امنیتی آپلود را فراموش نکنید /// <summary> /// ذخیره سازی تصاویر ارسالی /// </summary> [HttpPost] public ActionResult FroalaUploadImage(HttpPostedFileBase file, int? postId) // نام پارامتر فایل را تغییر ندهید { var fileName = Path.GetFileName(file.FileName); var rootPath = Server.MapPath("~/images/"); file.SaveAs(Path.Combine(rootPath, fileName)); return Json(new { link = "images/" + fileName }, JsonRequestBehavior.AllowGet); }
خروجی آن برای مشخص سازی محل ذخیره سازی تصویر در سرور باید یک خروجی JSON دارای خاصیت و پارامتر link به نحو فوق باشد (این مسیر، یک مسیر نسبی است؛ نسبت به ریشه سایت).
imageParams آن برای مقدار دهی پارامترهای اضافی است که نیاز میباشند تا به سرور ارسال شوند. مثلا شماره مطلب جاری نیز به سرور ارسال گردد.
استفاده از Froala WYSIWYG Editor در ASP.NET Web forms
تمام نکاتی که در قسمت تنظیمات ASP.NET MVC در مورد ویژگیهای سمت کلاینت این ادیتور ذکر شد، در مورد وب فرمها نیز صادق است. فقط قسمت مدیریت سمت سرور آن اندکی تفاوت دارد.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" ValidateRequest="false" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FroalaWebFormsTest.Default" %> <%--اعتبارسنجی ورودی غیرفعال شده چون باید تگ ارسال شود--%> <%--همچنین در وب کانفیگ هم تنظیم دیگری نیاز دارد--%> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <%--حالت کلاینت آی دی بهتر است تنظیم شود در اینجا--%> <asp:TextBox ID="txtEditor" ClientIDMode="Static" runat="server" Height="199px" TextMode="MultiLine" Width="447px"></asp:TextBox> <br /> <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="ارسال" /> <style type="text/css"> /*تنظیم فونت پیش فرض ادیتور*/ .froala-element { } </style> <script type="text/javascript"> $(function () { $('#txtEditor').editable({ buttons: ["bold", "italic", "underline", "strikeThrough", "fontFamily", "fontSize", "color", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "selectAll", "createLink", "insertImage", "insertVideo", "undo", "redo", "html", "save", "inserthorizontalrule"], inlineMode: false, inverseSkin: true, preloaderSrc: 'Content/img/preloader.gif', allowedImageTypes: ["jpeg", "jpg", "png"], height: 300, language: "fa", direction: "rtl", fontList: ["Tahoma, Geneva", "Arial, Helvetica", "Impact, Charcoal"], autosave: true, autosaveInterval: 2500, saveURL: 'FroalaHandler.ashx', saveParams: { postId: "123" }, spellcheck: true, plainPaste: true, imageButtons: ["removeImage", "replaceImage", "linkImage"], borderColor: '#00008b', imageUploadURL: 'FroalaHandler.ashx', imageParams: { postId: "123" }, enableScript: false }); }); </script> </asp:Content>
به علاوه ClientIDMode=Static نیز تنظیم شدهاست، تا بتوان از ID تکست باکس قرار گرفته در صفحه، به سادگی در کدهای سمت کاربر جیکوئری استفاده کرد.
اگر دقت کرده باشید، save urlها اینبار به فایل FroalaHandler.ashx اشاره میکنند. محتوای این Genric handler را ذیل مشاهده میکنید:
using System.IO; using System.Web; using System.Web.Script.Serialization; namespace FroalaWebFormsTest { public class FroalaHandler : IHttpHandler { //todo: برای اینکارها بهتر است از وب ای پی آی استفاده شود //todo: یا دو هندلر مجزا یکی برای تصاویر و دیگری برای ذخیره سازی متن public void ProcessRequest(HttpContext context) { var body = context.Request.Form["body"]; var postId = context.Request.Form["postId"]; if (!string.IsNullOrWhiteSpace(body) && !string.IsNullOrWhiteSpace(postId)) { //todo: save changes context.Response.ContentType = "text/plain"; context.Response.Write(""); context.Response.End(); } var files = context.Request.Files; if (files.Keys.Count > 0) { foreach (string fileKey in files) { var file = context.Request.Files[fileKey]; if (file == null || file.ContentLength == 0) continue; //todo: در اینجا مسایل امنیتی آپلود فراموش نشود var fileName = Path.GetFileName(file.FileName); var rootPath = context.Server.MapPath("~/images/"); file.SaveAs(Path.Combine(rootPath, fileName)); var json = new JavaScriptSerializer().Serialize(new { link = "images/" + fileName }); // البته اینجا یک فایل بیشتر ارسال نمیشود context.Response.ContentType = "text/plain"; context.Response.Write(json); context.Response.End(); } } context.Response.ContentType = "text/plain"; context.Response.Write(""); context.Response.End(); } public bool IsReusable { get { return false; } } } }
یک نکتهی امنیتی مهم
<location path="upload"> <system.webServer> <handlers accessPolicy="Read" /> </system.webServer> </location>
کدهای کامل این مطلب را در ادامه میتوانید دریافت کنید
Froala-Sample
ابزار فرمول نویسی ریاضی و شیمی به همراه قابلیت تشخیص دست خط
CKEDITOR.replace(this.id, { allowedContent : true });
OutputCache در ASP.NET MVC
+ در مورد MVC و مدیریت خطاها در آن بحث مجزایی در سایت وجود دارد (^)؛ قسمت «دسترسی به اطلاعات استثناء در صفحه نمایش خطاها»
با سلام و تشکر
از این DataPicker استفاده کردم ولی:
1- به چه صورت از یک دکمه برای نمایش تقویم و نمایش تاریخ انتخابی در TexBox استفاده کنیم
2-در حالت عادی دکمههای برگشت ماه و سال درست نمایش داده نمیشوند و در حالت Compatibility View دکمهها درست دیده میشوند
من اینها رو لاگ میکنم و پیغام کلی نمایش میدم.
برای تولید چنین نموداری از میتوانیم Mermaid استفاده کنیم. یکی از انواع دیاگرامهایی را که پشتیبانی میکند، Gitgraph میباشد. دیاگرامها در Mermaid با کمک یک DSL ساخته میشوند. سینکس آن نیز خیلی ساده است؛ ابتدا نوع دیاگرامی را که میخواهیم ترسیم کنیم، تعیین میکنیم و سپس محتویات را براساس نوع دیاگرام، تعیین میکنیم. به عنوان مثال برای Gitgraph سینتکس آن به این صورت است:
gitGraph commit commit branch develop checkout develop commit commit checkout main merge develop commit commit
در ساختار فوق ابتدا دو کامیت بر روی برنچ اصلی (main) انجام شدهاست؛ سپس یک برنچ جدید را با نام develop، ایجاده کردهایم و بلافاصله به آن checkout کردهایم. در ادامه تعدادی کامیت را بر روی این برنچ انجام داده و در نهایت برنچ موردنظر را بر روی main، مرج کردهایم. در نهایت نیز دو کامیت دیگر را بر روی main ایجاد کردهایم. تعریف فوق، منجر به ساخت چنین نموداری خواهد شد:
از ادیتور آنلاین Mermaid نیز میتوانید برای تست سینکس استفاده کنید. در ادامه میخواهیم با کمک PowerShell، از روی یک پروژهی گیت، DSL موردنیاز برای ساخت دیاگرام را ایجاد کنیم. برای اینکار ابتدا توسط تابع زیر یک پروژهی گیت را با تعدادی فایل نمونه ایجاد خواهیم کرد:
Function New-RandomRepo { Function RandomFiles($branch = "main") { 1..3 | ForEach-Object { New-Item -ItemType File -Name "file_$($_).txt" Set-Content -Path "file_$($_).txt" -Value "This is file $($_) on branch $branch" git add . git commit -m "Commit $($_) on branch $branch" } } Set-Location ~/Desktop New-Item -ItemType Directory "random_git_repo" Set-Location "random_git_repo" git init -b main Write-Output "This is the main branch" | Set-Content -Path "main.txt" git add . git commit -m "Initial commit" 1..3 | ForEach-Object { git checkout -b "branch_$($_)" RandomFiles "branch_$($_)" git checkout main } }
در ادامه تابع New-GitRepoDiagram را برای تولید ساختار مورد نیاز نوشتهایم:
Function New-GitRepoDiagram { $commitIds = @() $branches = git branch | ForEach-Object { $default = $false $activeBranch = git symbolic-ref --short HEAD $currentBranch = ($_.Replace("* ", " ")).Trim() if ($currentBranch -eq $activeBranch) { $default = $true } @{ name = $currentBranch isMainBranch = $default } | ConvertTo-Json } | ConvertFrom-Json $defaultBranch = $branches | Where-Object { $_.isMainBranch -eq $true } | Select-Object -ExpandProperty name $mermaidFile = "%%{init: { 'gitGraph': {'mainBranchName': '$defaultBranch' } } }%%" + [Environment]::NewLine $mermaidFile += 'gitGraph' + [Environment]::NewLine foreach ($branch in ($branches | Sort-Object -Property isMainBranch -Descending)) { $name = $branch.name $notIncludeTheMainCommits = $name -ne $defaultBranch ? "--not $(git merge-base $defaultBranch $name)" : "" $notIncludeTheMainCommits $logs = git log --pretty=format:'{"commit": "%h", "author": "%an", "message": "%s"}' --reverse $name | ConvertFrom-Json if ($name -ne $defaultBranch) { $mermaidFile += ' branch "$name"'.Replace('$name', $name) + [Environment]::NewLine } foreach ($log in $logs) { $commit = $log.commit if ($commitIds -contains $commit) { continue } $commitToAdd = ' commit id: "$commit"'.Replace('$commit', $commit) + [Environment]::NewLine $mermaidFile += $commitToAdd $commitIds += $commit } if ($name -ne $defaultBranch) { $mermaidFile += ' checkout main' + [Environment]::NewLine } } Write-Host $mermaidFile }
توضیحات:
- در تابع فوق، ابتدا یک آرایهی خالی برای ذخیرهی کامیت آیدیها، اضافه شده؛ از این آرایه برای جلوگیری از اضافه شدن کامیت تکراری در هر برنچ استفاده شدهاست.
- سپس با کمک دستور git branch، لیست تمام برنچها، دریافت شدهاست (همانطور که در قسمت قبل بررسی شد +).
- برای هر برنچ، تابع تعیین میکند که آیا برنچ جاری است یا خیر. اینکار با کمک دستور git symbolic-ref انجام شدهاست.
- در ادامه متغیر mermaidFile$ برای ایجاد یک گراف جدید Git مقداردهی میشود. در اینجا نام برنچ اصلی برابر با نام برنچ پیشفرض، تنظیم میشود.
- سپس لیست کامیتهای هر برنچ را با کمک دستور git log (همان سینتکسی که در قسمتهای قبل بررسی شد +) استخراج میکنیم.
- و در نهایت به ازای هر کامیت، یک commit id تولید کردهایم.
با فراخوانی تابع فوق، اینچنین ساختاری برایمان تولید خواهد شد:
%%{init: { 'gitGraph': {'mainBranchName': 'main' } } }%% gitGraph commit id: "765100f" branch "branch_1" commit id: "c88c441" commit id: "44149d9" commit id: "a660fe3" checkout main branch "branch_2" commit id: "2dcb572" commit id: "b043ad1" commit id: "92cafc0" checkout main branch "branch_3" commit id: "559e381" commit id: "f72957f" commit id: "c066e72" checkout main
خروجی فوق دقیقاً دیاگرامی است که در ابتدای مطلب نشان داده شد: