یادگیری ASP.NET Core با ساخت یک سایت کارت‌سازی 😊

سلام دوستان، امروز می‌خوام با شما در مورد یکی از فریم‌ورک‌های جذاب و قدرتمند برای ساخت نرم‌افزارهای تحت وب صحبت کنم. اسم این فریم‌ورک ASP.NET Core هست که بر پایه دات نت کور ساخته شده. دات نت کور یک پلتفرم برنامه‌نویسی چند سکویی هست که می‌تونه روی ویندوز، لینوکس و مک اجرا بشه. ASP.NET Core هم یک فریم‌ورک متن‌باز و رایگان هست که می‌تونه برای ساخت وب سایت، وب اپ و ای‌پی‌آی استفاده بشه. این فریم‌ورک خیلی ویژگی‌های خوبی داره مثل:

• عملکرد بالا و سرعت زیاد
• امنیت قوی و احراز هویت ساده
• توسعه‌پذیری و قابلیت نگهداری بالا
• پشتیبانی از معماری MVC و Razor Pages
• امکان استفاده از ابزارهای مختلف توسعه مانند Visual Studio, Visual Studio Code و Rider
• امکان ایجاد ویزارد و فرم‌های پیشرفته با استفاده از کامپوننت‌های UI مانند Telerik UI for ASP.NET Core

من خودم توی انواع شرکتها کار کردم ولی هرگز در بانک‌ها یا شرکت‌هایی که با آن‌ها ارتباط دارند مانند کارگزاری‌ها یا به‌پرداخت و غیره فعالیت نکرده‌ام. به همین دلیل تصمیم گرفتم که مهارت‌های خودم را در زمینه‌ی دات نت و ASP افزایش بدهم. من در گذشته با وب فرم و C# آشنا بودم و پروژه‌های دانشگاهی‌ام را با آن‌ها انجام می‌دادم. اما بعد از این که به سیستم‌عامل لینوکس علاقه‌مند شدم، دیگر از دات نت و ویژوال استودیو استفاده نمی‌کردم.

امروز نشستم دوباره دانت کور رو به همراه محیط توسعه نرم‌افزار Rider نصب کردم. بعد به راحتی با دستور dotnet new webapp یه پروژه در پوشه جاری ساختم و اون رو با dotnet run اجرا کردم. حالا می خوام یکی از پروژه‌هاای کوچکی که دارم رو باهاش انجام بدم که در عمل یاد بگیرمش. پروژه یه سایت ساده است که توش می‌شه با یک ویزارد کارت تبریک یا انواع کارت دعوت یا کارت پستال رو با ویزارد درست کرد. دات نت ابزار کار خوبی برای کار با تصاویر داره. این سایت تصاویر و متن‌ها رو می گیره و اون ها رو توی قالب های از قبل طراحی شده می زاره و بعد با پرینتر دیجیتال چاپ شده تحویل می گیره.

چون کار خاصی نداره اول باید بخش ورود و ثبت نامش نوشته بشه بعدش یک صفحه لندینگ و یک صفحه داشبرد که ویزارد توش هست. ویزارد این طوریه که اول نوع مشخص می شه بعد متن بعد تصاویر مورد نیاز در قالب گرفته می شه یا از موارد موجود انتخاب می شه و در آخر سفارش با پرداخت پول و ثبت آدرس تموم می شه.

چرا ویزارد؟

ویزارد یک کامپوننت UI است که محتوا را به صورت مرحله‌ای و ترتیبی نمایش می‌دهد. هر مرحله از ویزارد می‌تواند یک فرم یا هر نوع محتوای HTML دیگری باشد. نشانگر پیشرفت به کاربر نشان می‌دهد که چند مرحله تا آخرین مرحله فرآیند باقی مانده است. ویزارد یک راه خوب برای راهنمایی کاربران در انجام یک فرآیند پیچیده یا طولانی است. برای مثال می‌توانیم از ویزارد برای ایجاد یک حساب کاربری، ثبت نام در یک رویداد، ساخت یک کارت تبریک و غیره استفاده کنیم.

چگونه یک ویزارد در ASP.NET Core ایجاد کنیم؟

برای ایجاد یک ویزارد در ASP.NET Core می‌توانیم از کامپوننت Wizard از کتابخانه Telerik UI for ASP.NET Core استفاده کنیم. این کامپوننت دارای ویژگی‌های زیر است:

• امکان ایجاد ویزارد با استفاده از HtmlHelper یا TagHelper
• امکان ادغام فرم در هر مرحله از ویزارد
• امکان نمایش محتوای ثابت و یا بارگذاری محتوای غیرهمزمان
• امکان کنترل طرح‌بندی وی

بخش نمونه کد: ایجاد یک پروژه ASP.NET Core و اضافه کردن کامپوننت Wizard

در این بخش من قصد دارم که یک پروژه ASP.NET Core را با استفاده از Rider ایجاد کنم و کامپوننت Wizard را به آن اضافه کنم. این پروژه یک سایت ساده است که کاربران می‌توانند با یک ویزارد ساده کارت‌های تبریک، دعوت و پستال درست کنند و سفارش بدهند. این سایت از تکنولوژی‌های مدرن وب مانند HTML, CSS, JavaScript و Bootstrap استفاده می‌کند و با استفاده از دات نت کور و فریم‌ورک ASP.NET Core پیاده‌سازی شده است.

ایجاد یک پروژه ASP.NET Core

برای ایجاد یک پروژه ASP.NET Core با Rider ابتدا باید Rider را اجرا کنیم و از منوی File گزینه‌ی New Solution را انتخاب کنیم. در پنجره‌ی باز شده گزینه‌ی ASP.NET Core Web Application را انتخاب می‌کنیم و نام و محل پروژه را مشخص می‌کنیم. سپس گزینه‌ی Next را می‌زنیم. در پنجره‌ی بعدی گزینه‌ی Razor Pages را انتخاب می‌کنیم و نسخه‌ی دات نت کور را بر روی 5.0 تنظیم می‌کنیم. سپس گزینه‌ی Create را می‌زنیم. این کار باعث می‌شود یک پروژه ASP.NET Core با ساختار MVC و Razor Pages ایجاد شود.

پس از ایجاد پروژه می‌توانیم ساختار پروژه را در پنل Solution Explorer مشاهده کنیم. این پروژه شامل فایل‌ها و پوشه‌های زیر است:

• appsettings.json: این فایل شامل تنظیمات مربوط به پروژه مانند اتصال به دیتابیس، متغیرهای محیطی و غیره است.
• Program.cs: این فایل شامل کدی است که پروژه را اجرا می‌کند و یک شیء از کلاس WebHostBuilder را ایجاد می‌کند که مسئول مدیریت وب سرور و برنامه است.
• Startup.cs: این فایل شامل کدی است که مسئول تنظیم و پیکربندی برنامه است. در این فایل می‌توانیم سرویس‌ها و میان‌افزارهای مورد نیاز برنامه را اضافه کنیم.
• wwwroot: این پوشه شامل فایل‌های استاتیک برنامه مانند تصاویر، استایل‌ها و جاوااسکریپت‌ها است.
• Pages: این پوشه شامل فایل‌های Razor Pages برنامه است. هر فایل Razor Page شامل یک فایل cshtml و یک فایل cshtml.cs است که مسئول نمایش و منطق صفحه هستند.
• Controllers: این پوشه شامل فایل‌های کنترلر برنامه است. هر کنترلر یک کلاس است که مسئول پردازش درخواست‌های وب و ارسال پاسخ‌های مناسب است.
• Models: این پوشه شامل فایل‌های مدل برنامه است. هر مدل یک کلاس است که مسئول نگهداری و اعتبارسنجی داده‌های برنامه است.
• Views: این پوشه شامل فایل‌های نمایش برنامه است. هر نمایش یک فایل cshtml است که مسئول تولید HTML برای نمایش داده‌ها است.

اضافه کردن دکمه‌های سفارشی به ویزارد

کامپوننت Wizard از دو خصوصیت Buttons و ButtonTemplate برای اضافه کردن دکمه‌های سفارشی به هر مرحله از ویزارد استفاده می‌کند. خصوصیت Buttons یک لیست از شیء‌های WizardStepButtonBuilder را دریافت می‌کند که مشخص می‌کند که چه دکمه‌هایی برای هر مرحله نمایش داده شوند. این شیء‌ها می‌توانند از مقادیر زیر باشند:

• Next: دکمه‌ی بعدی که کاربر را به مرحله‌ی بعدی ویزارد منتقل می‌کند.
• Previous: دکمه‌ی قبلی که کاربر را به مرحله‌ی قبلی ویزارد برمی‌گرداند.
• Done: دکمه‌ی انجام که کاربر را به آخرین مرحله‌ی ویزارد می‌برد و فرآیند را تکمیل می‌کند.
• Custom: دکمه‌ی سفارشی که می‌توانیم نام، متن، آیکون، کلاس و عملکرد آن را تعیین کنیم.

خصوصیت ButtonTemplate یک تابع را دریافت می‌کند که می‌تواند HTML را برای هر دکمه برگرداند. این تابع یک شیء از کلاس WizardStepButtonModel را به عنوان پارامتر دریافت می‌کند که شامل اطلاعاتی در مورد دکمه مانند نام، متن، آیکون و غیره است.

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

<kendo-wizard name=&quotwizard&quot>
    <wizard-steps>
        <wizard-step title=&quotWelcome&quot content=&quot<h3>Welcome to the card creation wizard!</h3>Please select 'Next' to proceed.&quot buttons=&quot@(new List<Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder>() { new Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder().Custom().Name(&quotStart&quot).Text(&quotStart&quot).Icon(&quotplay&quot).Primary(true).Action(&quotstartWizard&quot) })&quot></wizard-step>
        <wizard-step title=&quotCard Type&quot content=&quot@(Html.Kendo().DropDownList().Name(&quotcardType&quot).DataTextField(&quotText&quot).DataValueField(&quotValue&quot).BindTo(new List<SelectListItem>() { new SelectListItem() { Text = &quotGreeting Card&quot, Value = &quot1&quot }, new SelectListItem() { Text = &quotInvitation Card&quot, Value = &quot2&quot }, new SelectListItem() { Text = &quotPostcard&quot, Value = &quot3&quot } }))&quot buttons=&quot@(new List<Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder>() { new Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder().Previous(), new Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder().Next() })&quot></wizard-step>
        <wizard-step title=&quotFinish&quot content=&quot<div style='text-align:center'><h3>Thank you! Click 'Done' to submit your card.</h3></div>&quot buttons=&quot@(new List<Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder>() { new Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder().Previous(), new Kendo.Mvc.UI.Fluent.WizardStepButtonBuilder().Custom().Name(&quotDone&quot).Text(&quotDone&quot).Icon(&quotcheck&quot).Primary(true).Action(&quotfinishWizard&quot) })&quot></wizard-step>
    </wizard-steps>
    <wizard-button-template>
        @<text>
            <button type=&quotbutton&quot class=&quotk-button @(item.Primary ? &quotk-primary&quot : &quot&quot) @(item.Class)&quot data-wizard-command=&quot@item.Name&quot>
                <span class=&quotk-icon k-i-@(item.Icon)&quot></span>
                @item.Text
            </button>
        </text>
    </wizard-button-template>
</kendo-wizard>

اعمال سبک‌ها و تم‌ها به ویزارد

کامپوننت Wizard از فایل‌های CSS و SASS برای اعمال سبک‌ها و تم‌ها به ویزارد استفاده می‌کند. این فایل‌ها شامل کلاس‌های CSS مختلفی هستند که می‌توانند خصوصیات مانند رنگ، فونت، حاشیه، پس‌زمینه و غیره را برای ویزارد و عناصر آن تعیین کنند. برای استفاده از این فایل‌ها باید آن‌ها را در فایل _Layout.cshtml پروژه قرار دهیم. برای مثال، اگر بخواهیم از تم پیش‌فرض کتابخانه Telerik UI for ASP.NET Core استفاده کنیم، باید این خط‌ها را در فایل _Layout.cshtml قرار دهیم:

<link rel=&quotstylesheet&quot href=&quothttps://kendo.cdn.telerik.com/2021.1.119/styles/kendo.common.min.css&quot />
<link rel=&quotstylesheet&quot href=&quothttps://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default.min.css&quot />
<link rel=&quotstylesheet&quot href=&quothttps://kendo.cdn.telerik.com/2021.1.119/styles/kendo.default.mobile.min.css&quot />

ایجاد رویداد‌ها و توابع جاوااسکریپت برای ویزارد

کامپوننت Wizard از دو خصوصیت Events و ClientEvents برای ایجاد رویداد‌ها و توابع جاوااسکریپت برای ویزارد استفاده می‌کند. خصوصیت Events یک لیست از شیء‌های WizardEventBuilder را دریافت می‌کند که مشخص می‌کند که چه رویداد‌هایی برای ویزارد ثبت شوند. این شیء‌ها می‌توانند از مقادیر زیر باشند:

• Init: رویدادی که زمانی رخ می‌دهد که ویزارد برای اولین بار ایجاد شود.
• Select: رویدادی که زمانی رخ می‌دهد که یک مرحله از ویزارد انتخاب شود.
• Change: رویدادی که زمانی رخ می‌دهد که یک مرحله از ویزارد تغییر کند.
• Done: رویدادی که زمانی رخ می‌دهد که ویزارد به آخرین مرحله برسد و فرآیند را تکمیل کند.
• Reset: رویدادی که زمانی رخ می‌دهد که ویزارد به حالت اولیه بازگردد.

خصوصیت ClientEvents یک تابع را دریافت می‌کند که می‌تواند یک شیء از کلاس WizardClientEventsBuilder را برگرداند. این شیء می‌تواند شامل توابع جاوااسکریپتی باشد که در هنگام رخ دادن رویداد‌های مربوطه اجرا شوند. این توابع می‌توانند از پارامتر‌هایی مانند e (شیء رویداد) و sender (شیء ویزارد) استفاده کنند. برای مثال، اگر بخواهیم یک تابع جاوااسکریپت را در هنگام تغییر مرحله ویزارد اجرا کنیم، می‌توانیم از کد زیر استفاده کنیم:

<kendo-wizard name=&quotwizard&quot>
    <wizard-steps>
        <!-- wizard steps -->
    </wizard-steps>
    <wizard-client-events>
        @(Html.Kendo().Script(@<text>
            function(e) {
                var wizard = e.sender;
                var currentStep = wizard.currentStep();
                console.log(&quotThe current step is: &quot + currentStep.title);
            }
        </text>).ToClientTemplate())
    </wizard-client-events>
</kendo-wizard>

این کد باعث می‌شود که هر زمان که کاربر به مرحله‌ی جدیدی از ویزارد برود، عنوان آن مرحله در کنسول نمایش داده شود.

بخش منابع: لینک‌های مفید برای یادگیری بیشتر در مورد ASP.NET Core و Telerik UI for ASP.NET Core

در این بخش من چند لینک را برای شما ارائه می‌دهم که می‌توانید از آن‌ها برای یادگیری بیشتر در مورد ASP.NET Core و Telerik UI for ASP.NET Core استفاده کنید. این لینک‌ها شامل مستندات، آموزش‌ها، نمونه‌ها و وبلاگ‌های مرتبط هستند. امیدوارم این منابع برای شما مفید باشند.

• ASP.NET Core Documentation: این لینک به شما مستندات رسمی ASP.NET Core را نشان می‌دهد که شامل مقدمه، راهنماهای شروع، مفاهیم پایه، موضوعات پیشرفته و مراجع API هستند.
• Telerik UI for ASP.NET Core Documentation: این لینک به شما مستندات رسمی Telerik UI for ASP.NET Core را نشان می‌دهد که شامل مقدمه، راهنماهای شروع، موضوعات پیشرفته، نکات و ترفندها و مراجع API هستند.
• ASP.NET Core Tutorial: این لینک به شما یک آموزش کامل و صفر تا صد ASP.NET Core را نشان می‌دهد که شامل مقدمه، معرفی MVC، ایجاد پروژه، کار با دیتابیس، اعتبارسنجی، امنیت، دیپلوی و غیره هستند.
• [Telerik UI for ASP.NET Core Demos]: این لینک به شما نمونه‌های زنده و کد منبع آن‌ها را برای بیش از 100 کامپوننت UI برای ASP.NET Core نشان می‌دهد که شامل Grid, Chart, Editor, TreeView و غیره هستند.
• [ASP.NET Core Blog]: این لینک به شما وبلاگ رسمی ASP.NET Core را نشان می‌دهد که شامل آخرین اخبار، به‌روزرسانی‌ها، نکات و ترفندها، مقالات و ویدیوهای مرتبط هستند.
• [Telerik UI for ASP.NET Core Blog]: این لینک به شما وبلاگ رسمی Telerik UI for ASP.NET Core را نشان می‌دهد که شامل آخرین اخبار، به‌روزرسانی‌ها، نکات و ترفندها، مقالات و ویدیوهای مرتبط هستند.

Views: این پوشه شامل فایل‌های نمایش برنامه است. هر نمایش یک فایل cshtml است که مسئول تولید HTML برای نمایش داده‌ها است.

Views در ASP.NET Core MVC از یک تکنولوژی به نام Razor استفاده می‌کنند. Razor یک موتور قالب‌بندی است که اجازه می‌دهد تا کد C# را درون فایل‌های HTML قرار دهیم. با استفاده از Razor می‌توانیم از متغیرها، عبارات، توابع، کلاس‌ها و غیره C# در فایل‌های HTML استفاده کنیم. Razor با استفاده از علامت @ کد C# را از HTML تمیز می‌کند. برای مثال، اگر بخواهیم یک متغیر C# را در HTML نمایش دهیم، می‌توانیم از کد زیر استفاده کنیم:

@{
    string name = &quotAli&quot
}
<h1>Hello @name</h1>

این کد باعث می‌شود که در مرورگر عبارت Hello Ali نمایش داده شود. Razor همچنین از ساختارهای کنترلی مانند if, for, foreach و غیره C# پشتیبانی می‌کند. برای مثال، اگر بخواهیم یک لیست از محصولات را در HTML نمایش دهیم، می‌توانیم از کد زیر استفاده کنیم:

@{
    var products = new List<string>() { &quotLaptop&quot, &quotMobile&quot, &quotTablet&quot };
}
<ul>
    @foreach (var product in products)
    {
        <li>@product</li>
    }
</ul>

این کد باعث می‌شود که در مرورگر یک لیست شامل نام محصولات نمایش داده شود. Razor همچنین از تعریف کامپوننت‌های UI مانند TagHelper و ViewComponent پشتیبانی می‌کند. این کامپوننت‌ها امکان ایجاد عناصر HTML سفارشی و قابل استفاده مجدد را می‌دهند. برای مثال، اگر بخواهیم یک کامپوننت برای نمایش اطلاعات کاربر ایجاد کنیم، می‌توانیم از کد زیر استفاده کنیم:

<user-info name=&quotAli&quot email=&quotali@example.com&quot />

این کد باعث می‌شود که در مرورگر یک عنصر HTML شامل نام و ایمیل کاربر نمایش داده شود. برای ایجاد این کامپوننت باید یک کلاس TagHelper و یک فایل View را تعریف کنیم. برای اطلاعات بیشتر در مورد TagHelper و ViewComponent می‌توانید به لینک‌های زیر مراجعه کنید:

• TagHelper در ASP.NET Core
• ViewComponent در ASP.NET Core

Views در ASP.NET Core MVC می‌توانند از یک فایل Layout برای ارائه یک قالب یکنواخت برای صفحات وب استفاده کنند. فایل Layout شامل عناصر مشترک رابط کاربری مانند header, footer, menu و غیره است. فایل Layout می‌تواند از یک عبارت @RenderBody() برای نمایش محتوای صفحه وب فعلی استفاده کند. برای مثال، اگر بخواهیم یک فایل Layout برای پروژه‌مان ایجاد کنیم، می‌توانیم از کد زیر استفاده کنیم:

<!DOCTYPE html>
<html>
<head>
    <meta charset=&quotutf-8&quot />
    <title>@ViewData[&quotTitle&quot]</title>
    <link rel=&quotstylesheet&quot href=&quot~/css/site.css&quot />
</head>
<body>
    <div class=&quotcontainer&quot>
        <header>
            <h1>My Website</h1>
        </header>
        <nav>
            <ul>
                <li><a href=&quot/&quot>Home</a></li>
                <li><a href=&quot/About&quot>About</a></li>
                <li><a href=&quot/Contact&quot>Contact</a></li>
            </ul>
        </nav>
        <main>
            @RenderBody()
        </main>
        <footer>
            <p>© 2021 - My Website</p>
        </footer>
    </div>
</body>
</html>

این کد باعث می‌شود که در مرورگر یک قالب یکنواخت برای صفحات وب نمایش داده شود. برای استفاده از این فایل Layout در Views باید از یک عبارت @Layout برای مشخص کردن مسیر فایل Layout استفاده کنیم. برای مثال، اگر بخواهیم یک View برای صفحه Home ایجاد کنیم، می‌توانیم از کد زیر استفاده کنیم:

@{
    ViewData[&quotTitle&quot] = &quotHome&quot
    Layout = &quot~/Views/Shared/_Layout.cshtml&quot
}
<h2>Welcome to my website!</h2>
<p>This is the home page.</p>

این کد باعث می‌شود که در مرورگر یک صفحه وب شامل عنوان، متن و قالب Layout نمایش داده شود. برای اطلاعات بیشتر در مورد Layout می‌توانید به لینک زیر مراجعه کنید:

• Layout در ASP.NET Core

Views در ASP.NET Core MVC می‌توانند از یک فایل Partial View برای ارائه یک قسمت قابل استفاده مجدد از محتوای صفحه وب استفاده کنند. فایل Partial View شامل کد HTML و Razor است که می‌تواند در یک یا چند View استفاده شود. فایل Partial View می‌تواند از یک عبارت @model برای مشخص کردن نوع مدلی که به آن پاس داده می‌شود استفاده کند. برای مثال، اگر بخواهیم یک فایل Partial View برای نمایش اطلاعات کاربر ایجاد کنیم، می‌توانیم از کد زیر استفاده کنیم:

@model

@model User
<div class=&quotuser-info&quot>
    <img src=&quot@model.PhotoUrl&quot alt=&quot@model.Name&quot />
    <h3>@model.Name</h3>
    <p>@model.Email</p>
    <p>@model.Bio</p>
</div>

این کد باعث می‌شود که در مرورگر یک عنصر HTML شامل عکس، نام، ایمیل و بیوگرافی کاربر نمایش داده شود. برای استفاده از این فایل Partial View در Views باید از یک عبارت @Html.Partial برای فراخوانی فایل Partial View استفاده کنیم. برای مثال، اگر بخواهیم این فایل Partial View را در صفحه Home نمایش دهیم، می‌توانیم از کد زیر استفاده کنیم:

@{
    ViewData[&quotTitle&quot] = &quotHome&quot
    Layout = &quot~/Views/Shared/_Layout.cshtml&quot
}
<h2>Welcome to my website!</h2>
<p>This is the home page.</p>
@Html.Partial(&quot_UserInfo&quot, Model.User)

این کد باعث می‌شود که در مرورگر یک صفحه وب شامل عنوان، متن، قالب Layout و اطلاعات کاربر نمایش داده شود. برای اطلاعات بیشتر در مورد Partial View می‌توانید به لینک زیر مراجعه کنید:

• Partial View در ASP.NET Core

امیدوارم این مقاله برای شما مفید باشه. 😊