نظرات مطالب
استخراج اطلاعات از صفحات وب با کمک HtmlAgilityPack
با تشکر
ولی طبق تجربه خود من کد بالا هم کمک نمی‌کنه و با تنظیم  OptionDefaultStreamEncoding به UTF8 مشکل حل نمیشه ولی یه راه که قبلا من پیدا کرده بودم تو خوندن کد صفحات اینه که شما صفحات رو به صورت استریم دریافت کرده بعد توسط متد LoadHtml بخونید به این صورت مشکل برطرف میشه!(البته این تو سایت فارسی که من قصد خوندشو داشتم، بود با سایتهای دیگه تست نکردم)
var request = (HttpWebRequest)WebRequest.Create("آدرس سایت");
request.Method = "GET";
using (var response = (HttpWebResponse)request.GetResponse())
{
    using (var stream = response.GetResponseStream())
    {
        htmlDoc.Load(stream, Encoding.UTF8);
     }
}

مطالب
OpenCVSharp #9
تغییر اندازه، و چرخش تصاویر

در OpenCV با استفاده از مفهومی به نام affine transform، امکان تغییر اندازه و همچنین چرخش تصاویر میسر می‌شود. در اینجا، تصویر در یک ماتریس دو در سه ضرب می‌شود تا انتقالات یاد شده، انجام شوند.
private static void rotateImage(double angle, double scale, Mat src, Mat dst)
{
    var imageCenter = new Point2f(src.Cols / 2f, src.Rows / 2f);
    var rotationMat = Cv2.GetRotationMatrix2D(imageCenter, angle, scale);
    Cv2.WarpAffine(src, dst, rotationMat, src.Size());
}
متد فوق کار چرخش تصویر مبدا (src) را به تصویر مقصد (dst) انجام می‌دهد. این عملیات توسط متد WarpAffine مدیریت شده و مهم‌ترین پارامتر آن، پارامتر سوم آن است که ماتریس تعریف کننده‌ی انتقالات تعریف شده توسط متد GetRotationMatrix2D است. در اینجا مرکز مشخص شده، زاویه و مقیاس، نحوه‌ی چرخش را تعریف می‌کنند.
برای مشاهده‌ی بهتر تاثیر پارامترهای مختلف در اینجا، به مثال ذیل دقت کنید:
using OpenCvSharp;
using OpenCvSharp.CPlusPlus;
 
namespace OpenCVSharpSample09
{
    class Program
    {
        static void Main(string[] args)
        {
            using (var src = new Mat(@"..\..\Images\Penguin.Png", LoadMode.AnyDepth | LoadMode.AnyColor))
            using (var dst = new Mat())
            {
                src.CopyTo(dst);
 
                using (var window = new Window("Resize/Rotate/Blur",
                                                image: dst, flags: WindowMode.AutoSize))
                {
                    var angle = 0.0;
                    var scale = 0.7;
 
                    var angleTrackbar = window.CreateTrackbar(
                        name: "Angle", value: 0, max: 180,
                        callback: pos =>
                        {
                            angle = pos;
                            rotateImage(angle, scale, src, dst);
                            window.Image = dst;
                        });
 
                    var scaleTrackbar = window.CreateTrackbar(
                        name: "Scale", value: 1, max: 10,
                        callback: pos =>
                        {
                            scale = pos / 10f;
                            rotateImage(angle, scale, src, dst);
                            window.Image = dst;
                        }); 
 
                    angleTrackbar.Callback.DynamicInvoke(0);
                    scaleTrackbar.Callback.DynamicInvoke(1);
 
                    Cv2.WaitKey();
                }
            }
        }
 
        private static void rotateImage(double angle, double scale, Mat src, Mat dst)
        {
            var imageCenter = new Point2f(src.Cols / 2f, src.Rows / 2f);
            var rotationMat = Cv2.GetRotationMatrix2D(imageCenter, angle, scale);
            Cv2.WarpAffine(src, dst, rotationMat, src.Size());
        }
    }
}
با این خروجی:


در این مثال، مانند مطلب قسمت قبل، ابتدا یک پنجره‌ی سازگار با C++ API ایجاد شده و سپس دو tracker به آن اضافه شده‌اند. این trackers کار دریافت ورودی اطلاعات را از کاربر به عهده دارند (دریافت مقادیر زاویه‌ی چرخش و مقیاس) و مقادیر دریافتی از آن‌ها، در نهایت به متد rotateImage ارسال می‌شوند. این متد کار چرخش و تغییر مقیاس تصویر اصلی را انجام داده و نتیجه را به تصویر dst کپی می‌کند. در آخر تصویر dst در پنجره به روز شده و نمایش داده می‌شود.


تغییر اندازه‌ی تصاویر

اگر صرفا قصد تغییر اندازه‌ی تصاویر را دارید (بدون چرخش آن‌ها)، متد ویژه‌ای به نام Resize برای این منظور تدارک دیده شده‌است:
var resizeTrackbar = window.CreateTrackbar(
    name: "Resize", value: 1, max: 100,
    callback: pos =>
    {
        Cv2.Resize(src, dst,
            new Size(src.Width + pos, src.Height + pos),
            interpolation: Interpolation.Cubic);
        window.Image = dst;
    });
در اینجا یک tracker دیگر به پنجره‌ی اصلی اضافه شده و توسط آن کار تعیین تغییر اندازه‌ی تصویر انجام می‌شود. نکته‌ی مهم این متد، امکان تعیین الگوریتم تغییر اندازه است که برای مثال در اینجا از Interpolation.Cubic استفاده شده‌است (احتمالا با این نام‌ها در برنامه‌های معروف کار با تصاویر، مانند فتوشاپ آشنایی دارید).

اگر می‌خواهید مقادیر پارامترهای چرخشی تصویر نیز در اینجا اعمال شوند، می‌توان به نحو ذیل عمل کرد:
var resizeTrackbar = window.CreateTrackbar(
    name: "Resize", value: 1, max: 100,
    callback: pos =>
    {
        rotateImage(angle, scale, src, dst);
        Cv2.Resize(dst, dst,
            new Size(src.Width + pos, src.Height + pos),
            interpolation: Interpolation.Cubic);
        window.Image = dst;
    });
در این کد ابتدا تصویر اصلی چرخش یافته و سپس در متد Resize از این تصویر چرخش یافته، به عنوان src استفاده می‌شود (هر دو پارامتر متد Resize به dst تنظیم شده‌اند).



مات کردن تصاویر

در OpenCV با استفاده از متدهای GaussianBlur و یا medianBlur ، می‌توان تصاویر را  مات کرد که نمونه‌ای از آن‌را در ادامه ملاحظه می‌کنید:
var blurTrackbar = window.CreateTrackbar(
   name: "Blur", value: 1, max: 100,
   callback: pos =>
   {
       if (pos % 2 == 0) pos++;
 
       rotateImage(angle, scale, src, dst);
       Cv2.GaussianBlur(dst, dst, new Size(pos, pos), sigmaX: 0);
       window.Image = dst;
   });
در اینجا ابتدا تصویر اصلی به متد چرخش تصویر ارسال شده و نتیجه‌ی آن در متد GaussianBlur استفاده خواهد شد. اندازه‌ی مشخص شده‌ی در این متد باید توسط اعداد فرد تعیین گردد. پارامتر sigmaX به معنای standard deviation در جهت x است و اگر صفر تعیین شود، برای محاسبه‌ی آن از پارامتر اندازه‌ی تعیین شده کمک گرفته خواهد شد.



کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید.
مسیرراه‌ها
ASP.NET MVC
              مطالب
              مسیریابی در Angular - قسمت هفتم - بهبودهای بصری
              در این قسمت ویژگی‌های بصری را مانند مشخص سازی مسیر انتخاب شده، در منوی سایت و همچنین نمایش «لطفا منتظر بمانید» را در حین نمایش قسمت‌هایی که با تاخیر از سرور دریافت می‌شوند، پیاده سازی خواهیم کرد.


              تزئین مسیر انتخاب شده در منوی سایت

              برای بهبود ظاهر برنامه نیاز است منوی سایت را به نحوی تغییر دهیم که مشخص کند، اکنون کاربر کدام گزینه را انتخاب کرده‌است. این مورد شامل سلسه مراتب مسیریابی‌ها نیز می‌شود؛ برای مثال فعالسازی حالت انتخاب شده‌ی منوی سایت، به همراه برگه‌ی انتخاب شده در یکی از Child Routes.
              برای پیاده سازی این قابلیت، دایرکتیو ویژه‌ای به نام routerLinkActive تدارک دیده شده‌است. این دایرکتیو را می‌توان به یک anchor tag و یا المان والد آن انتساب داد. مقدار آن‌را نیز می‌توان به یکی از کلاس‌های CSS برنامه مانند کلاس active تعریف شده‌ی در بوت استرپ تنظیم کرد. هر زمانیکه این مسیریابی فعال شود، مسیریاب به صورت خودکار این کلاس را با درج آن، به المان مرتبط اضافه می‌کند و برعکس.
              برای نمونه فایل src\app\product\product-edit\product-edit.component.html را گشوده و سپس تغییرات ذیل را اعمال کنید:
              <div class="wizard">
                          <a [routerLink]="['info']" routerLinkActive="active">
                              Basic Information
                          </a>
                          <a [routerLink]="['tags']" routerLinkActive="active">
                              Search Tags
                          </a>
              </div>
              در اینجا دایرکتیو‌های routerLinkActive، به هر کدام از لینک‌های تعریف شده اضافه گردیده‌اند. مقدار active در اینجا، به کلاس active بوت استرپ اشاره می‌کند. یا حتی می‌توان تعدادی کلاس جدا شده‌ی با کاما را نیز در اینجا ذکر کرد.

              یک نکته: از آنجائیکه در اینجا مقدار active یک string است و نه یک خاصیت یا عبارت متغیر، به همین جهت نیازی نیست تا این دایرکتیو را به صورت [routerLinkActive] تعریف کنیم.


              همانطور که مشاهده می‌کنید، همین دو تنظیم ساده سبب مشخص شدن برگه‌ی انتخابی شده‌اند.

              منوی بالای سایت نیز چنین تنظیماتی را نیاز دارد. برای این منظور به فایل src\app\app.component.html که دربرگیرنده‌ی منوی سایت است مراجعه کرده و تغییرات ذیل را اعمال می‌کنیم:
                  <ul class="nav navbar-nav">
                    <li routerLinkActive="active">
                      <a [routerLink]="['/home']">Home</a>
                    </li>
                    <li routerLinkActive="active">
                      <a [routerLink]="['/products']">Product List</a>
                    </li>
                    <li routerLinkActive="active">
                      <a [routerLink]="['/products', 0, 'edit']">Add Product</a>
                     </li>      
                  </ul>
              اینبار routerLinkActive به المان‌های li اعمال شده‌است؛ چون این المان‌های لیست، شیوه نامه‌ی المان‌های anchor را بازنویسی می‌کنند و اگر routerLinkActive را به لینک‌ها اعمال می‌کردیم، تغییری مشاهده نمی‌شد.


              همانطور که مشاهده می‌کنید، در این حالت انتخاب منوی نمایش لیست محصولات، سبب تزئین آن به حالت انتخاب شده نیز گردیده‌است.

              مشکل! در همین حالت که مسیر نمایش لیست محصولات انتخاب شده‌است، لینک افزودن یک محصول جدید را نیز انتخاب کنید:


              اینبار هر دو گزینه با هم انتخاب شده‌اند. علت اینجا است که این دو مسیر دارای root URL segment یکسانی هستند؛ یا همان products/ در اینجا. به همین جهت routerLinkActive هر دو را به عنوان فعال انتخاب کرده‌است. برای مدیریت میدان دید آن می‌توان از دایرکتیو دیگری به نام routerLinkActiveOptions استفاده کرد:
                    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
                      <a [routerLink]="['/products']">Product List</a>
                    </li>
              routerLinkActiveOptions را تنها به ریشه‌ی مسیر products اعمال کرده‌ایم؛ چون این مسیر است که می‌تواند با تمام مسیرهای مشتق شده‌ی از آن نیز تطابق داشته باشد. تنظیم exact: true آن سبب خواهد شد تا تطابق با مسیرهای مشتق شده‌ی از آن ندید گرفته شوند.


              اکنون کاربران بهتر می‌توانند درک کنند در کجای برنامه قرار دارند.


              افزودن آیکن خطا به برگه‌ای که دارای مشکل اعتبارسنجی است

              در ادامه می‌خواهیم اگر برگه‌ای دارای مشکلات اعتبارسنجی بود، آیکن خطایی را در کنار برچسب آن برگه نمایش دهیم. به این ترتیب مدیریت چندین برگه برای کاربران ساده‌تر خواهد شد و به سادگی می‌توانند برگه‌های مشکل دار را پیدا کنند.
              در انتهای مطلب «مسیریابی در Angular - قسمت پنجم - تعریف Child Routes» متد isValid را تعریف کردیم. این متد مسیر یک tab را دریافت کرده و اگر اعتبارسنجی آن مشکلی نداشت، مقدار true را بر می‌گرداند. از این متد جهت نمایش آیکن خطای اعتبارسنجی برگه‌ها استفاده خواهیم کرد.
                      <div class="wizard">
                          <a [routerLink]="['info']" routerLinkActive="active">
                              Basic Information
                              <span [ngClass]="{'glyphicon glyphicon-exclamation-sign': !isValid('info')}"></span>
                          </a>
                          <a [routerLink]="['tags']" routerLinkActive="active">
                              Search Tags
                              <span [ngClass]="{'glyphicon glyphicon-exclamation-sign': !isValid('tags')}"></span>
                          </a>
                      </div>
              در اینجا دو span را تعریف کرده‌ایم که با کمک دایرکتیو ngClass سبب نمایش آیکن exclamation-sign در صورت وجود یک خطای اعتبارسنجی می‌شوند. به عبارتی اگر برگه‌ای معتبر نباشد، سبب درج کلاس آن در span جاری می‌شود:



              رخ‌دادهای مسیریابی

              هر زمانیکه کاربری مسیرهای مختلف برنامه را پیمایش می‌کند، مسیریاب تعدادی رخ‌داد را نیز تولید خواهد کرد. از این رخ‌دادها جهت تحت نظر قرار دادن، عیب‌یابی و یا اجرای منطقی می‌توان استفاده کرد. این رخ‌دادها شامل موارد ذیل هستند:
              - NavigationStart، با آغاز پیمایش یک مسیر رخ می‌دهد.
              - RoutesRecognized، با تشخیص و تطابق یک مسیر، با یکی از المان‌های تعریف شده‌ی در تنظیمات مسیریابی رخ می‌دهد.
              - NavigationEnd، با پایان پیمایش یک مسیر رخ می‌دهد.
              - NavigationCancel، در صورت لغو پیمایش یک مسیریابی توسط محافظ‌های مسیرها و یا هدایت به یک جهت دیگر رخ می‌دهد.
              - NavigationError، با شکست پیمایش یک مسیر رخ می‌دهد.

              این رخ‌دادها با فعالسازی تنظیم enableTracing تنظیمات مسیریابی به true فعال می‌شوند. برای این منظور فایل src\app\app-routing.module.ts را گشوده و به نحو ذیل تغییر دهید:
              @NgModule({
                imports: [RouterModule.forRoot(routes/*, { useHash: true }*/, { enableTracing: true })],
              پس از این تغییر، اگر به developer tools مرورگر دقت کنید، یک چنین خروجی را می‌توان مشاهده کرد:


              در اینجا ترتیب اجرای رخ‌دادهای متفاوت پیمایش مسیر نمایش لیست محصولات را مشاهده می‌کنید.
              - Router به هر مسیر، یک id خود افزایش یابنده را به صورت خودکار نسبت می‌دهد. برای نمونه، این مسیر خاص، id:2 را یافته‌است. از این id می‌توان برای دسترسی به مجموعه‌ای از رخ‌دادها استفاده کرد.
              - در این خروجی، url همان آدرس اصلی مسیر است و urlAfterRedirects به معنای مسیری است که پس از تنظیم redirect در تنظیمات مسیریابی (در صورت وجود) حاصل شده‌است.
              - یکی از روش‌هایی که برای دیباگ مسیریابی‌ها می‌توان استفاده کرد، همین فعالسازی enableTracing است.


              کار با رخ‌دادهای مسیریابی با کدنویسی

              به رخ‌دادهایی که در کنسول developer tools مرورگر مشاهده کردید، با کدنویسی نیز می‌توان دسترسی یافت. برای مثال می‌توان یک تصویر چرخنده یا لطفا منتظر بمانید را در آغاز پیمایش یک مسیریابی نمایش داد و سپس در پایان پیمایش این مسیریابی، آن‌را مخفی کرد. این events نیز از نوع Observable بوده و برای کار با آن‌ها باید مشترکشان شد:
              this.router.events.subscribe((routerEvent: Event) => {
                  if (routerEvent instanceof NavigationStart) {
                    //...
                  }
              });
              شیء router به همراه خاصیت events است که با گوش فرادادن به رخ‌دادهای صادر شده‌ی توسط آن می‌توان دریافت چه نوع رخ‌دادی هم اکنون صادر شده‌است.

              در مثال جاری این سری، در «مسیریابی در Angular - قسمت چهارم - پیش واکشی اطلاعات»، سبب شدیم تا کل اطلاعات مورد نیاز یک مسیر، پیش از نمایش آن از سرور دریافت شوند تا به این صورت ابتدا یک قاب خالی نمایش داده نشده و پس از مدتی تکمیل شود. هرچند تجربه‌ی کاربری این روش بهتر از روش قبلی است، اما هنوز هم کاربر تاخیری را در ابتدا حس خواهد کرد (به اندازه‌ی زمان delay تنظیم شده)، بدون اینکه راهنمایی به او ارائه شود. در این حالت بهتر است در ابتدای کار، یک تصویر چرخنده نمایش داده شود تا کاربر متوجه شود، نیاز است اندکی منتظر بماند.
              در اینجا می‌خواهیم این تصویر چرخنده برای تمام مسیرهای برنامه فعال شود. به همین جهت گوش فرادادن به رخ‌دادها را در نقطه‌ی آغازین برنامه و یا همان src\app\app.component.ts انجام می‌دهیم:
              import { Router, Event, NavigationStart, NavigationEnd, NavigationError, NavigationCancel } from '@angular/router';
              
              import { AuthService } from './user/auth.service';
              import { Component } from '@angular/core';
              
              
              @Component({
                selector: 'app-root',
                templateUrl: './app.component.html',
                styleUrls: ['./app.component.css']
              })
              export class AppComponent {
                pageTitle: string = 'Routing Lab';
              
                loading: boolean = true;
              
                constructor(private authService: AuthService,
                  private router: Router) {
                  router.events.subscribe((routerEvent: Event) => {
                    this.checkRouterEvent(routerEvent);
                  });
                }
              
                checkRouterEvent(routerEvent: Event): void {
                  if (routerEvent instanceof NavigationStart) {
                    this.loading = true;
                  }
              
                  if (routerEvent instanceof NavigationEnd ||
                    routerEvent instanceof NavigationCancel ||
                    routerEvent instanceof NavigationError) {
                    this.loading = false;
                  }
                }
              
                logOut(): void {
                  this.authService.logout();
                  this.router.navigateByUrl('/welcome');
                }
              }
              کدهای کامل AppComponent را جهت گوش فرادادن به رخ‌دادهای شروع و یا خاتمه/لغو/شکست پیمایش یک مسیریابی، در اینجا مشاهده می‌کنید.
              - ابتدا وابستگی‌های لازم آن import شده‌اند.
              - سپس می‌خواهیم خاصیت عمومی loading را در شروع به پیمایش یک مسیر، به true تنظیم کنیم و اگر این پیمایش به هر نحوی خاتمه یافت، آن‌را false خواهیم کرد.

              اکنون برای استفاده‌ی از این خاصیت عمومی و نمایش تصویر چرخنده، نیاز است قالب src\app\app.component.html را ویرایش کنیم:
              <span class="glyphicon glyphicon-refresh glyphicon-spin spinner" *ngIf="loading"></span>
              با افزودن span فوق به ابتدای فایل app.component.html به تغییرات خاصیت loading واکنش نشان خواهیم داد. کلاس‌های CSS ایی را که در اینجا اضافه شده‌اند، به فایل src\styles.css اضافه می‌کنیم:
              /* Spinner */
              .spinner {
                font-size:300%;
                position:absolute;
                top: 50%;
                left: 50%;
                z-index:10
              }
              
              .glyphicon-spin {
                  -webkit-animation: spin 1000ms infinite linear;
                  animation: spin 1000ms infinite linear;
              }
              @-webkit-keyframes spin {
                  0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                  }
                  100% {
                      -webkit-transform: rotate(359deg);
                      transform: rotate(359deg);
                  }
              }
              @keyframes spin {
                  0% {
                      -webkit-transform: rotate(0deg);
                      transform: rotate(0deg);
                  }
                  100% {
                      -webkit-transform: rotate(359deg);
                      transform: rotate(359deg);
                  }
              }


              اکنون مسیرهایی که دارای route resolver هستند (مانند نمایش جزئیات/ویرایش یک محصول)، به همراه یک spinner نمایش داده خواهند شد و سایر مسیرها ابتدا نمایش داده خواهند شد و سپس اطلاعات آن‌ها از سرور دریافت می‌شود (مانند مسیر نمایش لیست محصولات که دارای route resolver نیست).
              البته می‌توان این true/false کردن loading را به ابتدا و انتهای کار یک Observable، مانند حالت نمایش لیست محصولات نیز منتقل کرد. اما در این حالت باید span مرتبط را نیز به قالب همان کامپوننت انتقال داد و دیگر سراسری نخواهد بود.


              کدهای کامل این قسمت را از اینجا می‌توانید دریافت کنید: angular-routing-lab-06.zip
              برای اجرای آن فرض بر این است که پیشتر Angular CLI را نصب کرده‌اید. سپس از طریق خط فرمان به ریشه‌ی پروژه وارد شده و دستور npm install را صادر کنید تا وابستگی‌های آن دریافت و نصب شوند. در آخر با اجرای دستور ng s -o برنامه ساخته شده و در مرورگر پیش فرض سیستم نمایش داده خواهد شد.
              مطالب
              ارتقاء به ASP.NET Core 1.0 - قسمت 2 - بررسی ساختار جدید Solution
              اگر یک پروژه‌ی خالی ASP.NET Core Web Application را شروع کنید (با طی مراحل زیر جهت ایجاد یک پروژه‌ی جدید):
               .NET Core -> ASP.NET Core Web Application (.NET Core) -> Select `Empty` Template
              تغییرات ساختاری ASP.NET Core 1.0، با نگارش‌های قبلی ASP.NET، بسیار قابل ملاحظه هستند:


              در اینجا نقش Solution همانند نگارش‌های قبلی ویژوال استودیو است: ظرفی است برای ساماندهی موارد مورد نیاز جهت تشکیل یک برنامه‌ی وب و شامل مواردی است مانند پروژه‌ها، تنظیمات آن‌ها و غیره. بنابراین هنوز در اینجا فایل sln. تشکیل می‌شود.


              نقش فایل global.json

              زمانیکه یک پروژه‌ی جدید ASP.NET Core 1.0 را آغاز می‌کنیم، ساختار پوشه‌های آن به صورت زیر هستند:


              در اینجا هنوز فایل sln. قابل مشاهده است. همچنین در اینجا فایل جدیدی به نام global.json نیز وجود دارد، با این محتوا:
              {
                "projects": [ "src", "test" ],
                "sdk": {
                  "version": "1.0.0-preview2-003121"
                }
              }
              شماره نگارش ذکر شده‌ی در اینجا را در قسمت قبل بررسی کردیم.
              خاصیت projects در اینجا به صورت یک آرایه تعریف شده‌است و بیانگر محل واقع شدن پوشه‌های اصلی پروژه‌ی جاری هستند. پوشه‌ی src یا source را در تصویر فوق مشاهده می‌کنید و محلی است که سورس‌های برنامه در آن قرار می‌گیرند. یک پوشه‌ی test نیز در اینجا ذکر شده‌است و اگر در حین ایجاد پروژه، گزینه‌ی ایجاد unit tests را هم انتخاب کرده باشید، این پوشه‌ی مخصوص نیز ایجاد خواهد شد.
              نکته‌ی مهم اینجا است، هرکدی که درون پوشه‌های ذکر شده‌ی در اینجا قرار نگیرد، قابلیت build را نخواهد داشت. به عبارتی این نسخه‌ی از ASP.NET پوشه‌ها را قسمتی از پروژه به حساب می‌آورد. در نگارش‌های قبلی ASP.NET، مداخل تعریف فایل‌های منتسب به هر پروژه، درون فایلی با پسوند csproj. قرار می‌گرفتند. معادل این فایل در اینجا اینبار پسوند xproj را دارد و اگر آن‌را با یک ادیتور متنی باز کنید، فاقد تعاریف مداخل فایل‌های پروژه است.
              در این نگارش جدید اگر فایلی را به پوشه‌ی src اضافه کنید یا حذف کنید، بلافاصله در solution explorer ظاهر و یا حذف خواهد شد.
              یک آزمایش: به صورت معمول از طریق windows explorer به پوشه‌ی src برنامه وارد شده و فایل پیش فرض Project_Readme.html را حذف کنید. سپس به solution explorer ویژوال استودیو دقت کنید. مشاهده خواهید کرد که این فایل، بلافاصله از آن حذف می‌شود. در ادامه به recycle bin ویندوز مراجعه کرده و این فایل حذف شده را restore کنید تا مجددا به پوشه‌ی src برنامه اضافه شود. اینبار نیز افزوده شدن خودکار و بلافاصله‌ی این فایل را می‌توان در solution explorer مشاهده کرد.
              بنابراین ساختار مدیریت فایل‌های این نگارش از ASP.NET در ویژوال استودیو، بسیار شبیه به ساختار مدیریت فایل‌های VSCode شده‌است که آن نیز بر اساس پوشه‌ها کار می‌کند و یک پوشه و تمام محتوای آن‌را به صورت پیش فرض به عنوان یک پروژه می‌شناسد. به همین جهت دیگر فایل csproj ایی در اینجا وجود ندارد و file system همان project system است.

              یک نکته: در اینجا مسیرهای مطلق را نیز می‌توان ذکر کرد:
                "projects": [ "src", "test", "c:\\sources\\Configuration\\src" ],
              اما در مورد هر مسیری که ذکر می‌شود، NET Core. باید بتواند یک سطح پایین‌تر از پوشه‌ی ذکر شده، فایل مهم project.json را پیدا کند؛ در غیراینصورت از آن صرفنظر خواهد شد. برای مثال برای مسیر نسبی src، مسیر src\MyProjectName\project.json را جستجو می‌کند و برای مسیر مطلق ذکر شده، این مسیر را c:\\sources\\Configuration\\src\\SomeName\\project.json


              کامپایل خودکار پروژه در ASP.NET Core 1.0

              علاوه بر تشخیص خودکار کم و زیاد شدن فایل‌های سیستمی پروژه، بدون نیاز به Add new item کردن آن‌ها در ویژوال استودیو، اگر سورس‌های برنامه را نیز تغییر دهید، فایل سورس جدیدی را اضافه کنید و یا فایل سورس موجودی را حذف کنید، کل پروژه به صورت خودکار کامپایل می‌شود و نیازی نیست این‌کار را به صورت دستی انجام دهید.
              یک آزمایش: برنامه را از طریق منوی debug و گزینه‌ی start without debugging اجرا کنید. اگر برنامه را در حالت معمول debug->start debugging اجرا کنید، حالت کامپایل خودکار را مشاهده نخواهید کرد. در اینجا (پس از start without debugging) یک چنین خروجی را مشاهده خواهید کرد:


              این خروجی حاصل اجرای کدهای درون فایل Startup.cs برنامه است:
               app.Run(async (context) =>
              {
                 await context.Response.WriteAsync("Hello World!");
              });
              اکنون در همین حال که برنامه در حال اجرا است و هنوز IIS Express خاتمه نیافته است، از طریق windows explorer، به پوشه‌ی src برنامه وارد شده و فایل Startup.cs را با notepad باز کنید. هدف این است که این فایل را در خارج از ویژوال استودیو ویرایش کنیم. اینبار سطر await دار را در notepad به نحو ذیل ویرایش کنید:
               await context.Response.WriteAsync("Hello DNT!");
              پس از آن اگر مرورگر را refresh کنید، بلافاصله خروجی جدید فوق را مشاهده خواهید کرد که بیانگر کامپایل خودکار پروژه در صورت تغییر فایل‌های آن است.
              این مساله قابلیت استفاده‌ی از ASP.NET Core را در سایر ادیتورهای موجود، مانند VSCode سهولت می‌بخشد.


              نقش فایل project.json

              فایل جدید project.json مهم‌ترین فایل تنظیمات یک پروژه‌ی ASP.NET Core است و مهم‌ترین قسمت آن، قسمت وابستگی‌های آن است:
              "dependencies": {
                "Microsoft.NETCore.App": {
                  "version": "1.0.0",
                  "type": "platform"
                },
                "Microsoft.AspNetCore.Diagnostics": "1.0.0",
                "Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
                "Microsoft.AspNetCore.Server.Kestrel": "1.0.0",
                "Microsoft.Extensions.Logging.Console": "1.0.0"
              },
              همانطور که در قسمت قبل نیز عنوان شد، در این نگارش از دات نت، تمام وابستگی‌های پروژه از طریق نیوگت تامین می‌شوند و دیگر خبری از یک دات نت «بزرگ» که شامل تمام اجزای این مجموعه‌است نیست. این مساله توزیع برنامه را ساده‌تر کرده و همچنین امکان به روز رسانی سریع‌تر این اجزا را توسط تیم‌های مرتبط فراهم می‌کند؛ بدون اینکه نیازی باشد تا منتظر یک توزیع «بزرگ» دیگر ماند.
              در نگارش‌های قبلی ASP.NET، فایلی XML ایی به نام packages.config حاوی تعاریف مداخل بسته‌های نیوگت برنامه بود. این فایل در اینجا جزئی از محتوای فایل project.json در قسمت dependencies آن است.
              با قسمت وابستگی‌های این فایل، به دو طریق می‌توان کار کرد:
              الف) ویرایش مستقیم این فایل که به همراه intellisense نیز هست. با افزودن مداخل جدید به این فایل و ذخیره کردن آن، بلافاصله کار restore و دریافت و نصب آن‌ها آغاز می‌شود:


              ب) از طریق NuGet package manager
              روش دیگر کار با وابستگی‌ها، کلیک راست بر روی گره references و انتخاب گزینه‌ی manage nuget packages است:


              برای نمونه جهت نصب ASP.NET MVC 6 این مراحل باید طی شوند:


              ابتدا برگه‌ی browse را انتخاب کنید و سپس تیک مربوط به include prerelease را نیز انتخاب نمائید.
              البته بسته‌ی اصلی MVC در اینجا Microsoft.AspNetCore.Mvc نام دارد و نه MVC6.

              اینبار بسته‌هایی که restore می‌شوند، در مسیر اشتراکی C:\Users\user_name\.nuget\packages ذخیره خواهند شد.


              یک نکته‌ی مهم:
              قرار هست در نگارش‌های پس از RTM، فایل‌های project.json و xproj را جهت سازگاری با MSBuild، اندکی تغییر دهند (که این تغییرات به صورت خودکار توسط VS.NET انجام می‌شود). اطلاعات بیشتر


              انتخاب فریم ورک‌های مختلف در فایل project.json

              در قسمت قبل عنوان شد که ASP.NET Core را می‌توان هم برفراز NET Core. چندسکویی اجرا کرد و هم NET 4.6. مختص به ویندوز. این انتخاب‌ها در قسمت frameworks فایل project.json انجام می‌شوند:
              "frameworks": {
                "netcoreapp1.0": {
                  "imports": [
                    "dotnet5.6",
                    "portable-net45+win8"
                  ]
                }
              },
              در اینجا، netcoreapp1.0 به معنای برنامه‌‌ای است که برفراز NET Core. اجرا می‌شود. نام پیشین آن dnxcore50 بود (اگر مقالات قدیمی‌تر پیش از RTM را مطالعه کنید).
              در اینجا اگر علاقمند بودید که از دات نت کامل مخصوص ویندوز نیز استفاده کنید، می‌توانید آن‌را در لیست فریم ورک‌ها اضافه نمائید (در این مثال، دات نت کامل 4.5.2 نیز ذکر شده‌است):
               "frameworks": {
                  "netcoreapp1.0": {
                  },
                  "net452": {
                  }
                }
              لیست کامل این اسامی را در مستندات NET Starndard می‌توانید مطالعه کنید و خلاصه‌ی آن به این صورت است:
              - “netcoreapp1.0” برای معرفی و استفاده‌ی از NET Core 1.0. بکار می‌رود.
              - جهت معرفی فریم ورک‌های کامل و ویندوزی دات نت، اسامی “net45”, “net451”, “net452”, “net46”, “net461” مجاز هستند.
              -  “portable-net45+win8” برای معرفی پروفایل‌های PCL یا portable class libraries بکار می‌رود.
              - “dotnet5.6”, “dnxcore50” برای معرفی نگارش‌های پیش نمایش NET Core.، پیش از ارائه‌ی نگارش RTM استفاده می‌شوند.
              - “netstandard1.2”, “netstandard1.5” کار معرفی برنامه‌های NET Standard Platform. را انجام می‌دهند.

              بر این مبنا، dotnet5.6 ذکر شده‌ی در قسمت تنظیمات نگارش RTM، به این معنا است که قادر به استفاده‌ی از بسته‌های نیوگت و کتابخانه‌های تولید شده‌ی با نگارش‌های RC نیز خواهید بود (هرچند برنامه از netcoreapp1.0 استفاده می‌کند).

              یک مثال: قسمت فریم ورک‌های فایل project.json را به نحو ذیل جهت معرفی دات نت 4.6.1 تغییر دهید:
              "frameworks": {
                "netcoreapp1.0": {
                    "imports": [
                        "dotnet5.6",
                        "portable-net45+win8"
                    ]
                },
                "net461": {
                    "imports": [
                        "portable-net45+win8"
                    ],
                    "dependencies": {
                    }
                }
              },
              لیست وابستگی‌های خاص این فریم ورک در خاصیت dependencies آن قابل ذکر است.
              در این حالت پس از ذخیره‌ی فایل و شروع خودکار بازیابی وابستگی‌ها، با پیام خطای Package Microsoft.NETCore.App 1.0.0 is not compatible with net461 متوقف خواهید شد.
              برای رفع این مشکل باید وابستگی Microsoft.NETCore.App را حذف کنید، چون با net461 سازگاری ندارد
               "dependencies": {
               //"Microsoft.NETCore.App": {
               //  "version": "1.0.0",
               //  "type": "platform"
               //},

              فریم ورک دوم استفاده شده نیز در اینجا قابل مشاهده است.


              فایل project.lock.json چیست؟


              ذیل فایل project.json، فایل دیگری به نام project.lock.json نیز وجود دارد. اگر به محتوای آن دقت کنید، این فایل حاوی لیست دقیق بسته‌های نیوگت مورد استفاده‌ی توسط برنامه است و الزاما با آن‌چیزی که در فایل project.json قید شده، یکی نیست. از این جهت که در فایل project.json، قید می‌شود netcoreapp1.0؛ ولی این netcoreapp1.0 دقیقا شامل چه بسته‌هایی است؟ لیست کامل آن‌ها را در این فایل می‌توانید مشاهده کنید.
              در ابتدای این فایل یک خاصیت locked نیز وجود دارد که مقدار پیش فرض آن false است. اگر به true تنظیم شود، در حین restore وابستگی‌های برنامه، تنها از نگارش‌های ذکر شده‌ی در این فایل استفاده می‌شود. از این جهت که در فایل project.json می‌توان شماره نگارش‌ها را با * نیز مشخص کرد؛ مثلا *.1.0.0


              پوشه‌ی جدید wwwroot و گره dependencies

              یکی از پوشه‌های جدیدی که در ساختار پروژه‌ی ASP.NET Core معرفی شده‌است، wwwroot نام دارد:


              از دیدگاه هاستینگ برنامه، این پوشه، پوشه‌ای است که در معرض دید عموم قرار می‌گیرد (وب روت). برای مثال فایل‌های ایستای اسکریپت، CSS، تصاویر و غیره باید در این پوشه قرار گیرند تا توسط دنیای خارج قابل دسترسی و استفاده شوند. بنابراین سورس کدهای برنامه خارج از این پوشه قرار می‌گیرند.
              گره dependencies که ذیل پوشه‌ی wwwroot قرار گرفته‌است، جهت مدیریت این وابستگی‌های سمت کلاینت برنامه است. در اینجا می‌توان از NPM و یا Bower برای دریافت و به روز رسانی وابستگی‌های اسکریپتی و شیوه‌نامه‌های برنامه کمک گرفت (علاوه بر نیوگت که بهتر است صرفا جهت دریافت وابستگی‌های دات نتی استفاده شود).
              یک مثال: فایل جدیدی را به نام bower.json به پروژه‌ی جاری با این محتوا اضافه کنید:
              {
                "name": "asp.net",
                "private": true,
                "dependencies": {
                  "bootstrap": "3.3.6",
                  "jquery": "2.2.0",
                  "jquery-validation": "1.14.0",
                  "jquery-validation-unobtrusive": "3.2.6"
                }
              }
              این نام‌ها استاندارد هستند. برای مثال اگر قصد استفاده‌ی از npm مربوط به node.js را داشته باشید، نام این فایل packag.json است (با ساختار خاص خودش) و هر دوی این‌ها را نیز می‌توانید با هم اضافه کنید و از این لحاظ محدودیتی وجود ندارد.
              پس از اضافه شدن فایل bower.json، بلافاصله کار restore بسته‌ها از اینترنت شروع می‌شود:


              و یا با کلیک راست بر روی گره dependencies، گزینه‌ی restore packages نیز وجود دارد.
              فایل‌های نهایی دریافت شده را در پوشه‌ی bower_components خارج از wwwroot می‌توانید مشاهده کنید.

              در مورد نحوه‌ی توزیع و دسترسی به فایل‌های استاتیک یک برنامه‌ی ASP.NET Core 1.0، نکات خاصی وجود دارند که در قسمت‌های بعد، بررسی خواهند شد.

              یک نکته: اگر خواستید نام پوشه‌ی wwwroot را تغییر دهید، فایل جدیدی را به نام hosting.json با این محتوا به پروژه اضافه کنید:
              {
                  "webroot":"AppWebRoot"
              }
              در اینجا AppWebRoot نام دلخواه پوشه‌ی جدیدی است که نیاز است به ریشه‌ی پروژه اضافه نمائید تا بجای wwwroot پیش فرض استفاده شود.


              نقطه‌ی آغازین برنامه کجاست؟

              اگر به فایل project.json دقت کنید، چنین تنظیمی در آن موجود است:
              "buildOptions": {
                "emitEntryPoint": true,
                "preserveCompilationContext": true
              },
              true بودن مقدار تولید entry point به استفاده‌ی از فایلی به نام Program.cs بر می‌گردد؛ با این محتوا:
              public static void Main(string[] args)
              {
                  var host = new WebHostBuilder()
                      .UseKestrel()
                      .UseContentRoot(Directory.GetCurrentDirectory())
                      .UseIISIntegration()
                      .UseStartup<Startup>()
                      .Build();
               
                  host.Run();
              }
              به این ترتیب، یک برنامه‌ی ASP.NET Core، دقیقا همانند سایر برنامه‌های NET Core. رفتار می‌کند و در اساس یک برنامه‌ی کنسول است.
               var outputKind = compilerOptions.EmitEntryPoint.GetValueOrDefault() ?
              OutputKind.ConsoleApplication : OutputKind.DynamicallyLinkedLibrary;
              این چند سطر، قسمتی از سورس کد ASP.NET Core 1.0 هستند. به این معنا که اگر مقدار خاصیت emitEntryPoint مساوی true بود، با این برنامه به شکل یک برنامه‌ی کنسول رفتار کن و در غیر اینصورت یک Dynamically Linked Library خواهد بود.
              در فایل Program.cs تنظیماتی را مشاهده می‌کنید، در مورد راه اندازی Kestler که وب سرور بسیار سریع و چندسکویی کار با برنامه‌های ASP.NET Core 1.0 است و قسمت مهم دیگر آن به استفاده‌ی از کلاس Startup بر می‌گردد (()<UseStartup<Startup). این کلاس را در فایل جدید Startup.cs می‌توانید ملاحظه کنید که کار تنظیمات آغازین برنامه را انجام می‌دهد. اگر پیشتر با OWIN، در نگارش‌های قبلی ASP.NET کار کرده باشید، قسمتی از این فایل برای شما آشنا است:
              public class Startup
              {
                  public void ConfigureServices(IServiceCollection services)
                  {
                  }
              
                  public void Configure(IApplicationBuilder app)
                  {
                      app.Run(async (context) =>
                      {
                          await context.Response.WriteAsync("Hello World!");
                      });
                  }
              }
              در اینجا امکان دسترسی به تنظیمات برنامه، معرفی سرویس‌ها، middleware‌ها و غیره وجود دارند که هرکدام، در قسمت‌های آتی به تفصیل بررسی خواهند شد.


              نقش فایل launchsetting.json


              محتویات پیش فرض این فایل برای قالب empty پروژه‌های ASP.NET Core 1.0 به صورت ذیل است:
              {
                "iisSettings": {
                  "windowsAuthentication": false,
                  "anonymousAuthentication": true,
                  "iisExpress": {
                    "applicationUrl": "http://localhost:7742/",
                    "sslPort": 0
                  }
                },
                "profiles": {
                  "IIS Express": {
                    "commandName": "IISExpress",
                    "launchBrowser": true,
                    "environmentVariables": {
                      "ASPNETCORE_ENVIRONMENT": "Development"
                    }
                  },
                  "Core1RtmEmptyTest": {
                    "commandName": "Project",
                    "launchBrowser": true,
                    "launchUrl": "http://localhost:5000",
                    "environmentVariables": {
                      "ASPNETCORE_ENVIRONMENT": "Development"
                    }
                  }
                }
              }
              همانطور که مشاهده می‌کنید، در اینجا تنظیمات IIS Express قابل تغییر هستند. برای مثال port پیش فرض برنامه 7742 تنظیم شده‌است.
              پروفایل‌هایی که در اینجا ذکر شده‌اند، در تنظیمات پروژه نیز قابل مشاهده هستند: (کلیک راست بر روی پروژه و مشاهده‌ی properties آن و یا دوبار کلیک بر روی گره properties)


              به علاوه امکان انتخاب این پروفایل‌ها در زمان آغاز برنامه نیز وجود دارند:


              نکته‌ی مهم تمام این موارد به قسمت environment variable قابل مشاهده‌ی در تصاویر فوق بر می‌گردد. این متغیر محیطی می‌تواند سه مقدار Development ، Staging و Production را داشته باشد و بر اساس این متغیر و مقدار آن، می‌توان پروفایل جدیدی را تشکیل داد. زمانیکه برنامه بر اساس پروفایل خاصی بارگذاری می‌شود، اینکه چه متغیر محیطی انتخاب شده‌است، در کلاس Startup قابل استخراج و بررسی بوده و بر این اساس می‌توان اقدامات خاصی را انجام داد. برای مثال تنظیمات خاصی را بارگذاری کرد و یا صفحات ویژه‌ای را فعال و غیرفعال کرد (این موارد را در قسمت‌های بعدی مرور می‌کنیم).
              همچنین در اینجا به ازای هر پروفایل مختلف می‌توان Url آغازین یا launch url و پورت آن‌را مجزا درنظر گرفت و یا از وب سرور دیگری استفاده کرد.
              نظرات مطالب
              توزیع پروژه‌های ASP.NET Core 1.1 بدون ارائه فایل‌های View آن
              ارتقاء به ASP.NET Core 2.1: امکان کامپایل فایل‌های Razor در پروژه‌های Class library (یا پشتیبانی از طراحی افزونه‌پذیر به صورت توکار)


              در نگارش 2.1 می‌توان فایل‌های razor (هم صفحات Razor و هم Viewهای Razor) را به همراه کنترلرها و مدل‌های آن‌ها داخل class libraries مجزا قرار داد و استفاده کرد. استفاده کننده فقط کافی است ارجاعی را به این کتابخانه‌ها اضافه کند تا امکانات آن‌ها قابل استفاده شوند.
              فعالسازی این قابلیت در یک class library نیاز به تغییرات ذیل را در یک فایل csproj دارد (مشخص کردن sdk، تعیین کامپایل شدن viewها و صفحاتی که باید الحاق شوند):
              <Project Sdk="Microsoft.NET.Sdk">
              <PropertyGroup>
                  <TargetFramework>netstandard2.0</TargetFramework>
                  <ResolvedRazorCompileToolset>RazorSdk</ResolvedRazorCompileToolset>
                  <RazorCompileOnBuild>true</RazorCompileOnBuild>
                  <IncludeContentInPack>false</IncludeContentInPack>
                </PropertyGroup>
              <ItemGroup>
                  <Content Include="Pages\**\*.cshtml" />
                </ItemGroup>
              <ItemGroup>
                  <PackageReference Include="Microsoft.AspNetCore.Mvc" Version="2.1.0-preview1-final" />
                </ItemGroup>
              </Project>

              یک نکته‌ی تکمیلی
              اگر برنامه‌های هاست کننده‌ی این پلاگین‌ها، دقیقا در مسیرهای متناظری صفحات و یا Viewهای Razor را قرار دهد، می‌تواند این صفحات را بازنویسی کند.
              مطالب
              تفاوت ViewData و ViewBag و TempData و Session در MVC
              در MVC راه‌های متفاوتی برای ارسال اطلاعات از controller به view و در redirect‌ها وجود دارد. در این مقاله سعی شده تفاوت‌های آنها به صورت مختصر نمایش داده شود. این مقاله در حقیقت یک ترجمه آزاد از این  مقاله  است که امیدوارم خوب ترجمه شده باشد.
              ViewData:
              • ViewData یک نوع دیکشنری ویژه است که از ViewDataDictionary ارث بری کرده است.
              • برای ارسال اطلاعات از controller به view استفاده می‌شود.
              • مدت زمان اعتبار مقادیر آن تنها در request جاری است.
              • اگر redirect بین صفحات رخ دهد، مقدار آن null خواهد شد.
              • به دلایل امنیتی باید قبل از استفاده، null بودن آن تست شود.
              • برای بهره برداری باید cast صورت پذیرد.

              ViewBag:
              • یک نوع dynamic است (این نوع در c# 4 معرفی شده است).
              • مانند ViewData برای ارسال اطلاعات از کنترلر به view استفاده می‌شود.
              • مدت زمان اعتبار مقادیر آن تنها در request جاری است.
              • اگر redirect بین صفحات رخ دهد، مقدار آن null خواهد شد.
              • به دلایل امنیتی باید قبل از استفاده، null بودن آن تست شود.
              • برای بهره برداری، cast نیاز نیست. بنابراین سریعتر عمل می‌کند.

              TempData:
              • نوع خاصی از دیکشنری است که از TempDataDictionary مشتق شده است.
              • مدت عمر کوتاهی دارد و برای ارسال اطلاعات بین صفحات (در redirect) قابل استفاده است.
              • وقتی view‌ها به صورت کامل اجرا شود، مقادیر آن null می‌شود.
              • به دلایل امنیتی باید قبل از استفاده، null بودن آن تست شود.
              • برای بهره برداری باید cast صورت پذیرد.

              Session:
              • برای ارسال اطلاعات بین request‌های مختلف مورد بهره برداری قرار می‌گیرد.
              • مقادیر آن null نمی‌شود. تنها پس از گذشت زمان مشخصی (session expire) مقادیر آن null می‌شود.
              • به دلایل امنیتی باید قبل از استفاده null بودن آن تست شود.
              • برای بهره برداری، باید cast صورت پذیرد.  
              مطالب
              چک لیست تهیه یک گزارش خوب

              مشخصات یک گزارش خوب عموما به شرح زیر است:

              1- باید هر سطر گزارش شماره ردیف داشته باشد. (باید امکان ارجاع به هر سطر در صورت بروز مشکل میسر باشد)
              2- باید در هر صفحه، شماره صفحه و تعداد کل صفحات ذکر شود. (اگر چاپ شد بر این اساس بتوان ارتباط بین صفحات را یافت)
              3- در هر صفحه باید تاریخ و ساعت روز تهیه گزارش حتما ذکر شود. (بعدا جهت رفع اختلافات لازم می‌شود. مثلا می‌گویند این عدد اشتباه است. اما واقعا این عدد در زمان تهیه گزارش درست بوده، اما الان بر اساس اطلاعات جدید ... بله ... چیزی دیگری است، یا به قول آن‌ها اشتباه است)
              4- در پایان هر صفحه، یک سری از ستون‌های عددی باید جمع کل داشته باشد.
              5- در ابتدای هر صفحه باید "نقل از صفحه قبل" یا همان سطر جمع کل صفحه قبل ذکر شود.
              6- هدر گزارش باید در تمام صفحات تکرار شود. (باید مشخص باشد این صفحه گزارش که الان به دست من رسیده متعلق به کجاست، عنوانش چیست حداقل؟)
              7- سر ستون‌ها هم باید در هر صفحه تکرار شوند. (مثلا الان صفحه 20 یک گزارش پیش روی شما است. باید بدانید معنای این ستون سوم ظاهر شده در گزارش چیست)
              8- تمام اعداد موجود در گزارش باید جداکننده سه رقمی داشته باشند. (خواندن 4446327531 ساده‌تر است یا خواندن 4,446,327,531 ؟)
              9- تمام اعداد گزارش باید فارسی نمایش داده شوند. (این مورد را می‌شود با فونت‌های دستکاری شده که احتمالا شما هم یک دوجین از آن‌ها را دارید، حل کرد. فونت‌هایی که با یک فونت ادیتور مثل برنامه معروف FontCreator ویرایش شده و بجای اعداد انگلیسی آن‌ها، همان اعداد فارسی قرار گرفته‌اند)

              مطالب
              Blazor 5x - قسمت 17 - کار با فرم‌ها - بخش 5 - آپلود تصاویر
              از زمان Blazor 5x، پشتیبانی توکار از آپلود فایل‌ها، به آن اضافه شده‌است و پیش از آن می‌بایستی از کامپوننت‌های ثالث استفاده می‌شد. در این قسمت نحوه‌ی استفاده از کامپوننت آپلود فایل‌های Blazor را بررسی می‌کنیم. همچنین یک نمونه مثال، از فرم‌های master-details را نیز با هم مرور خواهیم کرد.



              افزودن فیلد آپلود تصاویر، به فرم ثبت اطلاعات یک اتاق

              در ادامه به کامپوننت Pages\HotelRoom\HotelRoomUpsert.razor که تا این قسمت آن‌را تکمیل کرده‌ایم مراجعه کرده و فیلد جدید InputFile را ذیل قسمت ثبت توضیحات، اضافه می‌کنیم:
              <div class="form-group">
                  <InputFile OnChange="HandleImageUpload" multiple></InputFile>
              </div>
              
              @code
              {
                  private async Task HandleImageUpload(InputFileChangeEventArgs args)
                  {
              
                  }
              }
              - ذکر ویژگی multiple در اینجا سبب می‌شود تا بتوان بیش از یک فایل را هربار انتخاب و آپلود کرد.
              - در این کامپوننت، رویداد OnChange، پس از تغییر مجموعه‌ی فایل‌های اضافه شده‌ی به آن، فراخوانی می‌شود و آرگومانی از نوع InputFileChangeEventArgs را دریافت می‌کند.


              افزودن لیست فایل‌های انتخابی به HotelRoomDTO

              تا اینجا اگر به BlazorServer.Models\HotelRoomDTO.cs مراجعه کنیم (کلاسی که مدل UI فرم ثبت اطلاعات اتاق را فراهم می‌کند)، امکان افزودن لیست تصاویر انتخابی به آن وجود ندارد. به همین جهت در این کلاس، تغییر زیر را اعمال می‌کنیم:
              using System;
              using System.Collections.Generic;
              using System.ComponentModel.DataAnnotations;
              
              namespace BlazorServer.Models
              {
                  public class HotelRoomDTO
                  {
                      // ... 
                      public virtual ICollection<HotelRoomImageDTO> HotelRoomImages { get; set; } = new List<HotelRoomImageDTO>();
                  }
              }
              HotelRoomImageDTO را در قسمت قبل اضافه کردیم. متناظر با ICollection فوق، چنین خاصیتی در موجودیت HotelRoom که از نوع <ICollection<HotelRoomImage است نیز تعریف شده‌است تا بتوان به ازای هر اتاق، مشخصات تعدادی تصویر را در بانک اطلاعاتی ذخیره کرد.


              تکمیل متد رویدادگردان HandleImageUpload

              در ادامه، لیست فایل‌ها‌ی انتخاب شده‌ی توسط کاربر را دریافت کرده و آن‌ها را آپلود می‌کنیم:
              @inject IHotelRoomService HotelRoomService
              @inject NavigationManager NavigationManager
              @inject IJSRuntime JsRuntime
              @inject IFileUploadService FileUploadService
              @inject IWebHostEnvironment WebHostEnvironment
              
              @code
              {
                  // ...
              
                  private async Task HandleImageUpload(InputFileChangeEventArgs args)
                  {
                      var files = args.GetMultipleFiles(maximumFileCount: 5);
                      if (args.FileCount == 0 || files.Count == 0)
                      {
                          return;
                      }
              
                      var allowedExtensions = new List<string> { ".jpg", ".png", ".jpeg" };
                      if(!files.Any(file => allowedExtensions.Contains(Path.GetExtension(file.Name), StringComparer.OrdinalIgnoreCase)))
                      {
                          await JsRuntime.ToastrError("Please select .jpg/.jpeg/.png files only.");
                          return;
                      }
              
                      foreach (var file in files)
                      {
                          var uploadedImageUrl = await FileUploadService.UploadFileAsync(file, WebHostEnvironment.WebRootPath, "Uploads");
                          HotelRoomModel.HotelRoomImages.Add(new HotelRoomImageDTO { RoomImageUrl = uploadedImageUrl });
                      }
                  }
              }
              - در اینجا نیاز به تزریق چند سرویس جدید هست؛ مانند IFileUploadService که در قسمت قبل تکمیل کردیم و سرویس توکار IWebHostEnvironment. به همین جهت به فایل BlazorServer.App\_Imports.razor مراجعه کرده و فضاهای نام متناظر زیر را اضافه می‌کنیم:
              @using Microsoft.AspNetCore.Hosting
              @using System.Linq
              @using System.IO
              برای مثال سرویس IWebHostEnvironment که از آن برای دسترسی به WebRootPath یا محل قرارگیری پوشه‌ی wwwroot استفاده می‌کنیم، در فضای نام Microsoft.AspNetCore.Hosting قرار دارد و یا متد Path.GetExtension در فضای نام System.IO و متد الحاقی Contains با دو پارامتر استفاده شده، در فضای نام System.Linq قرار دارند.
              - متد ()args.GetMultipleFiles، امکان دسترسی به فایل‌های انتخابی توسط کاربر را میسر می‌کند که خروجی آن از نوع <IReadOnlyList<IBrowserFile است. در قسمت قبل، سرویس آپلود فایل‌هایی را که تکمیل کردیم، امکان آپلود یک IBrowserFile را به سرور میسر می‌کند. اگر متد ()GetMultipleFiles را بدون پارامتری فراخوانی کنیم، حداکثر 10 فایل را قبول می‌کند و اگر تعداد بیشتری انتخاب شده باشد، یک استثناء را صادر خواهد کرد.
              - سپس بر اساس پسوند فایل‌های دریافتی، آن‌ها را صرفا به فایل‌های تصویری محدود کرده‌ایم.
              - در آخر، لیست فایل‌های دریافتی را یکی یکی به سرور آپلود کرده و Url دسترسی به آن‌ها را به لیست HotelRoomImages اضافه می‌کنیم. فایل‌های آپلود شده در پوشه‌ی BlazorServer.App\wwwroot\Uploads قابل مشاهده هستند.


              نمایش فایل‌های انتخاب شده‌ی توسط کاربر


              در ادامه می‌خواهیم پس از آپلود فایل‌ها، آن‌ها را در ذیل کامپوننت InputFile نمایش دهیم. برای اینکار در ابتدا به فایل wwwroot\css\site.css مراجعه کرده و شیوه نامه‌ی نمایش تصاویر و عناوین آن‌ها را اضافه می‌کنیم:
              .room-image {
                display: block;
                width: 100%;
                height: 150px;
                background-size: cover !important;
                border: 3px solid green;
                position: relative;
              }
              
              .room-image-title {
                position: absolute;
                top: 0;
                right: 0;
                background-color: green;
                color: white;
                padding: 0px 6px;
                display: inline-block;
              }
              سپس بر روی لیست HotelRoomModel.HotelRoomImages که در متد HandleImageUpload آن‌را تکمیل کردیم، حلقه‌ای را ایجاد کرده و تصاویر را بر اساس RoomImageUrl آن‌ها، نمایش می‌دهیم:
              <div class="form-group">
                  <InputFile OnChange="HandleImageUpload" multiple></InputFile>
                  <div class="row">
                  @if (HotelRoomModel.HotelRoomImages.Count > 0)
                  {
                      var serial = 1;
                      foreach (var roomImage in HotelRoomModel.HotelRoomImages)
                      {
                          <div class="col-md-2 mt-3">
                              <div class="room-image" style="background: url('@roomImage.RoomImageUrl') 50% 50%; ">
                                 <span class="room-image-title">@serial</span>
                              </div>
                              <button type="button" class="btn btn-outline-danger btn-block mt-4">Delete</button>
                          </div>
                          serial++;
                      }
                  }
                  </div>
              </div>

              ذخیره سازی اطلاعات تصاویر آپلودی یک اتاق در بانک اطلاعاتی

              تا اینجا موفق شدیم تصاویر انتخابی کاربر را آپلود کرده و همچنین لیست آن‌ها را نیز نمایش دهیم. در ادامه نیاز است تا این اطلاعات را در بانک اطلاعاتی ثبت کنیم. به همین جهت ابتدا سرویس IHotelRoomImageService را که در قسمت قبل تکمیل کردیم، به کامپوننت جاری تزریق می‌کنیم و سپس با استفاده از متد CreateHotelRoomImageAsync، رکوردهای تصویر متناظر با اتاق ثبت شده را اضافه می‌کنیم:
              // ...
              @inject IHotelRoomImageService HotelRoomImageService
              
              
              @code
              {
                  // ...
              
                  private async Task AddHotelRoomImageAsync(HotelRoomDTO roomDto)
                  {
                      foreach (var imageDto in HotelRoomModel.HotelRoomImages)
                      {
                          imageDto.RoomId = roomDto.Id;
                          await HotelRoomImageService.CreateHotelRoomImageAsync(imageDto);
                      }
                  }
              }
              در حین آپلود فایل‌ها، فقط خاصیت RoomImageUrl را مقدار دهی کردیم:
              HotelRoomModel.HotelRoomImages.Add(new HotelRoomImageDTO { RoomImageUrl = uploadedImageUrl });
              در اینجا RoomId هر imageDto را نیز بر اساس Id واقعی اتاق ثبت شده‌ی جاری، تکمیل کرده و سپس آن‌را به CreateHotelRoomImageAsync ارسال می‌کنیم.

              محل فراخوانی AddHotelRoomImageAsync فوق، در متد HandleHotelRoomUpsert است که در قسمت‌های قبل تکمیل کردیم. در اینجا پس از ثبت اطلاعات اتاق در بانک اطلاعاتی است که به Id آن دسترسی پیدا می‌کنیم:
              private async Task HandleHotelRoomUpsert()
                  {
                     // ...
              
                     // Create Mode
                     var createdRoomDto = await HotelRoomService.CreateHotelRoomAsync(HotelRoomModel);
                     await AddHotelRoomImageAsync(createdRoomDto);
                     await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` created successfully.");
              
                     // ... 
                  }
              اکنون اگر اطلاعات اتاق جدیدی را تکمیل کرده و تصاویری را نیز به آن انتساب دهیم، با کلیک بر روی دکمه‌ی ثبت، ابتدا اطلاعات این اتاق در بانک اطلاعاتی ثبت شده و Id آن به‌دست می‌آید، سپس رکوردهای تصویر آن جداگانه ذخیره خواهند شد.

              یک نکته: در انتهای بحث خواهیم دید که اینکار غیرضروری است و با وجود رابطه‌ی one-to-many تعریف شده‌ی توسط EF-Core، اگر لیست HotelRoomImages موجودیت اتاق تعریف شده و در حال ثبت نیز مقدار دهی شده باشد، به صورت خودکار جزئی از این رابطه و تنها در یک رفت و برگشت، ثبت می‌شود. یعنی همان متد CreateHotelRoomAsync، قابلیت ثبت خودکار اطلاعات خاصیت HotelRoomImages موجودیت اتاق را نیز دارا است.


              نمایش تصاویر یک اتاق، در حالت ویرایش رکورد آن

              تا اینجا فقط حالت ثبت یک رکورد جدید را پوشش دادیم. در این حالت اگر به لیست اتاق‌های ثبت شده مراجعه کرده و بر روی دکمه‌ی edit یکی از آن‌ها کلیک کنیم، به صفحه‌ی ویرایش رکورد منتقل خواهیم شد؛ اما این صفحه، فاقد اطلاعات تصاویر منتسب به آن رکورد است.
              علت اینجا است که در حین ویرایش اطلاعات، در متد OnInitializedAsync، هرچند اطلاعات یک اتاق را از بانک اطلاعاتی دریافت کرده و آن‌را تبدیل به Dto آن می‌کنیم که سبب نمایش جزئیات هر خاصیت در فیلد متصل به آن در فرم جاری می‌شود:
                  protected override async Task OnInitializedAsync()
                  {
                      if (Id.HasValue)
                      {
                          // Update Mode
                          Title = "Update";
                          HotelRoomModel = await HotelRoomService.GetHotelRoomAsync(Id.Value);
                      }
                      // ...
                  }
              اما چون یک رابطه‌ی one-to-many بین اتاق و تصاویر آن برقرار است، نیاز است این رابطه را از طریق eager-loading و فراخوانی متد Include، واکشی کنیم تا اینبار زمانیکه GetHotelRoomAsync فراخوانی می‌شود، به همراه اطلاعات navigation property لیست تصاویر اتاق (HotelRoomImages) نیز باشد.
              بنابراین به فایل BlazorServer\BlazorServer.Services\HotelRoomService.cs مراجعه کرده و تغییرات زیر را اعمال می‌کنیم:
              namespace BlazorServer.Services
              {
                  public class HotelRoomService : IHotelRoomService
                  {
                      // ...
               
                      public IAsyncEnumerable<HotelRoomDTO> GetAllHotelRoomsAsync()
                      {
                          return _dbContext.HotelRooms
                                      .Include(x => x.HotelRoomImages)
                                      .ProjectTo<HotelRoomDTO>(_mapperConfiguration)
                                      .AsAsyncEnumerable();
                      }
              
                      public Task<HotelRoomDTO> GetHotelRoomAsync(int roomId)
                      {
                          return _dbContext.HotelRooms
                                          .Include(x => x.HotelRoomImages)
                                          .ProjectTo<HotelRoomDTO>(_mapperConfiguration)
                                          .FirstOrDefaultAsync(x => x.Id == roomId);
                      }
                  }
              }
              در اینجا تنها تغییری که صورت گرفته، استفاده از متد Include(x => x.HotelRoomImages) است؛ تا هنگامیکه اطلاعات یک اتاق را واکشی می‌کنیم، به صورت خودکار اطلاعات تصاویر مرتبط به آن نیز واکشی گردد و سپس توسط AutoMapper، به Dto آن انتساب داده شود (یعنی انتساب HotelRoomImages موجودیت اتاق، به همین خاصیت در DTO آن). این انتساب، سبب به روز رسانی خودکار UI نیز می‌شود. یعنی برای نمایش تصاویر مرتبط با یک اتاق، همان کدهای قبلی که پیشتر داشتیم، هنوز هم کار می‌کنند.


              افزودن تصاویر جدید، در حین ویرایش یک رکورد

              پس از نمایش لیست تصاویر منتسب به یک اتاق در حال ویرایش، اکنون می‌خواهیم در همین حالت اگر کاربر تصویر جدیدی را انتخاب کرد، این تصویر را نیز به لیست تصاویر ثبت شده‌ی در بانک اطلاعاتی اضافه کنیم. برای اینکار نیز به متد HandleHotelRoomUpsert مراجعه کرده و از متد AddHotelRoomImageAsync در قسمت به روز رسانی آن استفاده می‌کنیم:
              private async Task HandleHotelRoomUpsert()
              {
                 //...
              
                 // Update Mode
                 var updatedRoomDto = await HotelRoomService.UpdateHotelRoomAsync(HotelRoomModel.Id, HotelRoomModel);
                 await AddHotelRoomImageAsync(updatedRoomDto);
                 await JsRuntime.ToastrSuccess($"The `{HotelRoomModel.Name}` updated successfully.");
              
                 //...
              }
              مشکل! اگر از این روش استفاده کنیم، هربار به روز رسانی اطلاعات یک جدول، به همراه ثبت رکوردهای تکراری نمایش داده شده‌ی در حالت ویرایش هم خواهند بود. برای مثال فرض کنید سه تصویر را به یک اتاق انتساب داده‌اید. در حالت ویرایش، ابتدا این سه تصویر نمایش داده می‌شوند. بنابراین در لیست HotelRoomModel.HotelRoomImages وجود خواهند داشت. اکنون کاربر دو تصویر جدید دیگر را هم به این لیست اضافه می‌کند. در زمان ثبت، در متد AddHotelRoomImageAsync، بررسی نمی‌کنیم که این تصویر اضافه شده، جدید است یا خیر  و یا همان سه تصویر ابتدای کار نمایش فرم در حالت ویرایش هستند. به همین جهت رکوردها، تکراری ثبت می‌شوند.
              برای رفع این مشکل می‌توان در متد AddHotelRoomImageAsync، جدید بودن یک تصویر را بر اساس RoomId آن بررسی کرد. اگر این RoomId مساوی صفر بود، یعنی تازه به لیست اضافه شده‌است و حاصل بارگذاری اولیه‌ی فرم ویرایش اطلاعات نیست:
                  private async Task AddHotelRoomImageAsync(HotelRoomDTO roomDto)
                  {
                      foreach (var imageDto in HotelRoomModel.HotelRoomImages.Where(x => x.RoomId == 0))
                      {
                          imageDto.RoomId = roomDto.Id;
                          await HotelRoomImageService.CreateHotelRoomImageAsync(imageDto);
                      }
                  }
              در قسمت بعد، کدهای حذف اطلاعات اتاق‌ها و تصاویر مرتبط با هر کدام را نیز تکمیل خواهیم کرد.


              یک نکته: متد AddHotelRoomImageAsync اضافی است!

              چون از AutoMapper استفاده می‌کنیم، در ابتدای متد ثبت یک اتاق، کار نگاشت DTO، به موجودیت متناظر با آن انجام می‌شود:
              public async Task<HotelRoomDTO> CreateHotelRoomAsync(HotelRoomDTO hotelRoomDTO)
              {
                 var hotelRoom = _mapper.Map<HotelRoom>(hotelRoomDTO);
              یعنی در اینجا چون خاصیت مجموعه‌ای HotelRoomImages موجود در HotelRoomDTO با نمونه‌ی مشابه آن در HotelRoom هم نام است، به صورت خودکار توسط AutoMapper به آن انتساب داده می‌شود و چون رابطه‌ی one-to-many در EF-Core تنظیم شده، همینقدر که hotelRoom حاصل، به همراه HotelRoomImages از پیش مقدار مقدار دهی شده‌است، به صورت خودکار آن‌ها را جزئی از اطلاعات همین اتاق ثبت می‌کند.
              مقدار دهی RoomId یک تصویر، در اینجا غیرضروری است؛ چون RoomId و Room، به عنوان کلید خارجی این رابطه تعریف شده‌اند که در اینجا Room یک تصویر، دقیقا همین اتاق در حال ثبت است و EF Core در حین ثبت نهایی، آن‌را به صورت خودکار در تمام تصاویر مرتبط نیز مقدار دهی می‌کند.
              یعنی نیازی به چندین بار رفت و برگشت تعریف شده‌ی در متد AddHotelRoomImageAsync نیست و اساسا نیازی به آن نیست؛ نه برای ثبت و نه برای ویرایش اطلاعات!


              کدهای کامل این مطلب را از اینجا می‌توانید دریافت کنید: Blazor-5x-Part-17.zip
              اشتراک‌ها
              ویرایش و تغییر سایز عکس با استفاه از کلاس WebImage
              حتما در خلال نوشتن یک برنامه نیاز پیدا کردید که سایز یک عکس را تغییر دهید، بچرخانید، واترمارک بزنید و خیلی کارهای دیگر...
              خصوصا زمانی که قرار است پروژه، توسط GTmetrix بررسی شود و شما امتیاز بگیرید. حتما متوجه شدید که یکی از ملزومات داشتن یک Seo خوب، داشتن سرعت قابل قبول در بارگذاری تصاویر است و می‌دانیم که کاربران یک سایت، لزوما دیدگاه، دقت و حساسیت یک برنامه نویس را ندارند و بهترین کار این است که بطور قهری سایز تصاویر در پروژه بصورت صحیح تنظیم شود. بعنوان مثلا ممکن است یک کاربر برای داشتن یک آواتار از عکس بسیار بزرگ (PX 400*600) استفاده کند و این درحالی است که چنین اندازه ای برای یک آواتار غیرمنطقی مخرب است و صرفا باعث کاهش زمان بارگذاری سایت خواهد شد.

              راه حل :

              یکی از راه حل‌های موجود استفاده از کلاس WebImage  است که شما می‌توانید عملیات ویرایش یک عکس را خودتان مدیریت کنید. یادداشت زیر کدهای لازم برای استفاده از این کلاس می‌باشد.
              [HttpPost]
                  public ActionResult Index(HttpPostedFileBase file)
                  {
                      WebImage img = new WebImage(file.InputStream);
                      if (img.Width > 1000)
                          img.Resize(1000, 1000,false);
                      img.Save("path");
                      return View();
                  }
              در قطعه کد بالا انتخاب‌ها گوناگونی در ارسال تصویر و ویرایش داریم که شما می‌توانید بسته به نیاز خود آن را تغییر دهید. بعنوان مثال شما می‌توانید بعد از ذخیره عکس در مسیر فیزیکی سرور، آن را به راحتی ویرایش کنید. به مثال زیر توجه کنید
                      WebImage img = new WebImage("path");
                      if (img.Width > 720)}
                          img.Resize(720, 460 ,false);
                      img.Save("path");

               برای آگاهی و مطالعه بیشتر در خصوص Constuctors و Properties و Methods مربوط به کلاس WebImage می‌توانید به لینک WebImage Class in MSDN مراجعه فرمایید.
              ویرایش و تغییر سایز عکس با استفاه از کلاس WebImage