a habit tracker app that is free to use on 6 platforms: Web browser, Windows, Linux, Android, iOS and macOS. Approximately 98% of the programming code is the same for all 6 platforms. There are 3 different projects that use the shared code: - a Blazor WASM project for the PWA - a MAUI Blazor project for Windows, Android, iOS and macOS - a Photino Blazor project for Linux
<td>{{ product.starRating }}</td> 
import { Component, OnChanges, Input, Output, EventEmitter } from 'angular2/core';
@Component({
selector: 'ai-star',
templateUrl: 'app/shared/star.component.html',
styleUrls: ['app/shared/star.component.css']
})
export class StarComponent implements OnChanges {
@Input() rating: number;
starWidth: number;
@Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>();
ngOnChanges(): void {
this.starWidth = this.rating * 86 / 5;
}
onClick() {
this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
}
} <div class="crop" [style.width.px]="starWidth" [title]="rating" (click)='onClick()'> <div style="width: 86px"> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> <span class="glyphicon glyphicon-star"></span> </div> </div>
.crop {
overflow: hidden;
}
div {
cursor: pointer;
} export class StarComponent implements OnChanges {
@Input() rating: number; [rating]='product.starRating'
export class StarComponent implements OnChanges {
@Input() rating: number;
starWidth: number;
@Output() ratingClicked: EventEmitter<string> = new EventEmitter<string>(); <div class="crop" [style.width.px]="starWidth" [title]="rating" (click)='onClick()'>
onClick() {
this.ratingClicked.emit(`The rating ${this.rating} was clicked!`);
} (ratingClicked)='onRatingClicked($event)'
onRatingClicked(message: string): void {
this.pageTitle = 'Product List: ' + message;
} <td> <ai-star [rating]='product.starRating' (ratingClicked)='onRatingClicked($event)'> </ai-star> </td>
import { Component, OnInit } from 'angular2/core';
import { IProduct } from './product';
import { ProductFilterPipe } from './product-filter.pipe';
import { StarComponent } from '../shared/star.component';
@Component({
selector: 'pm-products',
templateUrl: 'app/products/product-list.component.html',
styleUrls: ['app/products/product-list.component.css'],
pipes: [ProductFilterPipe],
directives: [StarComponent]
}) 
<form #f="ngForm" (ngSubmit)="onSubmit(f.form)">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Add Product
</h3>
</div>
<div class="panel-body form-horizontal">
<div class="form-group">
<label for="productName" class="col col-md-2 control-label">Name</label>
<div class="controls col col-md-10">
<input ngControl="productName" id="productName" required
#productName="ngForm"
(change)="log(productName)"
minlength="3"
type="text" class="form-control"
[(ngModel)]="productModel.productName"/>
<div *ngIf="productName.touched && productName.errors">
<label class="text-danger" *ngIf="productName.errors.required">
Name is required.
</label>
<label class="text-danger" *ngIf="productName.errors.minlength">
Name should be minimum {{ productName.errors.minlength.requiredLength }} characters.
</label>
</div>
</div>
</div>
<div class="form-group">
<label for="productCode" class="col col-md-2 control-label">Code</label>
<div class="controls col col-md-10">
<input ngControl="productCode" id="productCode" required
#productCode="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.productCode"/>
<label class="text-danger" *ngIf="productCode.touched && !productCode.valid">
Code is required.
</label>
</div>
</div>
<div class="form-group">
<label for="releaseDate" class="col col-md-2 control-label">Release Date</label>
<div class="controls col col-md-10">
<input ngControl="releaseDate" id="releaseDate" required
#releaseDate="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.releaseDate"/>
<label class="text-danger" *ngIf="releaseDate.touched && !releaseDate.valid">
Release Date is required.
</label>
</div>
</div>
<div class="form-group">
<label for="price" class="col col-md-2 control-label">Price</label>
<div class="controls col col-md-10">
<input ngControl="price" id="price" required
#price="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.price"/>
<label class="text-danger" *ngIf="price.touched && !price.valid">
Price is required.
</label>
</div>
</div>
<div class="form-group">
<label for="description" class="col col-md-2 control-label">Description</label>
<div class="controls col col-md-10">
<textarea ngControl="description" id="description" required
#description="ngForm"
rows="10" type="text" class="form-control"
[(ngModel)]="productModel.description"></textarea>
<label class="text-danger" *ngIf="description.touched && !description.valid">
Description is required.
</label>
</div>
</div>
<div class="form-group">
<label for="imageUrl" class="col col-md-2 control-label">Image</label>
<div class="controls col col-md-10">
<input ngControl="imageUrl" id="imageUrl" required
#imageUrl="ngForm"
type="text" class="form-control"
[(ngModel)]="productModel.imageUrl"/>
<label class="text-danger" *ngIf="imageUrl.touched && !imageUrl.valid">
Image is required.
</label>
</div>
</div>
</div>
<footer class="panel-footer">
<button [disabled]="!f.valid"
type="submit" class="btn btn-primary">
Submit
</button>
</footer>
</div>
</form> import { Component } from 'angular2/core';
import { Router } from 'angular2/router';
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
//selector: 'product-form',
templateUrl: 'app/products/product-form.component.html'
})
export class ProductFormComponent {
productModel = <IProduct>{}; // creates an empty object of an interface
constructor(private _productService: ProductService, private _router: Router) { }
log(productName): void {
console.log(productName);
}
onSubmit(form): void {
console.log(form);
console.log(this.productModel);
this._productService.addProduct(this.productModel)
.subscribe((product: IProduct) => {
console.log(`ID: ${product.productId}`);
this._router.navigate(['Products']);
});
}
} <div class="form-group"> <label for="description" class="col col-md-2 control-label">Description</label> <div class="controls col col-md-10"> <textarea ngControl="description" id="description" required #description="ngForm" rows="10" type="text" class="form-control" [(ngModel)]="productModel.description"></textarea> <label class="text-danger" *ngIf="description.touched && !description.valid"> Description is required. </label> </div> </div>
<input ngControl="productName" id="productName" required #productName="ngForm" (change)="log(productName)" minlength="3" type="text" class="form-control" [(ngModel)]="productModel.productName"/>
<textarea ngControl="description" id="description" required #description="ngForm" rows="10" type="text" class="form-control"></textarea> <div class="alert alert-danger" *ngIf="description.touched && !description.valid"> Description is required. </div>
.ng-touched.ng-invalid{
border: 1px solid red;
} 
<div class="alert alert-danger" *ngIf="productName.touched && !productName.valid"> Name is required. </div>
<div *ngIf="productName.touched && productName.errors"> <div class="alert alert-danger" *ngIf="productName.errors.required"> Name is required. </div> <div class="alert alert-danger" *ngIf="productName.errors.minlength"> Name should be minimum 3 characters. </div> </div>
<div *ngIf="productName.touched && productName.errors">
{{ productName.errors | json }} Name should be minimum {{ productName.errors.minlength.requiredLength }} characters. <form #f="ngForm" (ngSubmit)="onSubmit(f.form)">
onSubmit(form): void {
console.log(form);
} 
<button [disabled]="!f.valid" type="submit" class="btn btn-primary"> Submit </button>
//same as before...
import { ProductFormComponent } from './products/product-form.component';
@Component({
//same as before…
template: `
//same as before…
<li><a [routerLink]="['AddProduct']">Add Product</a></li>
//same as before…
`,
//same as before…
})
@RouteConfig([
//same as before…
{ path: '/addproduct', name: 'AddProduct', component: ProductFormComponent }
])
//same as before... 
productModel = <IProduct>{}; // creates an empty object of an interface <textarea ngControl="description" id="description" required #description="ngForm" rows="10" type="text" class="form-control" [(ngModel)]="productModel.description"></textarea>
addProduct(product: IProduct): Observable<IProduct> {
let headers = new Headers({ 'Content-Type': 'application/json' }); // for ASP.NET MVC
let options = new RequestOptions({ headers: headers });
return this._http.post(this._addProductUrl, JSON.stringify(product), options)
.map((response: Response) => <IProduct>response.json())
.do(data => console.log("Product: " + JSON.stringify(data)))
.catch(this.handleError);
} [HttpPost]
public ActionResult AddProduct(Product product)
{ import { Headers, RequestOptions } from 'angular2/http'; //Same as before…
import { IProduct } from './product';
import { ProductService } from './product.service';
@Component({
//Same as before…
})
export class ProductFormComponent {
productModel = <IProduct>{}; // creates an empty object of an interface
constructor(private _productService: ProductService, private _router: Router) { }
//Same as before…
onSubmit(form): void {
console.log(form);
console.log(this.productModel);
this._productService.addProduct(this.productModel)
.subscribe((product: IProduct) => {
console.log(`ID: ${product.productId}`);
this._router.navigate(['Products']);
});
}
} 
MCSA (Microsoft Certified Solutions Associate) is a certification program intended for people who seek entry-level jobs in an information technology (IT) environment.
20 videos
Last week Microsoft CEO Satya Nadella announced a $75 million commitment to increase their YouthSpark program to increase access to computer science for all youth worldwide.
public abstract class BaseEntity
{
#region Properties
/// <summary>
/// gets or sets Identifier of this Entity
/// </summary>
public virtual long Id { get; set; }
/// <summary>
/// gets or sets date that this entity was created
/// </summary>
public virtual DateTime CreatedOn { get; set; }
/// <summary>
/// gets or sets Date that this entity was updated
/// </summary>
public virtual DateTime ModifiedOn { get; set; }
/// <summary>
/// indicate this entity is Locked for Modify
/// </summary>
public virtual bool ModifyLocked { get; set; }
/// <summary>
/// gets or sets date that this entity repoted last time
/// </summary>
public virtual DateTime? ReportedOn { get; set; }
/// <summary>
/// gets or sets counter for Content's report
/// </summary>
public virtual int ReportsCount { get; set; }
/// <summary>
/// gets or sets TimeStamp for prevent concurrency Problems
/// </summary>
public virtual byte[] RowVersion { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// gets ro sets User that Modify this entity
/// </summary>
public virtual User ModifiedBy { get; set; }
/// <summary>
/// gets ro sets Id of User that modify this entity
/// </summary>
public virtual long? ModifiedById { get; set; }
/// <summary>
/// gets ro sets User that Create this entity
/// </summary>
public virtual User CreatedBy { get; set; }
/// <summary>
/// gets ro sets User that Create this entity
/// </summary>
public virtual long CreatedById { get; set; }
#endregion
} /// <summary>
/// Represents the Collection for group posts by topic
/// </summary>
public class Collection : GuidBaseEntity
{
#region Properties
/// <summary>
/// gets or sets name of collection
/// </summary>
public virtual string Name { get; set; }
/// <summary>
/// gets or sets Alternative SlugUrl
/// </summary>
public virtual string SlugUrl { get; set; }
/// <summary>
/// gets or sets some description of group
/// </summary>
public virtual string Description { get; set; }
/// <summary>
/// gets or sets description that indicate how to pay
/// </summary>
public virtual string HowToPay { get; set; }
/// <summary>
/// gets or sets Visibility Type
/// </summary>
public virtual CollectionVisibility Visibility { get; set; }
/// <summary>
/// gets or sets color of Collection's Cover
/// </summary>
public virtual string Color { get; set; }
/// <summary>
/// gets or sets Name of Image that used as Cover
/// </summary>
public virtual string Photo { get; set; }
/// <summary>
/// gets or sets name of tags seperated by comma that assosiated with this content fo increase performance
/// </summary>
public virtual string TagNames { get; set; }
/// <summary>
/// indicate this collection is active or not
/// </summary>
public virtual bool IsActive { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// get or set collection of attachments that attached in this group
/// </summary>
public virtual ICollection<CollectionAttachment> Attachments { get; set; }
/// <summary>
/// get or set tags of collection
/// </summary>
public virtual ICollection<Tag> Tags { get; set; }
/// <summary>
/// get or set List Of Posts that Associated with this Collection
/// </summary>
public virtual ICollection<CollectionPost> Posts { get; set; }
/// <summary>
/// get or set Users that they are Member of this collection if visibility is Custom
/// </summary>
public virtual ICollection<User> Memebers { get; set; }
#endregion
}
public enum CollectionVisibility
{
Friends,
OnlyMe,
Public,
NotFree,
Custom
} public class CollectionPost : GuidBaseEntity
{
#region Properties
/// <summary>
/// indicate this post should be pin
/// </summary>
public virtual bool IsPin { get; set; }
/// <summary>
/// gets or sets the blog pot body
/// </summary>
public virtual string Body { get; set; }
/// <summary>
/// gets or sets the content title
/// </summary>
public virtual string Title { get; set; }
/// <summary>
/// gets or sets value indicating Custom Slug
/// </summary>
public virtual string SlugAltUrl { get; set; }
/// <summary>
/// gets or sets a value indicating whether the content comments are allowed
/// </summary>
public virtual bool AllowComments { get; set; }
/// <summary>
/// indicate comments should be approved before display
/// </summary>
public virtual bool ModerateComments { get; set; }
/// <summary>
/// gets or sets viewed count
/// </summary>
public virtual long ViewCount { get; set; }
/// <summary>
/// Gets or sets the total number of approved comments
/// <remarks>The same as if we run Item.Comments.Count()
/// We use this property for performance optimization (no SQL command executed)
/// </remarks>
/// </summary>
public virtual int ApprovedCommentsCount { get; set; }
/// <summary>
/// Gets or sets the total number of unapproved comments
/// <remarks>The same as if we run Item.Comments.Count()
/// We use this property for performance optimization (no SQL command executed)
/// </remarks>
/// </summary>
public virtual int UnApprovedCommentsCount { get; set; }
/// <summary>
/// gets or sets rating complex instance
/// </summary>
public virtual Rating Rating { get; set; }
/// <summary>
/// gets or sets information of User-Agent
/// </summary>
public virtual string Agent { get; set; }
/// <summary>
/// indicate users can share this post
/// </summary>
public virtual bool IsEnableForShare { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// get or set comments of this post
/// </summary>
public virtual ICollection<CollectionComment> Comments { get; set; }
/// <summary>
/// gets or sets collection that associated with this post
/// </summary>
public virtual Collection Collection { get; set; }
/// <summary>
/// gets or sets id of collection that associated with this post
/// </summary>
public virtual Guid CollectionId { get; set; }
#endregion
} public class CollectionComment
{
#region Ctor
public CollectionComment()
{
Id = SequentialGuidGenerator.NewSequentialGuid();
CreatedOn = DateTime.Now;
}
#endregion
#region Properties
/// <summary>
/// get or set identifier of record
/// </summary>
public virtual Guid Id { get; set; }
/// <summary>
/// gets or sets date of creation
/// </summary>
public virtual DateTime CreatedOn { get; set; }
/// <summary>
/// gets or sets body of blog post's comment
/// </summary>
public virtual string Body { get; set; }
/// <summary>
/// gets or sets body of blog post's comment
/// </summary>
public virtual Rating Rating { get; set; }
/// <summary>
/// gets or sets informations of agent
/// </summary>
public virtual string UserAgent { get; set; }
/// <summary>
/// indicate this comment is Approved
/// </summary>
public virtual bool IsApproved { get; set; }
/// <summary>
/// gets or sets Ip Address of Creator
/// </summary>
public virtual string CreatorIp { get; set; }
/// <summary>
/// gets or sets datetime that is modified
/// </summary>
public virtual DateTime? ModifiedOn { get; set; }
/// <summary>
/// gets or sets counter for report this comment
/// </summary>
public virtual int ReportsCount { get; set; }
/// <summary>
/// indicate this entity is Locked for Modify
/// </summary>
public virtual bool ModifyLocked { get; set; }
/// <summary>
/// gets or sets date that this entity repoted last time
/// </summary>
public virtual DateTime? ReportedOn { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// gets or sets post that this comment added it
/// </summary>
public virtual CollectionPost Post { get; set; }
/// <summary>
/// gets or sets id of post that this comment added it
/// </summary>
public virtual Guid PostId { get; set; }
/// <summary>
/// get or set user that create this record
/// </summary>
public virtual User Creator { get; set; }
/// <summary>
/// get or set Id of user that create this record
/// </summary>
public virtual long CreatorId { get; set; }
/// <summary>
/// gets or sets CollectionComment's identifier for Replying and impelemention self referencing
/// </summary>
public virtual Guid? ReplyId { get; set; }
/// <summary>
/// gets or sets Collection's comment for Replying and impelemention self referencing
/// </summary>
public virtual CollectionComment Reply { get; set; }
/// <summary>
/// get or set collection of Collection's comment for Replying and impelemention self referencing
/// </summary>
public virtual ICollection<CollectionComment> Children { get; set; }
#endregion
} مدل بالا نشان دهنده‌ی نظرات ارسالی برای پست‌های کلکسیون‌ها می‌باشد. صرفا کاربران عضو سیستم این اجازه را در صورتی خواهند داشت که برای پست مورد نظر خصوصیت AllowComments با مقدار true مقدار دهی شده باشد
حالت درختی آن مشخص است. برای اعمال ارتباط یک به چند بین پست‌ها و نظرات، از CollectionPost و CollectionPostId استفاده خواهد شد.
public class CollectionAttachment : BaseAttachment
{
#region NavigationProperties
/// <summary>
/// gets or sets Collection that this file attached
/// </summary>
public virtual Collection Collection { get; set; }
/// <summary>
/// gets or sets Id of Collection that this file attached
/// </summary>
public virtual Guid? CollectionId { get; set; }
#endregion
} /// <summary>
/// Represents Announcement For Announcement Section
/// </summary>
public class Announcement : BaseContent
{
#region Properties
/// <summary>
/// gets or sets Date that this Announcement will Expire
/// </summary>
public virtual DateTime? ExpireOn { get; set; }
/// <summary>
/// indicate this accouncement is approved by admin if announcementSetting.Moderate==true
/// </summary>
public virtual bool IsApproved { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// get or set Collection of Comments for this Announcement
/// </summary>
public virtual ICollection<AnnouncementComment> Comments { get; set; }
#endregion
} /// <summary>
/// Repersents Comment For Announcement
/// </summary>
public class AnnouncementComment : BaseComment
{
#region NavigationProperties
/// <summary>
/// gets or sets body of announcement's comment
/// </summary>
public virtual long? ReplyId { get; set; }
/// <summary>
/// gets or sets body of announcement's comment
/// </summary>
public virtual AnnouncementComment Reply { get; set; }
/// <summary>
/// gets or sets body of announcement's comment
/// </summary>
public virtual ICollection<AnnouncementComment> Children { get; set; }
/// <summary>
/// gets or sets announcement that this comment sent to it
/// </summary>
public virtual Announcement Announcement { get; set; }
/// <summary>
/// gets or sets announcement'Id that this comment sent to it
/// </summary>
public virtual long AnnouncementId { get; set; }
#endregion
} /// <summary>
/// Represent The Operation's log
/// </summary>
public class AuditLog
{
#region Ctor
/// <summary>
///
/// </summary>
public AuditLog()
{
Id = SequentialGuidGenerator.NewSequentialGuid();
OperatedOn = DateTime.Now;
}
#endregion
#region Properties
/// <summary>
/// sets or gets identifier of AuditLog
/// </summary>
public virtual Guid Id { get; set; }
/// <summary>
/// sets or gets description of Log
/// </summary>
public virtual string Description { get; set; }
/// <summary>
/// sets or gets when log is operated
/// </summary>
public virtual DateTime OperatedOn { get; set; }
/// <summary>
/// sets or gets log's section
/// </summary>
public virtual AuditSection Section { get; set; }
#endregion
#region NavigationProperties
/// <summary>
/// sets or gets log's creator
/// </summary>
public virtual User OperatedBy { get; set; }
/// <summary>
/// sets or gets identifier of log's creator
/// </summary>
public virtual long OperatedById { get; set; }
#endregion
}
public enum AuditSection
{
Blog,
News,
Forum,
...
} /// <summary>
/// Represents Domain that is banned
/// </summary>
public class BannedDomain
{
#region Propertie
/// <summary>
/// gets or sets identifier of Domain
/// </summary>
public virtual Guid Id { get; set; }
/// <summary>
/// gets or sets DomainName
/// </summary>
public virtual string Name { get; set; }
/// <summary>
/// gets or sets Date that this record added
/// </summary>
public virtual DateTime BannedOn { get; set; }
#endregion
} /// <summary>
/// Represents the banned words
/// </summary>
public class BannedWord
{
#region Ctor
/// <summary>
/// Create one instance of <see cref="BannedWord"/>
/// </summary>
public BannedWord()
{
Id = SequentialGuidGenerator.NewSequentialGuid();
}
#endregion
#region Properties
/// <summary>
/// gets or sets identifier of BannedWord
/// </summary>
public Guid Id { get; set; }
/// <summary>
/// gets or sets Bad word
/// </summary>
public string BadWord { get; set; }
/// <summary>
/// gets or sets Good replaceword
/// </summary>
public string GoodWord { get; set; }
/// <summary>
/// indicating that this Word is spam
/// </summary>
public bool IsStopWord { get; set; }
#endregion
} /// <summary>
/// Represent The CMS setting
/// </summary>
public class Setting
{
#region Properties
/// <summary>
/// sets or gets name of setting
/// </summary>
public virtual string Name { get; set; }
/// <summary>
/// sets or gets value of setting
/// </summary>
public virtual string Value { get; set; }
/// <summary>
/// sets or gets Type of setting
/// </summary>
public virtual string Type { get; set; }
#endregion
} 
My last post investigated ways to build a .NET Core desktop/console app with a web-rendered UI without bringing in the full weight of Electron. This seems to have interested a lot of people, so I decided to upgrade it to newer technologies and add cross-platform support.
The result is a little NuGet package called WebWindow that you can add to any .NET Core console app. It can open a native OS window (Windows/Mac/Linux) containing web-based UI, without your app having to bundle either Node or Chromium.
