- Grid Panel
- Stack Panel
- Dock Panel
- Wrap Panel
- Canvas Panel
StackPanel
<StackPanel> <TextBlock Margin="10" FontSize="20">How do you like your coffee?</TextBlock> <Button Margin="10">Black</Button> <Button Margin="10">With milk</Button> <Button Margin="10">Latte machiato</Button> <Button Margin="10">Chappuchino</Button> </StackPanel>
نکتهی مهم اینکه میتوانید در اینجا از یک nested layout هم استفاده کنید بدین صورت که یک layout را داخل یک layout دیگر قرار دهید. کد زیر ترکیب دو stack panel را به صورت افقی و عمودی به ما نشان میدهد:
<StackPanel Orientation="Vertical"> <!-- Vertical is the default --> <Label Background="Red">Red 1</Label> <Label Background="LightGreen">Green 1</Label> <StackPanel Orientation="Horizontal"> <Label Background="Red">Red 2</Label> <Label Background="LightGreen">Green 2</Label> <Label Background="LightBlue">Blue 2</Label> <Label Background="Yellow">Yellow 2</Label> <Label Background="Orange">Orange 2</Label> </StackPanel> <Label Background="LightBlue">Blue 1</Label> <Label Background="Yellow">Yellow 1</Label> <Label Background="Orange">Orange 1</Label> </StackPanel>
Dock Panel
احتمالا به خاطر نامش، نحوه کارش را حدس زده اید. این پنل، اشیاء موجود را در 4 جهت و مرکز میچسباند. مشخص نمودن جهت چسبیده شدن هر کنترل توسط خاصیت DockPanel.Dock صورت میگیرد و مقدار Left، مقدار پیش فرض است. در صورتی که بخواهید المانی را در مرکز بچسبانید باید آن را به عنوان آخرین المان معرفی کرده و در Dock Panel مقدار خاصیت LastChildFill را با True برابر کنید.
<DockPanel LastChildFill="True"> <Button Content="Dock=Top" DockPanel.Dock="Top"/> <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/> <Button Content="Dock=Left"/> <Button Content="Dock=Right" DockPanel.Dock="Right"/> <Button Content="LastChildFill=True"/> </DockPanel>
به نحوهی تعریف خاصیت DockPanel.Dock دقت کنید به این نوع خاصیتها، Attached Dependency Property (شاید در فارسی بتوانیم خاصیتهای وابستگی متصل صدا بزنیم) میگویند. این خاصیتها نوع خاصی از خاصیتهای وابستگی هستند که به شما اجازه میدهند مقداری را به شیءایی نسبت دهید که آن شیء چیزی در مورد آن نمیداند. بهترین مثال در مورد این ویژگی، پنلها هستند که یکی از موارد استفادهی از آن را در بالا میبینید. هر پنل میتواند تا بی نهایت المان فرزند داشته باشد که هر المان باید خواصش توسط پنل مشخص گردد. ولی اگر پنل ما تعداد زیادی فرزند داشته باشد، نوشتن خواص هر کدام از فرزندها داخل تگ پنل، کاری غیر ممکن است. اینجاست که این نوع خاصیتها خودشان را نشان میدهند. پس به این نحو مقادیر، داخل کنترل هر تگ تعریف میشود ولی توسط پنل مورد استفاده قرار میگیرد. نحوهی نوشتن این نوع خاصیت: ابتدا یک پیشوند از نوع تگ پنل را در ابتدا آورده و سپس بعد از .(نقطه) نام خاصیت را ذکر میکنیم.
نحوهی تعریف این نوع خاصیتها در یک کلاس به صورت زیر است که برای شیء یا پنل canvas میباشد:
public static readonly DependencyProperty TopProperty = DependencyProperty.RegisterAttached("Top", typeof(double), typeof(Canvas), new FrameworkPropertyMetadata(0d, FrameworkPropertyMetadataOptions.Inherits)); public static void SetTop(UIElement element, double value) { element.SetValue(TopProperty, value); } public static double GetTop(UIElement element) { return (double)element.GetValue(TopProperty); }
<Button Content="Dock=Top" DockPanel.Dock="Top"/> <Button Content="Dock=Bottom" DockPanel.Dock="Bottom"/> <Button Content="Dock=Left"/> <Button Content="Dock=Left2"/> <Button Content="Right2" DockPanel.Dock="Right"/> <Button Content="Dock=Right" DockPanel.Dock="Right"/> <Button Content="LastChildFill=True"/>
Wrap Panel
این پنل بسیار شبیه StackPanel هست ولی مثل آن اشیاء را در یک سطر یا ستون ادامه نمیدهد؛ بلکه با رسیدن به انتهای پنجره، سطر یا ستون جدیدی را آغاز میکند. در stack panel با پایان پنجره، ادامه اشیا آن قابل مشاهده نبود ولی در این شیء با اتمام و رسیدن به لبهی پنجره، اشیاء در سر جدید (افقی) یا ستون جدید (عمودی) نمایش داده میشوند. این پنلها میتوانند در ساخت تبها و نوار ابزار استفاده شوند.
Canvas Panel
پایهایترین layout موجود در WPF است. موقعیت قرارگیری المانهای فرزندش بر اساس نقاط تعیین شده است.این پنل بیشتر برای رسم اشکال و گرافیک دو بعدی مناسب است و اصلا برای قرارگیری کنترلهای WPF روی آن توصیه نمیشود و مشکل winformها در آن رخ خواهد داد.
شروع ترسیم یک شکل دو بعدی روی آن بر اساس دوتا از چهار "خاصیتهای وابستگی متصل" صورت میگیرد که به شرح زیر هستند:
- Canvas.LEFT
- Canvas.RIGHT
- Canvas.TOP
- Canvas.BOTTOM
نمونه از کد نوشته شده آن به صورت زیر است:
<Canvas> <Rectangle Canvas.Left="40" Canvas.Top="31" Width="63" Height="41" Fill="Blue" /> <Ellipse Canvas.Left="130" Canvas.Top="79" Width="58" Height="58" Fill="Blue" /> <Path Canvas.Left="61" Canvas.Top="28" Width="133" Height="98" Fill="Blue" Stretch="Fill" Data="M61,125 L193,28"/> </Canvas>
ترتیب قرارگیری اشکال روی هم در canvas به ترتیبی انجام میگیرد که در XAML نوشته اید ولی میتوان با استفاده از خاصیت Canvas.ZIndex این ترتیب را تغییر داد.
<Canvas> <Ellipse Fill="Green" Width="60" Height="60" Canvas.Left="30" Canvas.Top="20" Canvas.ZIndex="1"/> <Ellipse Fill="Blue" Width="60" Height="60" Canvas.Left="60" Canvas.Top="40"/> </Canvas>
ViewBox
نمونهی کد زیر را تست کنید تا تفاوت بین دو Button را ببینید:
<StackPanel Orientation="Vertical"> <Button Content="Test" /> <Viewbox Stretch="Uniform"> <Button Content="Test" /> </Viewbox> </StackPanel>
در بخش دوم Layoutها مبحث گرید و ساخت Layout اختصاصی و تعدادی از خاصیتها را بررسی خواهیم کرد.
با توجه به اینکه React یک سیستم متشکل از کامپوننتهای کوچک و بزرگ است و از JSX جهت کدنویسی استفاده میکند و یک قالب HTML، متشکل از تمام عناصر به صورت درهم ریخته میباشد و بخشهای مختلفی دارد، امکان استفادهی مستقیم از قالب HTML در آن وجود ندارد و باید با فرمت React همخوانی داشته باشد. من در اینجا از قالب رایگان و راستچین شده AdminLTE که بر پایه بوت استرپ 4 میباشد استفاده کردهام.
همانطور که میدانید React پوشهای را به نام public، مهیا کردهاست که برای استفادهی عمومی از فایلهای استاتیک ایجاد شدهاست. پس ابتدا فایلهای js,css، تصاویر و دیگر فایلهای استاتیک را به پوشهی public منتقل میکنیم. سپس فایل index قالب را باز کرده و به تگ header فایل مراجعه کنید. تگهای لینکهای معرفی فایلهای css و script ای را که در آن تعریف شدهاند، کپی کرده به هدر فایل index.html که در پوشهی public قرار دارد، منتقل کنید. همچنین از فایلهای اسکرپیت دیگر که در پایین تگ Body قرار گرفتهاند، غافل نگردید.
در اینجا باید بخشهای اساسی قالب، همانند navbar و sidebar را به صورت کامپوننت ایجاد کنیم.
پس ابتدا یک کامپوننت NavBar.jsx را ایجاد کرده و کدهای همین قسمت را در متد render قرار میدهیم:
import React, { Component } from "react";
class NavBar extends Component {
state = {};
render() {
return (
<React.Fragment>
<nav>
<!-- Left navbar links -->
<ul>
<li>
<a data-widget="pushmenu" href="#"><i></i></a>
</li>
<li>
<a href="index3.html">خانه</a>
</li>
<li>
<a href="#">تماس</a>
</li>
</ul>
<!-- SEARCH FORM -->
<form>
<div>
<input type="search" placeholder="جستجو" aria-label="Search">
<div>
<button type="submit">
<i></i>
</button>
</div>
</div>
</form>
...
</nav>
</React.Fragment>
);
}
}
export default NavBar;
- تمامی کامنتهای موجود در فایل را حذف کنید.
- تمام تگها که شامل خصوصیت class هستند را با استفاده از ابزار جستجو، یافته و با عبارت className جایگزین کنید.
- در صورتیکه روی تگها از خصوصیت style استفاده کردهاید، به شکل زیر ویرایش کرده و قالب jsx را روی آن پیاده کنید.
style="opacity:0.8;"
style={{ opacity: "0.8" }}
- در صورتیکه از تگهای img و یا input استفاده میکنید، حتما باید انتها تگها به شکل زیر بسته شده باشند:
<input type="search" placeholder="جستجو" aria-label="Search">
<input className="form-control form-control-navbar" type="search" placeholder="جستجو" aria-label="Search" />
import React, { Component } from "react"; class NavBar extends Component { state = {}; render() { return ( <React.Fragment> <nav className="main-header navbar navbar-expand bg-white navbar-light border-bottom"> <ul className="navbar-nav"> <li className="nav-item"> <a className="nav-link" data-widget="pushmenu" href="#"> <i className="fa fa-bars"></i> </a> </li> <li className="nav-item d-none d-sm-inline-block"> <a href="index3.html" className="nav-link"> خانه </a> </li> <li className="nav-item d-none d-sm-inline-block"> <a href="#" className="nav-link"> تماس </a> </li> </ul> <form className="form-inline ml-3"> <div className="input-group input-group-sm"> <input className="form-control form-control-navbar" type="search" placeholder="جستجو" aria-label="Search" /> <div className="input-group-append"> <button className="btn btn-navbar" type="submit"> <i className="fa fa-search"></i> </button> </div> </div> </form> ... </nav> </React.Fragment> ); } } export default NavBar;
return ( <React.Fragment> <NavBar /> <SideBar /> <div className="content-wrapper" style={{ marginTop: "20px" }}> <DomainList /> </div> <Footer /> </React.Fragment> )
معرفی ELMAH
- امکان ندارد هاست شما برای ارسال ایمیل نیاز به smtp authentication نداشته باشد (من ندیدم). بنابراین یا این اطلاعات را باید زنگ بزنید و از هاست بگیرید یا در کنترل پنل ایمیلهای سایت یک یوزر مخصوص را درست کنید تا بشود در برنامه از آن استفاده کرد.
- سپس تگ errorMail باید دقیقا مقدار دهی شود. آدرس و نام کاربری و غیره. (این موارد مرتبط به ارسال ایمیل است و با نام کاربری مثلا ftp سایت متفاوت میباشد)
- در IIS6 : باید در قسمت system.web -- httpModules ، مطابق مثال web.config پوشه sample کتابخانه، قسمت Elmah.ErrorMailModule را از کامنت خارج کنید.
- در IIS7 : باید در قسمت system.webServer فایل web.config شما Elmah.ErrorMailModule نیز مطابق مثال یاد شده ، ذکر شده باشد.
203 00:16:38,731 --> 00:16:41,325 <i>Happy Christmas, your arse I pray God it's our last</i>
- عدم حذف تگها ، گاها برنامه نویسها از تگ هایی چون Bold,italic,underline,color استفاده میکنند که معدود برنامههایی آن را پشتیبانی کرده و تلویزیون و پلیرها هم که اصلا پشتیبانی نمیکنند و باعث میشود که متن روی تلویزیون مثل کد html ظاهر شود
- بعضی جملات دوبار روی صفحه ظاهر میشوند.
- تنها یک فایل را در هر زمان تبدیل میکند. مثلا اگر یک سریال چند قسمته داشته باشید، برای هر قسمت باید زیرنویس را انتخاب کرده و تبدیل کنید، در صورتی که میتوان دستور داد تمام زیرنویسهای داخل دایرکتوری را تبدیل کرد یا چند زیرنویس را برای این منظور انتخاب کرد.
نحوهی خواندن زیرنویس با کدنویسی
203 00:16:38,731 --> 00:16:41,325 <i>Happy Christmas, your arse I pray God it's our last</i>
private readonly static Regex regex_srt = new Regex(@"(?<sequence>\d+)\r\n(?<start>\d{2}\:\d{2}\:\d{2},\d{3}) --\> " + @"(?<end>\d{2}\:\d{2}\:\d{2},\d{3})\r\n(?<text>[\s\S]*?)\r\n\r\n", RegexOptions.Compiled); public string ToUnicode(string lines) { string subtitle= regex_srt.Replace(lines,delegate(Match m) { string text = m.Groups["text"].Value; //1.remove tags text = CleanScriptTags(text); //2.replace letters PersianReshape reshaper = new PersianReshape(); text = reshaper.reshape(text); string[] splitedlines = text.Split(new string[] { Environment.NewLine }, StringSplitOptions.None); text = ""; foreach (string line in splitedlines) { //3.reverse tags text += ReverseText(reshaper.reshape(line))+Environment.NewLine ; } return string.Format("{0}\r\n{1} --> {2}\r\n", m.Groups["sequence"], m.Groups["start"].Value, m.Groups["end"]) + text + Environment.NewLine+Environment.NewLine ; } ); return subtitle; }
m.Groups["text"].Value
private static readonly Regex regex_tags = new Regex("<.*?>", RegexOptions.Compiled); private string CleanScriptTags(string html) { return regex_tags.Replace(html, string.Empty); }
PersianReshape reshaper = new PersianReshape(); text = reshaper.reshape(text); string[] splitedlines = text.Split(new string[] { Environment.NewLine }, StringSplitOptions.None); text = ""; foreach (string line in splitedlines) { //3.reverse tags text += ReverseText(reshaper.reshape(line))+Environment.NewLine ; }
Dictionary<int ,int> letters=new Dictionary<int, int>(); //0=0x0 ,1=1x0 ,2=0x1 ,3=1x1 private void FillPrimaryTable() { //آ letters.Add(1570, 65153); //ا letters.Add(1575, 65166); //أ letters.Add(1571, 65155); //ب letters.Add(1576, 65167); //ت letters.Add(1578, 65173); //ث letters.Add(1579, 65177); //ج letters.Add(1580, 65181); ..... } Dictionary<int,byte> specialchars=new Dictionary<int, byte>(); private void SetSpecialChars() { //آ specialchars.Add(1570, 0); //ا specialchars.Add(1575, 0); //د2 specialchars.Add(1583, 1); //ذ2 specialchars.Add(1584, 1); //ر2 specialchars.Add(1585, 1); //ز2 specialchars.Add(1586, 1); //ژ specialchars.Add(1688, 1); //و2 specialchars.Add(1608, 1); //أ specialchars.Add(1571, 1); }
در آن متد هر بار یک حرف را انتخاب میکرد و حرف قبلی و بعدی آن را ارسال میکرد تا تابع CalculateIncrease آن را محاسبه کرده و کاراکتر نهایی را باز گرداند و به متغیر finalText اضافه میکرد. ولی در حین نوشتن، زمانی را به یاد آوردم که اندروید به تازگی آمده بود و هنوز در آن زمان از زبان فارسی پشتیبانی نمیکرد و حروف برنامههایی که مینوشتیم به صورت جدا از هم بود و همین مشکل را داشت که ما این مشکل را با استفاده از یک کلاس جاوا که دوست عزیزی آن را در اینجا به اشتراک گذاشته بود، حل میکردیم. پس به این صورت بود که از ادامهی نوشتن کلاس انصراف دادم و از یک کلاس دقیقتر و آماده استفاده کردم.
PersianReshape reshaper = new PersianReshape(); text = reshaper.reshape(text);
//3.reverse tags text = ReverseText(text);
string[] splitedlines = text.Split(new string[] { Environment.NewLine }, StringSplitOptions.None); text = ""; foreach (string line in splitedlines) { //3.reverse tags text += ReverseText(reshaper.reshape(line))+Environment.NewLine ; }
private string Reverse(string text) { return Reverse(text,0,text.Length); } private string Reverse(string text,int start,int end) { if (end < start) return text; string reverseText = ""; for (int i = end-1; i >=start; i--) { reverseText += text[i]; } return reverseText; }
private string ReverseText(string text) { char[] chararray = text.ToCharArray(); string reverseText = ""; bool prefixcomp = false; bool postfixcomp = false; string prefix = ""; string postfix = ""; #region get prefix symbols for (int i = 0; i < chararray.Length; i++) { if (!prefixcomp) { char ch =(char) chararray.GetValue(i) ; if (ch< 130) { prefix += chararray.GetValue(i); } else { prefixcomp = true; break; } } } #endregion }
#region get postfix symbols for (int i = chararray.Length - 1; i >-1 ; i--) { if (!postfixcomp && prefix.Length!=text.Length) { char ch = (char)chararray.GetValue(i); if (ch < 130) { postfix += chararray.GetValue(i); } else { postfixcomp = true; break; } } } #endregion
#region reverse text reverseText = Reverse(text, prefix.Length, text.Length-postfix.Length); reverseText = unTagetdLettersRegex.Replace(reverseText, delegate(Match m) { return Reverse(m.Value); }); #endregion
private static readonly Regex unTagetdLettersRegex = new Regex(@"[A-Za-z0-9]+", RegexOptions.Compiled);
return prefix+ reverseText+postfix;
private static readonly Regex unTagetdLettersRegex = new Regex(@"[A-Za-z0-9]+", RegexOptions.Compiled); private string ReverseText(string text) { char[] chararray = text.ToCharArray(); string reverseText = ""; bool prefixcomp = false; bool postfixcomp = false; string prefix = ""; string postfix = ""; #region get prefix symbols for (int i = 0; i < chararray.Length; i++) { if (!prefixcomp) { char ch =(char) chararray.GetValue(i) ; if (ch< 130) { prefix += chararray.GetValue(i); } else { prefixcomp = true; break; } } } #endregion #region get postfix symbols for (int i = chararray.Length - 1; i >-1 ; i--) { if (!postfixcomp && prefix.Length!=text.Length) { char ch = (char)chararray.GetValue(i); if (ch < 130) { postfix += chararray.GetValue(i); } else { postfixcomp = true; break; } } } #endregion #region reverse text reverseText = Reverse(text, prefix.Length, text.Length-postfix.Length); reverseText = unTagetdLettersRegex.Replace(reverseText, delegate(Match m) { return Reverse(m.Value); }); #endregion return prefix+ reverseText+postfix; }
return string.Format("{0}\r\n{1} --> {2}\r\n", m.Groups["sequence"], m.Groups["start"].Value, m.Groups["end"]) + text + Environment.NewLine+Environment.NewLine ;
نمایی از برنامهی نهایی
روی پلیر یا تلویزیون
نکتهی نهایی: هنگام تست زیرنویس روی فیلم متوجه شدم پلیر خطوط بلند را که در صفحهی نمایش جا نمیشود، میشکند و به دو خط تقسیم میکند. ولی نکتهی خنده دار اینجا بود که خط اول را پایین میاندازد و خط دوم را بالا. برای همین این تکه کد را نوشتم و به طور جداگانه در گیت هاب هم قرار دادهام.
این تکه کد را هم بعد از
//1.remove tags text = CleanScriptTags(text);
text =StringUtils.ConvertToMultiLine(text);
کد متد ConvertToMultiline:
namespace Utils { public static class StringUtils { public static string ConvertToMultiLine(String text, int min = 30, int max = 40) { if (text.Trim() == "") return text; string[] words = text.Split(new string[] { " " }, StringSplitOptions.None); string text1 = ""; string text2 = ""; foreach (string w in words) { if (text1.Length < min) { if (text1.Length == 0) { text1 = w; continue; } if (w.Length + text1.Length <= max) text1 += " " + w; } else text2 += w + " "; } text1 = text1.Trim(); text2 = text2.Trim(); if (text2.Length > 0) { text1 += Environment.NewLine + ConvertToMultiLine(text2, min, max); } return text1; } } }
برنامه مورد نظر را به طور کامل میتوانید از اینجا یا اینجا به صورت فایل نهایی و هم سورس دریافت کنید.
CoffeeScript #1
مقدمه
CoffeeScript یک زبان برنامه نویسی برای تولید کدهای جاوااسکریپت است که Syntax آن الهام گرفته از Ruby و Python است و بسیاری از ویژگیهایش، از این دو زبان پیاده سازی شده است.سوالی که ممکن است برای هر کسی پیش بیاید این است که چرا باید از CoffeeScript استفاده کرد و یا چرا نوشتن CoffeeScript بهتر از نوشتن مستقیم جاوااسکریپت است؟
از جمله دلایلی که میشود عنوان کرد:
حجم کد کمتری نوشته میشود (تجربه شخصی من: تقریبا کدنویسی شما به یک سوم تا نصف تبدیل میشود)، بسیار مختصر است و پیاده سازی prototype aliases و classes به سادگی و با حداقل کدنویسی انجام میگیرد.
CoffeeScript زیرمجموعهای از جاوااسکریپت نیست، اگرچه از کتابخانههای خارجی جاوااسکریپت میتوان در کدهای CoffeeScript استفاده کرد، اما برای اینکار باید کدهای مورد نیاز را به CoffeeScript تبدیل کرد تا از خطای زمان کامپایل جلوگیری شود.
پیش نیاز نوشتن کد به زبان CoffeeScript، شناخت جاوااسکریپت است تا بتوان خطاهای زمان اجرا را اصلاح کرد.
CoffeeScript محدودیتی در مرورگر ندارد و میتوان در برنامههای جاوااسکریپتی تحت سرور مانند Node.js با کیفیت بالا نیز از آن استفاده کرد.
زمانی را که برای یادگیری CoffeeScript صرف میکنید در زمان نوشتن پروژه، نتیجهی آنرا متوجه خواهید شد.
راه اندازی اولیه
یکی از سادهترین راههای نوشتن CoffeeScript استفاده از نسخهی مرورگر این زبان است و برای اینکار باید وارد سایت CoffeeScript.Org شده و بر روی تب Try CoffeeScript کلیک کنید. این سایت از نسخهی مرورگر CoffeeScript Compiler استفاده میکند و هر کدی CoffeeScript ایی که در پنل سمت چپ سایت بنویسید، تبدیل به جاوااسکریپت میشود و در پنل راست سایت، نمایش داده میشود.
همچنین میتوانید با استفاده از پروژهی js2coffee کدهای جاوااسکریپت را به کدهای CoffeeScript تبدیل کنید.
در صورتیکه بخواهید از نسخهی درون مرورگری CoffeeScript Compiler استفاده کنید، باید یک تگ اسکریپت لینک به این اسکریپت و با اضافه کردن تگ اسکریپت با type coffeescript این کار را انجام دهید. برای نمونه:
<script src="http://jashkenas.github.com/coffee-script/extras/coffee-script.js" type="text/javascript" charset="utf-8"></script> <script type="text/coffeescript"> # Some CoffeeScript </script>
برای نصب باید آخرین نسخهی Node.js و (npm (Node Package Manager را نصب کرده باشید. برای نصب CoffeeScript با استفاده از npm از دستور زیر استفاده کنید.
npm install -g coffee-script
coffee --compile my-script.coffee
[HttpPost,AjaxOnly, ValidateAntiForgeryToken] public virtual JsonResult Create(AddDeviceGroupViewModel deviceGroupViewModel) { if (ModelState.IsNotValid()) { Response.StatusCode = (int)HttpStatusCode.BadRequest; return Json(new { success = false, message = ModelState.FirstErrorMessage(), notificationType = NotificationType.Error }, JsonRequestBehavior.AllowGet); } var result = _deviceGroupService.Add(deviceGroupViewModel); // other codes }
@using (Ajax.BeginForm(MVC.Admin.DeviceGroup.Create(), new AjaxOptions { HttpMethod = "POST", OnSuccess = "saveAjaxForm", OnFailure = "SaveFailure" })) { // form content }
function SaveFailure(data) { $("button[type=submit]").prop('disabled', false); var result = $.parseJSON(data.responseText); showMessage(result.message, result.notificationType); }
مشکل به وجود آمده حاصل اضافه شدن تگهای زیر به وب کانفیگ بود :
<httpErrors errorMode="Custom"> <remove statusCode="404"/> <error statusCode="404" path="/Error/NotFound" responseMode="ExecuteURL"/> </httpErrors>
Response.StatusCode = (int)HttpStatusCode.BadRequest;
و در خروجی تنها مقداری که به سمت کاربر برگشت داده میشد، مقدار BadRequest بود و خط زیر باعث خطا و توقف برنامه میشد:
var result = $.parseJSON(data.responseText);
همچنین در صورتیکه قصد داشتید تگهای فوق را در web.config داشته باشید (جهت هندل کردن صفحات پیدا نشده) میتوانید از مقدار دهی TrySkipIISCustomError با true این مشکل را رفع کنید.
Response.TrySkipIisCustomErrors = true;
روشی دیگر:
<system.webServer> <httpErrors errorMode="DetailedLocalOnly" existingResponse="PassThrough" />
دریافت آخرین نگارش Froala WYSIWYG Editor
برای دریافت فایلهای آخرین نگارش این ادیتور وب میتوانید به سایت آن، قسمت دریافت فایلها مراجعه نمائید.
http://editor.froala.com/download
و یا به این آدرس مراجعه کنید:
https://github.com/froala/wysiwyg-editor/releases
ساختار پروژه و نحوهی کپی فایلهای آن
در هر دو مثالی که فایلهای آنرا از انتهای بحث میتوانید دریافت کنید، این ساختار رعایت شده است:
فایلهای CSS و فونتهای آن، در پوشهی Content قرار گرفتهاند.
فایلهای اسکریپت و زبان آن (که دارای زبان فارسی هم هست) در پوشهی Scripts کپی شدهاند.
یک نکته
فایل font-awesome.css را نیاز است کمی اصلاح کنید. مسیر پوشهی فونتهای آن اکنون با fonts شروع میشود.
تنظیمات اولیه
تفاوتی نمیکند که از وب فرمها استفاده میکنید یا MVC، نحوهی تعریف و افزودن پیش نیازهای این ادیتور به نحو ذیل است:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <link href="Content/font-awesome.css" rel="stylesheet" /> <link href="Content/froala_editor.css" rel="stylesheet" /> <script src="Scripts/jquery-1.10.2.min.js"></script> <script src="Scripts/froala_editor.min.js"></script> <script src="Scripts/langs/fa.js"></script> </head> <body> <form id="form1" runat="server"> </form> </body> </html>
استفاده از Froala WYSIWYG Editor در ASP.NET MVC
در ادامه نحوهی فعال سازی ادیتور وب Froala را در یک View برنامههای ASP.NET MVC ملاحظه میکنید:
@{ ViewBag.Title = "Index"; } <style type="text/css"> /*تنظیم فونت پیش فرض ادیتور*/ .froala-element { } </style> @using (Html.BeginForm(actionName: "Index", controllerName: "Home")) { @Html.TextArea(name: "Editor1") <input type="submit" value="ارسال" /> } @section Scripts { <script type="text/javascript"> $(function () { $('#Editor1').editable({ buttons: ["bold", "italic", "underline", "strikeThrough", "fontFamily", "fontSize", "color", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "selectAll", "createLink", "insertImage", "insertVideo", "undo", "redo", "html", "save", "inserthorizontalrule"], inlineMode: false, inverseSkin: true, preloaderSrc: '@Url.Content("~/Content/img/preloader.gif")', allowedImageTypes: ["jpeg", "jpg", "png"], height: 300, language: "fa", direction: "rtl", fontList: ["Tahoma, Geneva", "Arial, Helvetica", "Impact, Charcoal"], autosave: true, autosaveInterval: 2500, saveURL: '@Url.Action("FroalaAutoSave", "Home")', saveParams: { postId: "123" }, spellcheck: true, plainPaste: true, imageButtons: ["removeImage", "replaceImage", "linkImage"], borderColor: '#00008b', imageUploadURL: '@Url.Action("FroalaUploadImage", "Home")', imageParams: { postId: "123" }, enableScript: false }); }); </script> }
سپس این ادیتور را بر روی المان TextArea قرار گرفته در صفحه، فعال میکنیم.
در قسمت مقادیر buttons، تمام حالات ممکن پیش بینی شدهاند. هر کدام را که نیاز ندارید، حذف کنید.
نحوهی تعریف زبان و راست به چپ بودن این ادیتور را با مقدار دهی پارامترهای language و direction ملاحظه میکنید.
پارامترهای autosave، saveURL و saveParams کار تنظیم ارسال خودکار محتوای ادیتور را جهت ذخیرهی آن در سرور به عهده دارند. بر اساس مقدار autosaveInterval میتوان مشخص کرد که هر چند میلی ثانیه یکبار اینکار باید انجام شود.
/// <summary> /// ذخیره سازی خودکار /// </summary> [HttpPost] [ValidateInput(false)] public ActionResult FroalaAutoSave(string body, int? postId) // نام پارامتر بادی را تغییر ندهید { //todo: save body ... return new EmptyResult(); }
چون قرار است تگهای HTML به سرور ارسال شوند، ویژگی ValidateInput به false تنظیم شدهاست.
saveParams آن، برای مقدار دهی پارامترهای اضافی است که نیاز میباشند تا به سرور ارسال شوند. مثلا شماره مطلب جاری نیز به سرور ارسال گردد.
در اینجا نام پارامتری که ارسال میگردد، دقیقا مساوی body است. بنابراین آنرا تغییر ندهید.
پارامترهای imageUploadURL و imageParams برای فعال سازی ذخیره تصاویر آن در سرور کاربرد دارند.
اکشن متد مدیریت کنندهی آن به نحو ذیل میتواند تعریف شود:
// todo: مسایل امنیتی آپلود را فراموش نکنید /// <summary> /// ذخیره سازی تصاویر ارسالی /// </summary> [HttpPost] public ActionResult FroalaUploadImage(HttpPostedFileBase file, int? postId) // نام پارامتر فایل را تغییر ندهید { var fileName = Path.GetFileName(file.FileName); var rootPath = Server.MapPath("~/images/"); file.SaveAs(Path.Combine(rootPath, fileName)); return Json(new { link = "images/" + fileName }, JsonRequestBehavior.AllowGet); }
خروجی آن برای مشخص سازی محل ذخیره سازی تصویر در سرور باید یک خروجی JSON دارای خاصیت و پارامتر link به نحو فوق باشد (این مسیر، یک مسیر نسبی است؛ نسبت به ریشه سایت).
imageParams آن برای مقدار دهی پارامترهای اضافی است که نیاز میباشند تا به سرور ارسال شوند. مثلا شماره مطلب جاری نیز به سرور ارسال گردد.
استفاده از Froala WYSIWYG Editor در ASP.NET Web forms
تمام نکاتی که در قسمت تنظیمات ASP.NET MVC در مورد ویژگیهای سمت کلاینت این ادیتور ذکر شد، در مورد وب فرمها نیز صادق است. فقط قسمت مدیریت سمت سرور آن اندکی تفاوت دارد.
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" ValidateRequest="false" EnableEventValidation="false" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FroalaWebFormsTest.Default" %> <%--اعتبارسنجی ورودی غیرفعال شده چون باید تگ ارسال شود--%> <%--همچنین در وب کانفیگ هم تنظیم دیگری نیاز دارد--%> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> <%--حالت کلاینت آی دی بهتر است تنظیم شود در اینجا--%> <asp:TextBox ID="txtEditor" ClientIDMode="Static" runat="server" Height="199px" TextMode="MultiLine" Width="447px"></asp:TextBox> <br /> <asp:Button ID="btnSave" runat="server" OnClick="btnSave_Click" Text="ارسال" /> <style type="text/css"> /*تنظیم فونت پیش فرض ادیتور*/ .froala-element { } </style> <script type="text/javascript"> $(function () { $('#txtEditor').editable({ buttons: ["bold", "italic", "underline", "strikeThrough", "fontFamily", "fontSize", "color", "formatBlock", "align", "insertOrderedList", "insertUnorderedList", "outdent", "indent", "selectAll", "createLink", "insertImage", "insertVideo", "undo", "redo", "html", "save", "inserthorizontalrule"], inlineMode: false, inverseSkin: true, preloaderSrc: 'Content/img/preloader.gif', allowedImageTypes: ["jpeg", "jpg", "png"], height: 300, language: "fa", direction: "rtl", fontList: ["Tahoma, Geneva", "Arial, Helvetica", "Impact, Charcoal"], autosave: true, autosaveInterval: 2500, saveURL: 'FroalaHandler.ashx', saveParams: { postId: "123" }, spellcheck: true, plainPaste: true, imageButtons: ["removeImage", "replaceImage", "linkImage"], borderColor: '#00008b', imageUploadURL: 'FroalaHandler.ashx', imageParams: { postId: "123" }, enableScript: false }); }); </script> </asp:Content>
به علاوه ClientIDMode=Static نیز تنظیم شدهاست، تا بتوان از ID تکست باکس قرار گرفته در صفحه، به سادگی در کدهای سمت کاربر جیکوئری استفاده کرد.
اگر دقت کرده باشید، save urlها اینبار به فایل FroalaHandler.ashx اشاره میکنند. محتوای این Genric handler را ذیل مشاهده میکنید:
using System.IO; using System.Web; using System.Web.Script.Serialization; namespace FroalaWebFormsTest { public class FroalaHandler : IHttpHandler { //todo: برای اینکارها بهتر است از وب ای پی آی استفاده شود //todo: یا دو هندلر مجزا یکی برای تصاویر و دیگری برای ذخیره سازی متن public void ProcessRequest(HttpContext context) { var body = context.Request.Form["body"]; var postId = context.Request.Form["postId"]; if (!string.IsNullOrWhiteSpace(body) && !string.IsNullOrWhiteSpace(postId)) { //todo: save changes context.Response.ContentType = "text/plain"; context.Response.Write(""); context.Response.End(); } var files = context.Request.Files; if (files.Keys.Count > 0) { foreach (string fileKey in files) { var file = context.Request.Files[fileKey]; if (file == null || file.ContentLength == 0) continue; //todo: در اینجا مسایل امنیتی آپلود فراموش نشود var fileName = Path.GetFileName(file.FileName); var rootPath = context.Server.MapPath("~/images/"); file.SaveAs(Path.Combine(rootPath, fileName)); var json = new JavaScriptSerializer().Serialize(new { link = "images/" + fileName }); // البته اینجا یک فایل بیشتر ارسال نمیشود context.Response.ContentType = "text/plain"; context.Response.Write(json); context.Response.End(); } } context.Response.ContentType = "text/plain"; context.Response.Write(""); context.Response.End(); } public bool IsReusable { get { return false; } } } }
یک نکتهی امنیتی مهم
<location path="upload"> <system.webServer> <handlers accessPolicy="Read" /> </system.webServer> </location>
کدهای کامل این مطلب را در ادامه میتوانید دریافت کنید
Froala-Sample
<Comp1>This is a content coming from the parent</Comp1>
معرفی مفهوم Render Fragment
برای درج محتوای تامین شدهی توسط کامپوننت والد در یک کامپوننت فرزند، از ویژگی به نام Render Fragment استفاده میشود. مثالی جهت توضیح جزئیات آن:
در ابتدا یک کامپوننت والد جدید را در مسیر Pages\LearnBlazor\ParentComponent.razor به صورت زیر تعریف میکنیم:
@page "/ParentComponent" <h1 class="text-danger">Parent Child Component</h1> <ChildComponent Title="This title is passed as a parameter from the Parent Component"> A `Render Fragment` from the parent! </ChildComponent> <ChildComponent Title="This is the second child component"></ChildComponent> @code { }
- سپس دوبار کامپوننت فرضی ChildComponent به همراه پارامتر Title و یک محتوای جدید قرار گرفتهی در بین تگهای آن، در صفحه تعریف شدهاند.
- بار دومی که ChildComponent در صفحه قرار گرفتهاست، به همراه محتوای جدیدی در بین تگهای خود نیست.
برای دسترسی به این کامپوننت از طریق منوی برنامه، مدخل منوی آنرا به کامپوننت Shared\NavMenu.razor اضافه میکنیم:
<li class="nav-item px-3"> <NavLink class="nav-link" href="ParentComponent"> <span class="oi oi-list-rich" aria-hidden="true"></span> Parent/Child Relation </NavLink> </li>
<div> <div class="alert alert-info">@Title</div> <div class="alert alert-success"> @if (ChildContent == null) { <span> Hello, from Empty Render Fragment </span> } else { <span>@ChildContent</span> } </div> </div> @code { [Parameter] public string Title { get; set; } [Parameter] public RenderFragment ChildContent { get; set; } }
- خاصیت عمومی Title که توسط ویژگی Parameter مزین شدهاست، امکان تنظیم مقدار مشخصی را توسط کامپوننت دربرگیرندهی ChildComponent میسر میکند.
- در اینجا پارامتر عمومی دیگری نیز تعریف شدهاست که اینبار از نوع ویژهی RenderFragment است. توسط آن میتوان به محتوایی که در کامپوننت والد ChildComponent در بین تگهای آن تنظیم شدهاست، دسترسی یافت. همچنین اگر این محتوا توسط کامپوننت والد تنظیم نشده باشد، مانند دومین باری که ChildComponent در صفحه قرار گرفتهاست، میتوان با بررسی نال بودن آن، یک محتوای پیشفرض را نمایش داد.
با این خروجی:
روش دیگری برای فراخوانی Event Call Back ها
در قسمت قبل روش انتقال اطلاعات را از کامپوننتهای فرزند، به والد مشاهده کردیم. فراخوانی آنها در سمت Child Component نیاز به یک متد اضافی داشت و همچنین تنها یک پارامتر را هم ارسال کردیم. برای ساده سازی این عملیات از روش زیر نیز میتوان استفاده کرد:
<button class="btn btn-danger" @onclick="@(() => OnClickBtnMethod.InvokeAsync((1, "A message from child!")))"> Show a message from the child! </button> @code { // ... [Parameter] public EventCallback<(int, string)> OnClickBtnMethod { get; set; } }
- همچنین فراخوانی OnClickBtnMethod.InvokeAsync را نیز در محل تعریف onclick@ بدون نیازی به یک متد اضافی، مشاهده میکنید. نکتهی مهم آن، قرار دادن این قطعه کد داخل ()@ است تا ابتدا و انتهای کدهای #C مشخص شود؛ وگرنه کامپایل نمیشود.
در سمت کامپوننت والد برای دسترسی به OnClickBtnMethod که اینبار یک tuple را ارسال میکند، میتوان به صورت زیر عمل کرد:
@page "/ParentComponent" <h1 class="text-danger">Parent Child Component</h1> <ChildComponent OnClickBtnMethod="ShowMessage" Title="This title is passed as a parameter from the Parent Component"> A `Render Fragment` from the parent! </ChildComponent> <ChildComponent Title="This is the second child component"> <p><b>@MessageText</b></p> </ChildComponent> @code { string MessageText = ""; private void ShowMessage((int Value, string Message) args) { MessageText = args.Message; } }
امکان تعریف چندین RenderFragment
تا اینجا یک RenderFragment را در کامپوننت فرزند تعریف کردیم. امکان تعریف چندین RenderFragment در ChildComponent.razor نیز وجود دارند:
@code { // ... [Parameter] public RenderFragment ChildContent { get; set; } [Parameter] public RenderFragment DangerChildContent { get; set; } }
<ChildComponent OnClickBtnMethod="ShowMessage" Title="This title is passed as a parameter from the Parent Component"> <ChildContent> A `Render Fragment` from the parent! </ChildContent> <DangerChildContent> A danger content from the parent! </DangerChildContent> </ChildComponent>
از آنجائیکه ذکر این تگها اختیاری است، نیاز است در ChildComponent.razor بر اساس null بودن آنها، تصمیم به رندر محتوایی پیشفرض گرفت:
@if(DangerChildContent == null) { @if (ChildContent == null) { <span> Hello, from Empty Render Fragment </span> } else { <span>@ChildContent</span> } } else { <span>@DangerChildContent</span> }
کدهای کامل این مطلب را از اینجا میتوانید دریافت کنید: Blazor-5x-Part-08.zip
dotnet new -i FeatherHttp.Templates::0.1.67-alpha.g69b43bed72 --nuget-source https://f.feedz.io/featherhttp/framework/nuget/index.json
Templates Short Name Language Tags ---------------------------------------------------------------------------------------------------------------------------------- FeatherHttp feather [C#] Web/ASP.NET/FeatherHttp
dotnet new feather --name todoAPI
همانطور که مشاهده میکنید پروژهی فوق تنها شامل دو فایل .csproj و Program.cs است. درون Program.cs و متد Main کار initialize کردن سرور HTTP صورت گرفته است. WebApplication.Create دقیقا همانند Host.CreateDefaultBuilder پروژههای ASP.NET Core عمل میکند؛ یعنی پیکربندی pipeline از قبیل اضافه کردن متغیرهای محیطی، خواندن از فایل JSON و ... را انجام میدهد اما با کد boilerplate کمتر. بنابراین خروجی WebApplication.Create یک ASP.NET Core Pipeline با قابلیت اضافه کردن تنظیمات دلخواه است. در ادامه جهت بررسی بیشتر Feather HTTP، یک مدل را به همراه یک سری دیتای In-memory به پروژه اضافه خواهیم کرد:
using System.Collections.Generic; using System.Text.Json.Serialization; using System.Linq; namespace todoAPI.Models { public class Todo { [JsonPropertyName("id")] public int Id { get; set; } [JsonPropertyName("title")] public string Title { get; set; } [JsonPropertyName("completed")] public bool Completed { get; set; } } public class TodoData { private readonly IList<Todo> _db = new List<Todo> { new Todo { Id = 1, Title = "Read book" }, new Todo { Id = 2, Title = "Watch an episode of Dark" }, new Todo { Id = 3, Title = "Publish a post on dotnettips" }, new Todo { Id = 4, Title = "Skype with my friend" }, }; public IList<Todo> GetAllToDoItmes() { return _db; } public void AddTodo(Todo item) { _db.Add(item); } public void ToggleTodo(int id) { var todo = _db.FirstOrDefault(x => x.Id == id); todo.Completed = !todo.Completed; } public void DeleteTodo(int id) { var todo = _db.FirstOrDefault(x => x.Id == id); _db.Remove(todo); } } }
در مثال فوق برای نگاشت نام خواص، از System.Text.Json توکار NET Core 3.0. استفاده شدهاست. در ادامه نیز از یک کلاس برای شبیهسازی CRUD یک Todo استفاده شدهاست. سپس برای داشتن اندپوینتهای موردنظر به ازای هر کدام از متدهای فوق درون متد Main، از app.Map... استفاده کردهایم:
using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Http; using todoAPI.Models; namespace todoAPI { class Program { private static readonly TodoData db = new TodoData(); static async Task Main(string[] args) { var app = WebApplication.Create(args); app.MapGet("/", GetTodos); app.MapPost("/api/todos", CreateTodo); app.MapPost("/api/todos/{id}", ToggleTodo); app.MapDelete("/api/todos/{id}", DeleteTodo); await app.RunAsync(); } static async Task GetTodos(HttpContext http) { var todos = db.GetAllToDoItmes(); await http.Response.WriteJsonAsync(todos); } static async Task CreateTodo(HttpContext http) { var todo = await http.Request.ReadJsonAsync<Todo>(); db.AddTodo(todo); http.Response.StatusCode = 204; } static async Task ToggleTodo(HttpContext http) { if (!http.Request.RouteValues.TryGet("id", out int id)) { http.Response.StatusCode = 400; return; } db.ToggleTodo(id); http.Response.StatusCode = 204; } static async Task DeleteTodo(HttpContext http) { if (!http.Request.RouteValues.TryGet("id", out int id)) { http.Response.StatusCode = 400; return; } db.DeleteTodo(id); http.Response.StatusCode = 204; } } }
هر کدام از اندپوینتهای فوق، یک ورودی HttpContext دریافت خواهند کرد. توسط این شیء میتوانیم به درخواست جاری و همچنین به پاسخ درخواست، دسترسی داشته باشیم.
استفاده از سیستم DI توکار NET Core.
همانطور که در ابتدای مطلب نیز عنوان شد، Feather HTTP یک wrapper بر روی APIهای موجود ASP.NET Core است، بنابراین میتوانیم از همان سرویس DI که درون پروژههای ASP.NET Core در اختیار داریم در اینجا نیز استفاده کنیم. در ادامه یک پوشهی جدید را به مثال قبل، با نام Controllers اضافه خواهیم کرد و درون آن یک فایل TodoController را با محتویات زیر ایجاد خواهیم کرد:
using System.Threading.Tasks; using Microsoft.AspNetCore.Http; using todoAPI.Models; using todoAPI.Services; namespace todoAPI.Controllers { public class TodoController { private readonly ITodoService _todoService; public TodoController(ITodoService todoService) { _todoService = todoService; } public async Task GetTodos(HttpContext http) { var todos = _todoService.GetAllToDoItmes(); await http.Response.WriteJsonAsync(todos); } public async Task CreateTodo(HttpContext http) { var todo = await http.Request.ReadJsonAsync<Todo>(); _todoService.AddTodo(todo); http.Response.StatusCode = 204; } public async Task ToggleTodo(HttpContext http) { if (!http.Request.RouteValues.TryGet("id", out int id)) { http.Response.StatusCode = 400; return; } _todoService.ToggleTodo(id); http.Response.StatusCode = 204; } public async Task DeleteTodo(HttpContext http) { if (!http.Request.RouteValues.TryGet("id", out int id)) { http.Response.StatusCode = 400; return; } _todoService.DeleteTodo(id); http.Response.StatusCode = 204; } } }
کاری که انجام شده است، انتقال تمامی متدهای static به کلاس فوق و سپس جایگزین کردن کلمهی کلیدی static با public است. همچنین یه ارجاع به اینترفیس جدید با عنوان ITodoService اضافه شده است؛ درون پیادهسازی این اینترفیس همان متدهای کلاس TodoData را اضافه کردهایم:
using System.Collections.Generic; using todoAPI.Models; using System.Linq; namespace todoAPI.Services { public interface ITodoService { void AddTodo(Todo item); void DeleteTodo(int id); IList<Todo> GetAllToDoItmes(); void ToggleTodo(int id); } public class TodoService : ITodoService { private readonly IList<Todo> _db = new List<Todo> { new Todo { Id = 1, Title = "Read book" }, new Todo { Id = 2, Title = "Watch an episode of Dark" }, new Todo { Id = 3, Title = "Publish a post on dotnettips" }, new Todo { Id = 4, Title = "Skype with my friend" }, }; public IList<Todo> GetAllToDoItmes() { return _db; } public void AddTodo(Todo item) { _db.Add(item); } public void ToggleTodo(int id) { var todo = _db.FirstOrDefault(x => x.Id == id); todo.Completed = !todo.Completed; } public void DeleteTodo(int id) { var todo = _db.FirstOrDefault(x => x.Id == id); _db.Remove(todo); } } }
نکته: برای ایجاد اینترفیس از روی یک کلاس درون VS Code میتوانیم اینگونه عمل کنیم:
تغییرات فایل Program.cs
ابتدا باید using مربوط به DI را در ابتدای فایل اضافه کنیم:
using Microsoft.Extensions.DependencyInjection;
سپس توسط ServiceProvider یک وهله از کلاس موردنظر را ایجاد کردهایم و همچنین سرویسهای موردنظر را درون DI Container اضافه کردهایم:
using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.Extensions.DependencyInjection; using todoAPI.Controllers; using todoAPI.Services; namespace todoAPI { class Program { static async Task Main(string[] args) { var builder = WebApplication.CreateBuilder(args); builder.Services.AddTransient<TodoController>(); builder.Services.AddTransient<ITodoService, TodoService>(); var serviceProvider = builder.Services.BuildServiceProvider(); var todoController = serviceProvider.GetService<TodoController>(); var app = WebApplication.Create(args); app.MapGet("/", todoController.GetTodos); app.MapPost("/api/todos", todoController.CreateTodo); app.MapPost("/api/todos/{id}", todoController.ToggleTodo); app.MapDelete("/api/todos/{id}", todoController.DeleteTodo); await app.RunAsync(); } } }
Convention Over Configuration
در کد قبلی به صورت دستی TodoController را توسط Service Location از DI درخواست کردهایم. اینکار را در ادامه میتوانیم به Feather HTTP سپرده تا کار وهلهسازی را براساس قواعد توکار برایمان انجام دهد:
using System.Threading.Tasks; using Microsoft.AspNetCore.Builder; using Microsoft.AspNetCore.Http; using Microsoft.Extensions.DependencyInjection; using todoAPI.Services; namespace todoAPI { class Program { static async Task Main(string[] args) { var builder = WebApplication.CreateBuilder(args); builder.Services.AddSingleton<IHttpContextAccessor, HttpContextAccessor>(); builder.Services.AddControllers(); builder.Services.AddSingleton<ITodoService, TodoService>(); var serviceProvider = builder.Services.BuildServiceProvider(); var app = builder.Build(); app.MapControllers(); await app.RunAsync(); } } }
سپس در ادامه برای دسترسی به HTTP Context درون TodoController از IHttpContextAccessor استفاده کردهایم:
using System.Threading.Tasks; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; using todoAPI.Models; using todoAPI.Services; namespace todoAPI.Controllers { public class TodoController { private readonly ITodoService _todoService; private readonly IHttpContextAccessor _accessor; public TodoController(ITodoService todoService, IHttpContextAccessor accessor) { _todoService = todoService; _accessor = accessor; } [HttpGet("/todos")] public async Task GetTodos() { var todos = _todoService.GetAllToDoItmes(); await _accessor.HttpContext.Response.WriteJsonAsync(todos); } [HttpPost("/todos")] public async Task CreateTodo() { var todo = await _accessor.HttpContext.Request.ReadJsonAsync<Todo>(); _todoService.AddTodo(todo); _accessor.HttpContext.Response.StatusCode = 204; } [HttpPost("/todos/{id}")] public async Task ToggleTodo(int id) { _todoService.ToggleTodo(id); _accessor.HttpContext.Response.StatusCode = 204; } [HttpDelete("/todos/{id}")] public async Task DeleteTodo(int id) { _todoService.DeleteTodo(id); _accessor.HttpContext.Response.StatusCode = 204; } } }
کدهای کامل مطلب را میتوانید از اینجا دریافت کنید.