برای دیباگ این موضوع متد DefaultClaimUidExtractor.GetUniqueIdentifierParameters(this.User.Identities) را مستقلا روی لیست Claims جدید فراخوانی کنید. اگر محتوای آن با قبلی تفاوت داشت، همان پیام خطای «این antiforgery توکن، متعلق به کاربر دیگری است» را دریافت خواهید کرد.
من مراحل گفته شده را طی کردم ولی بعد از پیام کمپایل تکمیل شد چیزی در فایل نهایی جز directive مشاهده نمیشه.
در صورتی که خط
باشه این اتفاق میفته. در غیر این صورت باقی خطوط را تبدیل میکند.
در صورتی که خط
import * as _ from "lodash";
نظرات مطالب
ساخت ربات تلگرامی با #C
اینو متوجه شدم .. اما چه شکلی میشه پیدا کرد؟
فزض کنید من 10 شماره دارم میخوام براشون مثل تبلیغات اس ام اسی پیام بدم .. چجوری این امکان هست؟
فکر کنم از متودهای خود تلگرام باید بشه
فزض کنید من 10 شماره دارم میخوام براشون مثل تبلیغات اس ام اسی پیام بدم .. چجوری این امکان هست؟
فکر کنم از متودهای خود تلگرام باید بشه
نظرات مطالب
کار با Kendo UI DataSource
روی چه سطری پیام خطا دریافت کردید؟
حین کار با کتابخانههای جاوا اسکریپتی باید مدام کنسول developer مرورگر را باز نگه دارید تا بتوانید خطاها را بهتر بررسی و دیباگ کنید.
حین کار با کتابخانههای جاوا اسکریپتی باید مدام کنسول developer مرورگر را باز نگه دارید تا بتوانید خطاها را بهتر بررسی و دیباگ کنید.
نظرات مطالب
ASP.NET MVC #6
سلام -
برای آرگومان دوم ( "خطا ...","HttpStatusCodeResult("501 پیام فارسی میذارم بجاش ؟ نشون میده-
یونیکد رو پشتیبانی نمیکنه یا کار خاصی باید انجام بدم؟
مرسی
باسلام
ضمن تشکر در ie8 هنگام اجرا بر روی s.onchange در PersianDatePicker.min.js پیام خطا
Microsoft JScript runtime error: Object doesn't support this property or method
میدهد.
ضمن تشکر در ie8 هنگام اجرا بر روی s.onchange در PersianDatePicker.min.js پیام خطا
Microsoft JScript runtime error: Object doesn't support this property or method
میدهد.
بازخوردهای پروژهها
گزارش خطا
سلام؛ وقتی میخوام قالب درست شده (و نصب شده) رو به عنوان پروژه انتخاب کنم پیام خطا میده :
the given key was not present in the dictionary
نظرات مطالب
اثر وجود سشن بر پردازش موازی در ASP.NET
ممنون، آیا اطلاعات دیگری را هم میشود با این روش ذخیره کرد، مثلا نام کاربر
عموما برای نگهداری سادهتر قسمتهای مختلف یک پروژه، اجزای آن به اسمبلیهای مختلفی تقسیم میشوند که هر کدام در یک پروژهی مجزای ویژوال استودیو قرار خواهند گرفت. یکی از نیازهای مهم این نوع پروژهها، داشتن شماره نگارش یکسانی بین اسمبلیهای آن است. به این ترتیب توزیع نهایی سادهتر شده و همچنین پشتیبانی از آنها در دراز مدت، بر اساس این شماره نگارش بهتر صورت خواهد گرفت. برای مثال در لاگهای خطای برنامه با بررسی شماره نگارش اسمبلی مرتبط، حداقل میتوان متوجه شد که آیا کاربر از آخرین نسخهی برنامه استفاده میکند یا خیر.
روش معمول انجام اینکار، به روز رسانی دستی تمام فایلهای AssemblyInfo.cs یک Solution است و همچنین اطمینان حاصل کردن از همگام بودن آنها. در ادامه قصد داریم با استفاده از فایلهای T4، یک فایل SharedAssemblyInfo.tt را جهت تولید اطلاعات مشترک Build بین اسمبلیهای مختلف یک پروژه، تولید کنیم.
ایجاد پروژهی SharedMetaData
برای نگهداری فایل مشترک SharedAssemblyInfo.cs نهایی و همچنین اطمینان از تولید مجدد آن به ازای هر Build، یک پروژهی class library جدید را به نام SharedMetaData به Solution جاری اضافه کنید.
سپس نیاز است یک فایل text template جدید را به نام SharedAssemblyInfo.tt، به این پروژه اضافه کنید.
به خواص فایل SharedAssemblyInfo.tt مراجعه کرده و Transform on build آنرا true کنید. به این ترتیب مطمئن خواهیم شد این فایل به ازای هر build جدید، مجددا تولید میگردد.
اکنون محتوای این فایل را به نحو ذیل تغییر دهید:
در این فایل اجزای شماره نگارش برنامه به صورت متغیر تعریف شدهاند. هر بار که نیاز است یک نگارش جدید ارائه شود، میتوان این اعداد را تغییر داد.
MajorVersion با افزودن تعداد زیادی قابلیت به برنامه، به صورت دستی تغییر میکند. همچنین اگر یک breaking change در برنامه یا کتابخانه وجود داشته باشد نیز این شماره باید تغییر نماید.
MinorVersion با افزودن ویژگیهای کوچکی به نگارش فعلی برنامه تغییر میکند.
BuildNumber به صورت خودکار بر اساس هر Build انجام شده باید تغییر یابد. در اینجا این عدد به صورت خودکار به ازای هر روز، یک واحد افزایش پیدا میکند. ابتدای مبداء آن در این مثال، 2013 قرار گرفتهاست.
RevisionNumber با ارائه یک وصله جدید برای نگارش فعلی برنامه، به صورت دستی باید تغییر کند. اگر اعداد شماره نگارش major یا minor تغییر کنند، این عدد باید به صفر تنظیم شود.
اکنون اگر این محتوای جدید را ذخیره کنید، فایل SharedAssemblyInfo.cs به صورت خودکار تولید خواهد شد.
افزودن فایل SharedAssemblyInfo.cs به صورت لینک به تمام پروژهها
نحوهی افزودن فایل جدید SharedAssemblyInfo.cs به پروژههای موجود، اندکی متفاوت است با روش معمول افزودن فایلهای cs هر پروژه. ابتدا از منوی پروژه گزینهی add existing item را انتخاب کنید. سپس فایل SharedAssemblyInfo.cs را یافته و به صورت add as link، به تمام پروژههای موجود اضافه کنید.
اینکار باید در مورد تمام پروژهها صورت گیرد. به این ترتیب چون فایل SharedAssemblyInfo.cs به این پروژهها صرفا لینک شدهاست، اگر محتوای آن در پروژهی metadata تغییر کند، به صورت خودکار و یک دست، در تمام پروژههای دیگر نیز منعکس خواهد شد.
در ادامه اگر بخواهید Solution را Build کنید، پیام تکراری بودن یک سری از ویژگیها را یافت خواهید کرد. این مورد از این جهت رخ میدهد که هنوز فایلهای AssemblyInfo.cs اصلی، در پروژههای برنامه موجود هستند.
این فایلها را یافته و صرفا چند سطر همیشه ثابت ذیل را در آنها باقی بگذارید:
اضافه کردن build dependency به پروژه MetaData
در پایان کار نیاز است اطمینان حاصل کنیم، فایل SharedAssemblyInfo.cs به صورت خودکار پیش از Build هر پروژه، تولید میشود. برای این منظور، از منوی Project، گزینهی Project dependencies را انتخاب کنید. سپس در برگهی dependencies آن، به ازای تمام پروژههای موجود، گزینهی SharedMetadata را انتخاب نمائید.
این مساله سبب اجرای خودکار فایل SharedAssemblyInfo.tt پیش از هر Build میشود و به این ترتیب میتوان از تازه بودن اطلاعات SharedAssemblyInfo.cs اطمینان حاصل کرد.
اکنون اگر پروژه را Build کنید، تمام اجزای آن شماره نگارش یکسانی را خواهند داشت:
روش معمول انجام اینکار، به روز رسانی دستی تمام فایلهای AssemblyInfo.cs یک Solution است و همچنین اطمینان حاصل کردن از همگام بودن آنها. در ادامه قصد داریم با استفاده از فایلهای T4، یک فایل SharedAssemblyInfo.tt را جهت تولید اطلاعات مشترک Build بین اسمبلیهای مختلف یک پروژه، تولید کنیم.
ایجاد پروژهی SharedMetaData
برای نگهداری فایل مشترک SharedAssemblyInfo.cs نهایی و همچنین اطمینان از تولید مجدد آن به ازای هر Build، یک پروژهی class library جدید را به نام SharedMetaData به Solution جاری اضافه کنید.
سپس نیاز است یک فایل text template جدید را به نام SharedAssemblyInfo.tt، به این پروژه اضافه کنید.
به خواص فایل SharedAssemblyInfo.tt مراجعه کرده و Transform on build آنرا true کنید. به این ترتیب مطمئن خواهیم شد این فایل به ازای هر build جدید، مجددا تولید میگردد.
اکنون محتوای این فایل را به نحو ذیل تغییر دهید:
<#@ template debug="false" hostspecific="false" language="C#" #> // // This code was generated by a tool. Any changes made manually will be lost // the next time this code is regenerated. // using System.Reflection; using System.Resources; using System.Runtime.CompilerServices; using System.Runtime.InteropServices; [assembly: AssemblyCompany("some name")] [assembly: AssemblyCulture("")] [assembly: NeutralResourcesLanguageAttribute("en")] [assembly: AssemblyProduct("product name")] [assembly: AssemblyCopyright("Copyright VahidN 2014")] [assembly: AssemblyTrademark("some name")] #if DEBUG [assembly: AssemblyConfiguration("Debug")] #else [assembly: AssemblyConfiguration("Release")] #endif // Assembly Versions are incremented manually when branching the code for a release. [assembly: AssemblyVersion("<#= this.MajorVersion #>.<#= this.MinorVersion #>.<#= this.BuildNumber #>.<#= this.RevisionNumber #>")] // Assembly File Version should be incremented automatically as part of the build process. [assembly: AssemblyFileVersion("<#= this.MajorVersion #>.<#= this.MinorVersion #>.<#= this.BuildNumber #>.<#= this.RevisionNumber #>")] <#+ // Manually incremented for major releases, such as adding many new features to the solution or introducing breaking changes. int MajorVersion = 1; // Manually incremented for minor releases, such as introducing small changes to existing features or adding new features. int MinorVersion = 0; // Typically incremented automatically as part of every build performed on the Build Server. int BuildNumber = (int)(DateTime.UtcNow - new DateTime(2013,1,1)).TotalDays; // Incremented for QFEs (a.k.a. “hotfixes” or patches) to builds released into the Production environment. // This is set to zero for the initial release of any major/minor version of the solution. int RevisionNumber = 0; #>
MajorVersion با افزودن تعداد زیادی قابلیت به برنامه، به صورت دستی تغییر میکند. همچنین اگر یک breaking change در برنامه یا کتابخانه وجود داشته باشد نیز این شماره باید تغییر نماید.
MinorVersion با افزودن ویژگیهای کوچکی به نگارش فعلی برنامه تغییر میکند.
BuildNumber به صورت خودکار بر اساس هر Build انجام شده باید تغییر یابد. در اینجا این عدد به صورت خودکار به ازای هر روز، یک واحد افزایش پیدا میکند. ابتدای مبداء آن در این مثال، 2013 قرار گرفتهاست.
RevisionNumber با ارائه یک وصله جدید برای نگارش فعلی برنامه، به صورت دستی باید تغییر کند. اگر اعداد شماره نگارش major یا minor تغییر کنند، این عدد باید به صفر تنظیم شود.
اکنون اگر این محتوای جدید را ذخیره کنید، فایل SharedAssemblyInfo.cs به صورت خودکار تولید خواهد شد.
افزودن فایل SharedAssemblyInfo.cs به صورت لینک به تمام پروژهها
نحوهی افزودن فایل جدید SharedAssemblyInfo.cs به پروژههای موجود، اندکی متفاوت است با روش معمول افزودن فایلهای cs هر پروژه. ابتدا از منوی پروژه گزینهی add existing item را انتخاب کنید. سپس فایل SharedAssemblyInfo.cs را یافته و به صورت add as link، به تمام پروژههای موجود اضافه کنید.
اینکار باید در مورد تمام پروژهها صورت گیرد. به این ترتیب چون فایل SharedAssemblyInfo.cs به این پروژهها صرفا لینک شدهاست، اگر محتوای آن در پروژهی metadata تغییر کند، به صورت خودکار و یک دست، در تمام پروژههای دیگر نیز منعکس خواهد شد.
در ادامه اگر بخواهید Solution را Build کنید، پیام تکراری بودن یک سری از ویژگیها را یافت خواهید کرد. این مورد از این جهت رخ میدهد که هنوز فایلهای AssemblyInfo.cs اصلی، در پروژههای برنامه موجود هستند.
این فایلها را یافته و صرفا چند سطر همیشه ثابت ذیل را در آنها باقی بگذارید:
using System.Reflection; using System.Runtime.InteropServices; [assembly: AssemblyTitle("title")] [assembly: AssemblyDescription("")] [assembly: ComVisible(false)] [assembly: Guid("9cde6054-dd73-42d5-a859-7d4b6dc9b596")]
اضافه کردن build dependency به پروژه MetaData
در پایان کار نیاز است اطمینان حاصل کنیم، فایل SharedAssemblyInfo.cs به صورت خودکار پیش از Build هر پروژه، تولید میشود. برای این منظور، از منوی Project، گزینهی Project dependencies را انتخاب کنید. سپس در برگهی dependencies آن، به ازای تمام پروژههای موجود، گزینهی SharedMetadata را انتخاب نمائید.
این مساله سبب اجرای خودکار فایل SharedAssemblyInfo.tt پیش از هر Build میشود و به این ترتیب میتوان از تازه بودن اطلاعات SharedAssemblyInfo.cs اطمینان حاصل کرد.
اکنون اگر پروژه را Build کنید، تمام اجزای آن شماره نگارش یکسانی را خواهند داشت:
و در دفعات آتی، تنها نیاز است تک فایل SharedAssemblyInfo.tt را برای تغییر شماره نگارشهای اصلی، ویرایش کرد.
یکی دیگر از ویجتهای Kendo UI یک HTML Editor کامل است به همراه امکانات ارسال فایل، تصویر و ... پشتیبانی از راست به چپ. در ادامه قصد داریم نحوهی مدیریت نمایش لیست فایلها، افزودن و حذف آنها را از طریق این ادیتور بررسی کنیم.
تنظیمات ابتدایی Kendo UI Editor
در ذیل کدهای سمت کاربر فعال سازی مقدماتی Kendo UI را مشاهده میکنید. در قسمت tools آن، لیست امکانات و نوار ابزار مهیای آن درج شدهاند.
دو مورد insertImage و insertFile آن نیاز به تنظیمات سمت کاربر و سرور بیشتری دارند.
در اینجا نحوهی تنظیم مسیرهای مختلف ارسال فایل و تصویر Kendo UI Editor را ملاحظه میکنید.
منهای قسمت thumbnailUrl، عملکرد قسمتهای مختلف افزودن فایل و تصویر این ادیتور یکسان هستند. به همین جهت میتوان برای مثال کنترلی مانند KendoEditorFilesController را ایجاد و سپس در کنترلر KendoEditorImagesController از آن ارث بری کرد و متد دریافت و نمایش بند انگشتی تصاویر را افزود. به این ترتیب دیگر نیازی به تکرار کدهای مشترک بین این دو قسمت نخواهد بود.
نمایش لیست پوشهها و تصویر در ابتدای باز شدن صفحهی درج تصویر
با کلیک بر روی دکمهی نمایش لیست تصاویر، صفحه دیالوگی مانند شکل زیر ظاهر خواهد شد:
تنظیمات خواندن این فایلها، از قسمت read مربوط به imageBrowser دریافت میشود که cache آن نیز به false تنظیم شدهاست تا در این بین مرورگر اطلاعات را کش نکند. این مورد در حین حذف فایلها و پوشهها مهم است. زیرا اگر cache:false تنظیم نشده باشد، حذف یک فایل یا پوشه در سمت کاربر تاثیری نخواهد داشت.
در ادامه نیاز است اکشن متد GetFilesList را به نحو ذیل در سمت سرور تهیه کرد:
در اینجا کدهای کلاس پایه KendoEditorFilesController را مشاهده میکنید. به این جهت فیلد FilesFolder آن protected تعریف شدهاست تا در کلاسی که از آن ارث بری میکند نیز قابل دسترسی باشد. سپس لیست فایلها و پوشههای path دریافتی با فرمت لیستی از KendoFile تهیه شده و با فرمت JSON بازگشت داده میشوند. ساختار KendoFile را در ذیل مشاهده میکنید:
- در اینجا Type میتواند از نوع فایل با مقدار f و یا از نوع پوشه با مقدار d باشد.
- علت استفاده از CamelCasePropertyNamesContractResolver در حین بازگشت JSON نهایی، تبدیل خواص دات نتی، به نامهای سازگار با JavaScript است. برای مثال به صورت خودکار Name را تبدیل به name میکند.
- پارامتر path در ابتدای کار خالی است. اما کاربر میتواند در بین پوشههای باز شدهی توسط مرورگر تصاویر Kendo UI حرکت کند. به همین جهت مقدار آن باید هربار بررسی شده و بر این اساس لیست فایلها و پوشههای جاری بازگشت داده شوند.
مدیریت حذف تصاویر و پوشهها
همانطور که در شکل فوق نیز مشخص است، با انتخاب یک پوشه یا فایل، دکمهای با آیکن ضربدر جهت فراهم آوردن امکان حذف، ظاهر میشود. این دکمه متصل است به قسمت destroy تنظیمات ادیتور:
این تنظیمات سمت کاربر را باید به نحو ذیل در سمت سرور مدیریت کرد:
- استفاده از Path.GetFileName جهت دریافت نام فایلها در اینجا بسیار مهم است. زیرا اگر این تمیز سازی امنیتی صورت نگیرد، ممکن است با کمی تغییر در آن، فایل web.config برنامه، دریافت یا حذف شود.
- پارامتر name دریافتی مساوی است با نام فایل انتخاب شده و path مشخص میکند که در کدام پوشه قرار داریم.
- چون در اینجا امکان حذف یک پوشه یا فایل وجود دارد، حتما نیاز است بررسی کنیم، مسیر دریافتی پوشهاست یا فایل و سپس بر این اساس جهت حذف آنها اقدام صورت گیرد.
مدیریت ایجاد یک پوشهی جدید
تنظیمات قسمت create مرورگر تصاویر، مرتبط است به زمانیکه کاربر با کلیک بر روی دکمهی +، درخواست ایجاد یک پوشهی جدید را کردهاست:
کدهای اکشن متد متناظر با این عمل را در ذیل مشاهده میکنید:
- در اینجا نیز name مساوی نام پوشهی درخواستی است و path به مسیر تو در توی پوشهی جاری اشاره میکند.
- پس از ایجاد پوشه، باید نام آنرا با فرمت KendoFile به صورت JSON بازگشت داد. همچنین در اینجا Type را نیز باید به d (پوشه) تنظیم کرد.
مدیریت قسمت ارسال فایل و تصویر
زمانیکه کاربر بر روی دکمهی upload file یا بارگذاری تصاویر در اینجا کلیک میکند، اطلاعات فایل آپلودی به مسیر uploadUrl ارسال میگردد.
دو تنظیم دیگر thumbnailUrl و imageUrl، برای نمایش بند انگشتی و نمایش کامل تصویر کاربرد دارند.
در ادامه کدهای مدیریت سمت سرور قسمت آپلود این ادیتور را مشاهده میکنید:
- در اینجا path مشخص میکند که در کدام پوشهی تو در تو قرار داریم و file نیز حاوی محتوای ارسالی به سرور است.
- پس از ذخیره سازی اطلاعات فایل، نیاز است اطلاعات فایل نهایی را با فرمت KendoFile به صورت JSON بازگشت دهیم.
ارث بری از KendoEditorFilesController جهت تکمیل قسمت مدیریت تصاویر
تا اینجا کدهایی را که ملاحظه کردید، برای هر دو قسمت ارسال تصویر و فایل کاربرد دارند. قسمت ارسال تصاویر برای تکمیل نیاز به متد دریافت تصاویر به صورت بند انگشتی نیز دارد که به صورت ذیل قابل تعریف است و چون از کلاس پایه KendoEditorFilesController ارث بری کردهاست، این کنترلر به صورت خودکار حاوی اکشن متدهای کلاس پایه نیز خواهد بود.
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید.
تنظیمات ابتدایی Kendo UI Editor
در ذیل کدهای سمت کاربر فعال سازی مقدماتی Kendo UI را مشاهده میکنید. در قسمت tools آن، لیست امکانات و نوار ابزار مهیای آن درج شدهاند.
دو مورد insertImage و insertFile آن نیاز به تنظیمات سمت کاربر و سرور بیشتری دارند.
<!--نحوهی راست به چپ سازی --> <div class="k-rtl"> <textarea id="editor" rows="10" cols="30" style="height: 440px"></textarea> </div> @section JavaScript { <script type="text/javascript"> $(function () { $("#editor").kendoEditor({ tools: [ "bold", "italic", "underline", "strikethrough", "justifyLeft", "justifyCenter", "justifyRight", "justifyFull", "insertUnorderedList", "insertOrderedList", "indent", "outdent", "createLink", "unlink", "insertImage", "insertFile", "subscript", "superscript", "createTable", "addRowAbove", "addRowBelow", "addColumnLeft", "addColumnRight", "deleteRow", "deleteColumn", "viewHtml", "formatting", "cleanFormatting", "fontName", "fontSize", "foreColor", "backColor", "print" ], imageBrowser: { messages: { dropFilesHere: "فایلهای خود را به اینجا کشیده و رها کنید" }, transport: { read: { url: "@Url.Action("GetFilesList", "KendoEditorImages")", dataType: "json", contentType: 'application/json; charset=utf-8', type: 'GET', cache: false }, destroy: { url: "@Url.Action("DestroyFile", "KendoEditorImages")", type: "POST" }, create: { url: "@Url.Action("CreateFolder", "KendoEditorImages")", type: "POST" }, thumbnailUrl: "@Url.Action("GetThumbnail", "KendoEditorImages")", uploadUrl: "@Url.Action("UploadFile", "KendoEditorImages")", imageUrl: "@Url.Action("GetFile", "KendoEditorImages")?path={0}" } }, fileBrowser: { messages: { dropFilesHere: "فایلهای خود را به اینجا کشیده و رها کنید" }, transport: { read: { url: "@Url.Action("GetFilesList", "KendoEditorFiles")", dataType: "json", contentType: 'application/json; charset=utf-8', type: 'GET', cache: false }, destroy: { url: "@Url.Action("DestroyFile", "KendoEditorFiles")", type: "POST" }, create: { url: "@Url.Action("CreateFolder", "KendoEditorFiles")", type: "POST" }, uploadUrl: "@Url.Action("UploadFile", "KendoEditorFiles")", fileUrl: "@Url.Action("GetFile", "KendoEditorFiles")?path={0}" } } }); }); </script> }
منهای قسمت thumbnailUrl، عملکرد قسمتهای مختلف افزودن فایل و تصویر این ادیتور یکسان هستند. به همین جهت میتوان برای مثال کنترلی مانند KendoEditorFilesController را ایجاد و سپس در کنترلر KendoEditorImagesController از آن ارث بری کرد و متد دریافت و نمایش بند انگشتی تصاویر را افزود. به این ترتیب دیگر نیازی به تکرار کدهای مشترک بین این دو قسمت نخواهد بود.
نمایش لیست پوشهها و تصویر در ابتدای باز شدن صفحهی درج تصویر
با کلیک بر روی دکمهی نمایش لیست تصاویر، صفحه دیالوگی مانند شکل زیر ظاهر خواهد شد:
تنظیمات خواندن این فایلها، از قسمت read مربوط به imageBrowser دریافت میشود که cache آن نیز به false تنظیم شدهاست تا در این بین مرورگر اطلاعات را کش نکند. این مورد در حین حذف فایلها و پوشهها مهم است. زیرا اگر cache:false تنظیم نشده باشد، حذف یک فایل یا پوشه در سمت کاربر تاثیری نخواهد داشت.
imageBrowser: { transport: { read: { url: "@Url.Action("GetFilesList", "KendoEditorImages")", dataType: "json", contentType: 'application/json; charset=utf-8', type: 'GET', cache: false } } },
namespace KendoUI13.Controllers { public class KendoEditorFilesController : Controller { //مسیر پوشه فایلها protected string FilesFolder = "~/files"; protected string KendoFileType = "f"; protected string KendoDirType = "d"; [HttpGet] public ActionResult GetFilesList(string path) { path = GetSafeDirPath(path); var imagesList = new DirectoryInfo(path) .GetFiles() .Select(fileInfo => new KendoFile { Name = fileInfo.Name, Size = fileInfo.Length, Type = KendoFileType }).ToList(); var foldersList = new DirectoryInfo(path) .GetDirectories() .Select(directoryInfo => new KendoFile { Name = directoryInfo.Name, Type = KendoDirType }).ToList(); return new ContentResult { Content = JsonConvert.SerializeObject(imagesList.Union(foldersList), new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }), ContentType = "application/json", ContentEncoding = Encoding.UTF8 }; } protected string GetSafeDirPath(string path) { // path = مسیر زیر پوشهی وارد شده if (string.IsNullOrWhiteSpace(path)) { return Server.MapPath(FilesFolder); } //تمیز سازی امنیتی path = Path.GetDirectoryName(path); path = Path.Combine(Server.MapPath(FilesFolder), path); return path; } } }
namespace KendoUI13.Models { public class KendoFile { public string Name { set; get; } public string Type { set; get; } public long Size { set; get; } } }
- علت استفاده از CamelCasePropertyNamesContractResolver در حین بازگشت JSON نهایی، تبدیل خواص دات نتی، به نامهای سازگار با JavaScript است. برای مثال به صورت خودکار Name را تبدیل به name میکند.
- پارامتر path در ابتدای کار خالی است. اما کاربر میتواند در بین پوشههای باز شدهی توسط مرورگر تصاویر Kendo UI حرکت کند. به همین جهت مقدار آن باید هربار بررسی شده و بر این اساس لیست فایلها و پوشههای جاری بازگشت داده شوند.
مدیریت حذف تصاویر و پوشهها
همانطور که در شکل فوق نیز مشخص است، با انتخاب یک پوشه یا فایل، دکمهای با آیکن ضربدر جهت فراهم آوردن امکان حذف، ظاهر میشود. این دکمه متصل است به قسمت destroy تنظیمات ادیتور:
imageBrowser: { transport: { destroy: { url: "@Url.Action("DestroyFile", "KendoEditorImages")", type: "POST" } } },
namespace KendoUI13.Controllers { public class KendoEditorFilesController : Controller { //مسیر پوشه فایلها protected string FilesFolder = "~/files"; protected string KendoFileType = "f"; protected string KendoDirType = "d"; [HttpPost] public ActionResult DestroyFile(string name, string path) { //تمیز سازی امنیتی name = Path.GetFileName(name); path = GetSafeDirPath(path); var pathToDelete = Path.Combine(path, name); var attr = System.IO.File.GetAttributes(pathToDelete); if ((attr & FileAttributes.Directory) == FileAttributes.Directory) { Directory.Delete(pathToDelete, recursive: true); } else { System.IO.File.Delete(pathToDelete); } return Json(new object[0]); } } }
- پارامتر name دریافتی مساوی است با نام فایل انتخاب شده و path مشخص میکند که در کدام پوشه قرار داریم.
- چون در اینجا امکان حذف یک پوشه یا فایل وجود دارد، حتما نیاز است بررسی کنیم، مسیر دریافتی پوشهاست یا فایل و سپس بر این اساس جهت حذف آنها اقدام صورت گیرد.
مدیریت ایجاد یک پوشهی جدید
تنظیمات قسمت create مرورگر تصاویر، مرتبط است به زمانیکه کاربر با کلیک بر روی دکمهی +، درخواست ایجاد یک پوشهی جدید را کردهاست:
imageBrowser: { transport: { create: { url: "@Url.Action("CreateFolder", "KendoEditorImages")", type: "POST" } } },
namespace KendoUI13.Controllers { public class KendoEditorFilesController : Controller { //مسیر پوشه فایلها protected string FilesFolder = "~/files"; protected string KendoFileType = "f"; protected string KendoDirType = "d"; [HttpPost] public ActionResult CreateFolder(string name, string path) { //تمیز سازی امنیتی name = Path.GetFileName(name); path = GetSafeDirPath(path); var dirToCreate = Path.Combine(path, name); Directory.CreateDirectory(dirToCreate); return KendoFile(new KendoFile { Name = name, Type = KendoDirType }); } protected ActionResult KendoFile(KendoFile file) { return new ContentResult { Content = JsonConvert.SerializeObject(file, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() }), ContentType = "application/json", ContentEncoding = Encoding.UTF8 }; } } }
- پس از ایجاد پوشه، باید نام آنرا با فرمت KendoFile به صورت JSON بازگشت داد. همچنین در اینجا Type را نیز باید به d (پوشه) تنظیم کرد.
مدیریت قسمت ارسال فایل و تصویر
زمانیکه کاربر بر روی دکمهی upload file یا بارگذاری تصاویر در اینجا کلیک میکند، اطلاعات فایل آپلودی به مسیر uploadUrl ارسال میگردد.
imageBrowser: { transport: { thumbnailUrl: "@Url.Action("GetThumbnail", "KendoEditorImages")", uploadUrl: "@Url.Action("UploadFile", "KendoEditorImages")", imageUrl: "@Url.Action("GetFile", "KendoEditorImages")?path={0}" } },
در ادامه کدهای مدیریت سمت سرور قسمت آپلود این ادیتور را مشاهده میکنید:
namespace KendoUI13.Controllers { public class KendoEditorFilesController : Controller { //مسیر پوشه فایلها protected string FilesFolder = "~/files"; protected string KendoFileType = "f"; protected string KendoDirType = "d"; [HttpPost] public ActionResult UploadFile(HttpPostedFileBase file, string path) { //تمیز سازی امنیتی var name = Path.GetFileName(file.FileName); path = GetSafeDirPath(path); var pathToSave = Path.Combine(path, name); file.SaveAs(pathToSave); return KendoFile(new KendoFile { Name = name, Size = file.ContentLength, Type = KendoFileType }); } } }
- پس از ذخیره سازی اطلاعات فایل، نیاز است اطلاعات فایل نهایی را با فرمت KendoFile به صورت JSON بازگشت دهیم.
ارث بری از KendoEditorFilesController جهت تکمیل قسمت مدیریت تصاویر
تا اینجا کدهایی را که ملاحظه کردید، برای هر دو قسمت ارسال تصویر و فایل کاربرد دارند. قسمت ارسال تصاویر برای تکمیل نیاز به متد دریافت تصاویر به صورت بند انگشتی نیز دارد که به صورت ذیل قابل تعریف است و چون از کلاس پایه KendoEditorFilesController ارث بری کردهاست، این کنترلر به صورت خودکار حاوی اکشن متدهای کلاس پایه نیز خواهد بود.
using System.Web.Mvc; namespace KendoUI13.Controllers { public class KendoEditorImagesController : KendoEditorFilesController { public KendoEditorImagesController() { // بازنویسی مسیر پوشهی فایلها FilesFolder = "~/images"; } [HttpGet] [OutputCache(Duration = 3600, VaryByParam = "path")] public ActionResult GetThumbnail(string path) { //todo: create thumb/ resize image path = GetSafeFileAndDirPath(path); return File(path, "image/png"); } } }
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید.