// ...
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
namespace dotnet_template_sample
{
public class Startup
{
// ...
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
// In production, the React files will be served from this directory
services.AddSpaStaticFiles(configuration =>
{
configuration.RootPath = "ClientApp/build";
});
} <ItemGroup> <PackageReference Include="Microsoft.AspNetCore.SpaServices.Extensions" Version="3.1.2" /> </ItemGroup>
// ...
using Microsoft.AspNetCore.SpaServices.ReactDevelopmentServer;
namespace dotnet_template_sample
{
public class Startup
{
// ...
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
// ...
app.UseStaticFiles();
app.UseSpaStaticFiles();
app.UseRouting();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
});
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseReactDevelopmentServer(npmScript: "start");
}
});
}
}
} // replace
spa.UseReactDevelopmentServer(npmScript: "start");
// with
spa.UseProxyToSpaDevelopmentServer("http://localhost:3000"); <Target Name="DebugEnsureNodeEnv"
BeforeTargets="Build"
Condition=" '$(Configuration)' == 'Debug' And !Exists('$(SpaRoot)node_modules') ">
<!-- Ensure Node.js is installed -->
<Exec Command="node --version" ContinueOnError="true">
<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
</Exec>
<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
</Target> <Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
<Exec WorkingDirectory="$(SpaRoot)" Command="npm install" />
<Exec WorkingDirectory="$(SpaRoot)" Command="npm run build" />
<!-- Include the newly-built files in the publish output -->
<ItemGroup>
<DistFiles Include="$(SpaRoot)build\**" />
<ResolvedFileToPublish Include="@(DistFiles->'%(FullPath)')" Exclude="@(ResolvedFileToPublish)">
<RelativePath>%(DistFiles.Identity)</RelativePath>
<CopyToPublishDirectory>PreserveNewest</CopyToPublishDirectory>
<ExcludeFromSingleFile>true</ExcludeFromSingleFile>
</ResolvedFileToPublish>
</ItemGroup>
</Target> > npm i -g create-react-app > create-react-app sample-30 > cd sample-30 > npm start
> npm install --save bootstrap
import "bootstrap/dist/css/bootstrap.css";
import "./App.css";
import React, { Component } from "react";
class App extends Component {
state = { count: 0 };
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
};
render() {
return (
<button onClick={this.incrementCount} className="btn btn-primary m-3">
I was clicked {this.state.count} times!
</button>
);
}
}
export default App; 
//import App from "./AppClass"; import App from "./AppFunction";
import React, { useState } from 'react'; const App = () => {
const [count, setCount] = useState(0); useState<number>(initialState: number | (() => number)): [number, React.Dispatch<React.SetStateAction<number>>]
import React, { useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
const incrementCount = () => {
setCount(count + 1);
};
return (
<button onClick={incrementCount} className="btn btn-primary m-3">
I was clicked {count} times!
</button>
);
};
export default App; const setCount: (value: React.SetStateAction<number>) => void
incrementCount = () => {
this.setState({ count: this.state.count + 1 });
}; incrementCount = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
}; const incrementCount = () => {
setCount(count + 1);
}; const incrementCount = () => {
setCount(prevCount => prevCount + 1);
}; 
import "./App.css";
import React, { Component } from "react";
class App extends Component {
state = {
count: 0,
isOn: false
};
incrementCount = () => {
this.setState(prevState => ({
count: prevState.count + 1
}));
};
toggleLight = () => {
this.setState(prevState => ({
isOn: !prevState.isOn
}));
};
render() {
return (
<>
<h1>App Class</h1>
<h2>Counter</h2>
<button onClick={this.incrementCount} className="btn btn-primary m-3">
I was clicked {this.state.count} times!
</button>
<h2>Toggle Light</h2>
<div
style={{
height: "50px",
width: "50px",
cursor: "pointer"
}}
className={
this.state.isOn ? "alert alert-info m-3" : "alert alert-warning m-3"
}
onClick={this.toggleLight}
/>
</>
);
}
}
export default App; import App from "./AppClass"; //import App from "./AppFunction";
import React, { useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
const [isOn, setIsOn] = useState(false);
const incrementCount = () => {
setCount(prevCount => prevCount + 1);
};
const toggleLight = () => {
setIsOn(prevIsOn => !prevIsOn);
};
return (
<>
<h1>App Function</h1>
<h2>Counter</h2>
<button onClick={incrementCount} className="btn btn-primary m-3">
I was clicked {count} times!
</button>
<h2>Toggle Light</h2>
<div
style={{
height: "50px",
width: "50px",
cursor: "pointer"
}}
className={isOn ? "alert alert-info m-3" : "alert alert-warning m-3"}
onClick={toggleLight}
/>
</>
);
};
export default App; // import App from "./AppClass"; import App from "./AppFunction";
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You have clicked ${count} times`;
}); 
class App extends Component {
componentDidMount() {
document.title = `You have been clicked ${this.state.count} times`;
}
componentDidUpdate() {
document.title = `You have been clicked ${this.state.count} times`;
} class App extends Component {
componentDidMount() {
// ...
window.addEventListener("mousemove", this.handleMouseMove);
} handleMouseMove = event => {
this.setState({
x: event.pageX,
y: event.pageY
});
}; class App extends Component {
state = {
//...
x: 0,
y: 0
}; <h2>Mouse Position</h2>
<p>X position: {this.state.x}</p>
<p>Y position: {this.state.y}</p> componentWillUnmount() {
window.removeEventListener("mousemove", this.handleMouseMove);
} const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 }); const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 });
useEffect(() => {
// ...
window.addEventListener("mousemove", handleMouseMove);
});
const handleMouseMove = event => {
setMousePosition({
x: event.pageX,
y: event.pageY
});
}; <h2>Mouse Position</h2>
{JSON.stringify(mousePosition, null, 2)}
<br /> useEffect(() => {
// …
// componentDidMount & componentDidUpdate
window.addEventListener("mousemove", handleMouseMove);
// componentWillUnmount
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
}); useEffect(() => {
document.title = `You have clicked ${count} times`;
window.addEventListener("mousemove", handleMouseMove);
return () => {
window.removeEventListener("mousemove", handleMouseMove);
};
},[]); useEffect(() => {
// ...
},[count]); const [status, setStatus] = useState(navigator.onLine);
useEffect(() => {
// ...
window.addEventListener("online", handleOnline);
window.addEventListener("offline", handleOffline);
return () => {
// ...
window.removeEventListener("online", handleOnline);
window.removeEventListener("offline", handleOffline);
};
}, [count]); const handleOnline = () => {
setStatus(true);
};
const handleOffline = () => {
setStatus(false);
}; <h2>Network Status</h2>
<p>
You are <strong>{status ? "online" : "offline"}</strong>
</p> 
const initialLocationState = {
latitude: null,
longitude: null,
speed: null
};
const App = () => {
// ...
const [location, setLocation] = useState(initialLocationState); useEffect(() => {
// ...
navigator.geolocation.getCurrentPosition(handleGeolocation);
const watchId = navigator.geolocation.watchPosition(handleGeolocation);
return () => {
// ...
navigator.geolocation.clearWatch(watchId);
};
}, [count]); let mounted = true;
useEffect(() => {
// ...
return () => {
// ...
mounted = false;
};
}, [count]); const handleGeolocation = event => {
if (mounted) {
setLocation({
latitude: event.coords.latitude,
longitude: event.coords.longitude,
speed: event.coords.speed
});
}
}; <h2>Geolocation</h2>
<p>Latitude is {location.latitude}</p>
<p>Longitude is {location.longitude}</p>
<p>Your speed is {location.speed ? location.speed : "0"}</p> const [{ latitude, longitude, speed }, setLocation] = useState(
initialLocationState
); <h2>Geolocation</h2>
<p>Latitude is {latitude}</p>
<p>Longitude is {longitude}</p>
<p>Your speed is {speed ? speed : "0"}</p> pos/pos-177.pgm 1 0 0 100 40
neg/neg-274.pgm
private static void createCarImagesFile()
{
var sb = new StringBuilder();
foreach (var file in new DirectoryInfo(@"..\..\CarData\CarData\TrainImages").GetFiles("*pos-*.pgm"))
{
sb.AppendFormat("{0} {1} {2} {3} {4} {5}{6}", file.FullName, 1, 0, 0, 100, 40, Environment.NewLine);
}
File.WriteAllText(@"..\..\CarsInfo\carImages.txt", sb.ToString());
}
private static void createNegativeImagesFile()
{
var sb = new StringBuilder();
foreach (var file in new DirectoryInfo(@"..\..\CarData\CarData\TrainImages").GetFiles("*neg-*.pgm"))
{
sb.AppendFormat("{0}{1}", file.FullName,Environment.NewLine);
}
File.WriteAllText(@"..\..\CarsInfo\negativeImages.txt", sb.ToString());
} opencv_createsamples.exe -info carImages.txt -num 550 -w 48 -h 24 -vec cars.vec
Info file name: carImages.txt Img file name: (NULL) Vec file name: cars.vec BG file name: (NULL) Num: 550 BG color: 0 BG threshold: 80 Invert: FALSE Max intensity deviation: 40 Max x angle: 1.1 Max y angle: 1.1 Max z angle: 0.5 Show samples: FALSE Original image will be scaled to: Width: $backgroundWidth / 48 Height: $backgroundHeight / 24 Create training samples from images collection... Done. Created 550 samples
"c:\opencv\build\x86\vc12\bin\opencv_createsamples.exe" -vec cars.vec -w 48 -h 24
"E:\opencv\bin\opencv_traincascade.exe" -data data -vec cars.vec -bg negativeImages.txt -numPos 500 -numNeg 500 -numStages 2 -w 48 -h 24 -featureType LBP
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestBrokenImages.aspx.cs"
Inherits="testWebForms87.TestBrokenImages" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>detecting broken images</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function errorReplace(arg) {
//ارسال پیغام خطا
$.ajax({
type: "POST",
url: "TestBrokenImages.aspx/GetErros",
data: "{'image': '" + arg.src + "','page':'" + location.href + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json"
});
//نمایش تصویری دلخواه بجای نمونه مفقود
$(arg).attr('src', 'missing.png');
}
//بررسی وضعیت تک تک تصاویر پس از بارگذاری کامل صفحه
$(document).ready(function() {
$(window).bind('load', function() {
$('img').each(function() {
if (!this.complete || (!$.browser.msie && (typeof this.naturalWidth == "undefined" || this.naturalWidth == 0))) {
errorReplace(this);
}
});
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<img src="img1.png" />
<img src="img2.png" />
</div>
</form>
</body>
</html>
using System;
using System.IO;
using System.Web.Services;
namespace testWebForms87
{
public partial class TestBrokenImages : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static void GetErros(string image,string page)
{
//ارسال ایمیل به مسؤول سایت و یا ذخیره خطاها در دیتابیس
}
}
}
