⭐️ Course Contents ⭐️
Section 1: Introduction
Section 2: Blazor Files and Folders
Section 3: Blazor - Data and Property Binding
Section 4: Blazor - Shared Components and Event Binding
Section 5: Blazor - Render Fragment, Attribute Splatting and Routing
Section 6: Blazor - JavaScript
Section 7: Blazor Lifecycle
Section 8: Model and Repository
Section 9: Category CRUD
Section 10: Delete Component
01. Introduction to Routing 02. Websites of Yore 03. Single Page Applications 04. Demo - Adding Your First Route 05. Demo - More Routing and Browser History 06. Demo - Creating a Default Route 07. Demo - Accessing Parameters from the Route 08. Demo - Using the $route Service 09. Demo - Enabling HTML5 Routing 10. Demo - Template and Resolve Properties 11. Demo - Using the $location Service 12. Summary 13. Suggested Exercises
پ.ن. در مورد نحوهی تهیه اصل ویدیوها در نظرات قسمتهای قبل این سری مطالب، بیشتر بحث شدهاست.
دوره 4 ساعته TypeScript
Bootstrap 4 در واقع یک اقدام بزرگ بود که پس از یک سال توسعه، بزرگی این اقدام در خط به خط کدها احساس میگردد. تصمیم گرفتیم تا نسخهی اولیهی آن را به اشتراک بگذاریم و انتقادات و پیشنهادات شما را بشنویم. برای بهبود و پیشرفت در این زمینه، بسیاری از اخبار مرتبط را در اختیار شما قرار میدهیم. امیدواریم که ما را در بهتر شدن یاری کنید.
امکانات جدید Bootstrap
انتقال از Less به Sass
بهبود grid system مبتنی بر "rems"
h1 { /* 16 * 2.5 = 40px */ }
تغییر panel و wells به cards
Reset Component جایگزینی برای normalize.css
در اینجا روش Adjacency model را به علت بیشتر مرسوم بودن آن و شباهت بسیار زیاد آن به «مدلهای خود ارجاع دهنده» بررسی خواهیم کرد.
مدل دادهای Adjacency
در حالت ساختار درختی از نوع مجاورت، علاوه بر خواص اصلی یک کلاس، سه خاصیت دیگر نیز باید تعریف شوند:
using System; namespace jqGrid13.Models { public class BlogComment { // Other properties public int Id { set; get; } public string Body { set; get; } public DateTime AddDateTime { set; get; } // for treeGridModel: 'adjacency' public int? ParentId { get; set; } public bool IsNotExpandable { get; set; } public bool IsExpanded { get; set; } } }
IsNotExpandable به این معنا است که نود جاری آیا قرار است باز شود و فرزندی دارد یا خیر؟ اگر فرزندی ندارد باید مساوی True قرار گیرد.
IsExpanded حالت پیش فرض باز بودن یا نبودن یک نود را مشخص میکند.
نحوهی بازگشت اطلاعات درختی از سمت سرور
در نگارش فعلی jqGrid، در حالت نمایش درختی، مباحث صفحه بندی و مرتب سازی غیرفعال هستند و کدهای مرتبط با آن که در اینجا ذکر شدهاند، فعلا تاثیری ندارند (البته با کمی تغییر در کدهای آن، میتوان این قابلیت را هم فعال کرد. اطلاعات بیشتر).
نکتهی مهم treeGrid، سه پارامتر دیگر هستند که از سمت کلاینت به سرور ارسال میشوند:
using System; using System.Collections.Generic; using System.Globalization; using System.Linq; using System.Web.Mvc; using jqGrid13.Models; using JqGridHelper.DynamicSearch; // for dynamic OrderBy using JqGridHelper.Models; using JqGridHelper.Utils; namespace jqGrid13.Controllers { public class HomeController : Controller { public ActionResult Index() { return View(); } public ActionResult GetComments(JqGridRequest request, int? nodeid, int? parentid, int? n_level) { var list = BlogCommentsDataSource.LatestBlogComments; // در این حالت خاص فعلا در نگارش جای جیکیوگرید صفحه بندی کار نمیکند و فعال نیست و محاسبات ذیل اهمیتی ندارند 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(); if (nodeid == null) { productsQuery = productsQuery.Where(x => x.ParentId == null); } else { productsQuery = productsQuery.Where(x => x.ParentId == nodeid.Value); } var products = productsQuery.OrderBy(request.sidx + " " + request.sord) .Skip(pageIndex * pageSize) .Take(pageSize) .ToList(); var newLevel = n_level == null ? 0 : n_level.Value + 1; var productsData = new JqGridData { Total = totalPages, Page = request.page, Records = totalRecords, Rows = (products.Select(comment => new JqGridRowData { Id = comment.Id, RowCells = new List<object> { comment.Id, comment.Body, comment.AddDateTime.ToPersianDate(), // اطلاعات خاص نمایش درختی به ترتیب newLevel, comment.ParentId == null ? "" : comment.ParentId.Value.ToString(CultureInfo.InvariantCulture), comment.IsNotExpandable, comment.IsExpanded } })).ToList() }; return Json(productsData, JsonRequestBehavior.AllowGet); } } }
n_level مقدار جلو رفتگی نمایش اطلاعات یک نود را مشخص میکند. در اینجا چون با کلیک بر روی هر نود، فرزند آن از سرور واکشی میشود و lazy loading برقرار است، بازگشت مقدار n_level دریافتی از کلاینت به علاوه یک، کافی است. اگر نیاز است تمام نودها باز شده نمایش داده شوند، این مورد را باید به صورت دستی محاسبه کرده و در مدل BlogComment پیش بینی کنید.
در نهایت آرایهای از خواص مدنظر به همراه 4 خاصیت ساختار درختی باید به ترتیب بازگشت داده شوند.
فعال سازی سمت کاربر treeGrid
برای فعال سازی سمت کاربر نمایش درختی اطلاعات، باید سه خاصیت ذیل تنظیم شوند:
$('#list').jqGrid({ caption: "آزمایش سیزدهم", // .... مانند قبل treeGrid: true, treeGridModel: 'adjacency', ExpandColumn: '@(StronglyTyped.PropertyName<BlogComment>(x => x.Body))' }).jqGrid('gridResize', { minWidth: 400 }); });
یک نکتهی تکمیلی
اگر میخواهید دقیقا به شکل زیر برسید:
تنظیم rownumbers: true گرید را حذف کنید. همچنین ستون Id را نیز با تنظیمهای hidden:true, key: true مخفی نمائید (در تعاریف colModel).
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید
jqGrid13.zip
برای مطالعه بیشتر
Tree Grid
Nested Set Model
Adjacency Model
به همین جهت افزونه farsiInput، که کدهای آنرا در ادامه مشاهده میکنید، تهیه گردید. این افزونه تا این تاریخ با IE، فایرفاکس، کروم و اپرا سازگار است و توسط آن کاربر بدون نیاز به داشتن یک صفحه کلید فارسی میتواند فارسی تایپ کند. برای سوئیچ به حالت انگلیسی، دکمه Scroll lock باید روشن شود و این مورد توسط پارامتر changeLanguageKey قابل تغییر است.
// <![CDATA[ (function ($) { $.fn.farsiInput = function (options) { var defaults = { changeLanguageKey: 145 /* Scroll lock */ }; var options = $.extend(defaults, options); var lang = 'fa'; var keys = new Array(1711, 0, 0, 0, 0, 1608, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1705, 1572, 0, 1548, 1567, 0, 1616, 1571, 8250, 0, 1615, 0, 0, 1570, 1577, 0, 0, 0, 1569, 1573, 0, 0, 1614, 1612, 1613, 0, 0, 8249, 1611, 171, 0, 187, 1580, 1688, 1670, 0, 1600, 1662, 1588, 1584, 1586, 1740, 1579, 1576, 1604, 1575, 1607, 1578, 1606, 1605, 1574, 1583, 1582, 1581, 1590, 1602, 1587, 1601, 1593, 1585, 1589, 1591, 1594, 1592); var substituteChar = function (charCode, e) { if (navigator.appName == "Microsoft Internet Explorer") { window.event.keyCode = charCode; } else { insertAtCaret(String.fromCharCode(charCode), e); } }; var insertAtCaret = function (str, e) { var obj = e.target; var startPos = obj.selectionStart; var endPos = obj.selectionEnd; var scrollTop = obj.scrollTop; obj.value = obj.value.substring(0, startPos) + str + obj.value.substring(endPos, obj.value.length); obj.focus(); obj.selectionStart = startPos + str.length; obj.selectionEnd = startPos + str.length; obj.scrollTop = scrollTop; e.preventDefault(); }; var keyDown = function (e) { var evt = e || window.event; var key = evt.keyCode ? evt.keyCode : evt.which; if (key == options.changeLanguageKey) { lang = (lang == 'en') ? 'fa' : 'en'; return true; } }; var fixYeKeHalfSpace = function (key, evt) { var originalKey = key; var arabicYeCharCode = 1610; var persianYeCharCode = 1740; var arabicKeCharCode = 1603; var persianKeCharCode = 1705; var halfSpace = 8204; switch (key) { case arabicYeCharCode: key = persianYeCharCode; break; case arabicKeCharCode: key = persianKeCharCode; break; } if (evt.shiftKey && key == 32) { key = halfSpace; } if (originalKey != key) { substituteChar(key, evt); } }; var keyPress = function (e) { if (lang != 'fa') return; var evt = e || window.event; var key = evt.keyCode ? evt.keyCode : evt.which; fixYeKeHalfSpace(key, evt); var isNotArrowKey = (evt.charCode != 0) && (evt.which != 0); if (isNotArrowKey && (key > 38) && (key < 123)) { var pCode = (keys[key - 39]) ? (keys[key - 39]) : key; substituteChar(pCode, evt); } } return this.each(function () { var input = $(this); input.keypress(function (e) { keyPress(e); }); input.keydown(function (e) { keyDown(e); }); }); }; })(jQuery); // ]]>
<html> <head> <title>تکست باکس فارسی</title> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.farsiInput.js"></script> <style type="text/css"> input, textarea { font-family: tahoma; font-size: 9pt; } </style> </head> <body> <input dir="rtl" id='text1' /> <br /> <textarea dir="rtl" id='text2' rows="15" cols="84"></textarea> <script type="text/javascript"> $(function () { $("#text1, #text2").farsiInput(); }); </script> </body> </html>
دریافت کدهای کامل افزونه farsiInput
farsi_input.zip
WebAssembly, or Wasm, is on its way to becoming the next big thing in software development, allowing us to develop more reusable code across programming stacks. It will also enable the deployment of smaller packages more securely. This talk will focus on the view of a .NET developer using WebAssembly in their projects, whether client-side, server-side, or plugins.
Agenda
0:00:00 – Introduction
0:01:44 – Presentation Start
0:04:36 – Wasm on the client
0:08:27 – Wasm on the server
0:11:51 – ASP.NET Core in Wasi
0:21:41 – Wasm in the cloud
0:32:38 – Wasm for plugins
0:36:07 – Wasm plugins samples
0:49:05 – .NET 8 and the future
0:55:08 – Who’s working on this?
1:03:13 – Outro
کتاب رایگان MongoDB 3 Succinctly
MongoDB is one of the biggest players in the NoSQL database market, providing high performance, high availability, and automatic scaling. It’s an open-source document database written in C++ and hosted on GitHub. Zoran Maksimovic’s MongoDB 3 Succinctly touches on the most important aspects of the MongoDB database that application developers should be aware of—from installation and the usage of the Mongo Shell, to examples of the MongoDB C# driver APIs for Microsoft .NET Framework.
Table of Contents
- MongoDB Overview
- MongoDB Installation
- The Mongo Shell
- Manipulating Documents
- Data Retrieval
- Basic MongoDB with C#
- Data Handling in C#
- Inserting Data in C#
- Find (Query) Data in C#
- Binary Data (File Handling) in C#
- Back Up and Restore
تنظیمات تاریخ قمری در ویندوز
// تبدیل تاریخ میلادی به قمری new DateTime(2018, 08, 31).ToIslamicDay() -> new IslamicDay(1439, 12, 19) // تبدیل تاریخ شمسی به قمری IslamicDateUtils.PersianDayToIslamicDay(1397, 6, 9) -> new IslamicDay(1439, 12, 19)