public class HandleConcurrencyExceptionAttribute : FilterAttribute, IExceptionFilter { private PropertyMatchingMode _propertyMatchingMode; /// <summary> /// This defines when the concurrencyexception happens, /// </summary> public enum PropertyMatchingMode { /// <summary> /// Uses only the field names in the model to check against the entity. This option is best when you are using /// View Models with limited fields as opposed to an entity that has many fields. The ViewModel (or model) field names will /// be used to check current posted values vs. db values on the entity itself. /// </summary> UseViewModelNamesToCheckEntity = 0, /// <summary> /// Use any non-matching value fields on the entity (except timestamp fields) to add errors to the ModelState. /// </summary> UseEntityFieldsOnly = 1, /// <summary> /// Tells the filter to not attempt to add field differences to the model state. /// This means the end user will not see the specifics of which fields caused issues /// </summary> DontDisplayFieldClashes = 2 } public HandleConcurrencyExceptionAttribute() { _propertyMatchingMode = PropertyMatchingMode.UseViewModelNamesToCheckEntity; } public HandleConcurrencyExceptionAttribute(PropertyMatchingMode propertyMatchingMode) { _propertyMatchingMode = propertyMatchingMode; } /// <summary> /// The main method, called by the mvc runtime when an exception has occured. /// This must be added as a global filter, or as an attribute on a class or action method. /// </summary> /// <param name="filterContext"></param> public void OnException(ExceptionContext filterContext) { if (!filterContext.ExceptionHandled && filterContext.Exception is DbUpdateConcurrencyException) { //Get original and current entity values DbUpdateConcurrencyException ex = (DbUpdateConcurrencyException)filterContext.Exception; var entry = ex.Entries.Single(); //problems with ef4.1/4.2 here because of context/model in different projects. //var databaseValues = entry.CurrentValues.Clone().ToObject(); //var clientValues = entry.Entity; //So - if using EF 4.1/4.2 you may use this workaround var clientValues = entry.CurrentValues.Clone().ToObject(); entry.Reload(); var databaseValues = entry.CurrentValues.ToObject(); List<string> propertyNames; filterContext.Controller.ViewData.ModelState.AddModelError(string.Empty, "The record you attempted to edit " + "was modified by another user after you got the original value. The " + "edit operation was canceled and the current values in the database " + "have been displayed. If you still want to edit this record, click " + "the Save button again to cause your changes to be the current saved values."); PropertyInfo[] entityFromDbProperties = databaseValues.GetType().GetProperties(BindingFlags.FlattenHierarchy | BindingFlags.Public | BindingFlags.Instance); if (_propertyMatchingMode == PropertyMatchingMode.UseViewModelNamesToCheckEntity) { //We dont have access to the model here on an exception. Get the field names from modelstate: propertyNames = filterContext.Controller.ViewData.ModelState.Keys.ToList(); } else if (_propertyMatchingMode == PropertyMatchingMode.UseEntityFieldsOnly) { propertyNames = databaseValues.GetType().GetProperties(BindingFlags.Public).Select(o => o.Name).ToList(); } else { filterContext.ExceptionHandled = true; UpdateTimestampField(filterContext, entityFromDbProperties, databaseValues); filterContext.Result = new ViewResult() { ViewData = filterContext.Controller.ViewData }; return; } UpdateTimestampField(filterContext, entityFromDbProperties, databaseValues); //Get all public properties of the entity that have names matching those in our modelstate. foreach (var propertyInfo in entityFromDbProperties) { //If this value is not in the ModelState values, don't compare it as we don't want //to attempt to emit model errors for fields that don't exist. //Compare db value to the current value from the entity we posted. if (propertyNames.Contains(propertyInfo.Name)) { if (propertyInfo.GetValue(databaseValues, null) != propertyInfo.GetValue(clientValues, null)) { var currentValue = propertyInfo.GetValue(databaseValues, null); if (currentValue == null || string.IsNullOrEmpty(currentValue.ToString())) { currentValue = "Empty"; } filterContext.Controller.ViewData.ModelState.AddModelError(propertyInfo.Name, "Current value: " + currentValue); } } //TODO: hmm.... how can we only check values applicable to the model/modelstate rather than the entity we saved? //The problem here is we may only have a few fields used in the viewmodel, but many in the entity //so we could have a problem here with that. //object o = propertyInfo.GetValue(myObject, null); } filterContext.ExceptionHandled = true; filterContext.Result = new ViewResult() { ViewData = filterContext.Controller.ViewData }; } }
پیشنیازها
- صفحه بندی و مرتب سازی خودکار اطلاعات به کمک jqGrid در ASP.NET MVC
- فعال سازی و پردازش جستجوی پویای jqGrid در ASP.NET MVC
- سفارشی سازی عناصر صفحات پویای افزودن و ویرایش رکوردهای jqGrid در ASP.NET MVC
- آشنایی با کتابخانهی PDF Report
اضافه کردن دکمهی خروجی به jqGrid
برای تهیه خروجی از jqGrid نیاز است بدانیم، اکنون در چه صفحهای از اطلاعات قرار داریم؟ بر روی چه ستونی، مرتب سازی صورت گرفتهاست؟ بر روی کدام فیلدها با چه مقادیری جستجو انجام شدهاست؟ تا ... بتوانیم بر این مبنا، منبع دادهی موجود را فیلتر کرده و لیست نهایی را تبدیل به گزارش کنیم. گزارشی که دقیقا با اطلاعاتی که کاربر در صفحه مشاهده میکند، تطابق داشته باشد.
خوشبختانه تمام این سؤالات توسط متد توکار excelExport در سمت سرور قابل دریافت است:
با این تفاوت که یک oper نیز به مجموعهی پارامترهای ارسالی به سرور اضافه شدهاست. این oper در اینجا با excel مقدار دهی میشود.
البته چون تعداد این پارامترها بیش از اندازه شدهاست، بهتر است آنها را تبدیل به یک کلاس کرد:
و متد جستجوی پویا را به نحو ذیل بازنویسی نمود:
توضیحات:
اکثر قسمتهای این متد با متدی که در مطلب «فعال سازی و پردازش جستجوی پویای jqGrid در ASP.NET MVC» مشاهده کردید یکی است؛ برای مثال order by آن با استفاده از کتابخانهی Dynamic LINQ به صورت پویا عمل میکند و متد ApplyFilter، کار تهیه where پویا را انجام میدهد.
فقط در اینجا بررسی و پردازش پارامتر oper نیز اضافه شدهاست. اگر این پارامتر مقدار دهی شده باشد، یعنی نیاز است کل اطلاعات را واکشی کرد؛ زیرا میخواهیم گزارش گیری کنیم و نه اینکه صرفا اطلاعات یک صفحه را به کاربر بازگشت دهیم. همچنین در اینجا List نهایی فیلتر شده به یک گزارش Pdf Report ارسال میشود. این گزارش چون نهایتا اطلاعات را در مرورگر کاربر Flush میکند، کار به اجرای سایر قسمتها نخواهد رسید و همینجا گزارش نهایی تهیه میشود.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
jqGrid06.7z
- صفحه بندی و مرتب سازی خودکار اطلاعات به کمک jqGrid در ASP.NET MVC
- فعال سازی و پردازش جستجوی پویای jqGrid در ASP.NET MVC
- سفارشی سازی عناصر صفحات پویای افزودن و ویرایش رکوردهای jqGrid در ASP.NET MVC
- آشنایی با کتابخانهی PDF Report
اضافه کردن دکمهی خروجی به jqGrid
برای تهیه خروجی از jqGrid نیاز است بدانیم، اکنون در چه صفحهای از اطلاعات قرار داریم؟ بر روی چه ستونی، مرتب سازی صورت گرفتهاست؟ بر روی کدام فیلدها با چه مقادیری جستجو انجام شدهاست؟ تا ... بتوانیم بر این مبنا، منبع دادهی موجود را فیلتر کرده و لیست نهایی را تبدیل به گزارش کنیم. گزارشی که دقیقا با اطلاعاتی که کاربر در صفحه مشاهده میکند، تطابق داشته باشد.
خوشبختانه تمام این سؤالات توسط متد توکار excelExport در سمت سرور قابل دریافت است:
@section Scripts { <script type="text/javascript"> $(document).ready(function () { $('#list').jqGrid({ caption: "آزمایش ششم", // مانند قبل }).navGrid( // مانند قبل }).jqGrid('navButtonAdd', '#pager', { caption: "", buttonicon: "ui-icon-print", title: "خروجی پی دی اف", onClickButton: function () { $("#list").jqGrid('excelExport', { url: '@Url.Action("GetProducts", "Home")' }); } }); }); </script> }
در اینجا توسط متد navButtonAdd یک دکمهی جدید را اضافه کردهایم که کلیک بر روی آن سبب فراخوانی متد excelExport و ارسال اطلاعات گزارش به url تنظیم شدهاست. باید دقت داشت که این اطلاعات از طریق Http Get به سرور ارسال میشوند و دقیقا اجزای آن همان اجزای جستجوی پویای jqGrid است:
public ActionResult GetProducts(string sidx, string sord, int page, int rows, bool _search, string searchField, string searchString, string searchOper, string filters, string oper)
البته چون تعداد این پارامترها بیش از اندازه شدهاست، بهتر است آنها را تبدیل به یک کلاس کرد:
namespace jqGrid06.Models { public class JqGridRequest { public string sidx { set; get; } public string sord { set; get; } public int page { set; get; } public int rows { set; get; } public bool _search { set; get; } public string searchField { set; get; } public string searchString { set; get; } public string searchOper { set; get; } public string filters { set; get; } public string oper { set; get; } } }
public ActionResult GetProducts(JqGridRequest request) { var list = ProductDataSource.LatestProducts; var pageIndex = request.page - 1; var pageSize = request.rows; var totalRecords = list.Count; var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize); var productsQuery = list.AsQueryable(); productsQuery = new JqGridSearch().ApplyFilter(productsQuery, request, this.Request.Form); productsQuery = productsQuery.OrderBy(request.sidx + " " + request.sord); if (string.IsNullOrWhiteSpace(request.oper)) { productsQuery = productsQuery .Skip(pageIndex * pageSize) .Take(pageSize); } else if (request.oper == "excel") { productsQuery = productsQuery .Skip(pageIndex * pageSize); } var productsList = productsQuery.ToList(); if (!string.IsNullOrWhiteSpace(request.oper) && request.oper == "excel") { new ProductsPdfReport().CreatePdfReport(productsList); } var productsData = new JqGridData { Total = totalPages, Page = request.page, Records = totalRecords, Rows = (productsList.Select(product => new JqGridRowData { Id = product.Id, RowCells = new List<string> { product.Id.ToString(CultureInfo.InvariantCulture), product.Name, product.AddDate.ToPersianDate(), product.Price.ToString(CultureInfo.InvariantCulture) } })).ToArray() }; return Json(productsData, JsonRequestBehavior.AllowGet); }
توضیحات:
اکثر قسمتهای این متد با متدی که در مطلب «فعال سازی و پردازش جستجوی پویای jqGrid در ASP.NET MVC» مشاهده کردید یکی است؛ برای مثال order by آن با استفاده از کتابخانهی Dynamic LINQ به صورت پویا عمل میکند و متد ApplyFilter، کار تهیه where پویا را انجام میدهد.
فقط در اینجا بررسی و پردازش پارامتر oper نیز اضافه شدهاست. اگر این پارامتر مقدار دهی شده باشد، یعنی نیاز است کل اطلاعات را واکشی کرد؛ زیرا میخواهیم گزارش گیری کنیم و نه اینکه صرفا اطلاعات یک صفحه را به کاربر بازگشت دهیم. همچنین در اینجا List نهایی فیلتر شده به یک گزارش Pdf Report ارسال میشود. این گزارش چون نهایتا اطلاعات را در مرورگر کاربر Flush میکند، کار به اجرای سایر قسمتها نخواهد رسید و همینجا گزارش نهایی تهیه میشود.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
jqGrid06.7z
چندی قبل مطلبی را در مورد پیاده سازی سطح دوم کش در EF در این سایت مطالعه کردید. اساس آن مقالهای بود که نحوهی کش کردن اطلاعات حاصل از LINQ to Objects را بیان کرده بود (^). این مقاله پایهی بسیاری از سیستمهای کش مشابه نیز شدهاست (^ و ^ و ...).
مشکل مهم این روش عدم سازگاری کامل آن با EF است. برای مثال در آن تفاوتی بین (Include(x=>x.Tags و (Include(x=>x.Users وجود ندارد. به همین جهت در این نوع موارد، قادر به تولید کلید منحصربفردی جهت کش کردن اطلاعات یک کوئری مشخص نیست. در اینجا یک کوئری LINQ، به معادل رشتهای آن تبدیل میشود و سپس Hash آن محاسبه میگردد. این هش، کلید ذخیره سازی اطلاعات حاصل از کوئری، در سیستم کش خواهد بود. زمانیکه دو کوئری Include دار متفاوت EF، هشهای یکسانی را تولید کنند، عملا این سیستم کش، کارآیی خودش را از دست میدهد. برای رفع این مشکل پروژهی دیگری به نام EF cache ارائه شدهاست. این پروژه بسیار عالی طراحی شده و میتواند جهت ایده دادن به تیم EF نیز بکار رود. اما در آن فرض بر این است که شما میخواهید کل سیستم را در یک کش قرار دهید. وارد مکانیزم DBCommand و DataReader میشود و در آنجا کار کش کردن تمام کوئریها را انجام میدهد؛ مگر آنکه به آن اعلام کنید از کوئریهای خاصی صرفنظر کند.
با توجه به این مشکلات، روش بهتری برای تولید هش یک کوئری LINQ to Entities بر اساس کوئری واقعی SQL تولید شده توسط EF، پیش از ارسال آن به بانک اطلاعاتی به صورت زیر وجود دارد:
این متد یک کوئری LINQ مخصوص EF را دریافت میکند و با کمک Reflection، اطلاعات درونی آن که شامل ObjectQuery اصلی است را استخراج میکند. سپس فراخوانی متد objectQuery.ToTraceString بر روی حاصل آن، سبب تولید SQL معادل کوئری LINQ اصلی میگردد. همچنین objectQuery امکان دسترسی به پارامترهای تنظیم شدهی کوئری را نیز میسر میکند. به این ترتیب میتوان به معادل رشتهای منطقیتری از یک کوئری LINQ رسید که قابلیت تشخیص JOINها و متد Include نیز به صورت خودکار در آن لحاظ شدهاست.
این اطلاعات، پایهی تهیهی کتابخانهی جدیدی به نام EFSecondLevelCache گردید. برای نصب آن کافی است دستور ذیل را در کنسول پاورشل نیوگت صادر کنید:
سپس برای کش کردن کوئری معمولی مانند:
میتوان از متد جدید Cacheable آن به نحو ذیل استفاده کرد (این روش بسیار تمیزتر است از روش مقالهی قبلی و امکان استفادهی از انواع و اقسام متدهای EF را به صورت متداولی میسر میکند):
پس از آن نیاز است کدهای کلاس Context خود را نیز به نحو ذیل ویرایش کنید (به روز رسانی شدهی آن در اینجا):
متد InvalidateCacheDependencies سبب میشود تا اگر تغییری در بانک اطلاعاتی رخداد، به صورت خودکار کشهای کوئریهای مرتبط غیر معتبر شوند و برنامه اطلاعات قدیمی را از کش نخواند.
کدهای کامل این پروژه را از مخزن کد ذیل میتوانید دریافت کنید:
EFSecondLevelCache
پ.ن.
این کتابخانه هم اکنون در سایت جاری در حال استفاده است.
مشکل مهم این روش عدم سازگاری کامل آن با EF است. برای مثال در آن تفاوتی بین (Include(x=>x.Tags و (Include(x=>x.Users وجود ندارد. به همین جهت در این نوع موارد، قادر به تولید کلید منحصربفردی جهت کش کردن اطلاعات یک کوئری مشخص نیست. در اینجا یک کوئری LINQ، به معادل رشتهای آن تبدیل میشود و سپس Hash آن محاسبه میگردد. این هش، کلید ذخیره سازی اطلاعات حاصل از کوئری، در سیستم کش خواهد بود. زمانیکه دو کوئری Include دار متفاوت EF، هشهای یکسانی را تولید کنند، عملا این سیستم کش، کارآیی خودش را از دست میدهد. برای رفع این مشکل پروژهی دیگری به نام EF cache ارائه شدهاست. این پروژه بسیار عالی طراحی شده و میتواند جهت ایده دادن به تیم EF نیز بکار رود. اما در آن فرض بر این است که شما میخواهید کل سیستم را در یک کش قرار دهید. وارد مکانیزم DBCommand و DataReader میشود و در آنجا کار کش کردن تمام کوئریها را انجام میدهد؛ مگر آنکه به آن اعلام کنید از کوئریهای خاصی صرفنظر کند.
با توجه به این مشکلات، روش بهتری برای تولید هش یک کوئری LINQ to Entities بر اساس کوئری واقعی SQL تولید شده توسط EF، پیش از ارسال آن به بانک اطلاعاتی به صورت زیر وجود دارد:
private static ObjectQuery TryGetObjectQuery<T>(IQueryable<T> source) { var dbQuery = source as DbQuery<T>; if (dbQuery != null) { const BindingFlags privateFieldFlags = BindingFlags.NonPublic | BindingFlags.Instance | BindingFlags.Public; var internalQuery = source.GetType().GetProperty("InternalQuery", privateFieldFlags) .GetValue(source); return (ObjectQuery)internalQuery.GetType().GetProperty("ObjectQuery", privateFieldFlags) .GetValue(internalQuery); } return null; }
این اطلاعات، پایهی تهیهی کتابخانهی جدیدی به نام EFSecondLevelCache گردید. برای نصب آن کافی است دستور ذیل را در کنسول پاورشل نیوگت صادر کنید:
PM> Install-Package EFSecondLevelCache
var products = context.Products.Include(x => x.Tags).FirstOrDefault();
var products = context.Products.Include(x => x.Tags).Cacheable().FirstOrDefault(); // Async methods are supported too.
پس از آن نیاز است کدهای کلاس Context خود را نیز به نحو ذیل ویرایش کنید (به روز رسانی شدهی آن در اینجا):
namespace EFSecondLevelCache.TestDataLayer.DataLayer { public class SampleContext : DbContext { // public DbSet<Product> Products { get; set; } public SampleContext() : base("connectionString1") { } public override int SaveChanges() { return SaveAllChanges(invalidateCacheDependencies: true); } public int SaveAllChanges(bool invalidateCacheDependencies = true) { var changedEntityNames = getChangedEntityNames(); var result = base.SaveChanges(); if (invalidateCacheDependencies) { new EFCacheServiceProvider().InvalidateCacheDependencies(changedEntityNames); } return result; } private string[] getChangedEntityNames() { return this.ChangeTracker.Entries() .Where(x => x.State == EntityState.Added || x.State == EntityState.Modified || x.State == EntityState.Deleted) .Select(x => ObjectContext.GetObjectType(x.Entity.GetType()).FullName) .Distinct() .ToArray(); } } }
کدهای کامل این پروژه را از مخزن کد ذیل میتوانید دریافت کنید:
EFSecondLevelCache
پ.ن.
این کتابخانه هم اکنون در سایت جاری در حال استفاده است.
نگارش کامل SQL Server امکان تهیه خروجی XML از یک بانک اطلاعاتی را دارد. اما اگر بخواهیم از سایر بانکهای اطلاعاتی که چنین توابع توکاری ندارند، استفاده کنیم چطور؟ برای تهیه خروجی XML توسط Entity framework و مستقل از نوع بانک اطلاعاتی در حال استفاده، حداقل دو روش وجود دارد:
الف) استفاده از امکانات Serialization توکار دات نت
در اینجا برای نمونه، لیستی از اشیاء مدنظر خود را تهیه کرده و به متد Serialize فوق ارسال کنید. نتیجه کار، تهیه معادل XML آن است.
امکانات سفارشی سازی محدودی نیز برای XmlSerializer درنظر گرفته شده است؛ برای نمونه قرار دادن ویژگیهایی مانند XmlIgnore بالای خواصی که نیازی به حضور آنها در خروجی نهایی XML نمیباشد.
ب) استفاده از امکانات LINQ to XML دات نت
روش فوق بدون مشکل کار میکند، اما اگر بخواهیم قسمت Reflection خودکار ثانویه آنرا (برای نمونه جهت استخراج مقادیر از لیست دریافتی) حذف کنیم، میتوان از LINQ to XML استفاده کرد که قابلیت سفارشی سازی بیشتری را نیز در اختیار ما قرار میدهد (کاری که در سایت جاری برای تهیه خروجی XML از بانک اطلاعاتی آن انجام میشود).
خلاصهای از نحوه تبدیل اطلاعات لیستی از مطالب را به معادل XML آن در کدهای فوق مشاهده میکنید. یک سری نکات ریز نیز باید در اینجا رعایت شوند:
1) کار با یک new XElement که دارای متد Save با فرمت XML نیز هست، شروع میشود. مقدار آنرا مساوی یک کوئری از بانک اطلاعاتی قرار میدهیم. این کوئری چون قرار است تنها اطلاعاتی را از بانک اطلاعاتی دریافت کند و نیازی به تغییر در آنها نیست، با استفاده از متد AsNoTracking، حالت فقط خواندنی پیدا کرده است.
2) اطلاعاتی را که نیاز است در فایل نهایی XML وجود داشته باشند، تنها کافی است در قسمت Select این کوئری با فرمت new XElementهای تو در تو قرار دهیم. به این ترتیب قسمت Relection خودکار XmlSerializer روش مطرح شده در ابتدای بحث دیگر وجود نداشته و عملیات نهایی بسیار سریعتر خواهد بود.
3) چون در این حالت، کار انجام شده دستی است، باید نامهای گرههای صحیحی را انتخاب کنیم تا اگر قرار است توسط همان XmlSerializer مجددا کار serializer.Deserialize صورت گیرد، عملیات با شکست مواجه نشود. بهترین کار برای کم شدن سعی و خطاها، تهیه یک لیست اطلاعات آزمایشی و سپس ارسال آن به روش ابتدای بحث است. سپس میتوان با بررسی خروجی آن مثلا دریافت که روش serializer.Deserialize به صورت پیش فرض به دنبال ریشهای به نام ArrayOfPost برای دریافت لیستی از مطالب میگردد و نه Posts یا هر نام دیگری.
4) در کوئری LINQ to Entites نوشته شده، پیش از Select، یک ToList قرار دارد. متاسفانه EF اجازه استفاده مستقیم از Select هایی از نوع XElement را نمیدهد و باید ابتدا اطلاعات را تبدیل به LINQ to Objects کرد.
5) در حین تهیه XElementها اگر قرار است عنصری نال باشد، باید آنرا در خروجی نهایی ذکر نکرد. به این ترتیب serializer.Deserialize بدون نیاز به تنظیمات اضافهتری بدون مشکل کار خواهد کرد. در غیراینصورت باید وارد مباحثی مانند تعریف یک فضای نام جدید برای خروجی XML به نام XSI رفت و سپس به کمک ویژگیها، xsi:nil را به true مقدار دهی کرد. اما همانطور که در متد postXElement ملاحظه میکنید، برای وارد نشدن به مبحث فضای نام xsi، مواردی که null بودهاند، اصلا در آرایه نهایی ظاهر نمیشوند و نهایتا در خروجی، حضور نخواهند داشت. به این ترتیب متد ذیل، بدون مشکل و بدون نیاز به تنظیمات اضافهتری قادر است فایل XML نهایی را تبدیل به معادل اشیاء دات نتی آن کند.
الف) استفاده از امکانات Serialization توکار دات نت
using System.IO; using System.Xml; using System.Xml.Serialization; namespace DNTViewer.Common.Toolkit { public static class Serializer { public static string Serialize<T>(T type) { var serializer = new XmlSerializer(type.GetType()); using (var stream = new MemoryStream()) { serializer.Serialize(stream, type); stream.Seek(0, SeekOrigin.Begin); using (var reader = new StreamReader(stream)) { return reader.ReadToEnd(); } } } } }
امکانات سفارشی سازی محدودی نیز برای XmlSerializer درنظر گرفته شده است؛ برای نمونه قرار دادن ویژگیهایی مانند XmlIgnore بالای خواصی که نیازی به حضور آنها در خروجی نهایی XML نمیباشد.
ب) استفاده از امکانات LINQ to XML دات نت
روش فوق بدون مشکل کار میکند، اما اگر بخواهیم قسمت Reflection خودکار ثانویه آنرا (برای نمونه جهت استخراج مقادیر از لیست دریافتی) حذف کنیم، میتوان از LINQ to XML استفاده کرد که قابلیت سفارشی سازی بیشتری را نیز در اختیار ما قرار میدهد (کاری که در سایت جاری برای تهیه خروجی XML از بانک اطلاعاتی آن انجام میشود).
private string createXmlFile(string dir) { var xLinq = new XElement("ArrayOfPost", _blogPosts .AsNoTracking() .Include(x => x.Comments) .Include(x => x.User) .Include(x => x.Tags) .OrderBy(x => x.Id) .ToList() .Select(x => new XElement("Post", postXElement(x))) ); var xmlFile = Path.Combine(dir, "dot-net-tips-database.xml"); xLinq.Save(xmlFile); return xmlFile; } private static XElement[] postXElement(BlogPost x) { return new XElement[] { new XElement("Id", x.Id), new XElement("Title", x.Title), new XElement("Body", x.Body), new XElement("CreatedOn", x.CreatedOn), tagElement(x), new XElement("User", new XElement("Id", x.UserId.Value), new XElement("FriendlyName", x.User.FriendlyName)) }.Where(item => item != null).ToArray(); } private static XElement tagElement(BlogPost x) { var tags = x.Tags.Any() ? x.Tags.Select(y => new XElement("Tag", new XElement("Id", y.Id), new XElement("Name", y.Name))) .ToArray() : null; if (tags == null) return null; return new XElement("Tags", tags); }
1) کار با یک new XElement که دارای متد Save با فرمت XML نیز هست، شروع میشود. مقدار آنرا مساوی یک کوئری از بانک اطلاعاتی قرار میدهیم. این کوئری چون قرار است تنها اطلاعاتی را از بانک اطلاعاتی دریافت کند و نیازی به تغییر در آنها نیست، با استفاده از متد AsNoTracking، حالت فقط خواندنی پیدا کرده است.
2) اطلاعاتی را که نیاز است در فایل نهایی XML وجود داشته باشند، تنها کافی است در قسمت Select این کوئری با فرمت new XElementهای تو در تو قرار دهیم. به این ترتیب قسمت Relection خودکار XmlSerializer روش مطرح شده در ابتدای بحث دیگر وجود نداشته و عملیات نهایی بسیار سریعتر خواهد بود.
3) چون در این حالت، کار انجام شده دستی است، باید نامهای گرههای صحیحی را انتخاب کنیم تا اگر قرار است توسط همان XmlSerializer مجددا کار serializer.Deserialize صورت گیرد، عملیات با شکست مواجه نشود. بهترین کار برای کم شدن سعی و خطاها، تهیه یک لیست اطلاعات آزمایشی و سپس ارسال آن به روش ابتدای بحث است. سپس میتوان با بررسی خروجی آن مثلا دریافت که روش serializer.Deserialize به صورت پیش فرض به دنبال ریشهای به نام ArrayOfPost برای دریافت لیستی از مطالب میگردد و نه Posts یا هر نام دیگری.
4) در کوئری LINQ to Entites نوشته شده، پیش از Select، یک ToList قرار دارد. متاسفانه EF اجازه استفاده مستقیم از Select هایی از نوع XElement را نمیدهد و باید ابتدا اطلاعات را تبدیل به LINQ to Objects کرد.
5) در حین تهیه XElementها اگر قرار است عنصری نال باشد، باید آنرا در خروجی نهایی ذکر نکرد. به این ترتیب serializer.Deserialize بدون نیاز به تنظیمات اضافهتری بدون مشکل کار خواهد کرد. در غیراینصورت باید وارد مباحثی مانند تعریف یک فضای نام جدید برای خروجی XML به نام XSI رفت و سپس به کمک ویژگیها، xsi:nil را به true مقدار دهی کرد. اما همانطور که در متد postXElement ملاحظه میکنید، برای وارد نشدن به مبحث فضای نام xsi، مواردی که null بودهاند، اصلا در آرایه نهایی ظاهر نمیشوند و نهایتا در خروجی، حضور نخواهند داشت. به این ترتیب متد ذیل، بدون مشکل و بدون نیاز به تنظیمات اضافهتری قادر است فایل XML نهایی را تبدیل به معادل اشیاء دات نتی آن کند.
using System.IO; using System.Xml; using System.Xml.Serialization; namespace DNTViewer.Common.Toolkit { public static class Serializer { public static T DeserializePath<T>(string xmlAddress) { using (var xmlReader = new XmlTextReader(xmlAddress)) { var serializer = new XmlSerializer(typeof(T)); return (T)serializer.Deserialize(xmlReader); } } } }
هر برنامهی وب، دارای یک frontend و یک backend است. تا اینجا، تمام تمرکز این سری، بر روی پیاده سازی frontend بود و هیچکدام از برنامههایی را که تکمیل کردیم، تبادل اطلاعاتی را با وب سرویسهای backend نداشتند؛ اما به عنوان یک توسعه دهندهی React، نیاز است با نحوهی ارتباط با سرور آشنایی داشت که در طی چند قسمت به آن میپردازیم.
ایجاد برنامهی backend ارائه دهندهی REST API
در اینجا یک برنامهی سادهی ASP.NET Core Web API را جهت تدارک سرویسهای backend، مورد استفاده قرار میدهیم. هرچند این مورد الزامی نبوده و اگر علاقمند بودید که مستقل از آن کار کنید، حتی میتوانید از سرویس آنلاین JSONPlaceholder نیز برای این منظور استفاده کنید که یک Fake Online REST API است. کار آن ارائهی یک سری endpoint است که به صورت عمومی از طریق وب قابل دسترسی هستند. میتوان به این endpintها درخواستهای HTTP خود را مانند GET/POST/DELETE/UPDATE ارسال کرد و از آن اطلاعاتی را دریافت نمود و یا تغییر داد. به هر کدام از این endpointها یک API گفته میشود که جهت آزمایش برنامهها بسیار مناسب هستند. برای نمونه در قسمت resources آن اگر به آدرس https://jsonplaceholder.typicode.com/posts مراجعه کنید، میتوان لیستی از مطالب را با فرمت JSON مشاهده کرد. کار آن ارائهی آرایهای از اشیاء جاوا اسکریپتی قابل استفادهی در برنامههای frontend است. بنابراین زمانیکه یک HTTP GET را به این endpoint ارسال میکنیم، آرایهای از اشیاء مطالب را دریافت خواهیم کرد. همین endpoint، امکان تغییر این اطلاعات را توسط برای مثال HTTP Delete نیز میسر کردهاست.
اگر علاقمندید بودید میتوانید از JSONPlaceholder استفاده کنید و یا در ادامه دقیقا ساختار همین endpoint ارائهی مطالب آنرا با ASP.NET Core Web API نیز پیاده سازی میکنیم (برای مطالعهی قسمت «ارتباط با سرور» اختیاری است و از هر REST API مشابهی که توسط nodejs یا PHP و غیره تولید شده باشد نیز میتوان استفاده کرد):
مدل مطالب
ساختار این مدل، با ساختار مدل مطالب JSONPlaceholder یکی درنظر گرفته شدهاست، تا مطلب قابلیت پیگیری بیشتری را پیدا کند.
منبع دادهی فرضی مطالب
برای ارائهی سادهتر برنامه، یک منبع دادهی درون حافظهای را به همراه یک سرویس، در اختیار کنترلر مطالب، قرار میدهیم:
در این سرویس، نیازمندیهای کنترلر مطالب مانند ارائه لیست تمام مطالب، نمایش اطلاعات یک مطلب، به روز رسانی، ایجاد و حذف یک مطلب، تدارک دیده شدهاند. سپس از این سرویس در کنترلر زیر استفاده میکنیم:
کنترلر Web API برنامهی backend
این کنترلر که در مسیر شروع شدهی با https://localhost:5001/api قرار میگیرد، جهت پشتیبانی از افعال مختلف HTTP مانند Get/Post/Delete/Update طراحی شدهاست که در ادامه، در برنامهی React خود از آنها استفاده خواهیم کرد. پس از ایجاد این پروژهی web api، یک نمونه خروجی آن در مسیر https://localhost:5001/api/posts، به صورت زیر خواهد بود:
البته نمایش فرمت شدهی JSON در مرورگر کروم، نیاز به نصب این افزونه را دارد.
ایجاد ساختار ابتدایی برنامهی ارتباط با سرور
در اینجا برای بررسی کار با سرور، یک پروژهی جدید React را ایجاد میکنیم:
در ادامه توئیتر بوت استرپ 4 را نیز نصب میکنیم. برای این منظور پس از باز کردن پوشهی اصلی برنامه توسط VSCode، دکمههای ctrl+` را فشرده (ctrl+back-tick) و دستور زیر را در ترمینال ظاهر شده وارد کنید:
سپس برای افزودن فایل bootstrap.css به پروژهی React خود، ابتدای فایل index.js را به نحو زیر ویرایش خواهیم کرد:
این import به صورت خودکار توسط webpack ای که در پشت صحنه کار bundling & minification برنامه را انجام میدهد، مورد استفاده قرار میگیرد.
سپس فایل app.js را به شکل زیر تکمیل میکنیم:
که حاصل آن، یک دکمه، برای افزودن مطلبی جدید، به همراه جدولی است از مطالب که قصد داریم در ادامه، اطلاعات آنرا از سرور دریافت کرده و حذف و یا به روز رسانی کنیم:
نگاهی به انواع و اقسام HTTP Clientهای مهیا
در ادامه نیاز خواهیم داشت تا از طریق برنامههای React خود، درخواستهای HTTP را به سمت سرور (یا همان برنامهی backend) ارسال کنیم، تا بتوان اطلاعاتی را از آن دریافت کرد و یا تغییری را در اطلاعات موجود، ایجاد نمود. همانطور که پیشتر نیز در این سری عنوان شد، React برای این مورد نیز راهحل توکاری را به همراه ندارد و تنها کار آن، رندر کردن View و مدیریت DOM است. البته شاید این مورد یکی از مزایای کار با React نیز باشد! چون در این حالت میتوانید از کتابخانههایی که خودتان ترجیح میدهید، نسبت به کتابخانههایی که به شما ارائه/تحمیل (!) میشوند (مانند برنامههای Angular) آزادی انتخاب کاملی را داشته باشید. برای مثال هرچند Angular به همراه یک HTTP Module توکار است، اما تاکنون چندین بار بازنویسی از ابتدا شدهاست! ابتدا با یک کتابخانهی HTTP مقدماتی شروع کردند. بعدی آنرا منسوخ شده اعلام و با یک ماژول جدید جایگزین کردند. بعد در نگارشی دیگر، چون این کتابخانه وابستهاست به RxJS و خود RxJS نیز بازنویسی کامل شد، روش کار کردن با این HTTP Module نیز مجددا تغییر پیدا کرد! بنابراین اگر با Angular کار میکنید، باید کارها را آنگونه که Angular میپسندد، انجام دهید؛ اما در اینجا خیر و آزادی انتخاب کاملی برقرار است.
بنابراین اکنون این سؤال مطرح میشود که در React، برای برقراری ارتباط با سرور، چه باید کرد؟ در اینجا آزاد هستید برای مثال از Fetch API جدید مرورگرها و یا روش Ajax ای مبتنی بر XML قدیمیتر آنها، استفاده کنید (اطلاعات بیشتر) و یا حتی اگر علاقمند باشید میتوانید از محصور کنندههای آن مانند jQuery Ajax استفاده کنید. بنابراین اگر با jQuery Ajax راحت هستید، به سادگی میتوانید از آن در برنامههای React نیز استفاده کنید. اما ... ما در اینجا از یک کتابخانهی بسیار محبوب و قدرتمند HTTP Client، به نام Axios (اکسیوس/ یک واژهی یونانی به معنای «سودمند») استفاده خواهیم کرد که فقط تعداد بار دانلود هفتگی آن، 6 میلیون بار است!
نصب Axios در برنامهی React این قسمت
برای نصب کتابخانهی Axios، در ریشهی پروژهی React این قسمت، دستور زیر را در خط فرمان صادر کنید:
پس از برپایی این مقدمات، ادامهی مطلب «ارتباط با سرور» را در قسمت بعدی پیگیری میکنیم.
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-22-frontend-part-01.zip و sample-22-backend-part-01.zip
ایجاد برنامهی backend ارائه دهندهی REST API
در اینجا یک برنامهی سادهی ASP.NET Core Web API را جهت تدارک سرویسهای backend، مورد استفاده قرار میدهیم. هرچند این مورد الزامی نبوده و اگر علاقمند بودید که مستقل از آن کار کنید، حتی میتوانید از سرویس آنلاین JSONPlaceholder نیز برای این منظور استفاده کنید که یک Fake Online REST API است. کار آن ارائهی یک سری endpoint است که به صورت عمومی از طریق وب قابل دسترسی هستند. میتوان به این endpintها درخواستهای HTTP خود را مانند GET/POST/DELETE/UPDATE ارسال کرد و از آن اطلاعاتی را دریافت نمود و یا تغییر داد. به هر کدام از این endpointها یک API گفته میشود که جهت آزمایش برنامهها بسیار مناسب هستند. برای نمونه در قسمت resources آن اگر به آدرس https://jsonplaceholder.typicode.com/posts مراجعه کنید، میتوان لیستی از مطالب را با فرمت JSON مشاهده کرد. کار آن ارائهی آرایهای از اشیاء جاوا اسکریپتی قابل استفادهی در برنامههای frontend است. بنابراین زمانیکه یک HTTP GET را به این endpoint ارسال میکنیم، آرایهای از اشیاء مطالب را دریافت خواهیم کرد. همین endpoint، امکان تغییر این اطلاعات را توسط برای مثال HTTP Delete نیز میسر کردهاست.
اگر علاقمندید بودید میتوانید از JSONPlaceholder استفاده کنید و یا در ادامه دقیقا ساختار همین endpoint ارائهی مطالب آنرا با ASP.NET Core Web API نیز پیاده سازی میکنیم (برای مطالعهی قسمت «ارتباط با سرور» اختیاری است و از هر REST API مشابهی که توسط nodejs یا PHP و غیره تولید شده باشد نیز میتوان استفاده کرد):
مدل مطالب
namespace sample_22_backend.Models { public class Post { public int Id { set; get; } public string Title { set; get; } public string Body { set; get; } public int UserId { set; get; } } }
منبع دادهی فرضی مطالب
برای ارائهی سادهتر برنامه، یک منبع دادهی درون حافظهای را به همراه یک سرویس، در اختیار کنترلر مطالب، قرار میدهیم:
using System; using System.Collections.Generic; using System.Linq; using sample_22_backend.Models; namespace sample_22_backend.Services { public interface IPostsDataSource { List<Post> GetAllPosts(); bool DeletePost(int id); Post AddPost(Post post); bool UpdatePost(int id, Post post); Post GetPost(int id); } /// <summary> /// هدف صرفا تهیه یک منبع داده آزمایشی ساده تشکیل شده در حافظه است /// </summary> public class PostsDataSource : IPostsDataSource { private readonly List<Post> _allPosts; public PostsDataSource() { _allPosts = createDataSource(); } public List<Post> GetAllPosts() { return _allPosts; } public Post GetPost(int id) { return _allPosts.Find(x => x.Id == id); } public bool DeletePost(int id) { var item = _allPosts.Find(x => x.Id == id); if (item == null) { return false; } _allPosts.Remove(item); return true; } public Post AddPost(Post post) { var id = 1; var lastItem = _allPosts.LastOrDefault(); if (lastItem != null) { id = lastItem.Id + 1; } post.Id = id; _allPosts.Add(post); return post; } public bool UpdatePost(int id, Post post) { var item = _allPosts .Select((pst, index) => new { Item = pst, Index = index }) .FirstOrDefault(x => x.Item.Id == id); if (item == null || id != post.Id) { return false; } _allPosts[item.Index] = post; return true; } private static List<Post> createDataSource() { var list = new List<Post>(); var rnd = new Random(); for (var i = 1; i < 10; i++) { list.Add(new Post { Id = i, UserId = rnd.Next(1, 1000), Title = $"Title {i} ...", Body = $"Body {i} ..." }); } return list; } } }
کنترلر Web API برنامهی backend
using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using sample_22_backend.Models; using sample_22_backend.Services; namespace sample_22_backend.Controllers { [ApiController] [Route("api/[controller]")] public class PostsController : ControllerBase { private readonly IPostsDataSource _postsDataSource; public PostsController(IPostsDataSource postsDataSource) { _postsDataSource = postsDataSource; } [HttpGet] public ActionResult<List<Post>> GetPosts() { return _postsDataSource.GetAllPosts(); } [HttpGet("{id}")] public ActionResult<Post> GetPost(int id) { var post = _postsDataSource.GetPost(id); if (post == null) { return NotFound(); } return Ok(post); } [HttpDelete("{id}")] public ActionResult DeletePost(int id) { var deleted = _postsDataSource.DeletePost(id); if (deleted) { return Ok(); } return NotFound(); } [HttpPost] public ActionResult<Post> CreatePost([FromBody]Post post) { post = _postsDataSource.AddPost(post); return CreatedAtRoute(nameof(GetPost), new { post.Id }, post); } [HttpPut("{id}")] public ActionResult<Post> UpdatePost(int id, [FromBody]Post post) { var updated = _postsDataSource.UpdatePost(id, post); if (updated) { return Ok(post); } return NotFound(); } } }
البته نمایش فرمت شدهی JSON در مرورگر کروم، نیاز به نصب این افزونه را دارد.
ایجاد ساختار ابتدایی برنامهی ارتباط با سرور
در اینجا برای بررسی کار با سرور، یک پروژهی جدید React را ایجاد میکنیم:
> create-react-app sample-22-frontend > cd sample-22-frontend > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
سپس فایل app.js را به شکل زیر تکمیل میکنیم:
import "./App.css"; import React, { Component } from "react"; class App extends Component { state = { posts: [] }; handleAdd = () => { console.log("Add"); }; handleUpdate = post => { console.log("Update", post); }; handleDelete = post => { console.log("Delete", post); }; render() { return ( <React.Fragment> <button className="btn btn-primary mt-1 mb-1" onClick={this.handleAdd}> Add </button> <table className="table"> <thead> <tr> <th>Title</th> <th>Update</th> <th>Delete</th> </tr> </thead> <tbody> {this.state.posts.map(post => ( <tr key={post.id}> <td>{post.title}</td> <td> <button className="btn btn-info btn-sm" onClick={() => this.handleUpdate(post)} > Update </button> </td> <td> <button className="btn btn-danger btn-sm" onClick={() => this.handleDelete(post)} > Delete </button> </td> </tr> ))} </tbody> </table> </React.Fragment> ); } } export default App;
نگاهی به انواع و اقسام HTTP Clientهای مهیا
در ادامه نیاز خواهیم داشت تا از طریق برنامههای React خود، درخواستهای HTTP را به سمت سرور (یا همان برنامهی backend) ارسال کنیم، تا بتوان اطلاعاتی را از آن دریافت کرد و یا تغییری را در اطلاعات موجود، ایجاد نمود. همانطور که پیشتر نیز در این سری عنوان شد، React برای این مورد نیز راهحل توکاری را به همراه ندارد و تنها کار آن، رندر کردن View و مدیریت DOM است. البته شاید این مورد یکی از مزایای کار با React نیز باشد! چون در این حالت میتوانید از کتابخانههایی که خودتان ترجیح میدهید، نسبت به کتابخانههایی که به شما ارائه/تحمیل (!) میشوند (مانند برنامههای Angular) آزادی انتخاب کاملی را داشته باشید. برای مثال هرچند Angular به همراه یک HTTP Module توکار است، اما تاکنون چندین بار بازنویسی از ابتدا شدهاست! ابتدا با یک کتابخانهی HTTP مقدماتی شروع کردند. بعدی آنرا منسوخ شده اعلام و با یک ماژول جدید جایگزین کردند. بعد در نگارشی دیگر، چون این کتابخانه وابستهاست به RxJS و خود RxJS نیز بازنویسی کامل شد، روش کار کردن با این HTTP Module نیز مجددا تغییر پیدا کرد! بنابراین اگر با Angular کار میکنید، باید کارها را آنگونه که Angular میپسندد، انجام دهید؛ اما در اینجا خیر و آزادی انتخاب کاملی برقرار است.
بنابراین اکنون این سؤال مطرح میشود که در React، برای برقراری ارتباط با سرور، چه باید کرد؟ در اینجا آزاد هستید برای مثال از Fetch API جدید مرورگرها و یا روش Ajax ای مبتنی بر XML قدیمیتر آنها، استفاده کنید (اطلاعات بیشتر) و یا حتی اگر علاقمند باشید میتوانید از محصور کنندههای آن مانند jQuery Ajax استفاده کنید. بنابراین اگر با jQuery Ajax راحت هستید، به سادگی میتوانید از آن در برنامههای React نیز استفاده کنید. اما ... ما در اینجا از یک کتابخانهی بسیار محبوب و قدرتمند HTTP Client، به نام Axios (اکسیوس/ یک واژهی یونانی به معنای «سودمند») استفاده خواهیم کرد که فقط تعداد بار دانلود هفتگی آن، 6 میلیون بار است!
نصب Axios در برنامهی React این قسمت
برای نصب کتابخانهی Axios، در ریشهی پروژهی React این قسمت، دستور زیر را در خط فرمان صادر کنید:
> npm install --save axios
کدهای کامل این قسمت را از اینجا میتوانید دریافت کنید: sample-22-frontend-part-01.zip و sample-22-backend-part-01.zip
این مطلب در ادامه بحث «اعمال کلاسهای ویژه اعتبارسنجی Twitter bootstrap به فرمهای ASP.NET MVC» میباشد. بنابراین تعاریف مدل و کنترلر آن، به همراه توضیحات ذکر شده در آن، در ادامه مورد استفاده قرار خواهند گرفت.
اصول نمایش Popover در Twitter bootstrap
PopOverها نیز یکی دیگر از کامپوننتهای جاوا اسکریپتی مجموعه بوت استرپ هستند. بسیار شبیه به Tooltip بوده، اما ماندگارتر هستند. PopOverها با کلیک بر روی یک عنصر باز شده و تنها با کلیک مجدد بر روی آن المان، بسته میشوند (البته این موارد نیز قابل تنظیم هستند).
نحوه استفاده از آن را در مثال فوق مشاهده میکنید. در اینجا یک لینک با rel=popover تعریف شده است. از این rel، در یافتن کلیه المانهایی اینگونه، توسط jQuery استفاده خواهیم کرد. سپس مقدار ویژگی data-content، محتوای اطلاعاتی را که باید نمایش داده شود، مشخص میکند. همچنین برای مشخص ساختن عنوان آن میتوان از ویژگی data-original-title استفاده کرد. نهایتا نیاز است افزونه popover بر روی المانهایی با rel=popover فراخوانی گردد. در روال رخدادگردان click آن، با استفاده از e.preventDefault، سبب خواهیم شد تا با کلیک بر روی لینک تعریف شده، صفحه مجددا بازیابی نشده و مکان اسکرول عمودی صفحه، تغییر نکند.
تبدیل خطاهای اعتبارسنجی ASP.NET MVC به PopOver
هدف ما در اینجا نهایتا رسیدن به شکل زیر میباشد:
همانطور که ملاحظه میکنید، اینبار بجای نمایش خطاها در یک برچسب، مقابل کنترل متناظر، این خطا صرفا در حالت فوکوس کنترل، به شکل یک PopOver در کنار آن ظاهر شده است.
کدهای کامل View برنامه
کدهای مدل و کنترلر، همانند مطلب «اعمال کلاسهای ویژه اعتبارسنجی Twitter bootstrap به فرمهای ASP.NET MVC» میباشند و از تکرار مجدد آنها در اینجا صرفنظر گردید.
توضیحات
- با توجه به اینکه دیگر نمیخواهیم خطاها به صورت برچسب در مقابل کنترلها نمایش داده شوند، کلیه Html.ValidationMessageFor به صورت کامنت درآورده شدهاند.
- تغییر دوم مطلب جاری، اضافه شدن متد showErrors به تنظیمات پیش فرض jQuery Validator است. در این متد، اگر المانی معتبر بود، Popover آن حذف میشود یا در سایر حالات، المانهایی که نیاز به اعتبارسنجی سمت کلاینت دارند، یافت شده و سپس ویژگی data-content با مقداری معادل خطای اعتبارسنجی متناظر، به این المان افزوده و سپس متد popover بوت استرپ بر روی آن فراخوانی میگردد.
به عبارتی زمانیکه یک input box در ASP.NET MVC به همراه مقادیر مرتبط با اعتبارسنجی آن رندر میشود، چنین شکلی را خواهد داشت:
اما در اینجا به صورت پویا، data-original-title و data-content نیز به آن افزوده میگردند:
این مقادیر توسط افزونه popover بوت استرپ شناسایی شده و مورد استفاده قرار میگیرد.
البته این موارد را در صورت نیاز به صورت دستی نیز میتوان تعریف و اضافه کرد:
اصول نمایش Popover در Twitter bootstrap
PopOverها نیز یکی دیگر از کامپوننتهای جاوا اسکریپتی مجموعه بوت استرپ هستند. بسیار شبیه به Tooltip بوده، اما ماندگارتر هستند. PopOverها با کلیک بر روی یک عنصر باز شده و تنها با کلیک مجدد بر روی آن المان، بسته میشوند (البته این موارد نیز قابل تنظیم هستند).
<a rel="popover" data-content="محتوایی برای نمایش" data-original-title="عنوان" href="#">اطلاعات</a> <script type="text/javascript"> $(document).ready(function () { $("[rel='popover']").popover({ placement: 'left' }) .click(function (e) { e.preventDefault(); }); }); </script>
تبدیل خطاهای اعتبارسنجی ASP.NET MVC به PopOver
هدف ما در اینجا نهایتا رسیدن به شکل زیر میباشد:
همانطور که ملاحظه میکنید، اینبار بجای نمایش خطاها در یک برچسب، مقابل کنترل متناظر، این خطا صرفا در حالت فوکوس کنترل، به شکل یک PopOver در کنار آن ظاهر شده است.
کدهای کامل View برنامه
@model Mvc4TwitterBootStrapTest.Models.User @{ ViewBag.Title = "Index"; } @using (Html.BeginForm()) { @Html.ValidationSummary(true, null, new { @class = "alert alert-error alert-block" }) <fieldset class="form-horizontal"> <legend>تعریف کاربر جدید</legend> <div class="control-group"> @Html.LabelFor(model => model.Name, new { @class = "control-label" }) <div class="controls"> @Html.EditorFor(model => model.Name) @*@Html.ValidationMessageFor(model => model.Name, null, new { @class = "help-inline" })*@ </div> </div> <div class="control-group"> @Html.LabelFor(model => model.LastName, new { @class = "control-label" }) <div class="controls"> @Html.EditorFor(model => model.LastName) @*@Html.ValidationMessageFor(model => model.LastName, null, new { @class = "help-inline" })*@ </div> </div> <div class="form-actions"> <button type="submit" class="btn btn-primary"> ارسال</button> </div> </fieldset> } @section JavaScript { <script type="text/javascript"> $.validator.setDefaults({ showErrors: function (errorMap, errorList) { this.defaultShowErrors(); //اگر المانی معتبر است نیاز به نمایش پاپ اور ندارد $("." + this.settings.validClass).popover("destroy"); //افزودن پاپ اورها for (var i = 0; i < errorList.length; i++) { var error = errorList[i]; $(error.element).popover({ placement: 'left' }) .attr("data-original-title", "خطای اعتبارسنجی") .attr("data-content", error.message); } }, // همانند قبل برای رنگی کردن کل ردیف در صورت عدم اعتبار سنجی و برعکس highlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).addClass(errorClass).removeClass(validClass); } else { $(element).addClass(errorClass).removeClass(validClass); $(element).closest('.control-group').removeClass('success').addClass('error'); } $(element).trigger('highlited'); }, unhighlight: function (element, errorClass, validClass) { if (element.type === 'radio') { this.findByName(element.name).removeClass(errorClass).addClass(validClass); } else { $(element).removeClass(errorClass).addClass(validClass); $(element).closest('.control-group').removeClass('error').addClass('success'); } $(element).trigger('unhighlited'); } }); //برای حالت پست بک از سرور عمل میکند $(function () { $('form').each(function () { $(this).find('div.control-group').each(function () { if ($(this).find('span.field-validation-error').length > 0) { $(this).addClass('error'); } }); }); }); </script> }
توضیحات
- با توجه به اینکه دیگر نمیخواهیم خطاها به صورت برچسب در مقابل کنترلها نمایش داده شوند، کلیه Html.ValidationMessageFor به صورت کامنت درآورده شدهاند.
- تغییر دوم مطلب جاری، اضافه شدن متد showErrors به تنظیمات پیش فرض jQuery Validator است. در این متد، اگر المانی معتبر بود، Popover آن حذف میشود یا در سایر حالات، المانهایی که نیاز به اعتبارسنجی سمت کلاینت دارند، یافت شده و سپس ویژگی data-content با مقداری معادل خطای اعتبارسنجی متناظر، به این المان افزوده و سپس متد popover بوت استرپ بر روی آن فراخوانی میگردد.
به عبارتی زمانیکه یک input box در ASP.NET MVC به همراه مقادیر مرتبط با اعتبارسنجی آن رندر میشود، چنین شکلی را خواهد داشت:
<input class="text-box single-line" data-val="true" data-val-required="لطفا نام را تکمیل کنید" id="Name" name="Name" type="text" value="" />
<input class="text-box single-line input-validation-error" data-val="true" data-val-required="لطفا نام را تکمیل کنید" id="Name" name="Name" type="text" value="" data-original-title="خطای اعتبارسنجی" title="" data-content="لطفا نام را تکمیل کنید">
البته این موارد را در صورت نیاز به صورت دستی نیز میتوان تعریف و اضافه کرد:
@Html.TextBoxFor(x => x.Name, new { data_content = "Name is required", data_original_title = "Error", rel="popover" })
مطالب
آموزش TypeScript #4
در پستهای قبل با کلیات و primitive types در زبان TypeScript آشنا شدیم:
اما به صورت معمول سعی میشود هر ماژول در یک فایل جداگانه تعریف شود.
استفاده از چند ماژول در یک فایل به مرور، درک پروژه را سخت خواهد کرد و در
هنگام توسعه امکان برخورد با مشکل وجود خواهد داشت. برای مثال اگر یک فایل
به نام MyModule.ts داشته باشیم که یک ماژول به این نام را شامل شود بعد از
کامپایل یک فایل به نام MyModule.js ایجاد خواهد شد.
کلاس ها:
برای تعریف یک کلاس میتوانیم همانند دات نت از کلمه کلیدی class استفاده کنیم. بعد از تعریف کلاس میتوانیم متغیرها و توابع مورد نظر را در این کلاس قرار داده و تعریف کنیم.
نکته مهم و جالب قسمت بالا کلمه export است. export معادل public در دات نت
است و کلاس logger را قابل دسترس در خارج ماژول Utilities خواهد کرد. اگر
از export در هنگام تعریف کلاس استفاده نکنیم این کلاس فقط در سایر
کلاسهای تعریف شده در داخل همان ماژول قابل دسترس است.
تابع log که در کلاس بالا تعریف کردیم به صورت پیش فرض public یا عمومی است و نیاز به استفاده export نیست.
برای استفاده از کلاس بالا باید این کلمه کلیدی new استفاده کنیم.
برای تعریف سازنده برای کلاس بالا باید از کلمه کلیدی constructor استفاده نماییم:
استفاده از پارامترهای Rest
منظور از پارامترهای Rest یعنی در هنگام فراخوانی توابع محدودیتی برای تعداد پارامترها نیست که معادل params در دات نت است. برای تعریف این گونه پارامترهاکافیست به جای params از ... استفاده نماییم.
تعریف توابع خصوصی
در TypeScript امکان توابع خصوصی با کلمه کلیدی private امکان پذیر است. همانند دات نت با استفاده از کلمه کلیدی private میتوانیم کلاسی تعریف کنیم که فقط برای همان کلاس قابل دسترس باشد(به صورت پیش فرض توابع به صورت عمومی هستند).
از آن جا که تابع getTimeStamp به صورت خصوصی تعریف شده است در نتیجه امکان
استفاده از آن در خارج کلاس وجود ندارد. اگر سعی بر استفاده این تابع
داشته باشیم توسط کامپایلر با یک warning مواجه خواهیم شد.
و استفاده از این تابع بدون وهله سازی از کلاس :
Function Overload
همان گونه که در دات نت امکان overload کردن توابع میسر است در TypeScript هم این امکان وجود دارد.
ادامه دارد...
در این پست به مفاهیم شی گرایی در این زبان میپردازیم.
تعریف یک ماژول: برای تعریف یک ماژول باید از کلمه کلیدی module استفاده
کنید. یک ماژول معادل یک ظرف است برای نگهداری کلاسها و اینترفیسها و
سایر ماژول ها. کلاسها و اینترفیسها در TypeScript میتوانند به صورت
internal یا public باشند(به صورت پیش فرض internal است؛ یعنی فقط در همان ماژول قابل استفاده و فراخوانی است). هر چیزی که در داخل یک ماژول تعریف میشود
محدوده آن در داخل آن ماژول خواهد بود. اگر قصد توسعه یک پروژه در مقیاس
بزرگ را دارید میتوانید همانند دات نت که در آن امکان تعریف فضای نامهای
تودرتو امکان پذیر است در TypeScript نیز، ماژولهای تودرتو تعریف
کنید. برای مثال:
module MyModule1 { module MyModule2 { } }
کلاس ها:
برای تعریف یک کلاس میتوانیم همانند دات نت از کلمه کلیدی class استفاده کنیم. بعد از تعریف کلاس میتوانیم متغیرها و توابع مورد نظر را در این کلاس قرار داده و تعریف کنیم.
module Utilities { export class Logger { log(message: string): void{ if(typeofwindow.console !== 'undefined') { window.console.log(message); } } } }
تابع log که در کلاس بالا تعریف کردیم به صورت پیش فرض public یا عمومی است و نیاز به استفاده export نیست.
برای استفاده از کلاس بالا باید این کلمه کلیدی new استفاده کنیم.
window.onload = function() { varlogger = new Utilities.Logger(); logger.log('Logger is loaded'); };
export class Logger{ constructor(private num: number) { }
با کمی دقت متوجه تعریف متغیر num به صورت private خواهید شد که برخلاف انتظار ما در زبانهای دات نتی است. بر خلاف دات نت در زبان TypeScript، دسترسی به متغیر تعریف شده در سازنده با کمک اشاره گر this در هر جای کلاس ممکن میباشد. در نتیجه نیازی به تعریف متغیر جدید و پاس دادن مقادیر این متغیرها به این فیلدها نمیباشد.
اگر به تابع log دقت کنید خواهید دید که یک پارامتر ورودی به نام message دارد که نوع آن string است. در ضمن Typescript از پارامترهای اختیاری( پارامتر با مقدار پیش فرض) نیز پشتیبانی میکند. مثال:
اگر به تابع log دقت کنید خواهید دید که یک پارامتر ورودی به نام message دارد که نوع آن string است. در ضمن Typescript از پارامترهای اختیاری( پارامتر با مقدار پیش فرض) نیز پشتیبانی میکند. مثال:
pad(num: number, len: number= 2, char: string= '0')
منظور از پارامترهای Rest یعنی در هنگام فراخوانی توابع محدودیتی برای تعداد پارامترها نیست که معادل params در دات نت است. برای تعریف این گونه پارامترهاکافیست به جای params از ... استفاده نماییم.
function addManyNumbers(...numbers: number[]) { var sum = 0; for(var i = 0; i < numbers.length; i++) { sum += numbers[i]; } returnsum; } var result = addManyNumbers(1,2,3,5,6,7,8,9);
در TypeScript امکان توابع خصوصی با کلمه کلیدی private امکان پذیر است. همانند دات نت با استفاده از کلمه کلیدی private میتوانیم کلاسی تعریف کنیم که فقط برای همان کلاس قابل دسترس باشد(به صورت پیش فرض توابع به صورت عمومی هستند).
module Utilities { Export class Logger { log(message: string): void{ if(typeofwindow.console !== 'undefined') { window.console.log(this.getTimeStamp() + ' -'+ message); window.console.log(this.getTimeStamp() + ' -'+ message); } } private getTimeStamp(): string{ var now = newDate(); return now.getHours() + ':'+ now.getMinutes() + ':'+ now.getSeconds() + ':'+ now.getMilliseconds(); } } }
یک نکته مهم این است که کلمه private فقط برای توابع و متغیرها قابل استفاده است.
تعریف توابع static:
در TypeScript امکان تعریف توابع static وجود دارد. همانند دات نت باید از کلمه کلیدی static استفاده کنیم.
classFormatter { static pad(num: number, len: number, char: string): string{ var output = num.toString(); while(output.length < len) { output = char + output; } returnoutput; } } }
Formatter.pad(now.getSeconds(), 2, '0') +
همان گونه که در دات نت امکان overload کردن توابع میسر است در TypeScript هم این امکان وجود دارد.
static pad(num: number, len?: number, char?: string); static pad(num: string, len?: number, char?: string); static pad(num: any, len: number= 2, char: string= '0') { var output = num.toString(); while(output.length < len) { output = char + output; } returnoutput; }
ادامه دارد...
UI-Router ابزاری برای مسیریابی در AngularJS است که این امکان را برایتان فراهم میکند تا بخشهای برنامه رابط کاربریتان را به شکل یک ماشین حالت ساماندهی کنید. برخلاف سرویس route$ که بر اساس مسیریابی URLها ساماندهی شده و کار میکند، UI-Router بر اساس حالتها کار میکند، که این حالتها میتوانند در صورت لزوم مسیریابی هم داشته باشند.
UI-Router یکی از افزونههای مجموعه Angular-ui، و پاراگراف بالا معرفی آن در صفحه خانگیش است (تقریبا!). این افزونه جزئیات مفصلی دارد و در این مطلب تنها به معرفی آن خواهم پرداخت (بر اساس مطالب صفحه خانگیش). پیش از ادامه پیشنهاد میکنم اگر مطالب زیر را نخواندهاید ابتدا آنها را مرور کنید:
برای استفاده از UI-Router باید:
- فایل جاوا اسکریپت آن را دانلود کنید (released یا minified).
- در صفحه اصلی برنامهتان پس از include کردن فایل اصلی AngularJS فایل angular-ui-router.js (یا angular-ui-router.min.js) را include کنید.
- 'ui.router' را به لیست وابستگیهای ماژول اصلی اضافه کنید.
<!doctype html> <html ng-app="myApp"> <head> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script> <script src="js/angular-ui-router.min.js"></script> <script> var myApp = angular.module('myApp', ['ui.router']); // For Component users, it should look like this: // var myApp = angular.module('myApp', [require('angular-ui-router')]); </script> ... </head> <body> ... </body> </html>
حالتها و viewهای تو در تو
قابلیت اصلی UI-Router امکان تعریف حالتها و vieweهای تو در تو است. در مطلب مسیریابی در AngularJs #بخش اول دایرکتیو ng-view معرفی شده است. هنگام استفاده از سرویس route$ با این دایرکتیو میتوان محل مورد نظر برای بارگذاری محتویات مربوط به مسیرها را مشخص کرد. دایرکتیو ui-view در UI-Router همین نقش را دارد. فرض کنید این کد فایل index.html باشد:<!-- index.html --> <body> <div ui-view></div> <!-- We'll also add some navigation: --> <a ui-sref="state1">State 1</a> <a ui-sref="state2">State 2</a> </body>
در ادامه برای هر کدام از حالتها یک template اضافه میکنیم:
فایل state1.html:
<!-- partials/state1.html --> <h1>State 1</h1> <hr/> <a ui-sref="state1.list">Show List</a> <div ui-view></div>
<!-- partials/state2.html --> <h1>State 2</h1> <hr /> <a ui-sref="state2.list">Show List</a> <div ui-view></div>
دو نکته قابل توجه در این templateها وجود دارد. اول اینکه همانطور که میبینید templateها خود شامل تگی با دایرکتیو ui-view هستند. و دوم مقدار دایرکتیو ui-sref است که به صورت state1.list و state2.list آمده است. این جدا سازی با نقطه نشان دهنده سلسله مراتب حالتهاست. یعنی حالتهای state1 و state2 هرکدام حالت فرزندی به نام list دارند. در ادامه وقتی حالتها و مسیریابی را در ()app.config تعریف کنیم این مسائل از هالهای از ابهام که در آن هستند خارج میشوند! فعلا بیاید با راهنمای UI-Router پیش برویم و فایلهای template حالتهای فرزند را تعریف کنیم. templateهایی که قرار است در ui-view پدرانشان بارگذاری شوند:
<!-- partials/state1.list.html --> <h3>List of State 1 Items</h3> <ul> <li ng-repeat="item in items">{{ item }}</li> </ul>
<!-- partials/state2.list.html --> <h3>List of State 2 Things</h3> <ul> <li ng-repeat="thing in things">{{ thing }}</li> </ul>
myApp.config(['$stateProvider', '$urlRouterProvider', function($stateProvider, $urlRouterProvider) { // // For any unmatched url, redirect to /state1 $urlRouterProvider.otherwise("/state1"); // // Now set up the states $stateProvider .state('state1', { url: "/state1", templateUrl: "partials/state1.html" }) .state('state1.list', { url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } }) .state('state2', { url: "/state2", templateUrl: "partials/state2.html" }) .state('state2.list', { url: "/list", templateUrl: "partials/state2.list.html", controller: function($scope) { $scope.things = ["A", "Set", "Of", "Things"]; } }) }]);
خصوصیت url مشخص کننده مسیر حالت است. این خصوصیت همان مقداریست که به عنوان پارامتر اول به ()routeProvider.when$ پاس میشد. در این پارامتر میشود متغیرهای url را هم به همان ترتیب تعریف کرد. مثلا اگر حالت state1 در آدرسش یک پارامتر id داشته باشد میشود آن را به این ترتیب تعریف کرد:
.state('state1', { url: "/state1/:id", templateUrl: "partials/state1.html" })
برای خواندن مقدار این متغیر باید از stateParams$ استفاده کرد:
$stateParams.id
.state('list', { parent: "state1", url: "/list", templateUrl: "partials/state1.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } }) .state('list', { parent: "state2", url: "/list", templateUrl: "partials/state2.list.html", controller: function($scope) { $scope.items = ["A", "List", "Of", "Items"]; } })
تا اینجای کار، اگر آدرس "state1/" وارد شود، فایل "partials/state1.html" در "ui-view" فایل "index.html" بارگذاری خواهد شد. اگر آدرس "state1/list/" وارد شود، ابتدا فایل "partials/state1.html" در "ui-view" فایل "index.html" بارگذاری شده، سپس فایل "partials/state1.list.html" در "ui-view" آمده در فایل فایل "partials/state1.html" بارگذاری میشود. این همان امکان حالتها و viewهای تو در تو است که UI-Router فراهم میکند.
اینجا میتوانید خروجی کدهای بالا را مشاهده کنید.
اگر مستقیما url یک حالت فرزند وارد شود، یا به عبارت دیگر، اگر بخواهیم مستقیما برنامه به حالتی که فرزند حالت دیگر است برود، UI-Router برنامه را ابتدا به حالت پدر، و پس از آن به حالت فرزند خواهد برد. حالت فرزند دو چیز را از حالت پدر به ارث میبرد:
- وابستگیهای فراهم شده در حالت پدر به وسیله "resolve"
- دادههای سفارشی مشخص شده در خصوصیت data حالت پدر
.state('state1', { url: "/state1", templateUrl: "partials/state1.html", data:{ foodata: 'addorder' } })
$state.current.data.foodata
Viewهای نامگذاری شده و چندگانه
یکی دیگر از قابلیتهای کاربردی UI-Router امکان داشتن چند ui-view در هر template است (استفاده همزمان از این قابلیت و حالتهای تو در تو، امکان مدیریت واسط کاربری را به خوبی فراهم میکند). برای توضیح این قابلیت، با راهنمای UI-Router همراه شویم:
1. دستورالعمل برپایی UI-Router که در بالا آمده را اجرا کنید.
2. یک یا چند ui-view به برنامهتان اضافه کنید و آنها را نامگذاری کنید:
<!-- index.html --> <body> <div ui-view="viewA"></div> <div ui-view="viewB"></div> <!-- Also a way to navigate --> <a ui-sref="route1">Route 1</a> <a ui-sref="route2">Route 2</a> </body>
3. حالتهای برنامهتان را در روال config ماژول تعریف کنید:
myApp.config(function ($stateProvider) { $stateProvider .state('index', { url: "", views: { "viewA": { template: "index.viewA" }, "viewB": { template: "index.viewB" } } }) .state('route1', { url: "/route1", views: { "viewA": { template: "route1.viewA" }, "viewB": { template: "route1.viewB" } } }) .state('route2', { url: "/route2", views: { "viewA": { template: "route2.viewA" }, "viewB": { template: "route2.viewB" } } }) });
4. خروجی کدهای بالا را اینجا مشاهده کنید.
چند نکته
UI-Router جزئیات فراوانی دارد و آنچه آمد تنها پرده برداری از آن بود. دلم میخواست میتوانستم بیش از این آن را معرفی کنم، اما متاسفانه این روزها وقت آزاد کافی ندارم. در انتها میخواهم به چند نکته اشاره کنم:
روش controller as
برای استفاده از روش controller as در UI-Router باید به این ترتیب عمل کنید:
.state('list', { parent: "state1", url: "/list", templateUrl: "partials/state1.list.html", controller: "state1ListController as listCtrl1" } }) .state('list', { parent: "state2", url: "/list", templateUrl: "partials/state2.list.html", controller: "state2ListController as listCtrl2" } })
حالتهای انتزاعی
حالت انتزاعی حالتی است که url ندارد و در نتیجه برنامه نمیتواند در آن حالت قرار گیرد. حالتهای انتزاعی بسیار به درد خور هستند! مثلا فرض کنید چند حالت دارید که اشتراکاتی با هم دارند (همه باید در template مشابهی بارگذاری شود، یا وابستگیهای یکسانی دارند، یا حتی سطح دسترسی یکسان). با تعریف یک حالت انتزاعی و جمع کردن همه وابستگیها در آن، و تعریف حالتهای مورد نظرتان به عنوان فرزندان حالت انتزاعی، میتوانید اشتراکات حالتهای برنامه را سادهتر مدیریت کنید.
حساسیت به حروف بزرگ و کوچک
در سرویس route$ با مقداردهی خصوصیت caseInsensitiveMatch میتوانستیم مشخص کنیم که بزرگ و کوچک بودن حروف در تطبیق آدرس صفحه با پارامتر route در نظر گرفته بشود یا نه. خودمانیش اینکه url به حروف بزرگ و کوچک حساس باشد یا نه. متاسفانه در UI-Router از این امکان خبری نیست (البته فعلا) و آدرسهای تعریف شده به حروف بزگ و کوچک حساس هستند.
اینجا روشی برای حل این مشکل پیشنهاد شده، به این ترتیب که همه urlهای وارد شده به حروف کوچک تبدیل شود (راستش من این راه حل را نمیپسندم!).
چند روز قبل هم تغییراتی در کد UI-Router داده شده که امکان حساس نبودن به حروف کوچک و بزرگ فراهم شود. این تغییر هنوز در نسخه نهایی فایل UI-Router نیامده است. هرچند اگر بیاید هم آنچه تا امروز (23 اسفند 92) انجام شده مشکل را حل نمیکند.
اگر شما هم مثل من میخواهید کلا آدرسها به حروف بزرگ و کوچک حساس نباشند، و فرصت حل کردن اساسی مشکل را هم ندارید به این ترتیب عمل کنید:
- در فایل "angular-ui-router.js" عبارت "new RegExp(compiled)" را پیدا کرده و آن را به "RegExp(compiled, 'i')" تبدیل کنید. و یا در "angular-ui-router.min.js" (هرکدام از فایلها که استفاده میکنید) عبارت new RegExp(o) را پیدا کرده و آن را به new RegExp(o, "i") تبدیل کنید. همین؛ صدایش را هم در نیاورید!
نظرات مطالب
EF Code First #7
با تشکر از پاسخ دهی شما به سوالات؛ موقع Create درست اعمال میشود، اما هنگام Edit جدول واسط به روز نمیگردد.
مثلا برای دو جدول Role , User که نقشهای یک کاربر بوسیله یک string[] به اکشن Edit پاس داده شده
کد مربوطه به صورت زیر میباشد
اما جدول واسط در این قسمت به روز نمیشود . متاسفانه چیز خاصی در این رابطه پیدا نکردم و مجددا مزاحم شما شدم .
با تشکر
مثلا برای دو جدول Role , User که نقشهای یک کاربر بوسیله یک string[] به اکشن Edit پاس داده شده
کد مربوطه به صورت زیر میباشد
[HttpPost] public ActionResult Edit(User user, string[] tags) { if (ModelState.IsValid) { List<Role> roles = new List<Role>(); foreach (var item in tags) { Role role = db.Roles.Find(long.Parse(item)); roles.Add(role); } user.Roles = roles; db.Entry(user).State = EntityState.Modified; db.SaveChanges(); return RedirectToAction("Index"); } return View(user); }
با تشکر
پاسخ به بازخوردهای پروژهها
ارسال مستقیم به پرینتر
سلام.. این کد برای من انجام نمیشه و تنظیمات چاپگر رو نشون نمیده.
باید حتما آکروبات ریدر نصب باشه تا نشون بده؟ یا کدهام مشکل داره؟
PdfReport pdfrpt = new PdfReport(); pdfrpt.DocumentPreferences(doc => { doc.RunDirection(PdfRunDirection.RightToLeft); doc.Orientation(PageOrientation.Landscape); doc.PageSize(PdfPageSize.A4); doc.DocumentMetadata(new DocumentMetadata { Author = "Hovze", Application = "PdfRpt", Keywords = "Report", Subject = "Test Rpt", Title = "Report" }); doc.PrintingPreferences(new PrintingPreferences { ShowPrintDialogAutomatically = true }); }) .DefaultFonts(fonts => { fonts.Path(fontPath + "\\BNAZANIN.ttf", fontPath + "\\BNAZNNBD.ttf"); fonts.Size(13); }) .PagesFooter(footer => { footer.DefaultFooter(PersianDate.ToPersianDateTime(DateTime.Now, "/", false, false)); }) .PagesHeader(header => { header.CustomHeader(new CustomHeader { Name=Studentdt.Rows[0][1].ToString(),Family= Studentdt.Rows[0][2].ToString(),parvande= Studentdt.Rows[0][3].ToString(),tavalod= Studentdt.Rows[0][5].ToString(),shsh= Studentdt.Rows[0][6].ToString(),sodor= Studentdt.Rows[0][7].ToString(),codeMelli= Studentdt.Rows[0][8].ToString(),codeTahsili= Studentdt.Rows[0][0].ToString(),taahol=Studentdt.Rows[0][22].ToString(), PdfRptFont = header.PdfFont ,_imagePath=imgPath,_imageStud=stdImage}); }) .MainTableTemplate(template => { template.BasicTemplate(BasicTemplate.SilverTemplate); }) .MainTablePreferences(table => { table.ColumnsWidthsType(TableColumnWidthType.Relative); table.NumberOfDataRowsPerPage(0); table.GroupsPreferences(new GroupsPreferences { GroupType = GroupType.HideGroupingColumns, RepeatHeaderRowPerGroup = true, ShowOneGroupPerPage = true, SpacingBeforeAllGroupsSummary = 5f }); }) .MainTableDataSource(dataSource => { dataSource.DataTable(dt); }) .MainTableSummarySettings(summarySettings => { summarySettings.PreviousPageSummarySettings("نقل از صفحه قبل"); }) .MainTableColumns(columns => { columns.AddColumn(column => { column.PropertyName("سال"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Center); column.IsVisible(true); column.Order(0); column.Width(2); column.HeaderCell("سال تحصیلی"); }); columns.AddColumn(column => { column.PropertyName("نیم سال"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(1); column.Width(1); column.HeaderCell("نیم سال"); }); columns.AddColumn(column => { column.PropertyName("پایه"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(2); column.Width(1); column.HeaderCell("پایه"); }); columns.AddColumn(column => { column.PropertyName("درس"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(3); column.Width(1); column.HeaderCell("درس"); }); for (int i = 6; i < countScore + 6; i++) { columns.AddColumn(column => { column.PropertyName(dt.Columns[i].ToString()); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(i - 2); column.Width(1); column.HeaderCell(dtTitle.Rows[0][i - 5].ToString()); column.CalculatedField( list => { nimsal = list.GetValueOf("نیم سال").ToString(); if (nimsal == "دوم") { if (k == 13 + countScore) k = 13; //return list[i+8]. k++; return list[k].PropertyValue.ToString(); } else { if (m == 5 + countScore) m = 5; m++; return list[m].PropertyValue.ToString(); ; } }); }); } columns.AddColumn(column => { column.PropertyName("FinalScore1"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 4); column.Width(1); column.HeaderCell("نمره نهایی نیم سال 1"); }); columns.AddColumn(column => { column.PropertyName("t_term1"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore+5); column.Width(1); column.HeaderCell("نمره تجدیدی نیم سال 1"); }); columns.AddColumn(column => { column.PropertyName("t_term11"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 6); column.Width(1); column.HeaderCell("نمره استادیاری ترم 1"); }); columns.AddColumn(column => { column.PropertyName("FinalScore2"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 7); column.Width(1); column.HeaderCell("نمره نهایی نیم سال 2"); }); columns.AddColumn(column => { column.PropertyName("t_term2"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 8); column.Width(1); column.HeaderCell("نمره تجدیدی نیم سال 2"); }); columns.AddColumn(column => { column.PropertyName("t_term22"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 9); column.Width(1); column.HeaderCell("نمره استادیاری نیم سال 2"); }); columns.AddColumn(column => { column.PropertyName("tabestan"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 10); column.Width(1); column.HeaderCell("نمره تابستان"); }); columns.AddColumn(column => { column.PropertyName("Ghabol"); column.CellsHorizontalAlignment(PdfRpt.Core.Contracts.HorizontalAlignment.Left); column.IsVisible(true); column.Order(countScore + 11); column.Width(1); column.HeaderCell("قبول"); }); }); return pdfrpt.MainTableEvents(events => { events.DataSourceIsEmpty(message: "داده ای برای نمایش وجو د ندارد"); events.MainTableAdded(args => { var taxTable = new PdfPTable(1); // Create a clone of the MainTable's structure taxTable.RunDirection = 3; //taxTable.SetWidths(new float[] { 3, 3, 3 }); taxTable.WidthPercentage = 100f; taxTable.SpacingBefore = 10f; taxTable.AddSimpleRow( (data, cellProperties) => { data.Value = "مهر و امضای مدیر"; cellProperties.ShowBorder = false; cellProperties.HorizontalAlignment = HorizontalAlignment.Left; cellProperties.PdfFont = args.PdfFont; }); args.PdfDoc.Add(taxTable); }); }) .Export(export => { }) .Generate(data => data.AsPdfFile(fo.Name/*string.Format("{0}\\RptCalculatedFieldsSample-{1}.pdf", Application.StartupPath, Guid.NewGuid().ToString("N")))*/)); }