Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders
postTicket(ticket: Ticket, filesList: FileList): Observable<HttpEvent<any>> {
//… the same as before
const headers = new HttpHeaders().set("Accept", "application/json");
return this.http
.post(`${this.baseUrl}/SaveTicket`, formData, {
headers: headers,
reportProgress: true,
observe: "events"
})
.map(response => response || {})
.catch((error: HttpErrorResponse) => {
console.error("observable error: ", error);
return Observable.throw(error.statusText);
});
} postTicket(ticket: Ticket, filesList: FileList): Observable<HttpEvent<any>> { {
headers: headers,
reportProgress: true,
observe: "events"
} queueProgress: number;
isUploading: boolean;
uploadTimeRemaining: number;
uploadTimeElapsed: number;
uploadSpeed: number;
submitForm(form: NgForm) {
const fileInput: HTMLInputElement = this.screenshotInput.nativeElement;
this.queueProgress = 0;
this.isUploading = true;
let startTime = Date.now();
this.uploadService.postTicket(this.model, fileInput.files).subscribe(
(event: HttpEvent<any>) => {
switch (event.type) {
case HttpEventType.Sent:
startTime = Date.now();
console.log("Request sent!");
break;
case HttpEventType.DownloadProgress:
case HttpEventType.UploadProgress:
if (event.total) {
this.queueProgress = Math.round(event.loaded / event.total * 100);
const timeElapsed = Date.now() - startTime;
const uploadSpeed = event.loaded / (timeElapsed / 1000);
this.uploadTimeRemaining = Math.ceil(
(event.total - event.loaded) / uploadSpeed
);
this.uploadTimeElapsed = Math.ceil(timeElapsed / 1000);
this.uploadSpeed = uploadSpeed / 1024 / 1024;
}
break;
case HttpEventType.Response:
this.queueProgress = 100;
this.isUploading = false;
console.log("Done! ResponseBody:", event.body);
break;
}
},
(error: HttpErrorResponse) => {
this.isUploading = false;
console.log(error);
}
);
} <div *ngIf="queueProgress > 0">
<table class="table">
<thead>
<tr>
<th width="15%">Event</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>Elapsed time</strong></td>
<td nowrap>{{uploadTimeElapsed | number:'.1'}} second(s)</td>
</tr>
<tr>
<td><strong>Remaining time</strong></td>
<td nowrap>{{uploadTimeRemaining | number:'.1'}} second(s)</td>
</tr>
<tr>
<td><strong>Upload speed</strong></td>
<td nowrap>{{uploadSpeed | number:'.3'}} MB/s</td>
</tr>
<tr>
<td><strong>Queue progress</strong></td>
<td>
<div class="progress-bar progress-bar-info progress-bar-striped" role="progressbar"
aria-valuemin="0" aria-valuemax="100" [attr.aria-valuenow]="queueProgress"
[ngStyle]="{ 'width': queueProgress + '%' }">
{{queueProgress}}%
</div>
</td>
</tr>
</tbody>
</table>
</div>
<button class="btn btn-primary" [disabled]="form.invalid || isUploading" type="submit">Submit</button> 
@page "/hotel/rooms"
@if (Rooms is not null && Rooms.Any())
{
}
else
{
<div style="position:fixed;top:50%;left:50%;margin-top:-50px;margin-left:-100px;">
<img src="images/loader.gif" />
</div>
}
@code {
IEnumerable<HotelRoomDTO> Rooms = new List<HotelRoomDTO>();
// ...
} <body>
<div id="app">
<div
style="
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
"
>
<img src="images/ajax-loader.gif" />
</div>
</div> namespace BlazorServer.Models
{
public class HotelRoomDTO
{
// ...
public int TotalDays { get; set; }
public decimal TotalAmount { get; set; }
}
} @code
{
HomeVM HomeModel = new HomeVM();
// ...
private async Task LoadRoomsAsync()
{
Rooms = await HotelRoomService.GetHotelRoomsAsync(HomeModel.StartDate, HomeModel.EndDate);
foreach (var room in Rooms)
{
room.TotalAmount = room.RegularRate * HomeModel.NoOfNights;
room.TotalDays = HomeModel.NoOfNights;
}
}
} 
@if (Rooms is not null && Rooms.Any())
{
<EditForm Model="HomeModel" OnValidSubmit="SaveBookingInfo" class="bg-light">
<div class="pt-3 pb-2 px-5 mx-1 mx-md-0 bg-secondary">
<DataAnnotationsValidator />
<div class="row px-3 mx-3">
<div class="col-6 col-md-4">
<div class="form-group">
<label class="text-warning">Check in Date</label>
<InputDate @bind-Value="HomeModel.StartDate" class="form-control" />
</div>
</div>
<div class="col-6 col-md-4">
<div class="form-group">
<label class="text-warning">Check Out Date</label>
<input @bind="HomeModel.EndDate" disabled="disabled"
readonly="readonly" type="date" class="form-control" />
</div>
</div>
<div class=" col-4 col-md-2">
<div class="form-group">
<label class="text-warning">No. of nights</label>
<select class="form-control" @bind="HomeModel.NoOfNights">
<option value="Select" selected disabled="disabled">(Select No. Of Nights)</option>
@for (var i = 1; i <= 10; i++)
{
<option value="@i">@i</option>
}
</select>
</div>
</div>
<div class="col-8 col-md-2">
<div class="form-group" style="margin-top: 1.9rem !important;">
@if (IsProcessing)
{
<button class="btn btn-success btn-block form-control">
<i class="fa fa-spin fa-spinner"></i>Processing...
</button>
}
else
{
<input type="submit" value="Update" class="btn btn-success btn-block form-control" />
}
</div>
</div>
</div>
</div>
</EditForm> @code {
bool IsProcessing;
// ...
private async Task SaveBookingInfo()
{
IsProcessing = true;
HomeModel.EndDate = HomeModel.StartDate.AddDays(HomeModel.NoOfNights);
await LocalStorage.SetItemAsync(ConstantKeys.LocalInitialBooking, HomeModel);
await LoadRoomsAsync();
IsProcessing = false;
}
} 
@foreach (var room in Rooms)
{
<div class="row p-2 my-3 " style="border-radius:20px; border: 1px solid gray">
<div class="col-12 col-lg-3 col-md-4">
<div id="carouselExampleIndicators_@room.Id"
class="carousel slide mb-4 m-md-3 m-0 pt-3 pt-md-0"
data-ride="carousel">
<ol class="carousel-indicators">
@{
int imageIndex = 0;
int innerImageIndex = 0;
}
@foreach (var image in room.HotelRoomImages)
{
if (imageIndex == 0)
{
<li data-target="#carouselExampleIndicators_@room.Id"
data-slide-to="@imageIndex" class="active"></li>
}
else
{
<li data-target="#carouselExampleIndicators_@room.Id"
data-slide-to="@imageIndex"></li>
}
imageIndex++;
}
</ol>
<div class="carousel-inner">
@foreach (var image in room.HotelRoomImages)
{
var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}";
if (innerImageIndex == 0)
{
<div class="carousel-item active">
<img class="d-block w-100" style="border-radius:20px;"
src="@imageUrl" alt="First slide">
</div>
}
else
{
<div class="carousel-item">
<img class="d-block w-100" style="border-radius:20px;"
src="@imageUrl" alt="First slide">
</div>
}
innerImageIndex++;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleIndicators_@room.Id"
role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleIndicators_@room.Id"
role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
} var imageUrl = $"{ImagesBaseAddress}/{image.RoomImageUrl}"; @code {
string ImagesBaseAddress = "https://localhost:5006"; @foreach (var room in Rooms)
{
<div class="col-12 col-lg-9 col-md-8">
<div class="row pt-3">
<div class="col-12 col-lg-8">
<p class="card-title text-warning" style="font-size:xx-large">@room.Name</p>
<p class="card-text">
@((MarkupString)room.Details)
</p>
</div>
<div class="col-12 col-lg-4">
<div class="row pb-3 pt-2">
<div class="col-12 col-lg-11 offset-lg-1">
<a href="@($"hotel/room-details/{room.Id}")" class="btn btn-success btn-block">Book</a>
</div>
</div>
<div class="row ">
<div class="col-12 pb-5">
<span class="float-right">
<span class="float-right">Occupancy : @room.Occupancy adults </span><br />
<span class="float-right pt-1">Room Size : @room.SqFt sqft</span><br />
<h4 class="text-warning font-weight-bold pt-4">
<span style="border-bottom:1px solid #ff6a00">
@room.TotalAmount.ToString("#,#.00;(#,#.00#)")
</span>
</h4>
<span class="float-right">Cost for @room.TotalDays nights</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
} public class MyBaseClass(string s); // no body required
class Foo; struct Bar; interface IFoo;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.11.1.min.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="~/Scripts/ajaxfileupload.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html> namespace MVCAjaxFormUpload.Models
{
public class Product
{
public int Id { set; get; }
public string Name { set; get; }
}
} using System.Threading;
using System.Web;
using System.Web.Mvc;
using MVCAjaxFormUpload.Models;
namespace MVCAjaxFormUpload.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
[HttpPost]
public ActionResult Index(Product product)
{
var isAjax = this.Request.IsAjaxRequest();
return Json(new { result = "ok" }, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult UploadFiles(HttpPostedFileBase image1, int id)
{
var isAjax = this.Request.IsAjaxRequest();
Thread.Sleep(3000); //شبیه سازی عملیات طولانی
return Json(new { FileName = "/Uploads/filename.ext" }, "text/html", JsonRequestBehavior.AllowGet);
}
}
} @model MVCAjaxFormUpload.Models.Product
@{
ViewBag.Title = "Index";
}
<h2>Ajax Form Upload</h2>
@using (Ajax.BeginForm(actionName: "Index",
controllerName: "Home",
ajaxOptions: new AjaxOptions { HttpMethod = "POST" },
routeValues: null,
htmlAttributes: new { id = "uploadForm" }))
{
<label>Name:</label>
@Html.TextBoxFor(model => model.Name)
<br />
<label>Image:</label>
<br />
<input type="file" name="Image1" id="Image1" />
<br />
<input type="submit" value="Submit" />
<img id="loading" src="~/Content/Images/loading.gif" style="display:none;">
}
@section Scripts
{
<script type="text/javascript">
$(function () {
$('#uploadForm').submit(function () {
$("#loading").show();
$.ajaxFileUpload({
url: "@Url.Action("UploadFiles", "Home")", // مسیری که باید فایل به آن ارسال شود
secureuri: false,
fileElementId: 'Image1', // آی دی المان ورودی فایل
dataType: 'json',
data: { id: 1, data: 'test' }, // اطلاعات اضافی در صورت نیاز
success: function (data, status) {
$("#loading").hide();
if (typeof (data.FileName) != 'undefined') {
alert(data.FileName);
}
},
error: function (data, status, e) {
$("#loading").hide();
alert(e);
}
});
});
});
</script>
} 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;
..... 
constructor(
private injector: Injector,
@Inject(APP_CONFIG) private appConfig: IAppConfig
) {}
loadApiConfig(): Promise<any> {
const http = this.injector.get<HttpClient>(HttpClient);
const url = `${this.appConfig.apiEndpoint}/${
this.appConfig.apiSettingsPath
}`;
return http
.get<IApiConfig>(url)
.toPromise()
.then(config => {
this.config = config;
console.log('ApiConfig', this.config);
})
.catch(err => {
console.error(
`Failed to loadApiConfig(). Make sure ${url} is accessible.`,
this.config
);
return Promise.reject(err);
});
} {
provide: APP_INITIALIZER,
useFactory: (config: ApiConfigService) => () => config.loadApiConfig(),
deps: [ApiConfigService],
multi: true
} const http = this.injector.get<HttpClient>(HttpClient);
// ... builder.Services.AddRazorComponents().AddInteractiveServerComponents(); // ... app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
// ... builder.Services.AddRazorComponents(); // ... app.MapRazorComponents<App>();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
<link rel="stylesheet" href="app.css" />
<link rel="stylesheet" href="MyApp.styles.css" />
<link rel="icon" type="image/png" href="favicon.png" />
<HeadOutlet />
</head>
<body>
<Routes />
<script src="_framework/blazor.web.js"></script>
</body>
</html> <Router AppAssembly="@typeof(Program).Assembly">
<Found Context="routeData">
<RouteView RouteData="@routeData" DefaultLayout="@typeof(Layout.MainLayout)" />
<FocusOnNavigate RouteData="@routeData" Selector="h1" />
</Found>
</Router> app.UseStatusCodePagesWithRedirects("/StatusCode/{0}"); @page "/StatusCode/{responseCode}"
<h3>StatusCode @ResponseCode</h3>
@code {
[Parameter] public string? ResponseCode { get; set; }
} if (!app.Environment.IsDevelopment())
{
app.UseExceptionHandler("/Error", createScopeForErrors: true);
} 404.razor
@page "/StatusCode/404" <PageTitle>Not found</PageTitle> <h1>Not found</h1> <p role="alert">Sorry, there's nothing at this address.</p>
500.razor
@page "/StatusCode/500" <PageTitle>Unexpected error</PageTitle> <h1>Unexpected error</h1> <p role="alert">There was an unexpected error.</p>
401.razor
@page "/StatusCode/401" <PageTitle>Not Authorized</PageTitle> <h1>Not Authorized</h1> <p role="alert">Sorry, you are not authorized to access this page.</p>
<HeadOutlet @rendermode="@InteractiveServer" /> ... <Routes @rendermode="@InteractiveServer" />
dotnet new blazor --interactivity Server --all-interactive
@rendermode InteractiveServerRenderModeWithoutPrerendering
@code{
static readonly IComponentRenderMode InteractiveServerRenderModeWithoutPrerendering =
new InteractiveServerRenderMode(false);
} یکی از بهترین کاربردهای React، ترکیب کردن چند کامپوننت برای ساخت یک کامپوننت است. کامپوننت ساخته شده به این روش هر چند مشخص است چه کاری انجام میدهد، اما خود کامپوننت تگ‌ها را نمی‌سازد و شبیه یک لگو با قطعات مختلف است. مثلا در جایی از سایت میخواهیم اطاعات کاربری را نمایش دهیم. این اطلاعات به زیر مجموعه‌هایی تقسیم میشوند؛ مثل اطلاعات شخصی، اطلاعات مربوط به شغل، اطلاعات تماس و عکس. به جای جمع کردن همه موارد در یک کامپوننت بهتر است هر بخش ویژه را در یک کامپوننت جدا و مستقل نمایش داده و ایجاد کنیم. با این کار از هر کامپوننت میشود به صورت جداگانه در قسمت‌های دیگر سایت استفاده کرد. مثلا نمایش عکس کاربر به تنهایی در بخشهای دیگر سایت. در نهایت با این روش حجم کدها هم کمتر میشود. کامپوننتی که از اجزای کوچکتر ساخته میشود، مالک کامپوننت‌های زیر مجموعه خود است.
کامپوننت مالک میتواند داده‌های ورودی را برای اجزای سازنده خود به صورت یک سویه (one-way data binding) فراهم کند. گاهی داده‌های مورد نیاز فرزندان، به طور مستقیم به مالک و از مالک به طور غیر مستقیم به فرزندان ارسال میشود. اما ممکن است لازم باشد که داده‌ها در اثر محاسبه در کامپوننت مالک، ایجاد و نتیجه به فرزندان ارسال شود. به هر صورت باید دقت داشته باشیم که در هر دو حالت اگر منبع داده و یا محسابه تغییر کنند، در به روز رسانی‌ها، توسط React بازتاب آن را خواهیم داشت. در مثال زیر کامپوننت DisplayAllInfos تشکیل شده از چهار کامپوننت دیگر است.
class DisplayAllInfos extends React.Component{
render(){
return (
<div classID="something" className="something">
<ProfilePhoto src={} />
<UserPersonalInfo userInfo={}/>
<UserJobInfo jobInfo={}/>
<UserContactInfo contactInfo={}/>
</div>
)
}
} حتی میشود تگ <div> در مثال بالا را بصورت یک کامپوننت درآورد و سایر کامپوننت‌ها را به عنوان فرزند به آن کامپوننت معرفی کرد. روش کار به صورت زیر است.
class Container extends React.Component{
render(){
<div classID="something" className="something">
{this.props.children}
</div>
}
}
class DisplayAllInfos extends React.Component{
render(){
return (
<Container>
<ProfilePhoto src={} />
<UserPersonalInfo userInfo={}/>
<UserJobInfo jobInfo={}/>
<UserContactInfo contactInfo={}/>
</Container>
)
}
} توسط خاصیت this.proprs.children در کامپوننت Container فرزندانی که برای این کامپوننت در نظر گرفته شده را نمایش میدهیم و به آنها دسترسی داریم.
روش دیگر فرزند خواندگی یک کامپوننت مالک، از طریق ایجاد آرایه‌ای از کامپوننت‌های فرزند است که در مثال نوشیدنی‌ها آورده شد. این روش میتواند دچار اشکال شود. اگر عضوی از این آرایه حذف شود، یا اعضای آن درون آرایه تغییر مکان دهند و مسائلی از این دست که برای آرایه‌ها پیش می‌آید، React قادر به تشخیص ترتیب فرزند‌ها نیست و نمیتواند آنها را دوباره فراخوانی و ایجاد کند. برای رفع چنین مشکلی باید برای هر فرزندی که به یک مالک اضافه میکنیم، یک کلید در نظر بگیریم. از این پس وقتی آرایه‌ای از فرزند‌ها دچار تغییر شدند، React از روی کلید‌های منحصر به فرد آنها میتواند تغییرات را تشخیص داده و دوباره کامپوننت فرزند را به درستی بسازد. به مثال زیر توجه کنید.
var hotDrinks = [
{id: 1, item: "Tea", price: "7000" },
{id: 2, item: "Espresso", price: "10000" },
{id: 3, item: "Hot Chocolate", price: "12000" }
];
// {this.state.menuList.map(item => <MenuItem {...item} />)}
var Menu = React.createClass({
render: function () {
return (
<div className="row">
<div className="col-md-4">
<ul className="list-group">
{this.state.menuList.map(item => <MenuItem key={item.id} {...item} />)}
</ul>
</div>
</div>
)
}
}); آن خط کدی که به صورت کامنت گذاشته شده همان روش قبل در مثال نوشیدنی‌هاست. در حالت اصلاح شده برای هر یک از MenuItemها یک id در نظر گرفته شده. باید توجه داشته باشیم که کلیدها حتما یگانه باشند و نکته دیگر اینکه این کلیدها فقط در زمان معرفی کامپوننت استفاده میشوند و نمیتوانیم داخل خود کامپوننت آنها را داشته باشیم. برای مثال در یک کامپوننت MenuItem مقدار this.props.key قابل استفاده نیست. هیچگاه از اندیس خود اعضای آرایه به عنوان کلید استفاده نکنید، چرا که با حذف یک مورد، در عمل وضعیت کلیدها را بهم ریخته‌اید و شاهد رفتاری غیرقابل پیش‌بینی خواهید شد.
در قسمت بعدی اعتبارسنجی را در کتابخانه React بررسی میکنیم.
public class Startup
{
public void ConfigureServices(IServiceCollections services)
{
services.AddMvc(); // موجب فعال شدن «صفحات» و کنترلرها میشود
}
public void Configure(IApplicationBuilder app)
{
app.UseMvc();
}
} @page
@{
var message = "Hello, World!";
}
<html>
<body>
<p>@message</p>
</body>
</html> | URL متناظر | نام فایل و مسیر آن |
| / یا /Index | /Pages/Index.cshtml |
| /Contact | /Pages/Store/Contact.cshtml |
| /Store/Contact | /Pages/Store/Contact.cshtml |
using System.ComponentModel.DataAnnotations;
namespace MyApp
{
public class Contact
{
[Required]
public string Name { get; set; }
[Required]
public string Email { get; set; }
}
} @page
@using MyApp
@using Microsoft.AspNetCore.Mvc.RazorPages
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@inject ApplicationDbContext Db
@functions {
[BindProperty]
public Contact Contact { get; set; }
public async Task<IActionResult> OnPostAsync()
{
if (ModelState.IsValid)
{
Db.Contacts.Add(Contact);
await Db.SaveChangesAsync();
return RedirectToPage();
}
return Page();
}
}
<html>
<body>
<p>فرم زیر را پر کنید تا در اسرع وقت، کارشناسان ما با شما بگیرند</p>
<div asp-validation-summary="All"></div>
<form method="POST">
<div>Name: <input asp-for="Contact.Name" /></div>
<div>Email: <input asp-for="Contact.Email" /></div>
<input type="submit" />
</form>
</body>
</html> @page
@using MyApp
@using MyApp.Pages
@using Microsoft.AspNetCore.Mvc.RazorPages
@addTagHelper "*, Microsoft.AspNetCore.Mvc.TagHelpers"
@model ContactModel
<html>
<body>
<p>فرم زیر را پر کنید تا در اسرع وقت، کارشناسان ما با شما بگیرند </p>
<div asp-validation-summary="All"></div>
<form method="POST">
<div>Name: <input asp-for="Contact.Name" /></div>
<div>Email: <input asp-for="Contact.Email" /></div>
<input type="submit" />
</form>
</body>
</html> using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace MyApp.Pages
{
public class ContactModel : PageModel
{
public ContactModel(ApplicationDbContext db)
{
Db = db;
}
[BindProperty]
public Contact Contact { get; set; }
private ApplicationDbContext Db { get; }
public async Task<IActionResult> OnPostAsync()
{
if (ModelState.IsValid)
{
Db.Contacts.Add(Contact);
await Db.SaveChangesAsync();
return RedirectToPage();
}
return Page();
}
}
}