TFS 2015 Update 2.1منتشر شد
مجموعه مثالهای ASP.NET Core
در نگارشهای پیشین ASP.NET MVC، یک چنین مسائلی را با معرفی Child Actionها
public partial class SidebarMenuController : Controller { const int Min15 = 900; [ChildActionOnly] [OutputCache(Duration = Min15)] public virtual ActionResult Index() { return PartialView("_SidebarMenu"); } }
یک مثال: تهیهی اولین View Component
ساختار یک View Component، بسیار شبیه است به ساختار یک Controller، اما با عملکردی محدود. به همین جهت کار تعریف آن با افزودن یک کلاس سیشارپ شروع میشود و این کلاس را میتوان در پوشهای به نام ViewComponents در ریشهی پروژه قرار داد (اختیاری).
سپس برای نمونه، کلاس ذیل را به این پوشه اضافه کنید:
using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc; using Core1RtmEmptyTest.Services; namespace Core1RtmEmptyTest.ViewComponents { public class SiteCopyright : ViewComponent { private readonly IMessagesService _messagesService; public SiteCopyright(IMessagesService messagesService) { _messagesService = messagesService; } public IViewComponentResult Invoke(int numberToTake) { var name = _messagesService.GetSiteName(); return View(viewName: "Default", model: name); } //public async Task<IViewComponentResult> InvokeAsync(int numberToTake) //{ // return View(); //} } }
ساختار کلی یک کلاس ViewComponent شامل دو جزء اصلی است:
الف) از کلاس پایه ViewComponent مشتق میشود. به این ترتیب توسط ASP.NET Core قابل شناسایی خواهد شد.
ب) دارای متد Invoke ایی است که بجای Html.RenderAction در نگارشهای پیشین ASP.NET MVC، قابل فراخوانی است. این متد یک View را باز میگرداند.
ج) در اینجا امکان تعریف نمونهی Async متد Invoke نیز وجود دارد (برای مثال جهت کار با متدهای Async بانک اطلاعاتی).
روش فراخوانی این متدها نیز به این صورت است: ابتدا به دنبال نمونهی async میگردد. اگر یافت شد، همینجا کار خاتمه مییابد. اگر یافت نشد، نمونهی sync یا معمولی آن فراخوانی میشود و اگر این هم یافت نشد، یک استثناء صادر خواهد شد.
د) متد Invoke میتواند دارای پارامترهای دلخواهی نیز باشد و حالت پیش فرض آن بدون پارامتر است.
روش یافتن یک view component توسط ASP.NET Core به این صورت است:
الف) این کلاس باید عمومی بوده و همچنین abstract نباشد.
ب) «یکی» از مشخصههای ذیل را داشته باشد:
1) نامش به ViewComponent ختم شده باشد.
2) از کلاس ViewComponent ارث بری کرده باشد.
3) با ویژگی ViewComponent مزین شده باشد.
نحوه و محل تعریف View یک View Component
پس از تعریف کلاس ViewComponent مورد نظر، اکنون نیاز است View آنرا اضافه کرد. روش یافتن این Viewها توسط ASP.NET Core نیز بر این مبنا است که
الف) اگر این View Component عمومی و سراسری است، باید درون پوشهی shared، پوشهی جدیدی را به نام Components ایجاد کرده و سپس ذیل این پوشه، بر اساس نام کلاس ViewComponent، یک زیر پوشهی دیگر را ایجاد و داخل آن، View مدنظر را اضافه کرد (تصویر ذیل).
/Views/Shared/Components/[NameOfComponent]/Default.cshtml
/Views/[CurrentController]/Components/[NameOfComponent]/Default.cshtml
یک نکته: اگر نام کلاسی به ViewComponent ختم شده بود، نیازی نیست تا ViewComponent را هم در حین ساخت پوشهی آن ذکر کرد.
نحوهی استفادهی از View Component تعریف شده و ارسال پارامتر به آن
و در آخر برای استفادهی از این View Component تعریف شده، به فایل layout برنامه مراجعه کرده و آنرا به نحو ذیل فراخوانی کنید:
<footer> <p>@await Component.InvokeAsync("SiteCopyright", new { numberToTake = 5 })</p> </footer>
یک نکته: متدهای قدیمی Component.Invoke و Component.Renderدر اینجا حذف شدهاند (اگر مقالات پیش از RTM را مطالعه کردید) و روش توصیه شدهی در اینجا، کار با متدهای async است.
تفاوتهای View Components با Child Actions نگارشهای پیشین ASP.NET MVC
پارامترهای یک View Component از طریق یک HTTP Request تامین نمیشوند و همانطور که ملاحظه کردید در همان زمان فراخوانی آنها به صورت مستقیم فراهم خواهند شد. بنابراین مباحث model binding در اینجا دیگر وجود خارجی ندارند. همچنین View Components جزئی از طول عمر یک کنترلر نیستند. بنابراین اکشن فیلترهای مختلف تعریف شده، تاثیری را بر روی آنها نخواهند داشت (این مشکلی بود که با Child Actions در نگارشهای قبلی مشاهده میشد). همچنین View Components به صورت مستقیم از طریق درخواستهای HTTP قابل دسترسی نیستند. به علاوه Child actions قدیمی، از فراخوانیهای async پشتیبانی نمیکنند.
زمانیکه کلاسی از کلاس پایه ViewComponent ارث بری میکند، تنها به این خواص عمومی از درخواست HTTP جاری دسترسی خواهد داشت:
[ViewComponent] public abstract class ViewComponent { protected ViewComponent(); public HttpContext HttpContext { get; } public ModelStateDictionary ModelState { get; } public HttpRequest Request { get; } public RouteData RouteData { get; } public IUrlHelper Url { get; set; } public IPrincipal User { get; } [Dynamic] public dynamic ViewBag { get; } [ViewComponentContext] public ViewComponentContext ViewComponentContext { get; set; } public ViewContext ViewContext { get; } public ViewDataDictionary ViewData { get; } public ICompositeViewEngine ViewEngine { get; set; } //... }
فراخوانی Ajax ایی یک View Component
در ASP.NET Core، یک اکشن متد میتواند خروجی ViewComponent نیز داشته باشد و این تنها روشی است که میتوان یک View Component را از طریق درخواستهای HTTP، مستقیما قابل دسترسی کرد:
public IActionResult AddURLTest() { return ViewComponent("AddURL"); }
$(document).ready (function(){ $("#LoadSignIn").click(function(){ $('#UserControl').load("/Home/AddURLTest"); }); });
امکان بارگذاری View Components از اسمبلیهای دیگر نیز وجود دارد
در مطلب «ارتقاء به ASP.NET Core 1.0 - قسمت 10 - بررسی تغییرات Viewها» روش دسترسی به Viewهای برنامه را که در اسمبلی آن قرار گرفته بودند، بررسی کردیم. دقیقا همان روش در مورد view components نیز صادق است و کاربرد دارد. جهت یادآوری، این مراحل باید طی شوند:
الف) اسمبلی ثالث حاوی View Componentهای برنامه باید ارجاعاتی را به ASP.NET Core و قابلیتهای Razor آن داشته باشد:
"dependencies": { "NETStandard.Library": "1.6.0", "Microsoft.AspNetCore.Mvc": "1.0.0", "Microsoft.AspNetCore.Razor.Tools": { "version": "1.0.0-preview2-final", "type": "build" } }, "tools": { "Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final" }
"buildOptions": { "embed": "Views/**/*.cshtml" }
public void ConfigureServices(IServiceCollection services) { services.AddMvc(); //Get a reference to the assembly that contains the view components var assembly = typeof(ViewComponentLibrary.ViewComponents.SimpleViewComponent).GetTypeInfo().Assembly; //Create an EmbeddedFileProvider for that assembly var embeddedFileProvider = new EmbeddedFileProvider(assembly,"ViewComponentLibrary"); //Add the file provider to the Razor view engine services.Configure<RazorViewEngineOptions>(options => { options.FileProviders.Add(embeddedFileProvider); });
[ViewComponent(Name = "ViewComponentLibrary.Simple")] public class SimpleViewComponent : ViewComponent
@await Component.InvokeAsync("ViewComponentLibrary.Simple", new { number = 5 })
آموزش JavaScript توسط Bob Tabor
NOTE: This popular course was recently updated with all new videos and content. Check it out!
01 | IntroductionGet an introduction from Bob, as he kicks off the course, sets expectations, and gives you a little guidance for the road ahead.
02 | Setting Up the Development Environment
03 | Basic JavaScript Syntax
04 | Variables
05 | Data Types
06 | Type Coercion and Conversion
07 | Expressions and Operators
08 | Arrays
09 | Function Declaration
10 | Function Expressions
11 | Decision Statements
12 | Iteration Statements
13 | Basics of Scope
14 | Returning Functions from Functions
15 | Object Literals
16 | Module Pattern and Revealing Module Pattern
17 | Closures
18 | this Keyword
19 | Destructuring
20 | String Template Literals
21 | Regular Expressions
22 | Built-In Natives
23 | Constructor Function Calls with the new Keyword
24 | Objects and the Prototype Chain
25 | JavaScript Classes
26 | Arrow Functions
27 | Truthy and Falsy Values
28 | null Type
29 | Date Objects
30 | String Methods
31 | Array Methods
32 | Error Handling with Try Catch
33 | Understanding the Document Object Model
34 | Working with DOM Nodes
35 | Course Conclusion
در یک نمودار یا چارت سازمانی در حد امکان شاخهها همواره در کنار هم و جمع و جور رسم میشوند. در مثال زیر نود u-Node 1 و u-Node 3 دارای زیر شاخه نبوده ، بنابراین نیازی به فضای زیرین جهت نمایش ندارند. جهت مشاهده این فضا میتوانید خط مشخص شده در کد را فعال نمائید و تفاوت فضای مورد نیاز و ایجاد شده را ببینید.
دو درخت نمودار متفاوت در کنار هم رسم شده اند. هیچ همپوشانی بین درختان رسم شده وجود ندارد ( بنابراین نود Root 2 روی نود u-Node 3 رسم نشده است.
var o = new orgChart(); o.addNode( 0, '', '', 'Root 1'); o.addNode( 1, 0, 'u', 'u-Node 1'); o.addNode( 2, 0, 'u', 'u-Node 2'); o.addNode( 3, 0, 'u', 'u-Node 3'); o.addNode( 4, 0, 'u', 'u-Node 4');
//میتوانید خط زیر را فعال نمائید تا تفاوت فضای ایجاد شده و مورد نیاز را مشاهده نمائید.
//o.addNode( 9, 3, 'u', 'EXTRA', 0, '', '#CC0000', '#FF0000'); o.addNode(11, 2, 'l', 'l-Node'); o.addNode(12, 2, 'u', 'u-Node'); o.addNode(13, 2, 'u', 'u-Node'); o.addNode(14, 2, 'r', 'r-Node'); o.addNode(20, 4, 'l', 'l-Node'); o.addNode(21, '', '', 'Root 2'); o.drawChart('c_layout');
نمونه زیر یک مثال کامل میباشد. انواع اتصالهای تو در تو چندگانه در این نمونه استفاده شده است .
این هم کد نمونه فوق :
var o = new orgChart(); o.setFont('Arial', 18); o.addNode( 0, '', '', 'President', 1); o.setFont('Arial', 12); o.addNode('', 0, 'l', 'Control'); o.addNode('', 0, 'l', 'Secretary'); o.addNode('', 0, 'l', 'Marketing'); o.addNode('', 0, 'l', 'Human resources'); o.setColor('#99CC99', '#CCFFCC'); o.addNode(12, 0, 'r', 'Facility'); o.addNode('', 12, 'r', 'IT'); o.addNode('', 12, 'r', 'Resource planning'); o.setFont('Arial', 18); o.setColor('#CCCC66', '#FFFF99'); o.addNode(20, 0, 'u', 'Projects', 1); o.setFont('Arial', 12); o.addNode('', 20, 'r', 'Management'); o.addNode('', 20, 'r', 'Finance'); o.addNode('', 20, 'l', 'Development'); o.addNode('', 20, 'l', 'Maintenance'); o.addNode('', 20, 'l', 'Specials'); o.setColor('#CC4950', '#FF7C80'); o.setFont('Arial', 18); o.addNode(30, 0, 'u', 'Specials', 1); o.setFont('Arial', 12); o.addNode(31, 30, 'l', 'Management'); o.addNode('', 30, 'l', 'Communication'); o.addNode(33, 30, 'r', 'Development'); o.addNode(34, 33, 'r', 'Maintenance'); o.addNode('', 33, 'r', 'Special A'); o.addNode('', 33, 'r', 'Special B'); o.addNode('', 33, 'r', 'Advice'); o.addNode('', 30, 'l', 'Taskforce'); o.setColor('#CC9966', '#FFCC99'); o.setFont('Arial', 18); o.addNode(40, 0, 'u', 'Programming', 1); o.setFont('Arial', 12); o.addNode(41, 40, 'l', 'Management'); o.addNode(42, 40, 'l', 'Finance'); o.addNode('', 40, 'r', 'Assessment'); o.addNode('', 40, 'r', 'Coding team'); o.addNode('', 40, 'r', 'Quality control'); o.drawChart('c_ex1', '', true);
شما میتوانید به نودها تصویر دلخواه خود را نیز اضافه نمائید. تصاویر بصورت عمودی قرار خواهند گرفت و در صورتی که بزرگ باشند تغییر اندازه خواهند داد. ( فراخوانی تابع setSize قبل از اضافه کردن عکس در این مثال )
کدهای مثال فوق :
var o = new orgChart(); o.setSize(120, 60); o.setFont('Arial', 18); o.addNode( 1, '', '', 'Icon smiley', 0, '', '', '', '', 'pic/smiley.gif'); o.addNode( 2, '', '', 'This is a tree', 0, '', '', '', '', 'pic/tree.jpg'); o.addNode( 3, 2, 'u', 'This is a tree'); o.addNode( 4, '', '', 'Right Top smiley', 0, '', '', '', '', 'pic/smiley.gif', 'rt'); o.addNode( 5, '', '', 'Center bottom smiley', 0, '', '', '', '', 'pic/smiley.gif', 'cb'); o.drawChart('c_img');
یک مثال دیگر از استفاده تصاویر در چارت :
var o = new orgChart(); o.setSize(60, 110); o.setFont('Arial', 12); o.addNode( 1, '', '', 'Hominidae'); o.addNode( 10, 1, 'l', 'Hominidae'); o.addNode( 11, 10, 'l', 'Hominini'); o.addNode( 12, 10, 'r', 'Gorillini'); o.addNode( 20, 1, 'r', 'Ponginae'); o.addNode( '', 11, '', 'Homo Sapiens', '', '', '', '', '', 'pic/homo.jpg', 'ct'); o.addNode( '', 11, '', 'Pan', '', '', '', '', '', 'pic/pan.jpg', 'ct'); o.addNode( '', 12, '', 'Gorilla', '', '', '', '', '', 'pic/gorilla.jpg', 'ct'); o.addNode( '', 20, '', 'Pongo', '', '', '', '', '', 'pic/pongo.jpg', 'ct'); o.drawChart('c_img2', 'c');
عدم امکان استفاده از مرورگر IE تا نسخه 8 ، چرا که IE هیچ پشتیبانی از toDataURL در excanvas.js را انجام نمیدهد.
شما میتوانید از توابع استاندارد canvas در جهت تبدیل محتویات canvas به تصویر استاتیک استفاده نمائید. برای اینکه بتوانید این کار را تست نمائید باید کد ذیل را در همان صفحه ای که کد ( یک مثال کامل ) را استفاده کردید درج نمائید و در این صورت با کلیک بر روی لینک اول میتوانید یک تصویر با فرمت png در یک صفحه جدید از نمودار خود بدست بیاورید و یا با کلیک بر روی لینک دوم یک تصویر را دانلود نمائید.
<script type="text/javascript"> function openAsPng(id){ window.open(document.getElementById(id).toDataURL("image/png")); } function saveAsPng(id){ var img = document.getElementById(id).toDataURL("image/png"); document.location.href = img.replace("image/png", "image/octet-stream"); } </script> <a href = "javascript:openAsPng('c_ex1');">Click here to open the image as png in a new window</a><BR> <a href = "javascript:saveAsPng('c_ex1');">Click here to save the image as png</a><BR>
نمایش چارت فقط بصورت یک تصویر :
برای اینکه بتوانید یک چارت ایجاد شده از این روش را فقط بصورت یک تصویر نمایش دهید باید عمل تبدیل به عکس را بلافاصله پس از رسم نمودار در canvas انجام دهید بدین صورت که در کد ذیل مشاهده مینمائید:
<canvas id="c_pngchart" width="1" height="1">Your browser does not support canvas!</canvas> <img id="pngchart"> <script type="text/javascript"> var o = new orgChart(); o.addNode(0, '', '', 'Root'); o.addNode(1, 0, 'u', 'u-Node 1'); o.addNode(2, 0, 'u', 'u-Node 2'); o.drawChart('c_pngchart', '', true); var canvas = document.getElementById('c_pngchart'); document.getElementById("pngchart").src = canvas.toDataURL("image/png"); // The html keyword "hidden" doesn't work in IE, so resize the canvas to NUL canvas.height = 0; canvas.width = 0; </script>
همه لینکهایی که در نودها ایجاد شده است غیرفعال شده و از کار میافتند. بنابراین برای انجام این کار ،یک المنت تصویر در صفحه خود ایجاد ، نمودار را در canvas رسم نموده ، نمودار را به تصویر تبدیل نموده و آن را به المنت تصویر مقید میکنیم و در آخر canvas مخفی میکنیم. برای این منظور از کلید واژه hidden استفاده میکنیم که در IE این کلمه باز قابل شناسایی نبوده و باید از روش تخصیص اندازه طول و عرض صفر 0 استفاده شود یعنی width=0 , height=0
تصویر فوق ایجاد شده کد مورد نظر میباشد.
تغییر اندازه پویا :
اگر بخواهید بصورت پویا اندازه canvas را تغییر دهید ، نمودار شما ناپدید میشود و پس از تغییر اندازه ، نمودار پاک خواهد شد.
برای رسم نمودار باید دوباره از توابع drawChart() یا redrawChart() استفاده نمائید.
برای رسم نودها نیازی به تعریف دوباره آنها نمیباشد ( مخصوصا در مثالی که در این صفحه برای شما ارائه شده است )
تابع ()drowChart تمامی نودها را در زمان رسم دوباره جاگذاری میکند ، در صورتی که اگر شما میدانید چارت شما به غیر از اندازه هیچ تغییر دیگری نداشته میتوانید با فراخوانی تابع redrawChart یک کپی از همان چارت را که در حافظه canvas وجود دارد را رسم نمائید.
از تمامی دوستان خوبم تشکر میکنم که این مطلب را دنبال نمودند . ما را از نظرات خوب و سازنده خود بی نصیب نفرمائید.
{ "version": "1.0.0-*", "buildOptions": { "emitEntryPoint": true }, "runtimes": { "ubuntu.16.04-x64": {} }, "dependencies": { "Microsoft.NETCore.App": { "version": "1.1.0" } }, "frameworks": { "netcoreapp1.1": { } } }
اکنون اگر مسیر project}\bin\Release\netcoreapp1.1\ubuntu.16.04-x64} را مشاهده کنید، خواهید دید که خروجی برای سیستمعامل موردنظر تولید شده است:
اکنون میتوانید پوشه publish را به سیستم مقصد منتقل کرده و برای اجرای آن مراحل زیر را طی نمائید.
اجرای اپلیکیشن در سیستمعامل Ubuntu
برای اجرای اپلیکیشنی که در مرحله قبل ایجاد کردیم کافی است درون پوشهایی که پروژه در آن قرار دارد فایل اجرایی اپلیکیشن را اجرا کنید:
در حین اجرای اپلیکیشن ممکن است با خطای bash: ./DntSCD: Permission denied و یا خطای Failed to initialize CoreCLR, HRESULT: 0x8007001F مواجه شوید. برای حل این مشکل کافی است مجوز لازم را به فایل اجرایی بدهید، تا مشکلی در اجرا اپلیکیشن نداشته باشد:
بخاطر داشته باشید که بر روی سیستمعامل Ubuntu هیچ runtimeی را نصب نکردهایم. زیرا توزیع اپلیکیشن به صورت Self-Contained میباشد؛ یعنی تمامی پیشنیازهای لازم جهت اجرا اپلیکیشن همراه با خود اپلیکیشن ارائه شده است.
نکته: مراحل فوق تنها مختص به توزیع Console Application نیست، بلکه میتوانید یک اپلیکیشن تحت وب را نیز به صورت SCD توزیع کنید:
معنای لغوی intent : هدف، قصد، نیت و امثالهم...
Intent.ACTION_VIEW
Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(https://github.com);
برای فراخوانی باید کد زیر در برنامه درج شود:
startActivity(intent);
نکته: برای کنترل اینکه کدام برنامهها میتوانند intent خاصی را دریافت کنند باید یک مجوز (permission) را قبل از فراخوانی به آن ارسال کنیم.
بررسی مجوزها
استفاده از Self-Defined Permissions
اندروید به توسعه دهندگان اجازه میدهد تا مجوزهای خود را ساخته و آنها را اجرا کنند. همانند مجوزهای سیستمی که پلتفرم آنها را بررسی میکند، شما باید خواص و برچسبهای مورد نیاز را در فایل AndroidManifest.xml اعلام کنید. اگر برنامهای مینویسید که یک نوعِ خاص از قابلیت دسترسی توسط توسعه دهندگان را فراهم میکند، شما میتوانید برای حفاظت از توابع با مجوزهای سفارشی خود، مانع دسترسیهای غیرمجاز شوید. به کدی که در فایل AndroidMainfest درج شده دقت نمایید:
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="net.zenconsult.mobile.testapp" > <permission android:name="net.zenconsult.mobile.testapp.permission.PURGE_DATABASE" android:label="@string/label_purgeDatabase" android:description="@string/description_purgeDatabase" android:protectionLevel="dangerous" /> ... </manifest>
android:name <attribute>
android:label android:description
<string name=" label_purgeDatabase ">purge the application database </string> <string name="permdesc_callPhone">Allows the application to purge the core database of the information store. Malicious applications may be able to wipe your entire application information store.</string>
مشخصه android:protectionLevel که در چند خط قبل در فایل تنظیمات درج شده است، مورد نیاز است و باید فراخوانده شود. همچنین میتوانید یک مشخصه به نام android:permissionGroup را تعریف کنید تا خواص این مجوز را در برگیرد. اجازه بدهید تا مجوزهای سفارشی شما با مجوزهای سیستمی ارتباط برقرار کنند. لذا این ارتباط باعث بروز افزایش امنیت خواهد شد.
android:permissionGroup=" android.permission-group.STORAGE"
- .NET Core is the future of .NET: If you’ve already started working with .NET Core, that’s great! If you’re starting a new project, you should consider .NET Core.
- .NET Framework will continue to be supported: If you have any existing applications on .NET Framework (Windows-only), you can keep those on .NET Framework.
- .NET Releases will become more predictable: Starting with .NET 5.0, there will be 1 major release every year, after which each even-numbered release (6.0, 8.0, etc) will come with LTS (Long-Term Support).