کتابخانه screenfull.js
کتابخانه DuplicateElement
The first version of ASP.NET was released 17 years ago and during these years, it is fascinating to see how the ASP.NET team constructively reacted through these years to the major shifts happening on the web. Initially a platform that was closed and tried to hide and abstract the web; ASP.NET has metamorphized into an open source and cross platform - one that fully embraces the nature of the web. This is the first part of a series of 3 articles that will cover the history of ASP.NET from its launch to the latest ASP.NET Core releases.
- «فرمت کردن اطلاعات نمایش داده شده به کمک Kendo UI Grid»
Kendo UI Grid دارای امکانات ثبت، ویرایش و حذف توکاری است که در ادامه نحوهی فعال سازی آنها را بررسی خواهیم کرد. مثالی که در ادامه بررسی خواهد شد، در تکمیل مطلب «فرمت کردن اطلاعات نمایش داده شده به کمک Kendo UI Grid» است.
تنظیمات Data Source سمت کاربر
برای فعال سازی صفحه بندی سمت سرور، با قسمت read منبع داده Kendo UI پیشتر آشنا شده بودیم. جهت فعال سازی قسمتهای ثبت اطلاعات جدید (create)، به روز رسانی رکوردهای موجود (update) و حذف ردیفی مشخص (destroy) نیاز است تعاریف قسمتهای متناظر را که هر کدام به آدرس مشخصی در سمت سرور اشاره میکنند، اضافه کنیم:
var productsDataSource = new kendo.data.DataSource({ transport: { read: { url: "api/products", dataType: "json", contentType: 'application/json; charset=utf-8', type: 'GET' }, create: { url: "api/products", contentType: 'application/json; charset=utf-8', type: "POST" }, update: { url: function (product) { return "api/products/" + product.Id; }, contentType: 'application/json; charset=utf-8', type: "PUT" }, destroy: { url: function (product) { return "api/products/" + product.Id; }, contentType: 'application/json; charset=utf-8', type: "DELETE" }, //... }, schema: { //... model: { id: "Id", // define the model of the data source. Required for validation and property types. fields: { "Id": { type: "number", editable: false }, //تعیین نوع فیلد برای جستجوی پویا مهم است "Name": { type: "string", validation: { required: true } }, "IsAvailable": { type: "boolean" }, "Price": { type: "number", validation: { required: true, min: 1 } }, "AddDate": { type: "date", validation: { required: true } } } } }, batch: false, // enable batch editing - changes will be saved when the user clicks the "Save changes" button //... });
- به علاوه در اینجا به ازای هر فیلد، مباحث اعتبارسنجی نیز اضافه شدهاند؛ برای مثال فیلدهای اجباری با required: true مشخص گردیدهاند.
- اگر فیلدی نباید ویرایش شود (مانند فیلد Id)، خاصیت editable آنرا false کنید.
- در data source امکان تعریف خاصیتی به نام batch نیز وجود دارد. حالت پیش فرض آن false است. به این معنا که در حالت ویرایش، تغییرات هر ردیفی، یک درخواست مجزا را به سمت سرور سبب خواهد شد. اگر آنرا true کنید، تغییرات تمام ردیفها در طی یک درخواست به سمت سرور ارسال میشوند. در این حالت باید به خاطر داشت که پارامترهای سمت سرور، از حالت یک شیء مشخص باید به لیستی از آنها تغییر یابند.
مدیریت سمت سرور ثبت، ویرایش و حذف اطلاعات
در حالت ثبت، متد Post، توسط آدرس مشخص شده در قسمت create منبع داده گرید، فراخوانی میگردد:
namespace KendoUI06.Controllers { public class ProductsController : ApiController { public HttpResponseMessage Post(Product product) { if (!ModelState.IsValid) return Request.CreateResponse(HttpStatusCode.BadRequest); var id = 1; var lastItem = ProductDataSource.LatestProducts.LastOrDefault(); if (lastItem != null) { id = lastItem.Id + 1; } product.Id = id; ProductDataSource.LatestProducts.Add(product); var response = Request.CreateResponse(HttpStatusCode.Created, product); response.Headers.Location = new Uri(Url.Link("DefaultApi", new { id = product.Id })); // گرید آی دی جدید را به این صورت دریافت میکند response.Content = new ObjectContent<DataSourceResult>( new DataSourceResult { Data = new[] { product } }, new JsonMediaTypeFormatter()); return response; } } }
var productsDataSource = new kendo.data.DataSource({ //... schema: { data: "Data", total: "Total", } //... });
namespace KendoUI06.Controllers { public class ProductsController : ApiController { public DataSourceResult Get(HttpRequestMessage requestMessage) { var request = JsonConvert.DeserializeObject<DataSourceRequest>( requestMessage.RequestUri.ParseQueryString().GetKey(0) ); var list = ProductDataSource.LatestProducts; return list.AsQueryable() .ToDataSourceResult(request.Take, request.Skip, request.Sort, request.Filter); } } }
response.Content = new ObjectContent<DataSourceResult>( new DataSourceResult { Data = new[] { product } }, new JsonMediaTypeFormatter());
متدهای حذف و به روز رسانی سمت سرور نیز چنین امضایی را خواهند داشت:
namespace KendoUI06.Controllers { public class ProductsController : ApiController { public HttpResponseMessage Delete(int id) { var item = ProductDataSource.LatestProducts.FirstOrDefault(x => x.Id == id); if (item == null) return Request.CreateResponse(HttpStatusCode.NotFound); ProductDataSource.LatestProducts.Remove(item); return Request.CreateResponse(HttpStatusCode.OK, item); } [HttpPut] // Add it to fix this error: The requested resource does not support http method 'PUT' public HttpResponseMessage Update(int id, Product product) { var item = ProductDataSource.LatestProducts .Select( (prod, index) => new { Item = prod, Index = index }) .FirstOrDefault(x => x.Item.Id == id); if (item == null) return Request.CreateResponse(HttpStatusCode.NotFound); if (!ModelState.IsValid || id != product.Id) return Request.CreateResponse(HttpStatusCode.BadRequest); ProductDataSource.LatestProducts[item.Index] = product; return Request.CreateResponse(HttpStatusCode.OK); } } }
تنظیمات Kendo UI Grid جهت فعال سازی CRUD
در ادامه کلیه تغییرات مورد نیاز جهت فعال سازی CRUD را در Kendo UI، به همراه مباحث بومی سازی عبارات متناظر با دکمهها و صفحات خودکار مرتبط، مشاهده میکنید:
$("#report-grid").kendoGrid({ //.... editable: { confirmation: "آیا مایل به حذف ردیف انتخابی هستید؟", destroy: true, // whether or not to delete item when button is clicked mode: "popup", // options are "incell", "inline", and "popup" //template: kendo.template($("#popupEditorTemplate").html()), // template to use for pop-up editing update: true, // switch item to edit mode when clicked? window: { title: "مشخصات محصول" // Localization for Edit in the popup window } }, columns: [ //.... { command: [ { name: "edit", text: "ویرایش" }, { name: "destroy", text: "حذف" } ], title: " ", width: "160px" } ], toolbar: [ { name: "create", text: "افزودن ردیف جدید" }, { name: "save", text: "ذخیرهی تمامی تغییرات" }, { name: "cancel", text: "لغو کلیهی تغییرات" }, { template: kendo.template($("#toolbarTemplate").html()) } ], messages: { editable: { cancelDelete: "لغو", confirmation: "آیا مایل به حذف این رکورد هستید؟", confirmDelete: "حذف" }, commands: { create: "افزودن ردیف جدید", cancel: "لغو کلیهی تغییرات", save: "ذخیرهی تمامی تغییرات", destroy: "حذف", edit: "ویرایش", update: "ثبت", canceledit: "لغو" } } });
- برای فعال سازی تولید صفحات خودکار ویرایش و افزودن ردیفها، نیاز است خاصیت editable را به نحوی که ملاحظه میکنید، مقدار دهی کرد. خاصیت mode آن سه حالت incell (پیش فرض)، inline و popup را پشتیبانی میکند.
- اگر حالتهای inline و یا popup را فعال کردید، در انتهای ستونهای تعریف شده، نیاز است ستون ویژهای به نام command را مطابق تعاریف فوق، تعریف کنید. در این حالت دو دکمهی ویرایش و ثبت، فعال میشوند و اطلاعات خود را از تنظیمات data source گرید دریافت میکنند. دکمهی ویرایش در حالت incell کاربردی ندارد (چون در این حالت کاربر با کلیک درون یک سلول میتواند آنرا مانند برنامهی اکسل ویرایش کند). اما دکمهی حذف در هر سه حالت قابل استفاده است.
- به نوار ابزار گرید، سه دکمهی افزودن ردیفهای جدید، ذخیرهی تمامی تغییرات و لغو تغییرات صورت گرفته، اضافه شدهاند. این دکمهها استاندارد بوده و در اینجا نحوهی بومی سازی پیامهای مرتبط را نیز مشاهده میکنید. همانطور که عنوان شد، دکمههای «تمامی تغییرات» در حالت فعال سازی batching در منبع داده و استفاده از incell editing معنا پیدا میکند. در سایر حالات این دو دکمه کاربردی ندارند. اما دکمهی افزودن ردیفهای جدید در هر سه حالت کاربرد دارد و یکسان است.
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
KendoUI06.zip
کتاب C# Code Contracts Succinctly
Developed by Microsoft’s Research in Software Engineering, Code Contracts provide a way to convey code assumptions in your .NET applications. They can take the form of preconditions, postconditions, and state invariants. In C# Code Contracts Succinctly, author Dirk Strauss demonstrates how to use Code Contracts to validate logical correctness in code, how they can be integrated with abstract classes and interfaces, and even how they can be used to make writing documentation less painful.
Ajax.BeginForm و ارسال فایل به سرور در ASP.NET MVC
فعال سازی و پردازش صفحات پویای افزودن، ویرایش و حذف رکوردهای jqGrid در ASP.NET MVC
فرمت کردن اطلاعات نمایش داده شده به کمک jqGrid در ASP.NET MVC
استفاده ازExpressionها جهت ایجاد Strongly typed view در ASP.NET MVC
فرمهای پویای jqGrid نیز به صورت Ajax ایی به سرور ارسال میشوند و اگر نوع عناصر تشکیل دهندهی آنها file تعیین شوند، قادر به ارسال این فایلها به سرور نخواهند بود. در ادامه نحوهی یکپارچه سازی افزونهی AjaxFileUpload را با فرمهای jqGrid بررسی خواهیم کرد.
تغییرات فایل Layout برنامه
در اینجا دو فایل جدید ajaxfileupload.js و jquery.blockUI.js به مجموعهی فایلهای تعریف شده اضافه شدهاند:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>@ViewBag.Title - My ASP.NET Application</title> <link href="~/Content/themes/base/jquery.ui.all.css" rel="stylesheet" /> <link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" /> <link href="~/Content/Site.css" rel="stylesheet" type="text/css" /> </head> <body> <div> @RenderBody() </div> <script src="~/Scripts/jquery-1.7.2.min.js"></script> <script src="~/Scripts/jquery-ui-1.8.11.min.js"></script> <script src="~/Scripts/i18n/grid.locale-fa.js"></script> <script src="~/Scripts/jquery.jqGrid.src.js"></script> <script src="~/Scripts/ajaxfileupload.js"></script> <script src="~/Scripts/jquery.blockUI.js"></script> @RenderSection("Scripts", required: false) </body> </html>
PM> Install-Package jQuery.BlockUI
نکتهای در مورد واکنشگرا کردن jqGrid
اگر میخواهید عرض jqGrid به تغییرات اندازهی مرورگر پاسخ دهد، تنها کافی است تغییرات ذیل را اعمال کنید:
<div dir="rtl" id="grid1" style="width:100%;" align="center"> <div id="rsperror"></div> <table id="list" cellpadding="0" cellspacing="0"></table> <div id="pager" style="text-align:center;"></div> </div> <script type="text/javascript"> $(document).ready(function () { // Responsive jqGrid $(window).bind('resize', function () { var targetContainer = "#grid1"; var targetGrid = "#list"; $(targetGrid).setGridWidth($(targetContainer).width() - 2, true); }).trigger('resize'); $('#list').jqGrid({ caption: "آزمایش هفتم", /// ..... }).navGrid( /// ..... ).jqGrid('gridResize', { minWidth: 400, minHeight: 150 }); }); </script>
همچنین اگر میخواهید کاربر بتواند اندازهی گرید را دستی تغییر دهد، به انتهای تعاریف گرید، تعریف متد gridResize را نیز اضافه کنید.
نحوهی تعریف ستونی که قرار است فایل آپلود کند
colModel: [ { name: '@(StronglyTyped.PropertyName<Product>(x=>x.ImageName))', index: '@(StronglyTyped.PropertyName<Product>(x => x.ImageName))', align: 'center', width: 220, editable: true, edittype: 'file', formatter: function (cellvalue, options, rowObject) { return "<img src='/images/" + cellvalue + "?rnd=" + new Date().getTime() + "' />"; }, unformat: function (cellvalue, options, cell) { return $('img', cell).attr('src').replace('/images/', ''); } } ],
Rnd اضافه شده به انتهای آدرس تصویر، جهت جلوگیری از کش شدن آن تعریف شدهاست.
کتابخانهی JqGridHelper
در قسمتهای قبل مطالب بررسی jqGrid یک سری کلاس مانند JqGridData برای بازگشت اطلاعات مخصوص jqGrid و یا JqGridRequest برای دریافت پارامترهای ارسالی توسط آن به سرور، تهیه کردیم؛ به همراه کلاسهایی مانند جستجو و مرتب سازی پویای اطلاعات.
اگر این کلاسها را از پروژهها و مثالهای ارائه شده خارج کنیم، میتوان به کتابخانهی JqGridHelper رسید که فایلهای آن در پروژهی پیوست موجود هستند.
همچنین در این پروژه، کلاسی به نام StronglyTyped با متد PropertyName جهت دریافت نام رشتهای یک خاصیت تعریف شدهاست. گاهی از اوقات این تنها چیزی است که کدهای سمت کلاینت، جهت سازگار شدن با Refactoring و Strongly typed تعریف شدن نیاز دارند و نه ... محصور کنندههایی طویل و عریض که هیچگاه نمیتوانند تمام قابلیتهای یک کتابخانهی غنی جاوا اسکریپتی را به همراه داشته باشند.
با کمی جستجو، برای jqGrid نیز میتوانید از این دست محصور کنندههارا پیدا کنید اما ... هیچکدام کامل نیستند و دست آخر مجبور خواهید شد در بسیاری از موارد مستقیما JavaScript نویسی کنید.
یکپارچه سازی افزونهی AjaxFileUpload با فرمهای jqGrid
پس از این مقدمات، ستون ویژهی actions که inline edit را فعال میکند، چنین تعریفی را پیدا خواهد کرد:
colModel: [ { name: 'myac', width: 80, fixed: true, sortable: false, resize: false, formatter: 'actions', formatoptions: { keys: true, afterSave: function (rowid, response) { doInlineUpload(response, rowid); }, delbutton: true, delOptions: { url: "@Url.Action("DeleteProduct","Home")" } } } ],
و ویژگیهای قسمتهای edit، add و delete فرمهای پویای jqGrid باید به نحو ذیل تغییر کنند:
$('#list').jqGrid({ caption: "آزمایش هفتم", // .... }).navGrid( '#pager', //enabling buttons { add: true, del: true, edit: true, search: false }, //edit option { width: 'auto', reloadAfterSubmit: true, checkOnUpdate: true, checkOnSubmit: true, beforeShowForm: function (form) { centerDialog(form, $('#list')); }, afterSubmit: doFormUpload, closeAfterEdit: true }, //add options { width: 'auto', url: '@Url.Action("AddProduct","Home")', reloadAfterSubmit: true, checkOnUpdate: true, checkOnSubmit: true, beforeShowForm: function (form) { centerDialog(form, $('#list')); }, afterSubmit: doFormUpload, closeAfterAdd: true }, //delete options { url: '@Url.Action("DeleteProduct","Home")', reloadAfterSubmit: true }).jqGrid('gridResize', { minWidth: 400, minHeight: 150 });
افزونهی AjaxFileUpload پس از ارسال اطلاعات عناصر غیر فایلی فرم، باید فعال شود. به همین جهت است که از رویداد afterSubmit در حالت نمایش فرمهای پویا و رویداد afterSave در حالت ویرایش inline استفاده کردهایم.
در ادامه تعاریف متدهای doInlineUpload و doUpload بکار گرفته شده در رویداد afterSubmit را مشاهده میکنید:
function doInlineUpload(response, rowId) { return doUpload(response, null, rowId); } function doFormUpload(response, postdata) { return doUpload(response, postdata, null); } function doUpload(response, postdata, rowId) { // دریافت خروجی متد ثبت اطلاعات از سرور // و استفاده از آی دی رکورد ثبت شده برای انتساب فایل آپلودی به آن رکورد var result = $.parseJSON(response.responseText); if (result.success === false) return [false, "عملیات ثبت موفقیت آمیز نبود", result.id]; var fileElementId = '@(StronglyTyped.PropertyName<Product>(x=>x.ImageName))'; if (rowId) { fileElementId = rowId + "_" + fileElementId; } var val = $("#" + fileElementId).val(); if (val == '' || val === undefined) { // فایلی انتخاب نشده return [false, "لطفا فایلی را انتخاب کنید", result.id]; } $('#grid1').block({ message: '<h4>در حال ارسال فایل به سرور</h4>' }); $.ajaxFileUpload({ url: "@Url.Action("UploadFiles", "Home")", // مسیری که باید فایل به آن ارسال شود secureuri: false, fileElementId: fileElementId, // آی دی المان ورودی فایل dataType: 'json', data: { id: result.id }, // اطلاعات اضافی در صورت نیاز complete: function () { $('#grid1').unblock(); }, success: function (data, status) { $("#list").trigger("reloadGrid"); }, error: function (data, status, e) { alert(e); } }); return [true, "با تشکر!", result.id]; }
متد doUpload توسط پارامتر response، اطلاعات بازگشتی پس از ذخیره سازی متداول اطلاعات فرم را دریافت میکند. برای مثال ابتدا اطلاعات معمولی یک محصول در بانک اطلاعاتی ذخیره شده و سپس id آن به همراه یک خاصیت به نام success از طرف سرور بازگشت داده میشوند.
اگر success مساوی true بود، ادامهی کار آپلود فایل انجام خواهد شد. در اینجا ابتدا بررسی میشود که آیا فایلی از طرف کاربر انتخاب شدهاست یا خیر؟ اگر خیر، یک پیام اعتبارسنجی سفارشی به او نمایش داده خواهد شد.
خروجی متد doUpload حتما باید به شکل یک آرایه سه عضوی باشد. عضو اول آن true و false است؛ به معنای موفقیت یا عدم موفقیت عملیات. عضو دوم پیام اعتبارسنجی سفارشی است و عضو سوم، Id ردیف.
در ادامه افزونهی jQuery.BlockUI فعال میشود تا ارسال فایل به سرور را به کاربر گوشزد کند.
سپس فراخوانی متداول افزونهی ajaxFileUpload را مشاهده میکنید. تنها نکتهی مهم آن فراخوانی متد reloadGrid در حالت success است. به این ترتیب گرید را وادار میکنیم تا اطلاعات ذخیره شده در سمت سرور را دریافت کرده و سپس تصویر را به نحو صحیحی نمایش دهد.
کدهای سمت سرور آپلود فایل
[HttpPost] public ActionResult AddProduct(Product postData) { // ... return Json(new { id = postData.Id, success = true }, JsonRequestBehavior.AllowGet); } [HttpPost] public ActionResult EditProduct(Product postData) { // ... return Json(new { id = postData.Id, success = true }, JsonRequestBehavior.AllowGet); } // todo: change `imageName` according to the form's file element name [HttpPost] public ActionResult UploadFiles(HttpPostedFileBase imageName, int id) { // .... return Json(new { FileName = product.ImageName }, "text/html", JsonRequestBehavior.AllowGet); }
در حالتهای Add و Edit، نیاز است id رکورد ثبت شده بازگشت داده شود. این id در سمت کلاینت توسط پارامتر response دریافت میشود. از آن در افزونهی ارسال فایل به سرور استفاده خواهیم کرد. اگر به متد UploadFiles دقت کنید، این id را دریافت میکند. بنابراین میتوان یک ربط منطقی را بین فایل ارسالی و رکورد متناظر با آن برقرار کرد.
Content type مقدار بازگشتی از متد UploadFiles حتما باید text/html باشد (افزونهی ارسال فایلها، اینگونه کار میکند).
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید:
jqGrid07.zip
Visual Studio 2017 15.6 منتشر شد
- We improved solution load performance by optimizing design time build.
- We've added installation progress details on Visual Studio Installer.
- You can pause your installation and resume at a later time.
- We streamlined the update process so the notification takes you directly to the Installer.
- Non-administrators can create a VS layout.
- We added a new shortcut for Edit.Duplicate in the keyboard mapping.
- We made significant improvements to the F# language and tools, particularly for .NET Core SDK projects.
- The C++ compiler optimizes your code to run faster through improved optimizations.
- C++ Mapfile generation overhead is reduced in full linking scenarios.
- Debug options are available for Embedded ARM GCC support.
- We added strong name signing on CoreCLR for the C# compiler.
- Visual Studio Tools for Xamarin has lots of new productivity updates for iOS and Android developers.
- Python no longer requires a completion DB, and Anaconda users have support for conda.
- The Performance Profiler's CPU Usage Tool can display logical call stacks for asynchronous code.
- The CPU Usage tool displays source line highlighting and async/await code with logical 'Call Stack Stitching'.
- The debugger supports thread names set via SetThreadDescription APIs in dump debugging.
- Snapshot Debugging can be started from the Debug Target dropdown for ASP.NET applications.
- We've launched the initial implementation of Navigate to decompiled sources for .NET code navigation.
- New enhancements for Configure Continuous Delivery include support for TFVC, Git authentication over SSH, and containerized projects.
- You can now click on the Continuous Delivery tile in Team Explorer to configure automated build and deployments for your application.
- Team Explorer supports Git tags and checking out pull request branches.
- Service Fabric Tooling for the 6.1 Service Fabric release is now available.
- The Windows 10 Insider Preview SDK can be installed as an optional component.
- File versions for a number of Visual Studio executables now reflect the minor release.
- Test Explorer has a hierarchy view and real time test discovery is now on by default.
- We have added support for testing Win10 IoT Core applications.
- Visual Studio Build Tools supports TypeScript and Node.js.
- ClickOnce Tools support signing application and deployment manifests with CNG certificate.
- You can access Azure resources such as Key Vault using your Visual Studio accounts.