پلاگین زیبای جاوا اسکریپتی Bootstrap Tags برای تگ گذاری مطالب سایت
پلاگین زیبای دیگری برای مدیریت تگها Tag Manager
پلاگین زیبای جاوا اسکریپتی Bootstrap Tags برای تگ گذاری مطالب سایت
پلاگین زیبای دیگری برای مدیریت تگها Tag Manager
<button onClick={this.handleRemove} value={id}>Remove</button>
handleRemove(event) { const id = event.target.value; // ... }
handleChange(param) { //ES-5 return function (event) { }; } handleChange = param => event => {//ES-6 }; <input type="text" onChange={this.handleChange(someParam)} />
class App extends Component { oneParameter = a => e => { alert(a); }; twoParameter = (a, b) => e => { alert(a + b); }; render() { return ( <div> <button onClick={this.oneParameter(32)}> one parameter </button> <br /> <br /> <button onClick={this.twoParameter(10, 54)}> two parameter</button> </div> ); } }
using System.Web.Mvc; namespace jQueryImpromptu.Controllers { public class HomeController : Controller { [HttpGet] public ActionResult Index() { return View(); } [HttpPost] public ActionResult Index(string postId, string filename) { return Content("ok"); } } }
@{ ViewBag.Title = "Index"; var postUrl = Url.Action(actionName: "Index", controllerName: "Home"); } <h2> Index</h2> <input type="button" id="btnDelete" value="delete" /> <div id="infoDiv"> Some Info .... </div> @section JavaScript { <script type="text/javascript"> $(function () { $('#btnDelete').click(function () { $.prompt("آیا برای حذف اطلاعات موجود اطمینان دارید ؟", { title: 'Title', buttons: { "بله": true, "خیر": false }, focus: 2, submit: function (e, v, m, f) { //debugger; if (!v) { return; } var postId = 10; var fileName = "test.jpg" $.ajax({ type: "POST", url: '@postUrl', data: JSON.stringify({ postId: postId, fileName: fileName }), contentType: "application/json; charset=utf-8", dataType: "json", complete: function (xhr, status) { var data = xhr.responseText; if (status === 'error' || !data || data == "nok") { $.prompt("! حذف فایل با خطا مواجه شده است", { title: 'Title', buttons: { "بستن": true } }); } else { $("#infoDiv").fadeOut("slow").remove(); } } }); } }); }); }); </script> }
@implements IHandleEvent @code { Task IHandleEvent.HandleEventAsync(EventCallbackWorkItem callback, object? arg) => callback.InvokeAsync(arg); }
public class IdentityRevalidatingAuthenticationStateProvider : RevalidatingServerAuthenticationStateProvider { protected override TimeSpan RevalidationInterval => TimeSpan.FromMinutes(30); protected override async Task<bool> ValidateAuthenticationStateAsync( AuthenticationState authenticationState, CancellationToken cancellationToken) { // ... } }
public class PersistingRevalidatingAuthenticationStateProvider : RevalidatingServerAuthenticationStateProvider { public PersistingRevalidatingAuthenticationStateProvider( ILoggerFactory loggerFactory, IServiceScopeFactory scopeFactory, PersistentComponentState state, IOptions<IdentityOptions> options) : base(loggerFactory) { // ... } protected override TimeSpan RevalidationInterval => TimeSpan.FromMinutes(30); protected override async Task<bool> ValidateAuthenticationStateAsync( AuthenticationState authenticationState, CancellationToken cancellationToken) { // ... } private async Task OnPersistingAsync() { // ... _state.PersistAsJson(nameof(UserInfo), new UserInfo { UserId = userId, Email = email, }); // ... } }
public class PersistentAuthenticationStateProvider(PersistentComponentState persistentState) : AuthenticationStateProvider { private static readonly Task<AuthenticationState> _unauthenticatedTask = Task.FromResult(new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()))); public override Task<AuthenticationState> GetAuthenticationStateAsync() { if (!persistentState.TryTakeFromJson<UserInfo>(nameof(UserInfo), out var userInfo) || userInfo is null) { return _unauthenticatedTask; } Claim[] claims = [ new Claim(ClaimTypes.NameIdentifier, userInfo.UserId), new Claim(ClaimTypes.Name, userInfo.Email), new Claim(ClaimTypes.Email, userInfo.Email) ]; return Task.FromResult( new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity(claims, authenticationType: nameof(PersistentAuthenticationStateProvider))))); } }
using System; using System.ComponentModel; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc.Razor.TagHelpers; using Microsoft.AspNetCore.Razor.TagHelpers; using Microsoft.Extensions.Logging; namespace TestTagHelperComponent2.Utils { public class ArticleTagHelperComponent : TagHelperComponent { public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase)) { output.PostContent.AppendHtml("<script>console.log('Running ArticleTagHelperComponent');</script>"); } return Task.CompletedTask; } } }
<article> For Testing the TagHelperComponent. </article>
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, ArticleTagHelperComponent>(); services.AddMvc(); }
if (string.Equals(context.TagName, "article", StringComparison.OrdinalIgnoreCase))
using System; using System.ComponentModel; using System.Threading.Tasks; using Microsoft.AspNetCore.Mvc.Razor.TagHelpers; using Microsoft.AspNetCore.Razor.TagHelpers; using Microsoft.Extensions.Logging; namespace TestTagHelperComponent2.Utils { [HtmlTargetElement("article")] [EditorBrowsable(EditorBrowsableState.Never)] public class ArticleTagHelperComponentTagHelper : TagHelperComponentTagHelper { public ArticleTagHelperComponentTagHelper( ITagHelperComponentManager componentManager, ILoggerFactory loggerFactory) : base(componentManager, loggerFactory) { } } }
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *, TestTagHelperComponent2
public class MyHeadTagHelperComponent : TagHelperComponent { public override Task ProcessAsync(TagHelperContext context, TagHelperOutput output) { if (string.Equals(context.TagName, "head", StringComparison.OrdinalIgnoreCase)) { output.PostContent.AppendHtml("<script>console.log('head tag');</script>"); } return Task.CompletedTask; } }
public void ConfigureServices(IServiceCollection services) { services.AddTransient<ITagHelperComponent, MyHeadTagHelperComponent>(); services.AddTransient<ITagHelperComponent, ArticleTagHelperComponent>(); services.AddMvc(); }
ng new apollo-angular-project
ng add apollo-angular
const uri = 'https://localhost:5001/graphql';
npm install --save apollo-angular \ apollo-angular-link-http \ apollo-link \ apollo-client \ apollo-cache-inmemory \ graphql-tag \ graphql
{ "compilerOptions": { // ... "lib": [ "es2017", "dom", "esnext.asynciterable" ] } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { HttpClientModule } from "@angular/common/http"; import { ApolloModule, APOLLO_OPTIONS } from "apollo-angular"; import { HttpLinkModule, HttpLink } from "apollo-angular-link-http"; import { InMemoryCache } from "apollo-cache-inmemory"; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, HttpClientModule, ApolloModule, HttpLinkModule ], providers: [ { provide: APOLLO_OPTIONS, useFactory: (httpLink: HttpLink) => { return { cache: new InMemoryCache(), link: httpLink.create({ uri: "https://localhost:5001/graphql" }) } }, deps: [ HttpLink ] }], bootstrap: [ AppComponent ] }) export class AppModule { }
export type OwnerInputType = { name: string; address: string; }
export type AccountType = { 'id': string; 'description': string; 'ownerId' : string; 'type': string; }
import { AccountType } from './accountType'; export type OwnerType = { 'id': string; 'name': string; 'address': string; 'accounts': AccountType[]; }
ng g s graphql
import { Injectable } from '@angular/core'; import { Apollo } from 'apollo-angular'; import gql from 'graphql-tag'; @Injectable({ providedIn: 'root' }) export class GraphqlService { constructor(private apollo: Apollo) { } }
public getOwners = () => { return this.apollo.query({ query: gql`query getOwners{ owners{ id, name, address, accounts{ id, description, type } } }` }); }
export class AppComponent implements OnInit { public owners: OwnerType[]; public loading = true; constructor(private graphQLService: GraphqlService) { } ngOnInit() { this.graphQLService.getOwners().subscribe(result => { this.owners = result.data["owners"] as OwnerType[]; this.loading = result.loading; }); } }
<div> <div *ngIf="!this.loading"> <table> <thead> <tr> <th> # </th> <th> نام و نام خانوادگی </th> <th> آدرس </th> </tr> </thead> <tbody> <ng-container *ngFor="let item of this.owners;let idx=index" [ngTemplateOutlet]="innertable" [ngTemplateOutletContext]="{item:item, index:idx}"></ng-container> </tbody> </table> </div> <div *ngIf="this.loading"> <p> در حال بارگذاری لیست ... </p> </div> </div> <ng-template #innertable let-item="item" let-idx="index"> <tr> <td>{{idx+1}}</td> <td>{{item.name}}</td> <td>{{item.address}}</td> </tr> <tr *ngIf="this.item.accounts && this.item.accounts.length > 0"> <td colspan="4"> <div> <p>Accounts</p> </div> <div> <table> <thead> <tr> <th>#</th> <th>نوع</th> <th>توضیحات</th> </tr> </thead> <tbody> <tr *ngFor="let innerItem of this.item.accounts;let innerIndex=index"> <td> {{innerIndex+1}} </td> <td> {{innerItem.type}} </td> <td> {{innerItem.description}} </td> </tr> </tbody> </table> </div> </td> </tr> </ng-template>
dotnet restore dotnet run
ng serve
public getOwners = () => { return this.apollo.watchQuery<any>({ query: gql`query getOwners{ owners{ id, name, address, accounts{ id, description, type } } }` }) }
export class AppComponent implements OnInit { loading: boolean; public owners: OwnerType[]; private querySubscription: Subscription; constructor(private graphQLService: GraphqlService) { } ngOnInit() { this.querySubscription = this.graphQLService.getOwners() .valueChanges .subscribe(result => { this.loading = result.loading; this.owners = result.data["owners"] as OwnerType[]; }); } ngOnDestroy() { this.querySubscription.unsubscribe(); } }
public getOwner = (id) => { return this.apollo.query({ query: gql`query getOwner($ownerID: ID!){ owner(ownerId: $ownerID){ id, name, address, accounts{ id, description, type } } }`, variables: { ownerID: id } }) }
public createOwner = (ownerToCreate: OwnerInputType) => { return this.apollo.mutate({ mutation: gql`mutation($owner: ownerInput!){ createOwner(owner: $owner){ id, name, address } }`, variables: { owner: ownerToCreate } }) }
public updateOwner = (ownerToUpdate: OwnerInputType, id: string) => { return this.apollo.mutate({ mutation: gql`mutation($owner: ownerInput!, $ownerId: ID!){ updateOwner(owner: $owner, ownerId: $ownerId){ id, name, address } }`, variables: { owner: ownerToUpdate, ownerId: id } }) }
public deleteOwner = (id: string) => { return this.apollo.mutate({ mutation: gql`mutation($ownerId: ID!){ deleteOwner(ownerId: $ownerId) }`, variables: { ownerId: id } }) }