public class MyViewModel { [Required] public string CategoryId { get; set; } public IEnumerable<Category> Categories { get; set; } } Controller: public ActionResult Index() { var model = new MyViewModel { Categories = GetCategories() } return View(model); } View: @Html.DropDownListFor( x => x.CategoryId, new SelectList(Model.Categories, "ID", "CategoryName"), "-- Please select a category --" ) @Html.ValidationMessageFor(x => x.CategoryId)
ایجاد یک Repository در پروژه برای دستورات EF
using System; using System.Collections; using System.Linq; namespace Framework.Model { public interface IContext { T Get<T>(Func<T, bool> prediction) where T : class; IEnumerable List<T>(Func<T, bool> prediction) where T : class; void Insert<T>(T entity) where T : class; int Save(); } }
using System; using System.Collections; using System.Collections.Generic; using System.Data; using System.Data.Entity; using System.Linq; using System.Text; namespace Framework.Model { public class Context : IContext { private readonly DbContext _dbContext; public Context(DbContext context) { _dbContext = context; } public T Get<T>(Func<T,bool> prediction) where T : class { var dbSet = _dbContext.Set<T>(); if (dbSet!= null) return dbSet.Single(prediction); throw new Exception(); } public void Insert<T>(T entity) where T : class { var dbSet = _dbContext.Set<T>(); if (dbSet != null) { _dbContext.Entry(entity).State = EntityState.Added; } } public int Save() { return _dbContext.SaveChanges(); } IEnumerable IContext.List<T>(Func<T, bool> prediction) { var dbSet = _dbContext.Set<T>(); if (dbSet != null) return dbSet.Where(prediction).ToList(); throw new Exception(); } } }
using System.Data.Entity; using DataModel; namespace Model { public class EFContext : DbContext { public EFContext(string db): base(db) { } public DbSet<Product> Products { get; set; } } }
using System; using System.Collections.Generic; using System.Data.Entity; using System.Linq; using System.Text; namespace Model { public class Context : Framework.Model.Context { public Context(string db): base(new EFContext(db)) { } } }
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Biz { public class Context : Model.Context { public Context(string db) : base(db) { } } }
using System.Web.Mvc; using Framework.Model; namespace ProductionRepository.Controllers { public class BaseController : Controller { public IContext DataContext { get; set; } public BaseController() { DataContext = new Biz.Context(System.Configuration.ConfigurationManager.ConnectionStrings["Database"].ConnectionString); } } }
using System.Web.Mvc; using DataModel; using System.Collections.Generic; namespace ProductionRepository.Controllers { public class ProductController : BaseController { public ActionResult Index() { var x = DataContext.List<Product>(s => s.Name != null); return View(x); } } }
using NUnit.Framework; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Web.Mvc; namespace TestUnit { [TestFixture] public class Test { [Test] public void IndexShouldListProduct() { var repo = new Moq.Mock<Framework.Model.IContext>(); var products = new List<DataModel.Product>(); products.Add(new DataModel.Product { Id = 1, Name = "asdasdasd" }); products.Add(new DataModel.Product { Id = 2, Name = "adaqwe" }); products.Add(new DataModel.Product { Id = 4, Name = "qewqw" }); products.Add(new DataModel.Product { Id = 5, Name = "qwe" }); repo.Setup(x => x.List<DataModel.Product>(p => p.Name != null)).Returns(products.AsEnumerable()); var controller = new ProductionRepository.Controllers.ProductController(); controller.DataContext = repo.Object; var result = controller.Index() as ViewResult; var model = result.Model as List<DataModel.Product>; Assert.AreEqual(4, model.Count); Assert.AreEqual("", result.ViewName); } } }
در قسمت Model کلاس Book رو ایجاد کنید و کدهای زیر رو در اون قرار بدید.
public class Book { public int Id { get; set; } public string Title { get; set; } public string ISBN { get; set; } }
یک فولدر به نام Repositories ایجاد کنید و یک اینترفیس به نام IBookRepository رو به صورت زیر ایجاد کنید.
public interface IBookRepository { IList<Book> GetBooks(); }
حالا نوبت به کلاس BookRepository میرسه که باید به صورت زیر ایجاد بشه.
[Export( typeof( IBookRepository ) )] public class BookRepository { public IList<Book> GetBooks() { List<Book> listOfBooks = new List<Book>( 3 ); listOfBooks.AddRange( new Book[] { new Book(){Id=1 , Title="Book1"}, new Book(){Id=2 , Title="Book2"}, new Book(){Id=3 , Title="Book3"}, } ); return listOfBooks; } }
بر روی پوشه کنترلر کلیک راست کرده و یک کنترلر به نام BookController ایجاد کنید و کدهای زیر رو در اون کپی کنید.
[Export] [PartCreationPolicy( CreationPolicy.NonShared )] public class BookController : Controller { [Import( typeof( IBookRepository ) )] BookRepository bookRepository; public BookController() { } public ActionResult Index() { return View( this.bookRepository.GetBooks() ); } }
- Shared: بعنی در نهایت فقط یک نمونه از این کلاس در هز Container وجود دارد.
- NonShared : یعنی به ازای هر درخواستی که از نمونهی Export شده میشود یک نمونه جدید ساخته میشود.
- Any : هر 2 حالت فوق Support میشود.
public class MEFControllerFactory : DefaultControllerFactory
{
private readonly CompositionContainer _compositionContainer;
public MEFControllerFactory( CompositionContainer compositionContainer )
{
_compositionContainer = compositionContainer;
}
protected override IController GetControllerInstance( RequestContext requestContext, Type controllerType )
{
var export = _compositionContainer.GetExports( controllerType, null, null ).SingleOrDefault();
IController result;
if ( export != null )
{
result = export.Value as IController;
}
else
{
result = base.GetControllerInstance( requestContext, controllerType );
_compositionContainer.ComposeParts( result );
}
}
}
حالا قصد داریم یک DependencyResolver رو با استفاده از MEF به صورت زیر ایجاد کنیم.(DependencyResolver برای ایجاد نمونه ای از کلاس مورد نظر برای کلاس هایی است که به یکدیگر نیاز دارند و برای ارتباط بین آن از Depedency Injection استفاده شده است.
public class MefDependencyResolver : IDependencyResolver { private readonly CompositionContainer _container; public MefDependencyResolver( CompositionContainer container ) { _container = container; } public IDependencyScope BeginScope() { return this; } public object GetService( Type serviceType ) { var export = _container.GetExports( serviceType, null, null ).SingleOrDefault(); return null != export ? export.Value : null; } public IEnumerable<object> GetServices( Type serviceType ) { var exports = _container.GetExports( serviceType, null, null ); var createdObjects = new List<object>(); if ( exports.Any() ) { foreach ( var export in exports ) { createdObjects.Add( export.Value ); } } return createdObjects; } public void Dispose() { } }
حال یک کلاس Plugin ایجاد میکنیم.
public class Plugin { public void Setup() { var container = new CompositionContainer( new DirectoryCatalog( HostingEnvironment.MapPath( "~/bin" ) ) ); CompositionBatch batch = new CompositionBatch(); batch.AddPart( this ); ControllerBuilder.Current.SetControllerFactory( new MEFControllerFactory( container ) ); System.Web.Http.GlobalConfiguration.Configuration.DependencyResolver = new MefDependencyResolver( container ); container.Compose( batch ); } }
DirectoryCatalog یک مسیر رو دریافت کرده و Assemblyهای موجود در مسیر مورد نظر رو به عنوان Catalog در Container اضافه میکنه. میتونستید از یک AssemblyCatalog هم به صورت زیر استفاده کنید.
var container = new CompositionContainer( new AssemblyCatalog( Assembly.GetExecutingAssembly() ) );
ControllerBuilder.Current.SetControllerFactory( new MEFControllerFactory( container ) );
System.Web.Http.GlobalConfiguration.Configuration.DependencyResolver = new MefDependencyResolver( container );
protected void Application_Start() { Plugin myPlugin = new Plugin(); myPlugin.Setup(); AreaRegistration.RegisterAllAreas(); RegisterRoutes( RouteTable.Routes ); } public static void RegisterRoutes( RouteCollection routes ) { routes.IgnoreRoute( "{resource}.axd/{*pathInfo}" ); routes.MapRoute( "Default", // Route name "{controller}/{action}/{id}", // URL with parameters new { controller = "Book", action = "Index", id = UrlParameter.Optional } // Parameter defaults ); }
در انتها View متناظر با BookController رو با سلیقه خودتون ایجاد کنید و بعد پروژه رو اجرا و نتیجه رو مشاهده کنید.
بر این اساس، کلاسهای مدل دومین مساله به صورت زیر خواهند بود:
public class Project { public int Id { set; get; } public string Name { set; get; } public virtual ICollection<ProjectIssue> ProjectIssues { set; get; } } public class ProjectIssue { public int Id { set; get; } public string Body { set; get; } [ForeignKey("ProjectStatusId")] public virtual ProjectIssueStatus ProjectIssueStatus { set; get; } public int ProjectStatusId { set; get; } [ForeignKey("ProjectId")] public virtual Project Project { set; get; } public int ProjectId { set; get; } } public class ProjectIssueStatus { public int Id { set; get; } public string Name { set; get; } public virtual ICollection<ProjectIssue> ProjectIssues { set; get; } }
اگر EF Code first را وادار به تهیه جداول و روابط معادل کلاسهای فوق کنیم:
public class MyContext : DbContext { public DbSet<ProjectIssueStatus> ProjectStatus { get; set; } public DbSet<ProjectIssue> ProjectIssues { get; set; } public DbSet<Project> Projects { get; set; } } public class Configuration : DbMigrationsConfiguration<MyContext> { public Configuration() { AutomaticMigrationsEnabled = true; AutomaticMigrationDataLossAllowed = true; } protected override void Seed(MyContext context) { var project1 = new Project { Name = "پروژه جدید" }; context.Projects.Add(project1); var stat1 = new ProjectIssueStatus { Name = "درحال انجام" }; var stat2 = new ProjectIssueStatus { Name = "انجام شد" }; context.ProjectStatus.Add(stat1); context.ProjectStatus.Add(stat2); var issue1 = new ProjectIssue { Body = "تغییر قلم گزارش", ProjectIssueStatus = stat1, Project = project1 }; var issue2 = new ProjectIssue { Body = "تغییر لوگوی گزارش", ProjectIssueStatus = stat1, Project = project1 }; context.ProjectIssues.Add(issue1); context.ProjectIssues.Add(issue2); base.Seed(context); } }
سابقا برای یافتن تعداد متناظر با هر IssueStatus خیلی سریع میشد چنین کوئری را نوشت:
اما اکنون معادل آن با EF Code first چیست؟
public static class Test { public static void RunTests() { Database.SetInitializer(new MigrateDatabaseToLatestVersion<MyContext, Configuration>()); using (var ctx = new MyContext()) { var projectId = 1; var list = ctx.ProjectStatus.Select(x => new { Id = x.Id, Name = x.Name, Count = x.ProjectIssues.Count(p => p.ProjectId == projectId) }).ToList(); foreach (var item in list) Console.WriteLine("{0}:{1}",item.Name, item.Count); } } }
SELECT [Project1].[Id] AS [Id], [Project1].[Name] AS [Name], [Project1].[C1] AS [C1] FROM ( SELECT [Extent1].[Id] AS [Id], [Extent1].[Name] AS [Name], ( SELECT COUNT(1) AS [A1] FROM [dbo].[ProjectIssues] AS [Extent2] WHERE ([Extent1].[Id] = [Extent2].[ProjectStatusId]) AND ([Extent2].[ProjectId] = 1 /*@p__linq__0*/) ) AS [C1] FROM [dbo].[ProjectIssueStatus] AS [Extent1] ) AS [Project1]
فیلترها در MVC
فیلتر، یک کلاس سفارشی است که شما میتوانید منطق برنامه را جهت اجرا، قبل یا بعد از اجرای یک اکشن متد، در آن پیاده سازی نمایید. فیلترها میتوانند به یک اکشن متد و یا کنترلری منتسب شوند که در ادامه با این روشها آشنا خواهید شد.
در لیست زیر انواع فیلترها و اینترفیسهایی که باید توسط کلاس سفارشی شما پیاده سازی شوند، معرفی شده است.
نوع | توضیح | فیلتر توکار | اینترفیس |
Authorization | انجام عملیات احراز هویت و سطح دسترسی، قبل از اجرای کد اکشن متد | [Authorize] و [RequireHttps] | IAuthorizationFilter |
Action | اجرای کدهایی قبل از اجرای کدهای اکشن متد | IActionFilter | |
Result | اجرای کدهایی قبل یا بعد از تولید ویو (View result) | [OutputCache] | IResultFilter |
Exception | اجرای کدهایی در صورت وجود استثنای مدیریت نشده | [HandleError] | IExceptionFilter |
در تکه کد زیر نحوهی استفاده از این فیلتر را مشاهده میکنید:
[HandleError] public class HomeController : Controller { public ActionResult Index() { //throw exception for demo throw new Exception("This is unhandled exception"); return View(); } public ActionResult About() { return View(); } public ActionResult Contact() { return View(); } }
نکته: فیلترهای اعمال شدهی به یک کنترلر، به تمام اکشن متدهای آن نیز اعمال میگردند.
در کد بالا خصیصهی HandleError به HomeController اعمال شده است. بنابراین در صورت بروز خطایی در هر کدام از اکشنها، صفحهی Error.cshtml نمایش داده خواهد شد و در تظر داشته باشید که خطاها توسط try-catch هندل نشدهاند.
باید جهت عملکرد صحیح فیلتر توکار HandleErrorAttribute، مقدار customErrors در قسمت System.web فایل web.config مساوی on باشد.
<customErrors mode="On" />
مهیا کنندگان فیلترها
بصورت پیش فرض MVC از سه طریق زیر فیلترها را جهت استفادهی در برنامه فراهم میکند:
- خصیصهی GlobalFilters.Filters برای فیلترهای سراسری
- کلاس FilterAttributeFilterProvider برای فیلترهای خصیصهای
- کلاس ControllerInstanceFilterProvider جهت افزودن کنترلر به یک وهله از FilterProviderCollection
در ادامه با نحوهی ایجاد یک فیلتر، بوسیلهی هر یک از روشهای بالا، با ذکر مثالی بیشتر آشنا خواهید شد.
ترتیب اجرای فیلترها
همانطور که در ابتدا اشاره شد، در MVC چهار نوع فیلتر معرفی شده است که امکان استفادهی از آنها بهصورت همزمان در سطح کنترلر و یا اکشن متد وجود دارد. اما ترتیب اجرای آنها متفاوت و به ترتیب زیر است:
- فیلترهای Authorization
- فیلترهای Action
- فیلترهای Result یا Response
- فیلترهای Exception
فیلترها براساس ترتیب اشاره شدهی در بالا اجرا خواهند شد. در صورتیکه چند فیلتر از یک نوع استفاده شود، جهت تقدم و تاخر در اجرا، از خاصیت Order استفاده خواهد شد. بعنوان مثال در کد زیر بدلیل خاصیت Order=1 ابتدا AuthorizationFilterB و سپس AuthorizationFilterA اجرا میشود.
[AuthorizationFilterA(Order=2)] [AuthorizationFilterB(Order=1)] public ActionResult Index() { return View(); }
public enum FilterScope { First = 0, Global = 10, Controller = 20, Action = 30, Last = 100, }
نکته: مقدار Scope فیلترهای Authorization برابر 0 و فیلترهای Exception برابر 100 میباشد.
ایجاد فیلتر سفارشی
روش اول: پیاده سازی اینترفیس یکی از انواع فیلترها و ارث بری از کلاس FilterAttribute
در این روش متدهایی که باید پیاده سازی شوند متفاوت خواهد بود. به همین جهت متدهای هر نوع بشرح زیر معرفی میشود:
- IAuthorizationFilter
// Called when authorization is required void OnAuthorization(AuthorizationContext filterContext)
- IActionFilter
// Called after the action method executes void OnActionExecuted(ActionExecutedContext filterContext) // Called before an action method executes void OnActionExecuting(ActionExecutingContext filterContext)
- IResultFilter
// Called after an action result executes void OnResultExecuted(ResultExecutedContext filterContext) // Called before an action result executes void OnResultExecuting(ResultExecutedContext filterContext)
- IException
// Called when an exception occurs void OnException(ExceptionContext filterContext)
یادآوری: همانطور که در ابتدای مقاله اشاره شد، فیلترها قبل یا بعد از اجرای اکشن متدها فراخوانی خواهند شد. بنابراین به کامنت بالای متد فیلترها دقت داشته باشید.
مثال: پیاده سازی اینترفیس IExceptionFilter و ارث بری از کلاس FilterAttribute جهت تهیهی فیلتری سفارشی از نوع Exception
class CustomErrorHandler : FilterAttribute, IExceptionFilter { public override void IExceptionFilter.OnException(ExceptionContext filterContext) { Log(filterContext.Exception); base.OnException(filterContext); } private void Log(Exception exception) { //log exception here.. } }
روش دوم: ارث بری از ActionFilterAttribute
کلاس abstract فوق دارای چهار متد زیر جهت تحریف است. همانطور که مشاهده میکنید این کلاس علاوه بر دو متد OnActionExecuted و OnActionExecuting دارای دو متد دیگر OnResultExecuting و OnResultExecuted که بهترتیب قبل و بعد خروجی (Result) اکشن متد اجرا میشوند، نیز میباشد. این نوع فیلترها عموما جنبهی استفاده عمومی داشته و میتوان از آنها جهت logging ،caching و یا authorization استفاده کرد.
// Called by MVC after the action method executes void OnActionExecuted(ActionExecutedContext filterContext) // Called by MVC before the action method executes void OnActionExecuted(ActionExecutedContext filterContext) // Called by MVC after the action result executes void OnResultExecuted(ResultExecutedContext filterContext) // Called by MVC before the action result executes void OnResultExecuting(ResultExecutingContext filterContext)
مثال: کلاس LogAttribute که از کلاس ActionFilterAttribute ارث بری کرده است، عملیات قبل و بعد از اجرای اکشن متد را لاگ میکند.
public class LogAttribute : ActionFilterAttribute { public override void OnActionExecuted(ActionExecutedContext filterContext) { Log("OnActionExecuted", filterContext.RouteData); } public override void OnActionExecuting(ActionExecutingContext filterContext) { Log("OnActionExecuting", filterContext.RouteData); } public override void OnResultExecuted(ResultExecutedContext filterContext) { Log("OnResultExecuted", filterContext.RouteData); } public override void OnResultExecuting(ResultExecutingContext filterContext) { Log("OnResultExecuting ", filterContext.RouteData); } private void Log(string methodName, RouteData routeData) { var controllerName = routeData.Values["controller"]; var actionName = routeData.Values["action"]; var message = String.Format("{0}- controller:{1} action:{2}", methodName, controllerName, actionName); Debug.WriteLine(message); } }
روش سوم: پیاده سازی داخل کنترلر
کلاس Controller میتواند هر یک از اینترفیسهای فیلترها را پیاده سازی نماید. به عبارت دیگر در هر کلاس کنترلر میتوانید متدهای زیر را تحریف نمایید.
- OnAuthorization ^
- OnException ^
- OnActionExecuting ^
- OnActionExecuted ^
- OnResultExecuting ^
- OnResultExecuted ^
روش چهارم: ارث بری از کلاس فیلترهای توکار و مهیای در MVC و تحریف متدهای آن
در کد زیر با تحریف و سفارشی سازی متد OnException مخصوص فیلتر توکار HandleError، قابلیتهای آن افزایش یافته است:
class CustomErrorHandler : HandleErrorAttribute { public override void OnException(ExceptionContext filterContext) { Log(filterContext.Exception); base.OnException(filterContext); } private void Log(Exception exception) { //log exception here.. } }
رجیستر فیلترها
- سراسری:
درصورتی که قصد داشته باشید فیلتری بصورت سراسری و در کل برنامه فعال گردد باید آن را در رویداد Application_Start فایل Global.asax.cs بوسیلهی متد RegisterGlobalFilters کلاس FiterConfig رجیستر نمایید. بعد از آن فیلتر به کلیهی کنترلرها و اکشن متدها اعمال میگردد.
public class MvcApplication : System.Web.HttpApplication { protected void Application_Start() { FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters); } } // FilterConfig.cs located in App_Start folder public class FilterConfig { public static void RegisterGlobalFilters(GlobalFilterCollection filters) { filters.Add(new HandleErrorAttribute()); // add your new custom filters filters.Add(new LogAttribute()); filters.Add(new CustomErrorHandler()); } }
در کد بالا فیلتر توکار HandleError و البته فیلترهای سفارشی دیگری نیز به صورت سراسری به تمام اکشن متدهای کنترلرها اعمال گردیده است.
- کنترلر: در صورتی که فقط بخواهید یک فیلتر به کل اکشنهای یک کنترلر اعمال گردد. همانند آنچه که در مثال ابتدایی بدان اشاره شد.
[HandleError] public class HomeController : Controller
- اکشن متد: اعمال یک فیلتر به یک اکشن متد خاص کنترلر. در کد زیر فیلتر HandleError فقط به اکشن متد Index کنترلر Home اعمال خواهد شد.
public class HomeController : Controller { [HandleError] public ActionResult Index() { return View(); } }
بررسی روش آپلود فایلها در ASP.NET Core
<form method="post" asp-action="UploadFiles" asp-controller="Home" enctype="multipart/form-data"> <input type="file" name="files" webkitdirectory /> <input type="submit" value="Upload" /> </form>
using System.Collections.Generic; using System.IO; using System.Threading.Tasks; using Microsoft.AspNetCore.Hosting; using Microsoft.AspNetCore.Http; using Microsoft.AspNetCore.Mvc; namespace UploadFolderASPNETCore.Controllers { public class HomeController : Controller { private readonly IWebHostEnvironment _environment; private const int MaxBufferSize = 0x10000; public HomeController(IWebHostEnvironment environment) { _environment = environment; } public IActionResult Index() { return View(); } [HttpPost("[action]")] public async Task<IActionResult> UploadFiles(IList<IFormFile> files) { var uploadsRootFolder = Path.Combine(_environment.WebRootPath, "uploads"); CreateDir(uploadsRootFolder); foreach (var file in files) { var dirPath = Path.GetDirectoryName(file.FileName); CreateDir(Path.Combine(uploadsRootFolder, dirPath)); var filePath = Path.Combine(uploadsRootFolder, file.FileName); using (var fileStream = new FileStream(filePath, FileMode.Create, FileAccess.Write, FileShare.None, MaxBufferSize, useAsync: true )) { await file.CopyToAsync(fileStream); } } return RedirectToAction("Index"); } private void CreateDir(string path) { if (!Directory.Exists(path)) { Directory.CreateDirectory(path); } } } }
امکان تعریف HTML Forms استاندارد در Blazor 8x
فرمهای استاندارد HTML، پیش از ظهور جاوااسکریپت و SPAها وجود داشتند (دقیقا همان زمانیکه که فقط مفهوم SSR وجود خارجی داشت) و هنوز هم جزء مهمی از اغلب برنامههای وب را تشکیل میدهند. با ارائهی دات نت 8 و قابلیت server side rendering آن، کامپوننتهای برنامه، فقط یکبار در سمت سرور رندر شده و HTML سادهی آنها به سمت مرورگر کاربر بازگشت داده میشود. در این حالت، فرمهای استاندارد HTML، امکان دریافت ورودیهای کاربر و ارسال دادههای آنها را به سمت سرور میسر میکنند (چون دیگر خبری از اتصال دائم SignalR نیست و باید اطلاعات را به همان نحو استاندارد پروتکل HTTP، به سمت سرور Post کرد). در دات نت 8، دو راهحل برای کار با فرمها در برنامههای Blazor وجود دارد: استفاده از EditForm خود Blazor و یا استفاده از HTML forms استاندارد و ساده، به همان نحوی که بوده و هست.
روش کار با EditForm در برنامههای Blazor SSR
البته ما قصد استفاده از فرمهای سادهی HTML را در اینجا نداریم و ترجیح میدهیم که از همان EditForm استفاده کنیم. EditForms در Blazor بسیار مفید بوده و امکان بایند خواص یک مدل را به اجزای مختلف ورودیهای تعریف شدهی در آن میسر میکند و همچنین قابلیتهایی مانند اعتبارسنجی و امثال آنرا نیز به همراه دارد (اطلاعات بیشتر). اما چگونه میتوان از این امکان در برنامههای Blazor SSR نیز استفاده کرد؟
برای این منظور، ابتدا مثالی را به صورت زیر تکمیل میکنیم (که بر اساس قالب dotnet new blazor --interactivity Server تهیه شده) و سپس توضیحات آن ارائه خواهد شد:
الف) تهیه یک مدل برای تعریف محلهای مرتبط با یک سفارش در فایل Models/OrderPlace.cs
using System.ComponentModel.DataAnnotations; namespace Models; public record OrderPlace { public Address BillingAddress { get; set; } = new(); public Address ShippingAddress { get; set; } = new(); } public class Address { [Required] public string Name { get; set; } = default!; public string? AddressLine1 { get; set; } public string? AddressLine2 { get; set; } public string? City { get; set; } [Required] public string PostCode { get; set; } = default!; }
ب) تهیهی یک کامپوننت Editor برای دریافت اطلاعات آدرس فوق در فایل Components\Pages\Chekout\AddressEntry.razor
@inherits Editor<Models.Address> <div> <label>Name</label> <InputText @bind-Value="Value.Name"/> </div> <div> <label>Address 1</label> <InputText @bind-Value="Value.AddressLine1"/> </div> <div> <label>Address 2</label> <InputText @bind-Value="Value.AddressLine2"/> </div> <div> <label>City</label> <InputText @bind-Value="Value.City"/> </div> <div> <label>Post Code</label> <InputText @bind-Value="Value.PostCode"/> </div>
ج) استفاده از مدل و ادیتور فوق در یک EditForm تغییر یافته برای کار با برنامههای Blazor SSR در فایل Components\Pages\Chekout\Checkout.razor
@page "/checkout" @using Models @if (!_submitted && PlaceModel != null) { <EditForm Model="PlaceModel" method="post" OnValidSubmit="SubmitOrder" FormName="checkout"> <DataAnnotationsValidator/> <h4>Bill To:</h4> <AddressEntry @bind-Value="PlaceModel.BillingAddress"/> <h4>Ship To:</h4> <AddressEntry @bind-Value="PlaceModel.ShippingAddress"/> <button type="submit">Submit</button> <ValidationSummary/> </EditForm> } @if (_submitted && PlaceModel != null) { <div> <h2>Order Summary</h2> <h3>Shipping To:</h3> <dl> <dt>Name</dt> <dd>@PlaceModel.BillingAddress.Name</dd> <dt>Address 1</dt> <dd>@PlaceModel.BillingAddress.AddressLine1</dd> <dt>Address 2</dt> <dd>@PlaceModel.BillingAddress.AddressLine2</dd> <dt>City</dt> <dd>@PlaceModel.BillingAddress.City</dd> <dt>Post Code</dt> <dd>@PlaceModel.BillingAddress.PostCode</dd> </dl> </div> } @code { bool _submitted; [SupplyParameterFromForm] public OrderPlace? PlaceModel { get; set; } protected override void OnInitialized() { PlaceModel ??= GetOrderPlace(); } private void SubmitOrder() { _submitted = true; } private static OrderPlace GetOrderPlace() => new() { BillingAddress = new Address { PostCode = "12345", Name = "Test 1", }, ShippingAddress = new Address { PostCode = "67890", Name = "Test 2", }, }; }
باید بخاطر داشت که این فرم بر اساس حالت Server Side Rendering در اختیار مرورگر کاربر قرار میگیرد. یعنی برای بار اول، یک HTML خالص، در سمت سرور بر اساس اطلاعات آن تهیه شده و بازگشت داده میشود و زمانیکه به کاربر نمایش داده شد، دیگر برخلاف Blazor Server پیشین، اتصال SignalR ای وجود ندارد تا قابلیتهای تعاملی آنرا مدیریت کند. در این حالت اگر به view source صفحهی جاری رجوع کنیم، چنین خروجی قابل مشاهدهاست:
<form method="post"> <input type="hidden" name="_handler" value="checkout" /> <input type="hidden" name="__RequestVerificationToken" value="CfDxxx" /> . . . <button type="submit">Submit</button> </form>
این EditForm تعریف شده، دو قسمت اضافهتر را نسبت به EditFormهای نگارشهای قبلی Blazor دارد:
<EditForm Model="PlaceModel" method="post" OnValidSubmit="SubmitOrder" FormName="checkout">
همانطور که در نحوهی تعریف فرم HTML ای فوق مشخص است، فیلد مخفی handler_، کار متمایز ساختن این فرم را به عهده داشته و از مقدار آن در سمت سرور جهت یافتن کامپوننت متناظر، استفاده خواهد شد.
همچنین برای دریافت و پردازش این اطلاعات در سمت سرور، تنها کافی است خاصیت مرتبط با آنرا با ویژگی SupplyParameterFromForm مزین کنیم:
[SupplyParameterFromForm] public OrderPlace? PlaceModel { get; set; }
جریان کاری این فرم به صورت خلاصه به نحو زیر است (که در آن متد OnInitialized دوبار فراخوانی میشود و باید به آن دقت داشت):
- در بار اول نمایش این صفحه (با فراخوانی مسیر /checkout در مرورگر)، متد OnInitialized فراخوانی شده و در آن، مقدار شیء PlaceModel نال است.
- بنابراین به متد GetOrderPlace مراجعه کرده و اطلاعاتی را دریافت میکند؛ برای مثال، این اطلاعات را از سرویسی میخواند.
- پس از پایان هر روال رخدادگردانی در Blazor، در پشت صحنه به صورت خودکار، متد تغییر حالت جاری کامپوننت (متد StateHasChanged) هم فراخوانی میشود. این فراخوانی خودکار، باعث رندر مجدد UI آن بر اساس اطلاعات جدید خواهد شد. یعنی قسمتهای نمایش فرم و نمایش اطلاعات ارسالی، یکبار ارزیابی شده و در صورت برقراری شرطها، نمایش داده میشوند.
- در ادامه، کاربر فرم را پر کرده و به سمت سرور POST میکند.
- پیش از هر رخدادی، خواص شیء PlaceModel به علت مزین بودن به ویژگی SupplyParameterFromForm، بر اساس اطلاعات ارسالی به سرور، مقدار دهی میشوند.
- سپس متد OnInitialized فراخوانی شده و چون اینبار مقدار PlaceModel نال نیست، به متد GetOrderPlace جهت دریافت مقادیر ابتدایی خود مراجعه نمیکند. سطر تعریف شدهی در متد OnInitialized فقط زمانی سبب مقدار دهی شیء PlaceModel میشود که مقدار این شیء، نال باشد (یعنی فقط در اولین بار نمایش صفحه)؛ اما اگر این مقدار توسط پارامتر مزین شدهی به SupplyParameterFromForm به علت ارسال دادههای فرم به سرور، مقدار دهی شده باشد، دیگر به منبع دادهی ابتدایی رجوع نمیکند.
- چون متد رخدادگردان OnInitialized فراخوانی شده، پس از پایان آن (و فراخوانی خودکار متد StateHasChanged در انتهای آن)، یکبار دیگر کار رندر UI فرم جاری بر اساس اطلاعات جدید، انجام خواهد شد.
- اکنون است که پس از طی این رخدادها، متد رویدادگردان SubmitOrder فراخوانی میشود. یعنی زمانیکه این متد فراخوانی میشود، شیء PlaceModel بر اساس اطلاعات رسیدهی از طرف کاربر، مقدار دهی شده و آمادهی استفاده است (برای مثال آمادهی ذخیره سازی در بانک اطلاعاتی؛ با فراخوانی سرویسی در اینجا).
- پس از پایان فراخوانی متد رویدادگردان SubmitOrder، به علت تغییر حالت کامپوننت (و فراخوانی خودکار متد StateHasChanged در انتهای آن)، یکبار دیگر نیز کار رندر UI فرم جاری بر اساس اطلاعات جدید انجام خواهد شد. یعنی اینبار قسمت Order Summary نمایش داده میشود.
مدیریت تداخل نامهای HTML Forms در Blazor 8x SSR
تمام فرمهایی که به این صورت در برنامههای Blazor SSR مدیریت میشوند، باید دارای نام منحصربفردی که توسط خاصیت FormName مشخص میشود، باشند. برای جلوگیری از این تداخل نامها، کامپوننت جدیدی به نام FormMappingScope معرفی شدهاست که نمونهای از آنرا در فایل فرضی Components\Pages\Chekout\CheckoutForm.razor تعریف شدهی به صورت زیر مشاهده میکنید:
@page "/checkout" <FormMappingScope Name="store-checkout"> <CheckoutForm /> </FormMappingScope>
اکنون اگر برنامه را اجرا کرده و خروجی HTML آنرا بررسی کنیم، به فرم زیر خواهیم رسید:
<form method="post"> <input type="hidden" name="_handler" value="[store-checkout]checkout" /> <input type="hidden" name="__RequestVerificationToken" value="CfDxxxxx" /> . . . <button type="submit">Submit</button> </form>
یک نکته: اگر به تگهای فرم HTML ای فوق دقت کنید، به همراه یک anti-forgery token نیز هست که کار تولید و مدیریت آن، به صورت خودکار صورت میگیرد و میانافزاری نیز برای آن طراحی شده که در فایل Program.cs برنامه، به صورت app.UseAntiforgery بکارگرفته شدهاست.
یک نکته: در Blazor 8x SSR میتوان بجای EditForm، از همان HTML form متداول هم استفاده کرد
اگر بخواهیم بجای استفاده از EditForm، از فرمهای استاندارد HTML هم در حالت SSR استفاده کنیم، این کار میسر بوده و روش کار به صورت زیر است:
<form method="post" @onsubmit="SaveData" @formname="MyFormName"> <AntiforgeryToken /> <InputText @bind-Value="Name" /> <button>Submit</button> </form>
پردازش فرمهای GET در Blazor 8x
در حالتیکه از فرمهای استاندارد HTML ای استفاده میشود، ممکن است method فرم، بجای post، حالت get باشد که نتایج آن به صورت کوئری استرینگ در نوار آدرس مرورگر ظاهر میشوند؛ مانند جستجوی گوگل که اشخاص میتوانند کوئری استرینگ و لینک نهایی را به اشتراک بگذارند. روش پردازش یک چنین فرمهایی به صورت زیر است:
@page "/" <form method="GET"> <input type="text" name="q"/> <button type="submit">Search</button> </form> @code { [SupplyParameterFromQuery(Name="q")] public string SearchTerm { get; set; } protected override async Task OnInitializedAsync() { // do something with the search term } }
یک ابتکار! تعاملی کردن قسمتی از صفحه بدون فعالسازی کامل Blazor Server و یا Blazor WASM کامل
این دکمهی قرار گرفتهی در یک صفحهی SSR را ملاحظه کنید:
<button class="nav-link border-0" @onclick="BeginSignOut">Log out</button>
<EditForm Context="ctx" FormName="LogoutForm" method="post" Model="@Foo" OnValidSubmit="BeginSignOut"> <button type="submit" class="nav-link border-0">Log out</button> </EditForm> @code{ [SupplyParameterFromForm(Name = "LogoutForm")] public string? Foo { get; set; } protected override void OnInitialized() => Foo = ""; async Task BeginSignOut() { // TODO: SignOutAsync(); // TODO: NavigateTo("/authentication/logout"); } }
یک نکته: میتوان حالت post-back مانند فرمهای تعاملی Blazor 8x را تغییر داد.
به همراه ویژگیهای جدید مرتبط با صفحات SSR، ویژگی هدایت بهبودیافته هم وجود دارد که جزئیات بیشتر آنرا در قسمتهای بعدی این سری بررسی میکنیم. برای نمونه اگر مثال این قسمت را اجرا کنید، فرم آن به همراه یک post-back مانند به سمت سرور است که کاملا قابل احساس است؛ این رفتار هرچند استاندارد است، اما بیشباهت به برنامههای MVC ، Razor pages و یا وبفرمها نیست و با فرمهای بیصدا و سریع نگارشهای قبلی Blazor متفاوت است. در Blazor8x میتوان این نوع ارسال اطلاعات را Ajax ای هم کرد که به آن enhanced navigation میگویند. برای اینکار فقط کافی است ویژگی Enhance را به تگ EditForm اضافه کرد و یا ویژگی جدید data-enhance را به تگهای فرمهای استاندارد HTML ای افزود. پس از آن اگر برنامه را اجرا کنیم، دیگر یک post-back استاندارد وبفرمها مشاهده نمیشود و رفتار این صفحه بسیار سریع، نرم و روان خواهد بود.
<EditForm Model="PlaceModel" method="post" OnValidSubmit="SubmitOrder" FormName="checkout" Enhance>
کدهای کامل این مثال را از اینجا میتوانید دریافت کنید: Blazor8x-Server-Normal.zip
کدهای کامل این مثال را در ذیل ملاحظه میکنید:
using System; using System.Data.Entity; using System.Data.Entity.Migrations; using System.Diagnostics; using System.Linq; namespace EFGeneral { public class User { public int Id { get; set; } public string Name { get; set; } } public class MyContext : DbContext { public DbSet<User> Users { get; set; } } public class Configuration : DbMigrationsConfiguration<MyContext> { public Configuration() { AutomaticMigrationsEnabled = true; AutomaticMigrationDataLossAllowed = true; } protected override void Seed(MyContext context) { for (int i = 0; i < 21000; i++) { context.Users.Add(new User { Name = "name " + i }); if (i % 1000 == 0) context.SaveChanges(); } base.Seed(context); } } public class PerformanceHelper { public static string RunActionMeasurePerformance(Action action) { GC.Collect(); long initMemUsage = Process.GetCurrentProcess().WorkingSet64; var stopwatch = new Stopwatch(); stopwatch.Start(); action(); stopwatch.Stop(); var currentMemUsage = Process.GetCurrentProcess().WorkingSet64; var memUsage = currentMemUsage - initMemUsage; if (memUsage < 0) memUsage = 0; return string.Format("Elapsed time: {0}, Memory Usage: {1:N2} KB", stopwatch.Elapsed, memUsage / 1024); } } public static class Test { public static void RunTests() { Database.SetInitializer(new MigrateDatabaseToLatestVersion<MyContext, Configuration>()); StartDb(); for (int i = 0; i < 3; i++) { Console.WriteLine("\nRun {0}", i + 1); var memUsage = PerformanceHelper.RunActionMeasurePerformance(() => LoadWithTracking()); Console.WriteLine("LoadWithTracking:\n{0}", memUsage); memUsage = PerformanceHelper.RunActionMeasurePerformance(() => LoadWithoutTracking()); Console.WriteLine("LoadWithoutTracking:\n{0}", memUsage); } } private static void StartDb() { using (var ctx = new MyContext()) { var user = ctx.Users.Find(1); if (user != null) { // keep the object in memory } } } private static void LoadWithTracking() { using (var ctx = new MyContext()) { var list = ctx.Users.ToList(); if (list.Any()) { // keep the list in memory } } } private static void LoadWithoutTracking() { using (var ctx = new MyContext()) { var list = ctx.Users.AsNoTracking().ToList(); if (list.Any()) { // keep the list in memory } } } } }
توضیحات:
مدل برنامه یک کلاس ساده کاربر است به همراه id و نام او.
سپس این کلاس توسط Context برنامه در معرض دید EF Code first قرار میگیرد.
در کلاس Configuration تعدادی رکورد را در ابتدای کار برنامه در بانک اطلاعاتی ثبت خواهیم کرد. قصد داریم میزان مصرف حافظه بارگذاری این اطلاعات را بررسی کنیم.
کلاس PerformanceHelper معرفی شده، دو کار اندازه گیری میزان مصرف حافظه برنامه در طی اجرای یک فرمان خاص و همچنین مدت زمان سپری شدن آنرا اندازهگیری میکند.
در کلاس Test فوق چندین متد به شرح زیر وجود دارند:
متد StartDb سبب میشود تا تنظیمات ابتدایی برنامه به بانک اطلاعاتی اعمال شوند. تا زمانیکه کوئری خاصی به بانک اطلاعاتی ارسال نگردد، EF Code first بانک اطلاعاتی را آغاز نخواهد کرد.
در متد LoadWithTracking اطلاعات تمام رکوردها به صورت متداولی بارگذاری شده است.
در متد LoadWithoutTracking نحوه استفاده از متد الحاقی AsNoTracking را مشاهده میکنید. در این متد سطح اول کش به این ترتیب خاموش میشود.
و متد RunTests، این متدها را در سه بار متوالی اجرا کرده و نتیجه عملیات را نمایش خواهد داد.
برای نمونه این نتیجه در اینجا حاصل شده است:
همانطور که ملاحظه کنید، بین این دو حالت، تفاوت بسیار قابل ملاحظه است؛ چه از لحاظ مصرف حافظه و چه از لحاظ سرعت.
نتیجه گیری:
اگر قصد ندارید بر روی اطلاعات دریافتی از بانک اطلاعاتی تغییرات خاصی را انجام دهید و فقط قرار است از آنها به صورت فقط خواندنی گزارشگیری شود، بهتر است سطح اول کش را به کمک متد الحاقی AsNoTracking خاموش کنید.
قبل از شروع به طراحی UI باید کمی با واحدهای اندازه گیری در اندروید آشنا شویم. بدانید و آگاه باشید که استفاده از واحد Pixel برای تعیین اندازه در اندروید کار بسیار اشتباهی است. طراح همیشه باید Density یا تراکم صفحهی نمایش را در نظر بگیرد. تراکم صفحهی نمایش به معنای تعداد پیکسل موجود در یک اینچ میباشد. اندازهی 100 پیکسل در دستگاههای مختلف با (dpi(Dot Per Inchهای متفاوت به یک اندازه نیست.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <Button android:id="@+id/MyButton" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/Hello" /> </LinearLayout>
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:background="#fff" android:id="@+id/NameListView" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); List<string> namesList = new List<string> { "Mohammad","Fatemeh","Ali","Hasan","Husein","Mohsen","Mahdi", }; var namesAdapter = new ArrayAdapter<string> (this, Android.Resource.Layout.SimpleListItem1, namesList); var listview = FindViewById<ListView>(Resource.Id.NameListView); listview.Adapter = namesAdapter; }
ListView کنترل بسیار منعطفی میباشد. برخی ویژگیها آن را در زیر میتوانید مشاهده بفرمایید:
- android:dividerHeight // ارتفاع جداکنندهی سطرها
- android:divider // رنگ جداکنندهی سطرها
- android:layoutAnimation // انیمیشن برای layoutها
- android:background // رنگ ضمینه را مشخص میکند. البته میتوانید یک style را به ان نسبت دهید
خوب؛ حالا بیایید یک ListView را با ظاهر و Adapter سفارشی بسازیم.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="14dp"> <TextView android:text="" android:gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="match_parent" android:id="@+id/idTextView" /> <TextView android:text="" android:gravity="center_vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/nameTextView" android:layout_marginLeft="14dp" /> </LinearLayout>
namespace DotSystem.ir.App1.Model { public class Person { public int Id { get; set; } public string PersonName { get; set; } }
namespace DotSystem.ir.App1.Adapters { public class PersonAdapter : BaseAdapter<Model.Person> { public override Person this[int position] { get { throw new NotImplementedException(); } } public override int Count { get { throw new NotImplementedException(); } } public override long GetItemId(int position) { throw new NotImplementedException(); } public override View GetView(int position, View convertView, ViewGroup parent) { throw new NotImplementedException(); } } }
در اینجا ما به چند فیلد داخل کلاس احتیاج داریم.
- لیست اطلاعات مورد نظر.
- Activity جاری که Adapter را استفاده میکند.
namespace DotSystem.ir.App1.Adapters { public class PersonAdapter : BaseAdapter<Person> { protected Activity _activity = null; protected List<Person> _list = null; public PersonAdapter(Activity activity, List<Person> list) { _activity = activity; _list = list; } public override Person this[int position] { get { return _list[position]; } } public override int Count { get { return _list.Count; } } public override long GetItemId(int position) { return _list[position].Id; } public override View GetView(int position, View convertView, ViewGroup parent) { throw new NotImplementedException(); } } }
public override View GetView(int position, View convertView, ViewGroup parent) { if (convertView == null) convertView = _activity.LayoutInflater .Inflate(Resource.Layout.PersonListViewItemLayout, parent, false); var idTextView = convertView.FindViewById<TextView>(Resource.Id.idTextView); var nameTextView = convertView.FindViewById<TextView>(Resource.Id.NameListView); var persion = _list[position]; idTextView.Text = persion.Id.ToString(); nameTextView.Text = persion.PersonName; return convertView; }
protected override void OnCreate(Bundle bundle) { base.OnCreate(bundle); SetContentView(Resource.Layout.Main); List<Model.Person> personList = new List<Model.Person> { new Model.Person() {Id = 1, PersonName = "Mohammad", }, new Model.Person() {Id = 2, PersonName = "Ali", }, new Model.Person() {Id = 3, PersonName = "Fatemeh", }, new Model.Person() {Id = 4, PersonName = "hasan", }, new Model.Person() {Id = 5, PersonName = "Husein", }, new Model.Person() {Id = 6, PersonName = "Mohsen", }, new Model.Person() {Id = 14, PersonName = "Mahdi", }, }; var personAdapter = new Adapters.PersonAdapter(this, personList); var listview = FindViewById<ListView>(Resource.Id.NameListView); listview.Adapter = personAdapter; }
<link href="/Content/myCSS?v=LBa4VrARIJBApHOXLQoCWVPKu_c6QBb4D7npv-dq5TA1" rel="stylesheet"/> <script src="/Scripts/js?v=rk-l3czPS8KW6usEOpK8aIglVqPOVEKWoSXV4N-5N2Q1"></script>