چهارچوب کاربردی برای ساخت اپلیکیشن‌های وب بدون نیاز به جاوااسکریپت

DotVVM یک چهارچوب منبع ‎باز است که در Riganti sro توسعه یافته است. در مقايسه با سایر چهارچوب‎های مطرح، DotVVM هم‌زمان یک کتابخانه سمت کلاینت و یک کتابخانه NET. است که به ساخت اپلیکیشن‎های وب MVVM بدون نیاز به نوشتن مقدار زیادی کد جاوا اسکریپت کمک می‎کند. در اغلب موارد شما تنها نیاز به دانش C#, HTML و CSS دارید. DotVVM به‌عنوان یک افزونه رایگان برای Visual Studio 2015 و Visual Studio 2017 در دسترس است که قالب‎های پروژه و IntelliSense را اضافه می‎کند. این چهارچوب را می‎توانید از Visual Studio Marketplace یا وب‌سایت DotVVM دانلود کنید. در این مقاله به شما نشان خواهیم داد چگونه با استفاده از DotVVM یک اپلیکیشن وب چندسکویی‎ بر پایه  NET. بسازید. وقتی DotVVM را برای Visual Studio 2017 نصب می‎کنید، می‎توانید با انتخاب یکی از گزينه‎های زیر یک پروژه جدید DotVVM ایجاد کنید:

• قالب (DotVVM Web Application (.NET Core یک پروژه جدید بر پایه NET. ایجاد می‎کند. از این قالب برای ساخت یک اپلیکیشن وب چندسکویی‎ با DotVVM استفاده می‎شود.

• قالب (DotVVM Web Application (ASP.NET Core on .NET Framework یک پروژه جدید بر پایه  NET Framework 4.5. ایجاد و از کتابخانه‎های جديد ASP.NET استفاده می‎کند. این یک ترکیب رایج است، زیرا به شما امکان می‎دهد از کتابخانه‎هایی که در حال حاضر توسط NET. پشتیبانی نمی‎شوند استفاده کنید.

• قالب (DotVVM Web Application (OWIN on .NET Framework یک پروژه اپلیکیشن وب کلاسیک ایجاد می‎کند که از .NET Framework 4.5.1 و OWIN استفاده می‎کند. شما می‎توانید از این شیوه برای یکپارچه کردن DotVVM با MVC یا اپلیکیشن‎های فرم وب موجود استفاده کنید.
در این مقاله ما از اولین گزینه (شکل 1) استفاده می‎کنیم. اگر شما از Visual Studio 2015 استفاده می‎کنید، امکان پشتیبانی DotVVM از NET. را نخواهید داشت، به‌جای آن می‎توانید از قالب پروژه OWIN استفاده کنید. کدهای مورد استفاده در این مقاله نیز در هر دو نسخه کار می‎کند. (شکل 1) اگر می‎خواهید اپلیکیشن‎های DotVVM را روی لینوکس یا macOS توسعه دهید، می‎توانید قالب جدید دات نت را نصب کنید و اپلیکیشن DotVVM را از خط فرمان بسازید. وقتی کادر محاوره‎ای را تأیید کردید، یک پروژه DotVVM تولید می‎شود. شما چندین فایل مختلف در این پروژه مشاهده خواهید کرد: (شکل 2)

شکل 1

مطلب پیشنهادی

جاوا اسکریپت بی‌حد و مرز

آینده توسعه برنامه‌های کاربردی در دستان جاوااسکریپت است

• Program.cs که مدخل اصلی مورد اشاره به این پروژه است و در تمام اپلیکیشن‎های NET. موجود است. اگر شما داخل این فایل را نگاه کنید پیکربندی Kestrel، یکپارچه‌سازی با IIS، تنظیمات محتوای دایرکتوری ریشه و شروع به کار میزبان وب را مشاهده خواهید کرد.

شکل 2

• Startup.cs که شامل دو متد است و در زمان شروع اپلیکیشن فراخوانی می‎شود. متد ConfigureServices برای ثبت سرویس‎ها در آبجکت IServiceCollection استفاده می‎شود. در اینجا برای ثبت سرویس مورد نیاز DotVVM فراخوانی services.AddDotVVM را انجام می‎دهیم. متد Configure تمام میان‌افزارهای ASP.NET را پیکربندی می‎کند. برای ثبت میان‌افزار DotVVM که درخواست‎های HTTP را پردازش می‎کند، به فراخوانی <app.UseDotVVM<DotvvmStartup احتیاج داریم.
• DotvvmStartup.cs که یک کلاس شامل پیکربندی DotVVM است. می‎توانید از طریق خطوطی که در فهرست 1 مشاهده می‎کنید که مسیر پیش‌فرض را ثبت می‎کند، متد ConfigureRoutes را پیدا کنید:

config.RouteTable.Add(“Default”, “”, “Views/default.dothtml”);

فهرست 1

وقتی کاربر از صفحه اصلی بازدید می‎کند، DotVVM از صفحه Views/default.dothtml استفاده خواهد کرد. علاوه بر این، این پروژه شامل فولدرهای Views و ViewModels است. اولین فولدر شامل یک فایل به‌نام default.dothtml و دومی‎ شامل کلاس DefaultViewModel.cs است. این دو فایل با یکدیگر یک صفحه وب DotVVM را می‎سازند. DotVVM از الگوی طراحی (Model-View-ViewModel (MVVM استفاده می‎کند. View یک فایل با پسوند  .dothtml است که در اصل یک فایل HTML با چند شیوه کدنویسی است.

ViewModel یک کلاس C# است که دو هدف را دنبال می‎کند:

1. وضعیت صفحه را نگهداری می‎کند که شامل هر چیزی است که در صفحه توسط کاربر قابل تغییر باشد. اگر شما در یک صفحه از TextBox استفاده می‎کنید، باید مقدار آن را در جایی ذخیره كنيد. در DotVVM شما تنها باید یک خاصیت رشته‎ای عمومی‎ را در کلاس ViewModel تعیین و آن را به TextBox متصل کنید.

2. ViewModel تمام فرامینی را که در صفحه به آن‌ها نیاز است (مثل کلیک کردن یک دکمه) را اداره می‎کند. در DotVVM شما باید برای هر فرمان یک متد عمومی‎ مشخص کنید.

پروژه عملی: تشکیل یک فهرست کاری

برای نشان دادن اصول پایه DotVVM قصد داریم یک اپلیکیشن فهرست کاری ایجاد ‎کنیم. در این پروژه کاربر قادر خواهد بود چندین وظیفه مشخص را اضافه و آن‌ها را به‌عنوان انجام شده نشانه‌گذاری کند.
اول ما با ViewModel شروع می‎کنیم. باید یک کلاس تعریف کنیم که اطلاعات مربوط به هر وظیفه مشخص را نگهداری می‎کند. برای ساده نگه داشتن آن تنها متن هر وظیفه (برای مثال رفتن به خرید) و تاریخ انجام آن (که درباره وظایفی که هنوز انجام نشده است null خواهد بود) را ذخيره می‎کنیم. 

public class TaskData
{
  public string Text { get; set; }

  public DateTime? CompletedDate { get; set; }
}

فهرست 2

در مرحله بعد ما یک فهرست از وظایف را به کلاس DefaultViewModel اضافه می‎کنیم. 

// Stores the list of tasks
public List<TaskData> Tasks { get; set; } = new List<TaskData>();

فهرست 3

برای اینکه کاربر بتواند یک وظیفه جدید اضافه کند، باید دو چیز را به ViewModel اضافه کنیم. ما در صفحه خود یک TextBox و یک Button داریم، بنابراین باید محتوای TextBox در ViewModel ذخیره شود و همچنین باید یک متد برای فراخوانی در زمان کلیک کردن دکمه تعریف شود.

// Stores the text of a new task
public string NewTaskText { get; set; }

public void AddNewTask()
{
  Tasks.Add(new TaskData()
  {
    Text = NewTaskText
  });
  NewTaskText = string.Empty;
}

فهرست 4

مشاهده می‎کنید که متد AddNewTask یک آبجکت TaskData را به این مجموعه اضافه و خاصیت NewTaskText را تخلیه می‎کند تا کاربر بتواند یک وظیفه دیگر را اضافه کند. حالا ما View را می‎سازیم. اگر به فایل default.dothtml نگاه کنید، مشاهده خواهید کرد با دایرکتیو viewModel@ شروع شده است. این دایرکتیو به DotVVM می‎گوید کدام کلاس به‌عنوان یک ViewModel استفاده خواهد شد.

@viewModel DotvvmSample.ViewModels.DefaultViewModel, DotvvmSample

این دایرکتیو توسط عنصر <html> دنبال می‎شود. اجازه دهید کد زیر را داخل <body> اضافه کنیم. 

<h1>Task List</h1>
<div>
  <dot:TextBox Text=”{value: NewTaskText}” />
  <dot:Button Text=”Add Task” Click=”{command: AddNewTask()}” />
</div>

فهرست 5

مطلب پیشنهادی

با معرفی یک اپلیکیشن اختصاصی کسب و کار خود را توسعه دهید

۳ روش ساخت اپلیکیشن موبایل بدون نیاز به مهارت‎های فنی

شما عناصر نامفهوم <dot:TextBox> و <dot:Button> را در کد HTML مشاهده می‎کنید. این‌ها کنترل‎های سرور را فراخوانی می‎کنند. همچنین، خصوصیت Text از کنترلر TextBox را مشاهده می‎کنید که نشان‌دهنده عبارت ارتباط داده{value: NewTaskText}  و همین طور ارتباط دوطرفه بین خصوصیت کنترل و خصوصیت ViewModel است. DotVVM کنترل‎های سرور را به عناصر HTML واقعی (<input type=text> و <input type=button>) تبدیل می‎کند. به‌دلیل اینکه DotVVM از کتابخانه معروف Knockout در سمت کلاینت استفاده می‎کند و کد TextBox به چیزی شبیه به این تبدیل می‎شود:

<input type=”text” data-bind=”value: NewTaskText” />

برای عملی کردن آن، DotVVM یک Knockout ViewModel از JSON-serialized C# ViewModel ایجاد می‎کند.
در کنترل TextBox عبارت الصاقی چیزی شبیه به {value: …} است که مقدار الصاق شده به خصوصیت کنترل را به یک خصوصیت در ViewModel ارتباط می‎دهد.
به همین شکل، کنترل Button از یک الصاق فرمان استفاده می‎کند. این نوع از الصاق برای فراخوانی متدها در ViewModel استفاده می‎شود.

Click=”{command: NewTask()}”

این الصاق به یک کد جاوا اسکریپت تبدیل می‎شود که Knockout ViewModel را سریالی و آن را به سرور جایی که متد در آن اجرا شده ارسال می‎کند. نتایج و تغییرات ایجاد شده در ViewModel سپس به کلاینت بازگردانده شده و به Knockout ViewModel موجود در صفحه اعمال می‎شود.
DotVVM به شما اجازه می‎دهد خصوصیاتی را که از کلاینت به سرور و برعکس منتقل می‎شود را سفارشی‌سازی کنید. در اغلب موارد نیازی نیست تا یک ViewModel کامل ارسال شود. علاوه بر این، می‎توانید از الصاق staticCommand استفاده کنید که تنها خصوصیات مشخص را انتقال می‎دهد و می‎تواند ViewModel سمت کلاینت را با مقادیر جدید از سرور پر کند. 
برای نمایش فهرست وظایف از کنترل Repeater استفاده می‎شود. می‎توانید آن را به مجموعه‎ای از آبجکت‎ها الصاق کنید تا محتوای داخل تکرارکننده برای هر آبجکت موجود در مجموعه تکرار شود. داده‎های الصاق شده به این مجموعه در هر دو سمت کار می‎کنند؛ بنابراین، اگر شما هر آیتمی‎ را به این مجموعه اضافه یا کم کنید، صفحه بلافاصله به‎روزرسانی خواهد شد. 

<dot:Repeater DataSource=”{value: Tasks}”>

  <p class-completed=”{value: CompletedDate != null}”>
    {{value: Text}}
  </p>

</dot:Repeater>

فهرست 6

برای چاپ مستقیم متن در صفحه، می‎توانید از دو براکت ( {{value: Text}}) برای الصاق مقادیر استفاده کنید. همچنین، می‎توانید ببینید صفت تکمیل‌کننده کلاس به CompletedDate != null الصاق شده است. صفت تکمیل‌کننده کلاس با الصاق داده به DotVVM می‎گوید کلاس کامل شده CSS را در زمان درست بودن شرط عبارت به عنصر اضافه کند. در غیر این صورت، این کلاس CSS به عنصر اضافه نخواهد شد و مسلماً هر زمان مقدار این عبارت تغییر می‎کند، کلاس CSS اضافه شده به عنصر بلافاصله به‎روزرسانی خواهد شد. می‎توانید با استفاده از دستور زیر به یک عملکرد مشابه دست پيدا كنيد:

class=”{value: CompletedDate != null ? “completed” : “”}”

اما خواندن این نوع از عبارات دشوار است، به‌ویژه وقتی به ترکیب چندین کلاس CSS با شروط مختلف احتیاج دارید. حالا می‎توانید این دستور CSS را اضافه کنید:

.completed {
  text-decoration: line-through;
}

برای مشخص کردن وظایف به‌عنوان تکمیل شده، تابع زیر را در ViewModel اضافه می‎کنیم. (فهرست 7)

public void CompleteTask(TaskData task)
{
  task.CompletedDate = DateTime.Now;
}

فهرست 7

مشاهده می‎کنید که متد CompleteTask یک پارامتر را تعریف می‎کند. در فرامین ViewModel می‎توانید هر تعداد پارامتر که مایل هستید مشخص کنید. حالا اجازه دهید دکمه زیر را به Repeater اضافه کنیم:

<dot:LinkButton Text=”Completed” 
                Click=”{command: _root.CompleteTask(_this)}”
                Visible=”{value: CompletedDate == null}”/> 

مطلب پیشنهادی

دنیای فناوری در تسخیر جاوا اسکریپت

دلایلی که ثابت می کند جاوا اسکریپت می تواند کشتی بزرگ داده ها را هدایت کند

از آنجا که تمام الصاق‎های داخل کنترل Repeater به‌شکل خاصی از آیتم Repeater مورد ارزیابی قرار گرفته است (آبجکت TaskData)، برای دسترسی به متد CompleteTask به استفاده از  _root.CompleteTask نیاز دارید. فراموش نکنید که این متد را به‌جای کلاس TaskData در کلاس DefaultViewModel تعریف کرده‎ایم. متغیر _root  خودش به ViewModel دسترسی پیدا می‎کند.
توجه داشته باشید كه  _this را به‌عنوان یک آرگمان در این متد در نظر گرفته‎ایم. نشانگر _this مشخص‌کننده محتوای الصاق جاری است که همان آیتم Repeater جاری محسوب مي‌شود. در کنترل‎های سلسله مراتبی پیچیده ممکن است به متغیر  _parent نیز احتیاج داشته باشید. همچنین، خصوصیت Visible را نیز تنظیم کرده‎ایم تا دکمه تنها برای وظایف انجام نشده نمایش داده شود. اگر Visible مقدار نادرست را نشان دهد، DotVVM با تنظیم خصوصیت نمایش در CSS این عنصر را پنهان می‎کند. برای نمایش CompletedDate می‎توانیم از کتابخانه Literal استفاده کنیم و فرمت داده را تعیین کنیم. DotVVM از همان فرمت ساختار دستور شناخته شده  NET. استفاده می‎کند:

<dot:Literal Text=”{value: CompletedDate}” FormatString=”yyyy/MM/dd” />

جمع‌بندی

DotVVM از تعداد زیادی کنترل و قابلیت داخلی تشکیل شده است. می‎توانید از فرم‎های کنترل پایه مثل CheckBox، ComboBox یا RadioButton استفاده کنید. مجموعه‎ای از کنترل‎های پیشرفته نیز مثل GridView یا FileUpload به همراه کنترل SpaContentPlaceHolder  وجود دارد که اپلیکیشن وب شما را به یک اپلیکیشن تک‌صفحه‎ای تبدیل می‎کند. می‎توانید از ویژگی‎های تأیید اعتبار .NET، محلی‌سازی RESX و فیلترهای کاربردی استفاده کنید.
DotVVM به طور هم‌زمان از .NET Framework  و .NET Core پشتیبانی می‎کند و می‎توان از آن در پروژه‎های موجود ASP.NET به همراه ASP.NET MVC یا Web API استفاده کرد. درنهایت، امکانات بسیار دیگری نیز وجود دارد که طی ماه‎های آینده به DotVVM اضافه خواهد شد. یکی از ضروری‎ترین سناریوهای موجود یکپارچه‌سازی با REST API است. چنین قابلیتی به شما اجازه می‎دهد تا بخش‎های ViewModel (برای مثال، داده‎های موجود در کنترل GridView) را با استفاده از REST API بارگذاری و به‌جای درگیر شدن با متدهای ViewModel پارامترهای REST API را فراخوانی کنید.