با سلام و تشکر
از این DataPicker استفاده کردم ولی:
1- به چه صورت از یک دکمه برای نمایش تقویم و نمایش تاریخ انتخابی در TexBox استفاده کنیم
2-در حالت عادی دکمه‌های برگشت ماه و سال درست نمایش داده نمی‌شوند و در حالت Compatibility View دکمه‌ها درست دیده می‌شوند
<asp:Button ID="btnGenerateReport" runat="server"
Text="Generate Report"
CssClass="btn btn-success btn-generate"
resourcekey="GenerateReportButton"
OnClientClick="return openNewWindow();"
OnClick="btnGenerateReport_Click" />
<script type="text/javascript">
function openNewWindow () {
document.forms[0].target = '_blank';
setTimeout(function () { window.document.forms[0].target = ''; }, 0);
}
</script> در مطلب آشنایی با Directiveها در AngularJS با نحوه‌ی ایجاد Directive آشنا شدیم. هدف از این مطلب، آشنایی بیشتر با Directive در AngularJS است؛ یکی از بهترین فریم ورک‌های جاوااسکریپتی، با قابلیت ایجاد کتابخانه‌هایی از کامپوننت‌ها که می‌توانند به HTML اضافه شوند .
کتابخانه‌های جاوااسکریپتی زیادی وجود دارند. به عنوان مثال Bootstrap یکی از محبوب‌ترین "front-end
framework" ها است که امکان تغییر در ظاهر المنت‌ها را فراهم می‌کند و شامل
تعدادی کامپوننت جاوااسکریپتی نیز می‌باشد. مشکل کار، در هنگام استفاده از کامپوننت ها است. شخصی که در حال توسعه‌ی HTML است
باید در کد جاوااسکریپتی خود از jQuery استفاده کند و بعنوان مثال یک Popover را فعال یا غیر فعال کند و این، یک فرآیند خسته کننده و مستعد خطا
است.
یک مثال ساده از Directives AngularJS و بررسی آن
var m = angular.module("myApp");
myApp.directive("myDir", function() {
return {
restrict: "E",
scope: {
name: "@",
amount: "=",
save: "&"
},
template:
"<div>" +
" {{name}}: <input ng-model='amount' />" +
" <button ng-click='save()'>Save</button>" +
"</div>",
replace: true,
transclude: false,
controller: [ "$scope", function ($scope) { … }],
link: function (scope, element, attrs, controller) {…}
}
}); به الگوی نامگذاری directive دقت کنید. پیشوند my شبیه به یک namespace است. بنابراین اگر یک Application از دایرکتیوهای قرار گرفته در Module های متفاوت استفاده کند، به راحتی می‌توان محل تعریف یک directive را تشخیص داد. این نام می‌تواند نشان دهنده‌ی این باشد که این directive را خودتان توسعه داده‌اید یا از یک directive توسعه داده شده توسط شخص دیگری در حال استفاده هستید. به هر حال این نحوه‌ی نام گذاری یک اجبار نیست و به عنوان یک پیشنهاد است.
سازنده directive یک شیء را با تعدادی خاصیت باز می‌گرداند که تمامی آنها در سایت AngularJS توضیح داده شده‌اند. در اینجا قصد داریم تا توضیحی مختصر در مورد کاری که این خصوصیات انجام می‌دهند داشته باشیم.
· restrict : تشخیص می‌دهد که آیا directive در HTML استفاده خواهد شد. گزینه‌های قابل استفاده ‘A’ ، ‘E’ ، ‘C’ برای attribute ، element ، class و یا comment است . پیش فرض ‘A’ برای attribute است. اما ما بیشتر علاقه به استفاده از ویژگی element برای ایجاد المنت‌های UI داریم.
· scope : ایجاد یک scope ایزوله که متعلق به directive است و موجب ایزوله شدن آن از scope صدا زننده directive می‌شود. متغیرهای scope پدر از طریق خصوصیات تگ directive ارسال می‌شوند. این ایزوله کردن زمانی کاربردی است که در حال ایجاد کامپوننت هایی با قابلیت استفاده مجدد هستیم، که نباید متکی به scope پدر باشند. شیء scope در directive نام و نوع متغیرهای scope را تعیین می‌کنند. در مثال بالا سه متغیر برای scope تعریف شده است:
- name: "@" (by value, one-way) : علامت @ مشخص می‌کند که مقدار متغیر ارسال می‌شود. Directive یک رشته را دریافت می‌کند که شامل مقدار ارسال شده از scope پدر می‌باشد. Directive می‌تواند از آن استفاده کند، اما نمی‌تواند مقدار آن را در scope پدر تغییر دهد.
- amount: "=" (by reference, two-way) : علامت = مشخص می‌کند این متغیر با ارجاع ارسال می‌شود. Directive یک ارجاع به مقدار متغیر در scope اصلی دریافت می‌کند. مقدار می‌تواند هر نوع داده ای، شامل یک شیء complex یا یک آرایه باشد. Directive می‌تواند مقدار را در scope پدر تغییر دهد. این نوع متغیر، زمانیکه نیاز باشد directive مقدار را در scope پدر تغییر دهد، استفاده می‌شود.
- save: "&" (expression) : علامت & مشخص می‌کند این متغیر یک expression را که در scope پدر اجرا می‌شود، نگهداری می‌کند. اکنون directive قابلیت انجام کارهایی فراتر از تغییر یک مقدار را دارد. به عنوان مثال می‌توان یک تابع را از scope پدر فراخوانی و نتیجه‌ی اجرا را دریافت کرد.
· template : الگوی رشته ای که جایگزین المنت تعریف شده می‌شود. فرآیند جایگزینی تمامی خصوصیات را از المنت قدیمی به المنت جدید انتقال می‌دهد. به نحوه استفاده از متغیرهای تعریف شده در scope ایزوله دقت کنید. این مورد به شما امکان تعریف directive های macro-style را می‌دهد که نیاز به کد اضافه‌ای، ندارند. اگرچه در بیشتر موارد الگو یک تگ ساده <div> است که از کدهای link که در زیر توضیح داده شده است استفاده می‌کند.
· replace : تعیین می‌کند که آیا الگوی directive باید جایگزین المنت شود. مقدار پیش فرض false است.
· transclude : تعیین کننده این است که محتوای directive باید در المنت کپی شود یا خیر. در مثال زیر المنت tab شامل المنت‌های HTML دیگر است پس transclude برابر true است.
<body ng-app="components"> <h3>BootStrap Tab Component</h3> <tabs> <pane title="First Tab"> <div>This is the content of the first tab.</div> </pane> <pane title="Second Tab"> <div>This is the content of the second tab.</div> </pane> </tabs> </body>
· link : این تابع بیشتر منطق directive را شامل می‌شود. Link وظیفه دستکاری DOM ، ایجاد event listener ها و... را دارد. تابع Link پارامترهای زیر را دریافت می‌کند:
- scope : ارجاع به scope ایزوله شده directive دارد.
- element : ارجاع به المنت‌های DOM که directive را تعریف کرده اند. تابع link معمولا برای دستکاری المنت از jQuery استفاده می‌کند. (یا از Angular's jqLite در صورتی که jQuery بارگذاری نشده باشد)
- controller : در مواقعی که از دایرکتیوهای تو در تو استفاده می‌شود کاربرد دارد. این پارامتر یک directive فرزند با ارجاعی به پدر را فراهم می‌کند، بنابراین موجب ارتباط directive ها می‌شود.
به عنوان مثال، این directive که پیاده سازی bootstrap tab را انجام داده است، می‌توانید مشاهده نمایید.
موفق باشید
namespace BlazorDemoApp.Models;
public record Product
{
public int Id { get; set; }
public required string Title { get; set; }
public required string Description { get; set; }
public decimal Price { get; set; }
public List<int> Related { get; set; } = new();
} using BlazorDemoApp.Models;
namespace BlazorDemoApp.Services;
public interface IProductStore
{
IList<Product> GetAllProducts();
Product GetProduct(int id);
IList<Product> GetRelatedProducts(int productId);
}
public class ProductStore : IProductStore
{
private static readonly List<Product> ProductsDataSource =
new()
{
new Product
{
Id = 1, Title = "Smart speaker", Price = 22m,
Description =
"This smart speaker delivers excellent sound quality and comes with built-in voice control, offering an impressive music listening experience.",
Related = new List<int> { 2, 3 },
},
new Product
{
Id = 2, Title = "Regular speaker", Price = 89m,
Description =
"Enjoy room-filling sound with this regular speaker. With its slick design, it perfectly fits into any room in your house.",
Related = new List<int> { 1, 3 },
},
new Product
{
Id = 3, Title = "Speaker cable", Price = 12m,
Description =
"This high-quality speaker cable ensures a reliable and clear audio connection for your sound system.",
},
};
public IList<Product> GetAllProducts() => ProductsDataSource;
public Product GetProduct(int id) => ProductsDataSource.Single(p => p.Id == id);
public IList<Product> GetRelatedProducts(int productId)
{
var product = ProductsDataSource.Single(x => x.Id == productId);
return ProductsDataSource.Where(p => product.Related.Contains(p.Id)).ToList();
}
} builder.Services.AddScoped<IProductStore, ProductStore>();
@page "/Products"
@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@inject IProductStore Store
@attribute [StreamRendering]
<h3>Products</h3>
@if (_products == null)
{
<p>Loading...</p>
}
else
{
@foreach (var item in _products)
{
<a href="/ProductDetails/@item.Id">
<div>
<div>
<h5>@item.Title</h5>
</div>
<div>
<h5>@item.Price.ToString("c")</h5>
</div>
</div>
</a>
}
}
@code {
private IList<Product>? _products;
protected override Task OnInitializedAsync() => GetProductsAsync();
private async Task GetProductsAsync()
{
await Task.Delay(1000); // Simulates asynchronous loading to demonstrate streaming rendering
_products = Store.GetAllProducts();
}
} 
@page "/ProductDetails/{ProductId}"
@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@inject IProductStore Store
@attribute [StreamRendering]
@if (_product == null)
{
<p>Loading...</p>
}
else
{
<div>
<div>
<h5>
@_product.Title (@_product.Price.ToString("C"))
</h5>
<p>
@_product.Description
</p>
</div>
@if (_product.Related.Count > 0)
{
<div>
<RelatedProducts ProductId="Convert.ToInt32(ProductId)" />
</div>
}
</div>
<NavLink href="/Products">Back</NavLink>
}
@code {
private Product? _product;
[Parameter]
public string? ProductId { get; set; }
protected override Task OnInitializedAsync() => GetProductAsync();
private async Task GetProductAsync()
{
await Task.Delay(1000); // Simulates asynchronous loading to demonstrate streaming rendering
_product = Store.GetProduct(Convert.ToInt32(ProductId));
}
} <RelatedProducts ProductId="Convert.ToInt32(ProductId)" />
@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@inject IProductStore Store
<button @onclick="LoadRelatedProducts">Related products</button>
@if (_loadRelatedProducts)
{
@if (_relatedProducts == null)
{
<p>Loading...</p>
}
else
{
<div>
@foreach (var item in _relatedProducts)
{
<a href="/ProductDetails/@item.Id">
<div>
<h5>@item.Title (@item.Price.ToString("C"))</h5>
</div>
</a>
}
</div>
}
}
@code{
private IList<Product>? _relatedProducts;
private bool _loadRelatedProducts;
[Parameter]
public int ProductId { get; set; }
private async Task LoadRelatedProducts()
{
_loadRelatedProducts = true;
await Task.Delay(1000); // Simulates asynchronous loading to demonstrate InteractiveServer mode
_relatedProducts = Store.GetRelatedProducts(ProductId);
}
} <RelatedProducts ProductId="Convert.ToInt32(ProductId)" @rendermode="@InteractiveServer"/>
<script src="_framework/blazor.web.js"></script>
<RelatedProducts ProductId="Convert.ToInt32(ProductId)" @rendermode="@(new InteractiveServerRenderMode(false))"/>
@using static Microsoft.AspNetCore.Components.Web.RenderMode
public static class RenderMode
{
public static InteractiveServerRenderMode InteractiveServer { get; } = new InteractiveServerRenderMode();
public static InteractiveWebAssemblyRenderMode InteractiveWebAssembly { get; } = new InteractiveWebAssemblyRenderMode();
public static InteractiveAutoRenderMode InteractiveAuto { get; } = new InteractiveAutoRenderMode();
}
public class InteractiveServerRenderMode : IComponentRenderMode
{
public InteractiveServerRenderMode()
: this(true)
{
}
public InteractiveServerRenderMode(bool prerender) => this.Prerender = prerender;
public bool Prerender { get; }
} 
JSON.stringify({}); // '{}'
JSON.stringify(true); // 'true'
JSON.stringify('foo'); // '"foo"'
JSON.stringify([1, 'false', false]); // '[1,"false",false]'
JSON.stringify({ x: 5 }); // '{"x":5}'
JSON.stringify(new Date(2006, 0, 2, 15, 4, 5))
// '"2006-01-02T15:04:05.000Z"'
JSON.stringify({ x: 5, y: 6 });
// '{"x":5,"y":6}' or '{"y":6,"x":5}'
JSON.stringify([new Number(1), new String('false'), new Boolean(false)]);
// '[1,"false",false]'
JSON.stringify({ x: [10, undefined, function(){}, Symbol('')] });
// '{"x":[10,null,null,null]}'
// Symbols:
JSON.stringify({ x: undefined, y: Object, z: Symbol('') });
// '{}'
JSON.stringify({ [Symbol('foo')]: 'foo' });
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, [Symbol.for('foo')]);
// '{}'
JSON.stringify({ [Symbol.for('foo')]: 'foo' }, function(k, v) {
if (typeof k === 'symbol') {
return 'a symbol';
}
});
// '{}'
// Non-enumerable properties:
JSON.stringify( Object.create(null, { x: { value: 'x', enumerable: false }, y: { value: 'y', enumerable: true } }) );
// '{"y":"y"}' 
"apps": [
{
"assets": [
"assets",
"favicon.ico"
],
"styles": [
"styles.css"
],
"scripts": [], > npm install bootstrap --save > npm install ngx-bootstrap --save
"dependencies": {
"bootstrap": "^3.3.7",
"ngx-bootstrap": "^1.6.6", "apps": [
{
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
], "scripts": [ "../node_modules/jquery/dist/jquery.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ],
import { AlertModule } from 'ngx-bootstrap';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AlertModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { } <h1>
{{title}}
</h1>
<button class="btn btn-primary">Hello!</button>
<alert type="success">Alert success!</alert> 
<component type="typeof(App)" render-mode="ServerPrerendered" />
<body>
<component type="typeof(App)" render-mode="WebAssemblyPrerendered" />
<persist-component-state />
</body> @page "/"
@implements IDisposable
@inject PersistentComponentState applicationState
@inject IUserRepository userRepository
@foreach(var user in users)
{
<ShowUserInformation user="@item"></ShowUserInformation>
}
@code {
private const string cachingKey = "something_unique";
private List<User> users = new();
private PersistingComponentStateSubscription persistingSubscription;
protected override async Task OnInitializedAsync()
{
persistingSubscription = applicationState.RegisterOnPersisting(PersistData);
if (applicationState.TryTakeFromJson<List<User>>(cachingKey, out var restored))
{
users = restored;
}
else
{
users = await userRepository.GetAllUsers();
}
}
public void Dispose()
{
persistingSubscription.Dispose();
}
private Task PersistData()
{
applicationState.PersistAsJson(cachingKey, users);
return Task.CompletedTask;
}
} <!--Blazor-Server-Component-State:CfDJXyz-> <!--Blazor-WebAssembly-Component-State:eyJVc2Xyz->
@rendermode renderMode
@code
{
private static IComponentRenderMode renderMode = new InteractiveWebAssemblyRenderMode(prerender: false);
} @implements IDisposable
@inject IProductStore ProductStore
@inject PersistentComponentState PersistentState
<h3>Related products</h3>
@if (_relatedProducts == null)
{
<p>Loading...</p>
}
else
{
<div class="mt-3">
@foreach (var item in _relatedProducts)
{
<a href="/ProductDetails/@item.Id">
<div class="col-sm">
<h5 class="mt-0">@item.Title (@item.Price)</h5>
</div>
</a>
}
</div>
}
@code{
private const string StateCachingKey = "products";
private IList<Product>? _relatedProducts;
private PersistingComponentStateSubscription _persistingSubscription;
[Parameter]
public int ProductId { get; set; }
protected override async Task OnInitializedAsync()
{
_persistingSubscription = PersistentState.RegisterOnPersisting(OnPersistingAsync, RenderMode.InteractiveWebAssembly);
if (PersistentState.TryTakeFromJson<IList<Product>>(StateCachingKey, out var restored))
{
_relatedProducts = restored;
}
else
{
await Task.Delay(500); // Simulates asynchronous loading
_relatedProducts = await ProductStore.GetRelatedProducts(ProductId);
}
}
private Task OnPersistingAsync()
{
PersistentState.PersistAsJson(StateCachingKey, _relatedProducts);
return Task.CompletedTask;
}
public void Dispose()
{
_persistingSubscription.Dispose();
}
} در ابتدای بحث، برای آشنایی بیشتر با HTML Helperها به مطالعه این مقاله بپردازین.
در این مقاله قرار است برای یک HTML Helper خاص، قالب نمایشی اختصاصی خودمان را طراحی کنیم و به نحوی HTML Helper موجود را سفارشی سازی کنیم. به عنوان مثال میخواهیم خروجی یک EditorFor() برای یک نوع خاص، به حالت دلخواهی باشد که ما خودمان آن را تولیدش کردیم؛ یا اصلا نه. حتی می‌شود برای خروجی یک EditorFor() که خصوصیتی از جنس string را میخواهیم به آن انتساب دهیم، به جای تولید input، یک مقدار متنی را برگردانیم. به این حالت:
<div>
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div>
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div>
@Html.LabelFor(model => model.Genre, htmlAttributes: new { @class = "control-label col-md-2" })
<div>
@Html.EditorFor(model => model.Genre, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Genre, "", new { @class = "text-danger" })
</div>
</div> 
در ادامه یک پروژه‌ی عملی را شروع کرده و در آن کاری را که میخواهیم، انجام می‌دهیم. پروژه‌ی ما به این شکل می‌باشد که قرار است در آن به ثبت کتاب بپردازیم و برای هر کتاب هم یک سبک داریم و قسمت سبک کتاب‌های ما یک Enum است که از قبل میخواهیم مقدارهایش را تعریف کنیم.
مدل برنامه
public class Books
{
public int Id { get; set; }
[Required]
[StringLength(255)]
public string Name { get; set; }
public Genre Genre { get; set; }
} public enum Genre
{
[Display(Name = "Non Fiction")]
NonFiction,
Romance,
Action,
[Display(Name = "Science Fiction")]
ScienceFiction
} در داخل کلاس Books یک خصوصیت از جنس Genre برای سبک کتاب‌ها داریم و در داخل نوع شمارشی Genre، سبک‌های ما تعریف شده‌اند. همچنین هر کدام از سبک‌ها هم به ویژگی Display مزین شده‌اند تا بتونیم بعدا از مقدار آنها استفاده کنیم.
کنترلر برنامه
public class BookController : Controller
{
// GET: Book
public ActionResult Index()
{
return View(DataAccess.DataContext.Book.ToList());
}
public ActionResult Create()
{
return View();
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Create(Books model)
{
if (!ModelState.IsValid)
return View(model);
try
{
DataAccess.DataContext.Book.Add(model);
DataAccess.DataContext.SaveChanges();
return RedirectToAction("Index");
}
catch (Exception ex)
{
ModelState.AddModelError("", ex.Message);
return View(model);
}
}
public ActionResult Edit(int id)
{
try
{
var book = DataAccess.DataContext.Book.Find(id);
return View(book);
}
catch (Exception ex)
{
return View("Error");
}
}
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Edit(Books model)
{
if (!ModelState.IsValid)
return View(model);
try
{
DataAccess.DataContext.Book.AddOrUpdate(model);
DataAccess.DataContext.SaveChanges();
return RedirectToAction("Index");
}
catch (Exception ex)
{
ModelState.AddModelError("", ex.Message);
return View(model);
}
}
public ActionResult Details(int id)
{
try
{
var book = DataAccess.DataContext.Book.Find(id);
return View(book);
}
catch (Exception ex)
{
return View("Error");
}
}
} در قسمت کنترلر هم کار خاصی جز عملیات اصلی نوشته نشده‌است. لیست کتاب‌ها را از پایگاه داده بیرون آوردیم و از طریق اکشن Index به نمایش گذاشتیم. با اکشن‌های Create، Edit و Details هم کارهای روتین مربوط به خودشان را انجام دادیم. نکته‌ی قابل تذکر، DataAccess می‌باشد که کلاسی است که با آن ارتباط برقرار شده با EF و سپس اطلاعات واکشی و تزریق می‌شوند.
View مربوط به اکشن Create برنامه
@using Book.Entities
@model Book.Entities.Books
@{
ViewBag.Title = "Create";
}
<h2>New Book</h2>
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
<div>
<h4>Books</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div>
@Html.LabelFor(model => model.Name, htmlAttributes: new { @class = "control-label col-md-2" })
<div>
@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Name, "", new { @class = "text-danger" })
</div>
</div>
<div>
@Html.LabelFor(model => model.Genre, htmlAttributes: new { @class = "control-label col-md-2" })
<div>
@Html.EditorFor(model => model.Genre, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Genre, "", new { @class = "text-danger" })
</div>
</div>
<div>
<div>
<input type="submit" value="Create" />
<input type="reset" value="Reset" />
@Html.ActionLink("Back to List", "Index", null, new {@class="btn btn-default"})
</div>
</div>
</div>
}
@section Scripts {
@Scripts.Render("~/bundles/jqueryval")
} View برنامه هم همان ویویی است که خود Visual Studio برای ما ساخته‌است. به جز یک سری دست‌کاری‌هایی داخل سی‌اس‌اس، هدف از گذاشتن View مربوط به Create این بود که قرار است بر روی این قسمت کار کنیم. اگر پروژه رو اجرا کنید و به قسمت Create بروید، مشاهده خواهید کرد که برای Genre یک input ساخته شده‌است که کاربر باید در آن مقدار وارد کند. ولی اگر یادتان باشد، ما سبک‌های نگارشی خودمان را در نوع شمارشی Genre ایجاد کرده بودیم. پس عملا باید یک لیست به کاربر نشان داده شود که تا از آن لیست، نوع را انتخاب کند. می‌توانیم بیایم همینجا در داخل View مربوطه، به‌جای استفاده از HTML Helper پیش‌فرض، از DropDownList یا EnumFor استفاده کنیم و به طریقی این لیست را ایجاد کنیم. ولی چون قرار است در این مثال به شرح موضوع مقاله خودمان بپردازیم، این کار را انجام نمی‌دهیم.
در حقیقیت می‌خوایم متد EditorFor را طوری سفارشی سازی کنیم که برای نوع شمارشی Genre، به صورت خودکار یک لیست ایجاد کرده و برگرداند. از نسخه‌ی سوم ASP.NET MVC به بعد این امکان برای توسعه دهنده‌ها فراهم شده‌است. شما می‌توانید در پوشه‌ی Shared داخل پوشه Views برنامه، پوشه‌ای را به اسم EditorTemplates ایجاد کنید؛ همینطور DisplayTemplates و برای نوع خاصی که می‌خواهید سفارشی‌سازی را برای آن انجام دهید، یک PartialView بسازید.
Views/Shared/DisplayTemplates/<type>.cshtml
کاری که الان میخواهیم انجام دهیم این است که یک SelectListItem ایجاد کرده تا مقدارهای نوع Genreمان داخلش باشد و بتوانیم به راحتی برای ساختن DropDownList از آن استفاده کنیم. برای این کار Helper مخصوص خودمان را ایجاد می‌کنیم. پوشه‌ای به اسم Helpers در کنار پوشه‌های Controllers، Models ایجاد می‌کنیم و در داخل آن کلاسی به اسم EnumHelpers می‌سازیم.
public static class EnumHelpers
{
public static IEnumerable<SelectListItem> GetItems(
this Type enumType, int? selectedValue)
{
if (!typeof(Enum).IsAssignableFrom(enumType))
{
throw new ArgumentException("Type must be an enum");
}
var names = Enum.GetNames(enumType);
var values = Enum.GetValues(enumType).Cast<int>();
var items = names.Zip(values, (name, value) =>
new SelectListItem
{
Text = GetName(enumType, name),
Value = value.ToString(),
Selected = value == selectedValue
}
);
return items;
}
static string GetName(Type enumType, string name)
{
var result = name;
var attribute = enumType
.GetField(name)
.GetCustomAttributes(inherit: false)
.OfType<DisplayAttribute>()
.FirstOrDefault();
if (attribute != null)
{
result = attribute.GetName();
}
return result;
}
} در توضیح کد بالا عنوان کرد که متدها به‌صورت متدهای الحاقی به نوع Type نوشته شدند. کار خاصی در بدنه‌ی متدها انجام نشده‌است. در بدنه‌ی متد اول لیست آیتم‌ها را تولید کردیم. در هنگام ساخت SelectListItem برای گرفتن Text، متد GetName را صدا زدیم. برای اینکه بتوانیم مقدار ویژگی Display که در هنگام تعریف نوع شمارشی استفاده کردیم را بدست بیاریم، باید چک کنیم ببینیم که آیا این آیتم به این ویژگی مزین شده‌است یا نه. اگر شده بود مقدار را می‌گیریم و به خصوصیت Text متد اول انتساب می‌دهیم.
@using Book.Entities
@using Book.Web.Helpers
@{
var items = typeof(Genre).GetItems((int?)Model);
}
@Html.DropDownList("", items, new {@class="form-control"}) کدهایی که در بالا مشاهده می‌کنید کدهایی می‌باشند که قرار است داخل PartialViewی Genre قرار دهیم که در پوشه‌ی EditorTemplates ساختیم. ابتدا آمدیم آیتم‌ها را گرفتیم و بعد به DropDownList دادیم تا لیست نوع را برای ما بسازد. حالا اگه برنامه را اجرا کنید می‌بینید که EditorFor برای شما یه لیست از نوع شمارشی ساخته و حالا قابل استفاده هست.
کدهای کامل این مثال را از اینجا می‌توانید دریافت کنید
using System.ComponentModel.DataAnnotations;
namespace BlazorAsyncValidation.Shared;
public class UserDto
{
[Required] public string Name { set; get; } = default!;
} using BlazorAsyncValidation.Shared;
using Microsoft.AspNetCore.Mvc;
namespace BlazorAsyncValidation.Server.Controllers;
[ApiController, Route("api/[controller]/[action]")]
public class RegisterController : ControllerBase
{
[HttpPost]
public IActionResult IsUserNameUnique([FromBody] UserDto userModel)
{
if (string.Equals(userModel?.Name, "Vahid", StringComparison.OrdinalIgnoreCase))
{
return Ok(false);
}
return Ok(true);
}
} 
@page "/"
<PageTitle>Index</PageTitle>
<h2>Register</h2>
<EditForm EditContext="@EditContext" OnValidSubmit="DoSubmitAsync">
<DataAnnotationsValidator/>
<div class="row mb-2">
<label class="col-form-label col-lg-2">Name:</label>
<div class="col-lg-10">
<InputText @bind-Value="Model.Name" class="form-control"/>
<ValidationMessage For="@(() => Model.Name)"/>
</div>
</div>
<button class="btn btn-secondary" type="submit">Submit</button>
</EditForm> public partial class Index
{
private const string UserValidationUrl = "/api/Register/IsUserNameUnique";
private ValidationMessageStore? _messageStore;
[Inject] private HttpClient HttpClient { set; get; } = default!;
private EditContext? EditContext { set; get; }
private UserDto Model { get; } = new(); protected override void OnInitialized()
{
EditContext = new EditContext(Model);
_messageStore = new ValidationMessageStore(EditContext);
EditContext.OnFieldChanged += (sender, eventArgs) =>
{
var fieldIdentifier = eventArgs.FieldIdentifier;
_messageStore?.Clear(fieldIdentifier);
_ = InvokeAsync(async () =>
{
var errors = await OnValidateFieldAsync(fieldIdentifier.FieldName);
if (errors?.Any() != true)
{
return;
}
foreach (var error in errors)
{
_messageStore?.Add(fieldIdentifier, error);
}
EditContext.NotifyValidationStateChanged();
});
StateHasChanged();
};
EditContext.OnValidationStateChanged += (sender, eventArgs) => StateHasChanged();
EditContext.OnValidationRequested += (sender, eventArgs) => _messageStore?.Clear();
} private async Task<IList<string>?> OnValidateFieldAsync(string fieldName)
{
switch (fieldName)
{
case nameof(UserDto.Name):
var response = await HttpClient.PostAsJsonAsync(
UserValidationUrl,
new UserDto { Name = Model.Name });
var responseContent = await response.Content.ReadAsStringAsync();
if (string.Equals(responseContent, "false", StringComparison.OrdinalIgnoreCase))
{
return new List<string>
{
$"`{Model.Name}` is in use. Please choose another name."
};
}
// TIP: It's better to use the `DntDebounceInputText` component for this case to reduce the network round-trips.
break;
}
return null;
} <link href="_content/Bit.Client.Web.BlazorUI/styles/bit.blazorui.min.css" rel="stylesheet" />
<script src="_content/Bit.Client.Web.BlazorUI/scripts/bit.blazorui.min.js"></script>
@using Bit.Client.Web.BlazorUI
<BitButton>Hello!</BitButton>
<BitDatePicker SelectedDate="@BirthDate"></BitDatePicker>
CultureInfo.CurrentUICulture = new CultureInfo("fa-IR"); <BitDatePicker Culture="@(new System.Globalization.CultureInfo("en-US"))" /> var cultureInfo = CultureInfo.CreateSpecificCulture("fa-IR") cultureInfo.DateTimeFormat.MonthNames = new[] { "فروردین", "اردیبهشت", "خرداد", "تیر", "مرداد", "شهریور", "مهر", "آبان", "آذر", "دی", "بهمن", "اسفند", "" };