- در مورد radio button list مطلب داریم در سایت.
- برای استفاده مقدماتی از DropDownListیک مثال کامل در سایت ASP.NET هست.
- برای استفاده مقدماتی از DropDownListیک مثال کامل در سایت ASP.NET هست.
with Cacheable:
ساختار موجودیت در DomainLayer :
public class PublicMenu : BaseEntity { public PublicMenu() { SubMenus = new List<PublicMenu>(); } public string Title { get; set; } public string Url { get; set; } public string Icon { get; set; } public bool IsShow { get; set; } public virtual PublicMenu Menu { set; get; } public int? MenuId { get; set; } public ICollection<PublicMenu> SubMenus { get; set; } }
<script src="jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); function initializeda() { var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml"); feed.setNumEntries(5); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT); feed.load(function (result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>'); } } }); } google.setOnLoadCallback(initializeda); </script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
google.load("feeds", "1");
var feed = new google.feeds.Feed("http://www.drupaleasy.ir/rss.xml");
feed.setNumEntries(5); feed.setResultFormat(google.feeds.Feed.JSON_FORMAT);
feed.load(function (result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { var entry = result.feed.entries[i]; $('#drupaleasy ul').append('<li><a href="' + entry.link + '">' + entry.title + '</a></li>'); } } });
<div id="drupaleasy" class="feeds"> <span>DrupalEasy.ir</span> <ul> </ul> <a href="http://drupaleasy.ir">more</a> </div>
.feeds { float: right; background-color: rgba(234, 242, 243, 0.73); margin: 5px; border-radius: 20px; padding: 8px; width: 293px; height: 217px; border: 1px solid #293883; } #drupaleasy ul { list-style-image: url("img/drupal.png"); }
import { MatButtonModule, MatCheckboxModule } from "@angular/material";
import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ imports: [MatButtonModule, MatCheckboxModule], exports: [MatButtonModule, MatCheckboxModule], }) export class MyOwnCustomMaterialModule { }
ERROR TypeError: "this.fileInput2 is undefined"
<ng-template #templateUploads> <div> <strong>{{titleModal}}</strong> <button type="button" aria-label="Close" (click)="closeModal()"> <span aria-hidden="true">×</span> </button> </div> <div> <form #upladForm="ngForm" (submit)="submitUpload()" novalidate> <fieldset> <div> <label>فایل</label> <div> <input required #fileInput2 type="file"> </div> </div> <div> <button (click)="upload()" type="button"> upload </button> <button type="submit" > close </button> </div> </fieldset> </form> </div> </ng-template>
@ViewChild('fileInput2') fileInput2: ElementRef; constructor(...... submitUpload(form: NgForm) { const fileInput2File: HTMLInputElement = this.fileInput2.nativeElement; .....
import { Component, Input, OnInit } from '@angular/core'; import { AbstractControl } from '@angular/forms'; @Component({ selector: 'validation-message', template: ` <ng-container *ngIf="control.invalid && control.touched"> {{ message }} </ng-container> ` }) export class ValidationMessageComponent implements OnInit { @Input() control: AbstractControl; @Input() fieldDisplayName: string; @Input() rules: { [key: string]: string }; get message(): string { return this.control.hasError('required') ? `${this.fieldDisplayName} را وارد نمائید.` : this.control.hasError('pattern') ? `${this.fieldDisplayName} را به شکل صحیح وارد نمائید.` : this.control.hasError('email') ? `${this.fieldDisplayName} را به شکل صحیح وارد نمائید.` : this.control.hasError('minlength') ? `${this.fieldDisplayName} باید بیشتر از ${ this.control.errors.minlength.requiredLength } کاراکتر باشد.` : this.control.hasError('maxlength') ? `${this.fieldDisplayName} باید کمتر از ${ this.control.errors.maxlength.requiredLength } کاراکتر باشد.` : this.control.hasError('min') ? `${this.fieldDisplayName} باید بیشتر از ${ this.control.errors.min.requiredLength } باشد.` : this.control.hasError('max') ? `${this.fieldDisplayName} باید کمتر از ${ this.control.errors.max.requiredLength } باشد.` : this.hasRule() ? this.findRule() : this.control.hasError('model') ? `${this.control.errors.model.messages[0]}` : ''; } constructor() {} private hasRule() { return ( this.rules && Object.keys(this.control.errors).some(ruleKey => this.rules[ruleKey] ? true : false ) ); } private findRule(): string { let message = ''; Object.keys(this.control.errors).forEach(ruleKey => { if (this.rules[ruleKey]) { message += `${this.rules[ruleKey]} `; } }); return message; } ngOnInit(): void {} }
<mat-error *ngIf="form.controls['userName'].invalid && form.controls['userName'].touched" class="mat-text-warn"> <validation-message [control]="form.controls['userName']" fieldDisplayName="نام کاربری" [rules]="{rule1:'پیغام متناظر با rule1'}"> </validation-message> </mat-error>
this.form = this.formBuilder.group({ userName: [ '', [Validators.required, UserNameValidators.rule1)] ], password: ['', Validators.required], rememberMe: [false] }); export class UserNameValidators{ static rule1(control: AbstractControl) { if (control.value.indexOf(' ') >= 0) { return { rule1: true }; } return null; } }
insertHTML: { title: 'Insert Code', icon: { type: 'font', value: 'fa fa-dollar' // Font Awesome icon class fa fa-* }, callback: function (editor) { this.saveSelection(); var thisEditor = this; var codeModal = $("<div>").addClass("froala-modal").appendTo("body"); var wrapper = $("<div>").addClass("f-modal-wrapper").appendTo(codeModal); $("<h4>").append('<span data-text="true">Insert Code</span>') .append($('<i class="fa fa-times" title="Cancel">') .click(function () { codeModal.remove(); })) .appendTo(wrapper); var dialog = "<textarea id='code_area' style='height: 211px; width: 538px;' /><label>Language:</label><select id='code_lang'><option>CSharp</option><option>VB</option><option>JScript</option><option>Sql</option><option>XML</option><option>CSS</option><option>Java</option><option>Delphi</option></select> <input type='button' name='insert' id='insert_btn' value='Insert' />"; $(dialog).appendTo(wrapper); $("#code_area").text(this.text()); if (!this.selectionInEditor()) { this.$element.focus(); } $('#insert_btn').click(function () { var lang = $("#code_lang").val(); var code = $("#code_area").val(); code = code.replace(/\s+$/, ""); // rtrim code = $('<span/>').text(code).html(); // encode var htmlCode = "<pre class='brush: " + lang.toLowerCase() + "' language='" + lang + "' name='code'>" + code + "</pre></div>"; // syntaxhighlighter با این کد هماهنگ است //var htmlCode = "<pre language='" + lang + "' name='code'>" + code + "</pre></div>"; var codeBlock = "<div align='left' dir='ltr'>" + htmlCode + "</div>"; thisEditor.restoreSelection(); thisEditor.insertHTML(codeBlock); thisEditor.saveUndoStep(); codeModal.remove(); }); } }
> ng new ASPNETCore2JwtAuthentication.AngularClient --routing
> npm install bootstrap --save
"apps": [ { "styles": [ "../node_modules/bootstrap/dist/css/bootstrap.min.css", "styles.css" ],
>ng g c welcome >ng g c PageNotFound
@NgModule({ declarations: [ AppComponent, WelcomeComponent, PageNotFoundComponent ],
import { PageNotFoundComponent } from './page-not-found/page-not-found.component'; import { WelcomeComponent } from './welcome/welcome.component'; import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = [ { path: 'welcome', component: WelcomeComponent }, { path: '', redirectTo: 'welcome', pathMatch: 'full' }, { path: '**', component: PageNotFoundComponent } ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }
>ng g m Authentication -m app.module --routing
create src/app/authentication/authentication-routing.module.ts (257 bytes) create src/app/authentication/authentication.module.ts (311 bytes) update src/app/app.module.ts (696 bytes)
import { EmployeeRoutingModule } from './employee/employee-routing.module'; @NgModule({ imports: [ BrowserModule, AppRoutingModule, AuthenticationModule ]
import { EmployeeModule } from './employee/employee.module'; @NgModule({ imports: [ BrowserModule, AuthenticationModule, AppRoutingModule ]
>ng g c Authentication/Login
create src/app/Authentication/login/login.component.html (24 bytes) create src/app/Authentication/login/login.component.ts (265 bytes) create src/app/Authentication/login/login.component.css (0 bytes) update src/app/Authentication/authentication.module.ts (383 bytes)
import { LoginComponent } from "./login/login.component"; @NgModule({ declarations: [LoginComponent] })
import { LoginComponent } from "./login/login.component"; const routes: Routes = [ { path: "login", component: LoginComponent } ];
import { NgModule, SkipSelf, Optional, } from "@angular/core"; import { CommonModule } from "@angular/common"; import { RouterModule } from "@angular/router"; // import RxJs needed operators only once import "./services/rxjs-operators"; import { BrowserStorageService } from "./browser-storage.service"; @NgModule({ imports: [CommonModule, RouterModule], exports: [ // components that are used in app.component.ts will be listed here. ], declarations: [ // components that are used in app.component.ts will be listed here. ], providers: [ // global singleton services of the whole app will be listed here. BrowserStorageService ] }) export class CoreModule { constructor( @Optional() @SkipSelf() core: CoreModule) { if (core) { throw new Error("CoreModule should be imported ONLY in AppModule."); } } }
import { NgModule, ModuleWithProviders } from "@angular/core"; import { CommonModule } from "@angular/common"; @NgModule({ imports: [ CommonModule ], entryComponents: [ // All components about to be loaded "dynamically" need to be declared in the entryComponents section. ], declarations: [ // common and shared components/directives/pipes between more than one module and components will be listed here. ], exports: [ // common and shared components/directives/pipes between more than one module and components will be listed here. CommonModule ] /* No providers here! Since they’ll be already provided in AppModule. */ }) export class SharedModule { static forRoot(): ModuleWithProviders { // Forcing the whole app to use the returned providers from the AppModule only. return { ngModule: SharedModule, providers: [ /* All of your services here. It will hold the services needed by `itself`. */] }; } }
import { FormsModule } from "@angular/forms"; import { HttpClientModule } from "@angular/common/http"; import { CoreModule } from "./core/core.module"; import { SharedModule } from "./shared/shared.module"; @NgModule({ imports: [ BrowserModule, FormsModule, HttpClientModule, CoreModule, SharedModule.forRoot(), AuthenticationModule, AppRoutingModule ] }) export class AppModule { }
> ng g c Header
create src/app/header/header.component.html (25 bytes) create src/app/header/header.component.ts (269 bytes) create src/app/header/header.component.css (0 bytes) update src/app/app.module.ts (1069 bytes)
<nav> <div> <div> <a [routerLink]="['/']">{{title}}</a> </div> <ul> <li role="menuitem" routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }"> <a [routerLink]="['/welcome']">Home</a> </li> <li role="menuitem" routerLinkActive="active"> <a queryParamsHandling="merge" [routerLink]="['/login']">Login</a> </li> </ul> </div> </nav>
export class HeaderComponent implements OnInit { title = "Angular.Jwt.Core";
<app-header></app-header> <div> <router-outlet></router-outlet> </div>
import { HeaderComponent } from "./component/header/header.component"; @NgModule({ exports: [ // components that are used in app.component.ts will be listed here. HeaderComponent ], declarations: [ // components that are used in app.component.ts will be listed here. HeaderComponent ] }) export class CoreModule {