نصب و آموزش کامپوننت انتخابگر آیتم Zeon Blazor ItemChooser
نحوه اضافه کردن کامپوننت (ItemChooser)
اضافه کردن فضای نام (در صفحه مورد نظر کد زیر را به Using ها اضافه کنید)
YourPage.razor
@using Zeon.Blazor.ZItemChooser
@using Zeon.Blazor.ZItemChooser.Constants
اضافه کردن انتخابگر آیتم (ItemChooser)
در صفحه و تگ مورد نظر خود جهت اضافه کردن انتخابگر آیتم کد زیر را استفاده کنید
YourPage.razor
<ZItemChooser KeyType="int" Name="item-chooser-people" ></ZItemChooser>
پارامتر ها (parameters)
| نام پارامتر | نوع پارامتر | مقدار پیشفرض | اجباری | توضیحات |
|---|---|---|---|---|
| KeyType | Generic Type | بله | نوع کلید بازگشتی و ورودی مانند int , long , string و ... | |
| Name | string | بله | نام کامپوننت که در هر صفحه باید یونیک باشد | |
| FetchData | Func<string, Task<Dictionary<KeyType, string>>> | بله | یک تابع با ورودی string و خروجی دیکشنری با کلید KeyType و مقدار string | |
| OnKeyChanged | string | بله | رویداد تغییر و یا انتخاب آیتم | |
| WaitingTimeTyping | UInt16 | 600 | خیر | مقدار زمان انتظار برای اتمام تایپ و ارسال درخواست جستجو که در صورت قرار دادن به مقدار 0 جستجو بر اساس کلید Enter انجام می شود |
| BehaviorModeAfterItemSelection | Enum Type Of BehaviorModeAfterItemSelection | BehaviorModeAfterItemSelection.Normal | خیر | نحوه رفتار بعد از انتخاب آیتم در حالت نرمال آیتم انتخاب می شود و در حالت Eventable فقط شناسه آیتم انتخاب شده به رویداد ارسال می شود |
| NotFoundRecordText | string | رکوردی یافت نشد! | خیر | متن نمایشی در صورت پیدا نشدن رکورد |
توابع (functions)
| نام تابع | نوع | توضیحات |
|---|---|---|
| SetDisplayValue | void | تنظیم نام نمایشی برای آیتم پیشفرض |
نمایشگاه و نمونه کد (Samples)
حالت نمایش ساده بدون کانتینر
برای تست میثم را جستجو کنید
Output Preview
Code
<div class="row" style="font-size:small">
<div class="col-auto p-1">
<ZItemChooser KeyType="int" Name="item-chooser-people" FetchData="GetPeople" OnKeyChanged="(key)=> {}"></ZItemChooser>
</div>
<div class="col-auto p-1">
</div>
<div class="col-auto p-1">
</div>
</div>
@code {
protected override void OnInitialized()
{
for (int i = 0; i < 2000; i++)
{
_peoples.Add(new People()
{
Id = i + 1,
Name = "میثم",
Family = "خادمی" + (i + 1),
IsActive = true
});
}
base.OnInitialized();
}
List<People> _peoples = new();
public class People
{
public People()
{
Birthday = new DateTime(1992, 07, 01);
}
public int Id { get; set; }
public string Name { get; set; }
public string Family { get; set; }
public bool IsActive { get; set; }
public DateTime Birthday { get; set; }
}
private async Task<Dictionary<int, string>> GetPeople(string value)
{
var result = _peoples.Where(q => string.Concat(q.Name, " ", q.Family).Contains(value)).Take(50)
.ToDictionary(k => k.Id, v => string.Concat(v.Name, " ", v.Family));
//just for show spiner in demo mode
await Task.Delay(2000);
return result;
}
}
حالت نمایش با کانتینر
Output Preview
Code
<div class="row" style="font-size:small">
<div class="col-auto p-1">
<Zeon.Blazor.ZInputContainer.ZInputContainer TModel="string" For="خریدار" Display="flex" CssIcon="fa fa-user">
<ZItemChooser KeyType="int" Name="item-chooser-people1" FetchData="GetPeople" OnKeyChanged="(key)=> {}"></ZItemChooser>
</Zeon.Blazor.ZInputContainer.ZInputContainer>
</div>
<div class="col-auto p-1">
</div>
<div class="col-auto p-1">
</div>
</div>
@code {
public Zeon.Blazor.ZInput.ZInput<int> ZInputSeller2 { get; set; } = null!;
protected override void OnInitialized()
{
for (int i = 0; i < 2000; i++)
{
_peoples.Add(new People()
{
Id = i + 1,
Name = "میثم",
Family = "خادمی" + (i + 1),
IsActive = true
});
}
base.OnInitialized();
}
List<People> _peoples = new();
public class People
{
public People()
{
Birthday = new DateTime(1992, 07, 01);
}
public int Id { get; set; }
public string Name { get; set; }
public string Family { get; set; }
public bool IsActive { get; set; }
public DateTime Birthday { get; set; }
}
private async Task<Dictionary<int, string>> GetPeople(string value)
{
var result = _peoples.Where(q => string.Concat(q.Name, " ", q.Family).Contains(value)).Take(50)
.ToDictionary(k => k.Id, v => string.Concat(v.Name, " ", v.Family));
//just for show spiner in demo mode
await Task.Delay(2000);
return result;
}
}
حالت نمایش با کانتینر و نمایش شناسه انتخاب شده(display flex)
Output Preview
Code
<div class="row" style="font-size:small">
<div class="col-auto p-1">
<div class="row">
<Zeon.Blazor.ZInputContainer.ZInputContainer Width="70%" TModel="string" For="فروشنده" Display="flex" CssIcon="fa fa-user">
<ZItemChooser KeyType="int" Name="item-chooser-people2" FetchData="GetPeople" OnKeyChanged="OnPeopleSelectedItem1"></ZItemChooser>
</Zeon.Blazor.ZInputContainer.ZInputContainer>
<Zeon.Blazor.ZInputContainer.ZInputContainer Width="30%" TModel="string" For="شناسه" Display="flex" CssIcon="fa fa-key">
<Zeon.Blazor.ZInput.ZInput @ref="ZInputSeller1" Type="int" IsDisabled="true" ></Zeon.Blazor.ZInput.ZInput>
</Zeon.Blazor.ZInputContainer.ZInputContainer>
</div>
</div>
<div class="col-auto p-1">
</div>
</div>
@code {
public Zeon.Blazor.ZInput.ZInput<int> ZInputSeller1 { get; set; } = null!;
protected override void OnInitialized()
{
for (int i = 0; i < 2000; i++)
{
_peoples.Add(new People()
{
Id = i + 1,
Name = "میثم",
Family = "خادمی" + (i + 1),
IsActive = true
});
}
base.OnInitialized();
}
List<People> _peoples = new();
public class People
{
public People()
{
Birthday = new DateTime(1992, 07, 01);
}
public int Id { get; set; }
public string Name { get; set; }
public string Family { get; set; }
public bool IsActive { get; set; }
public DateTime Birthday { get; set; }
}
private async Task<Dictionary<int, string>> GetPeople(string value)
{
var result = _peoples.Where(q => string.Concat(q.Name, " ", q.Family).Contains(value)).Take(50)
.ToDictionary(k => k.Id, v => string.Concat(v.Name, " ", v.Family));
//just for show spiner in demo mode
await Task.Delay(2000);
return result;
}
private void OnPeopleSelectedItem1(int value)
{
ZInputSeller1.SetValue(value.ToString());
}
}
حالت نمایش با کانتینر و نمایش شناسه انتخاب شده(display block)
Output Preview
Code
<div class="row" style="font-size:small">
<div class="col-auto p-1">
<div class="row">
<Zeon.Blazor.ZInputContainer.ZInputContainer Width="70%" TModel="string" For="فروشنده" Display="block" CssIcon="fa fa-user">
<ZItemChooser KeyType="int" Name="item-chooser-people3" FetchData="GetPeople" OnKeyChanged="OnPeopleSelectedItem2"></ZItemChooser>
</Zeon.Blazor.ZInputContainer.ZInputContainer>
<Zeon.Blazor.ZInputContainer.ZInputContainer Width="30%" TModel="string" For="شناسه" Display="block" CssIcon="fa fa-key">
<Zeon.Blazor.ZInput.ZInput @ref="ZInputSeller2" Type="int" IsDisabled="true"></Zeon.Blazor.ZInput.ZInput>
</Zeon.Blazor.ZInputContainer.ZInputContainer>
</div>
</div>
<div class="col-auto p-1">
</div>
</div>
@code {
public Zeon.Blazor.ZInput.ZInput<int> ZInputSeller2 { get; set; } = null!;
protected override void OnInitialized()
{
for (int i = 0; i < 2000; i++)
{
_peoples.Add(new People()
{
Id = i + 1,
Name = "میثم",
Family = "خادمی" + (i + 1),
IsActive = true
});
}
base.OnInitialized();
}
List<People> _peoples = new();
public class People
{
public People()
{
Birthday = new DateTime(1992, 07, 01);
}
public int Id { get; set; }
public string Name { get; set; }
public string Family { get; set; }
public bool IsActive { get; set; }
public DateTime Birthday { get; set; }
}
private async Task<Dictionary<int, string>> GetPeople(string value)
{
var result = _peoples.Where(q => string.Concat(q.Name, " ", q.Family).Contains(value)).Take(50)
.ToDictionary(k => k.Id, v => string.Concat(v.Name, " ", v.Family));
//just for show spiner in demo mode
await Task.Delay(2000);
return result;
}
private void OnPeopleSelectedItem2(int value)
{
ZInputSeller2.SetValue(value.ToString());
}
}