Boostrap Ladda یک پلاگین برای نمایش دکمه هایی است که پس از کلیک باید به حالت loading تبدیل شوند. این پلاگین در فرمهای ایجاد و یا ویرایش و یا صفحات جستجو بسیار مفید هستند. Angular-Ladda نسخه همگام سازی شده این پلاگین با AngularJs است که به سادگی میتواند به برنامه تک صفحه ای شما اضافه شود.
@{ Html.RenderPartial("_Alerts"); } 
using System;
using System.Collections.Generic;
namespace MaterialAspNetCoreBackend.DomainClasses
{
public class User
{
public User()
{
UserNotes = new HashSet<UserNote>();
}
public int Id { set; get; }
public DateTimeOffset BirthDate { set; get; }
public string Name { set; get; }
public string Avatar { set; get; }
public string Bio { set; get; }
public ICollection<UserNote> UserNotes { set; get; }
}
} using System;
namespace MaterialAspNetCoreBackend.DomainClasses
{
public class UserNote
{
public int Id { set; get; }
public DateTimeOffset Date { set; get; }
public string Title { set; get; }
public User User { set; get; }
public int UserId { set; get; }
}
} public interface IUsersService
{
Task<List<User>> GetAllUsersIncludeNotesAsync();
Task<User> GetUserIncludeNotesAsync(int id);
} namespace MaterialAspNetCoreBackend.WebApp.Controllers
{
[Route("api/[controller]")]
public class UsersController : Controller
{
private readonly IUsersService _usersService;
public UsersController(IUsersService usersService)
{
_usersService = usersService ?? throw new ArgumentNullException(nameof(usersService));
}
[HttpGet]
public async Task<IActionResult> Get()
{
return Ok(await _usersService.GetAllUsersIncludeNotesAsync());
}
[HttpGet("{id:int}")]
public async Task<IActionResult> Get(int id)
{
return Ok(await _usersService.GetUserIncludeNotesAsync(id));
}
}
} https://localhost:5001/api/users
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "../MaterialAspNetCoreBackend/MaterialAspNetCoreBackend.WebApp/wwwroot", ng build --no-delete-output-path --watch
dotnet watch run
ng g i contact-manager/models/user ng g i contact-manager/models/user-note
export interface UserNote {
id: number;
title: string;
date: Date;
userId: number;
} import { UserNote } from "./user-note";
export interface User {
id: number;
birthDate: Date;
name: string;
avatar: string;
bio: string;
userNotes: UserNote[];
} ng g s contact-manager/services/user --no-spec
import { Injectable } from "@angular/core";
@Injectable({
providedIn: "root"
})
export class UserService {
constructor() { }
} import { HttpClient, HttpErrorResponse } from "@angular/common/http";
import { Injectable } from "@angular/core";
import { Observable, throwError } from "rxjs";
import { catchError, map } from "rxjs/operators";
import { User } from "../models/user";
@Injectable({
providedIn: "root"
})
export class UserService {
constructor(private http: HttpClient) { }
getAllUsersIncludeNotes(): Observable<User[]> {
return this.http
.get<User[]>("/api/users").pipe(
map(response => response || []),
catchError((error: HttpErrorResponse) => throwError(error))
);
}
getUserIncludeNotes(id: number): Observable<User> {
return this.http
.get<User>(`/api/users/${id}`).pipe(
map(response => response || {} as User),
catchError((error: HttpErrorResponse) => throwError(error))
);
}
} <?xml version="1.0" encoding="utf-8"?>
<svg width="512" height="512" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<svg viewBox="0 0 128 128" height="100%" width="100%"
pointer-events="none" display="block" id="user1" > import { Component } from "@angular/core";
import { MatIconRegistry } from "@angular/material";
import { DomSanitizer } from "@angular/platform-browser";
@Component()
export class ContactManagerAppComponent {
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIconSet(sanitizer.bypassSecurityTrustResourceUrl("assets/avatars.svg"));
}
} iconRegistry.addSvgIcon(
"unicorn",
this.domSanitizer.bypassSecurityTrustResourceUrl("assets/unicorn_icon.svg")
); <mat-icon svgIcon="unicorn"></mat-icon>
import { User } from "../../models/user";
import { UserService } from "../../services/user.service";
@Component()
export class SidenavComponent implements OnInit {
users: User[] = [];
constructor(private userService: UserService) { }
ngOnInit() {
this.userService.getAllUsersIncludeNotes()
.subscribe(data => this.users = data);
}
} <mat-list>
<mat-list-item>Item 1</mat-list-item>
<mat-list-item>Item 2</mat-list-item>
<mat-list-item>Item 3</mat-list-item>
</mat-list> <mat-nav-list>
<mat-list-item *ngFor="let user of users">
<a matLine href="#">
<mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.name }}
</a>
</mat-list-item>
</mat-nav-list> 
<mat-nav-list>
<mat-list-item *ngFor="let user of users">
<a matLine [routerLink]="['/contactmanager', user.id]">
<mat-icon svgIcon="{{user.avatar}}"></mat-icon> {{ user.name }}
</a>
</mat-list-item>
</mat-nav-list> const routes: Routes = [
{
path: "", component: ContactManagerAppComponent,
children: [
{ path: ":id", component: MainContentComponent },
{ path: "", component: MainContentComponent }
]
},
{ path: "**", redirectTo: "" }
]; import { Component, OnInit } from "@angular/core";
import { ActivatedRoute } from "@angular/router";
import { User } from "../../models/user";
import { UserService } from "../../services/user.service";
@Component({
selector: "app-main-content",
templateUrl: "./main-content.component.html",
styleUrls: ["./main-content.component.css"]
})
export class MainContentComponent implements OnInit {
user: User;
constructor(private route: ActivatedRoute, private userService: UserService) { }
ngOnInit() {
this.route.params.subscribe(params => {
this.user = null;
const id = params["id"];
if (!id) {
return;
}
this.userService.getUserIncludeNotes(id)
.subscribe(data => this.user = data);
});
}
} <div *ngIf="!user">
<mat-spinner></mat-spinner>
</div>
<div *ngIf="user">
<mat-card>
<mat-card-header>
<mat-icon mat-card-avatar svgIcon="{{user.avatar}}"></mat-icon>
<mat-card-title>
<h2>{{ user.name }}</h2>
</mat-card-title>
<mat-card-subtitle>
Birthday {{ user.birthDate | date:'d LLLL' }}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<mat-tab-group>
<mat-tab label="Bio">
<p>
{{user.bio}}
</p>
</mat-tab>
<!-- <mat-tab label="Notes"></mat-tab> -->
</mat-tab-group>
</mat-card-content>
</mat-card>
</div> 
import { Router } from "@angular/router";
@Component()
export class SidenavComponent implements OnInit, OnDestroy {
users: User[] = [];
constructor(private userService: UserService, private router: Router) {
}
ngOnInit() {
this.userService.getAllUsersIncludeNotes()
.subscribe(data => {
this.users = data;
if (data && data.length > 0 && !this.router.navigated) {
this.router.navigate(["/contactmanager", data[0].id]);
}
});
}
} let id = params['id']; if (!id) id = 1;
<mat-sidenav #sidenav
import { MatSidenav } from "@angular/material";
@Component()
export class SidenavComponent implements OnInit, OnDestroy {
@ViewChild(MatSidenav) sidenav: MatSidenav; ngOnInit() {
this.router.events.subscribe(() => {
if (this.isScreenSmall) {
this.sidenav.close();
}
});
} 
<script src="/path/to/jquery.cookie.js"></script>
$.cookie('the_cookie', 'the_value');
$.cookie('the_cookie'); // => "the_value"
<script type="text/javascript">
$(function () {
$('#write').click(function () {
$.cookie('data', '{"iri":"Iran","usa":"United States"}', { expires: 365, json: true });
alert('Writed');
});
$('#show').click(function () {
var obj = jQuery.parseJSON($.cookie('data'));
alert(obj.iri);
});
$('#remove').click(function () {
$.removeCookie('data');
});
})
</script>
<body>
<a href="#" id="write">Write</a>
<br />
<a href="#" id="show">Show</a>
<br />
<a href="#" id="remove">Remove</a>
</body>
$('#write').click(function () {
$.cookie('data', '{"iri":"Iran","usa":"United States"}', { expires: 365, json: true });
alert('Writed');
});
$('#show').click(function () {
var obj = jQuery.parseJSON($.cookie('data'));
alert(obj.iri);
$('#remove').click(function () {
$.removeCookie('data');
});
$.cookie('data', JSON.stringify(jsonobject), { expires: 365, json: true });
return now.Second % 1 == 0 && now.Second == 1;
<AuthorizeView>
<Authorized>
<a href="Identity/Account/Logout">Logout</a>
</Authorized>
<NotAuthorized>
<a href="Identity/Account/Register">Register</a>
<a href="Identity/Account/Login">Login</a>
</NotAuthorized>
</AuthorizeView> InvalidOperationException: Authorization requires a cascading parameter of type Task<AuthenticationState>. Consider using CascadingAuthenticationState to supply this. Microsoft.AspNetCore.Components.Authorization.AuthorizeViewCore.OnParametersSetAsync()
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState> 
@page
@using Microsoft.AspNetCore.Identity
@inject SignInManager<IdentityUser> SignInManager
@functions
{
public async Task<IActionResult> OnGet()
{
if (SignInManager.IsSignedIn(User))
{
<p>You have successfully logged out of the application.</p>
await SignInManager.SignOutAsync();
}
return Redirect("~/");
}
} <AuthorizeView>
<Authorized>
Hello, @context.User.Identity.Name
<a href="Identity/Account/Logout">Logout</a>
</Authorized> 
@attribute [Authorize]
<CascadingAuthenticationState>
<Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
<Found Context="routeData">
@*<RouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)" />*@
<AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
<NotAuthorized>
<p>Sorry, you do not have access to this page</p>
</NotAuthorized>
</AuthorizeRouteView>
</Found>
<NotFound>
<LayoutView Layout="@typeof(MainLayout)">
<p>Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
</CascadingAuthenticationState> 