آیا در این روش میتوان به صورت DataView لیست مشتریها رو برگردوند به جای اینکه از List<Customer>
استفاده کنیم ؟ باز هم به آن non-uniform میگویند ؟
npm install vue-class-component vue-property-decorator --save-dev
<template> <div> <p>Long-form v-model example</p> <input :value="myDataProperty" @input="updateMyProperty($event)"/> </div> </template> <script> import Vue from 'vue' import { Component } from 'vue-property-decorator' @Component export default class App extends Vue { // Data property myDataProperty: string; // Lifecycle hook mounted () { this.myDataProperty = 'Boop' } // Component method updateMyProperty ($event) { this.myDataProperty = $event.target.value } } </script>
@Component({ name: 'App', components: { AppModal } })
@Prop @PropSync @Provide @Model @Watch @Inject @Provide @Emit
import { Vue, Component, Prop } from 'vue-property-decorator' @Component export default class YourComponent extends Vue { @Prop(Number) readonly propA: number | undefined @Prop({ default: 'default value' }) readonly propB!: string @Prop([String, Boolean]) readonly propC: string | boolean | undefined }
export default { props: { propA: { type: Number }, propB: { default: 'default value' }, propC: { type: [String, Boolean] } } }
<AuthorizeView> <Authorized> Hello, @context.User.Identity.Name! </Authorized> </AuthorizeView>
@typeparam Titem <table class="table"> <thead> <tr>@TableHeader</tr> </thead> <tbody> @foreach (var item in Items) { <tr>@RowTemplate(item)</tr> } </tbody> </table> @code { [Parameter] public RenderFragment TableHeader { get; set; } [Parameter] public RenderFragment<TItem> RowTemplate { get; set; } [Parameter] public IReadOnlyList<TItem> Items { get; set; } }
@page "/pets" <h1>Pets</h1> <TableTemplate Items="pets"> <TableHeader> <th>ID</th> <th>Name</th> </TableHeader> <RowTemplate> <td>@context.PetId</td> <td>@context.Name</td> </RowTemplate> </TableTemplate> @code { private List<Pet> pets = new() { new Pet { PetId = 2, Name = "Mr. Bigglesworth" }, new Pet { PetId = 4, Name = "Salem Saberhagen" }, new Pet { PetId = 7, Name = "K-9" } }; private class Pet { public int PetId { get; set; } public string Name { get; set; } } }
<TableTemplate Items="pets" TItem="Pet">
<SomeGenericComponent TParam1="Person" TParam2="Supplier" TItem=etc/>
<TableTemplate Items="pets" Context="pet"> <TableHeader> <th>ID</th> <th>Name</th> </TableHeader> <RowTemplate> <td>@pet.PetId</td> <td>@pet.Name</td> </RowTemplate> </TableTemplate>
<TableTemplate Items="pets"> <TableHeader> <th>ID</th> <th>Name</th> </TableHeader> <RowTemplate Context="pet"> <td>@pet.PetId</td> <td>@pet.Name</td> </RowTemplate> </TableTemplate>
"dependencies": { // ... "@angular/router": "^3.0.0-alpha.7", // ... },
import { provideRouter, RouterConfig } from '@angular/router'; import { ProductListComponent } from './products/product-list.component'; import { WelcomeComponent } from './home/welcome.component'; import { ProductDetailComponent } from './products/product-detail.component'; import { ProductFormComponent } from './products/product-form.component'; import { SignupFormComponent } from './users/signup-form.component'; import { TypedShaComponent } from './using-third-party-libraries/typed-sha.component'; import { UnTypedShaComponent } from './using-third-party-libraries/untyped-sha.component'; import { UsingJQueryAddonsComponent } from './using-jquery-addons/using-jquery-addons.component'; export const routes: RouterConfig = [ { path: '', component: WelcomeComponent }, { path: 'welcome', component: WelcomeComponent }, { path: 'products', component: ProductListComponent }, { path: 'product/:id', component: ProductDetailComponent }, { path: 'addproduct', component: ProductFormComponent }, { path: 'adduser', component: SignupFormComponent }, { path: 'typedsha', component: TypedShaComponent }, { path: 'untypedsha', component: UnTypedShaComponent }, { path: 'usingjquery', component: UsingJQueryAddonsComponent } ]; export const APP_ROUTER_PROVIDERS = [ provideRouter(routes) ];
<base href=".">
// ... import { APP_ROUTER_PROVIDERS } from './app.routes'; // ... bootstrap(AppComponent, [ // ... APP_ROUTER_PROVIDERS ]) .catch(err => console.error(err));
import { ROUTER_DIRECTIVES } from '@angular/router';
<a [routerLink]="['/welcome']">Home</a>
this._router.navigate(['/products']);
import { Component, OnInit, OnDestroy } from '@angular/core'; import { Router, ActivatedRoute } from '@angular/router'; @Component({ templateUrl: 'app/products/product-detail.component.html' //template: require('./product-detail.component.html')//for webpack }) export class ProductDetailComponent implements OnInit, OnDestroy { private sub: any; pageTitle: string = 'Product Detail'; constructor(private _route: ActivatedRoute, private _router: Router) { } ngOnInit(): void { this.sub = this._route.params .subscribe(params => { let id = +params['id']; // (+) converts string 'id' to a number this.pageTitle += `: ${id}`; }); } ngOnDestroy(): void { this.sub.unsubscribe(); // we must unsubscribe before Angular destroys the component. Failure to do so could create a memory leak. } onBack(): void { this._router.navigate(['/products']); } }
<a [routerLink]="['/product', product.productId]"> {{product.productName}} </a>
@typeparam T @inherits InputBase<T>
protected override bool TryParseValueFromString( string? value, [MaybeNullWhen(false)] out T result, [NotNullWhen(false)] out string? validationErrorMessage) { // ... } protected override string FormatValueAsString(T? value) { // ... }
<link href="_content/BlazorPersianJavaScriptDatePicker.Lib/css/PersianDatePicker.css" rel="stylesheet"/> <script src="_content/BlazorPersianJavaScriptDatePicker.Lib/js/PersianDatePicker.js?v=1"></script>
@using BlazorPersianJavaScriptDatePicker.Lib
@typeparam T @inherits InputBase<T> <div> <span style="cursor:pointer" onclick="PersianDatePicker.Show(document.getElementById('@ElementId'), '@Today')"> 📅 </span> <input @attributes="@AdditionalAttributes" type="text" dir="ltr" @ref="ElementReference" name="@ElementId" id="@ElementId" autocapitalize="off" autocorrect="off" autocomplete="off" value="@EnteredValue" @oninput="OnInput"/> @if (ValueExpression is not null) { <ValidationMessage For="@ValueExpression"/> } </div>
function setValue(date) { _textBox.value = date; // NOTE: To notify the addEventListener('change', fn) _textBox.dispatchEvent(new Event('change')); _textBox.focus(); hide(); try { _textBox.onchange(); }catch(ex) {} }
window.activateDatePicker = { enableDatePicker: function (element, objectReference) { element.addEventListener('change', function (evt) { objectReference.invokeMethodAsync("OnInputFieldChanged", this.value); }); } };
<script src="_content/BlazorPersianJavaScriptDatePicker.Lib/js/activateDatePicker.js?v=1"></script>
public partial class PersianDatePicker<T> : IDisposable { private bool _isDisposed; private DotNetObjectReference<PersianDatePicker<T>>? _objectReference; private string ElementId { get; } = Guid.NewGuid().ToString("N"); private ElementReference? ElementReference { set; get; } private string Today { get; } = DateTime.Now.ToShortPersianDateString(); [Inject] private IJSRuntime JsRuntime { set; get; } = default!; public void Dispose() { Dispose(true); GC.SuppressFinalize(this); } protected override async Task OnAfterRenderAsync(bool firstRender) { if (firstRender) { _objectReference = DotNetObjectReference.Create(this); await JsRuntime.InvokeVoidAsync("activateDatePicker.enableDatePicker", ElementReference, _objectReference); EnteredValue = CurrentValueAsString; StateHasChanged(); } } protected override void Dispose(bool disposing) { base.Dispose(disposing); if (!_isDisposed) { try { _objectReference?.Dispose(); } finally { _isDisposed = true; } } } }
[JSInvokable] public void OnInputFieldChanged(string? value)
public partial class PersianDatePicker<T> : IDisposable { private string? _enteredValue; private string? EnteredValue { set => _enteredValue = value; get => UsePersianNumbers ? _enteredValue.ToPersianNumbers() : _enteredValue; } [Parameter] public bool UsePersianNumbers { set; get; } [Parameter] public string ParsingErrorMessage { get; set; } = "لطفا در ورودی {0} تاریخ شمسی معتبری را وارد نمائید."; [Parameter] public int BeginningOfCentury { set; get; } = 1400; private void OnInput(ChangeEventArgs e) { SetCurrentValue(e.Value as string); } private void SetCurrentValue(string? value) { EnteredValue = value; CurrentValueAsString = value; } [JSInvokable] public void OnInputFieldChanged(string? value) { SetCurrentValue(value); } protected override void OnInitialized() { base.OnInitialized(); SanityCheck(); } protected override bool TryParseValueFromString( string? value, [MaybeNullWhen(false)] out T result, [NotNullWhen(false)] out string? validationErrorMessage) { validationErrorMessage = string.Format(CultureInfo.InvariantCulture, ParsingErrorMessage, DisplayName); if (!value.TryParsePersianDateToDateTimeOrDateTimeOffset(out result, BeginningOfCentury)) { return false; } if (result is null) { throw new InvalidOperationException(validationErrorMessage); } validationErrorMessage = null; return true; } protected override string FormatValueAsString(T? value) { return !string.IsNullOrWhiteSpace(EnteredValue) ? EnteredValue : value.FormatDateToShortPersianDate(); } private void SanityCheck() { if (!Value.IsDateTimeOrDateTimeOffsetType()) { throw new InvalidOperationException( "The `Value` type is not a supported `date` type. DateTime, DateTime?, DateTimeOffset and DateTimeOffset? are supported."); } } // ... }
using System.ComponentModel.DataAnnotations; namespace BlazorPersianJavaScriptDatePicker.ViewModels; public class InputPersianDateViewModel { [Required] public string Name { set; get; } = default!; [Required] public DateTime BirthDayGregorian { set; get; } = DateTime.Now.AddYears(-40); public DateTime? LoginAt { set; get; } = DateTime.Now.AddMinutes(-2); [Required] public DateTimeOffset LogoutAt { set; get; } public DateTimeOffset? RegisterAt { set; get; } = DateTimeOffset.Now.AddMinutes(-10); }
<EditForm Model="Model" OnValidSubmit="DoSave"> <DataAnnotationsValidator/> <div> <label>تاریخ تولد</label> <div> <PersianDatePicker @bind-Value="Model.BirthDayGregorian" UsePersianNumbers="false" /> </div> </div> <button type="submit">ارسال</button> </EditForm>
سلام. ببخشید بعداز اجرای view index, میخواهم view list رو اجرا کنم. view list اجرا نمیشه. با هر بار اجرا همون view index اجرا میشه. باتشکر.
@model List<MvcApplication3.Models.Product>
@model List<MvcApplication3.Models.Products>