• هنگامیکه خطایی رخ نداده است، محتوای فرزند خود را رندر می‌کند. 
  
  
• هنگامیکه یک استثناء کنترل نشده رخ می‌دهد، صفحه‌ی خطای پیش فرضی را رندر می‌کند. 

  
  

<div>
    <div>
        <ErrorBoundary>
            @Body
        </ErrorBoundary>
    </div>
</div>

<ErrorBoundary>
    <ChildContent>
        @Body
    </ChildContent>
    <ErrorContent>
        <p class="errorUI">متاسفانه خطایی رخ داده است!</p>
    </ErrorContent>
</ErrorBoundary>

...

<ErrorBoundary @ref="errorBoundary">
    @Body
</ErrorBoundary>

...

@code {
    private ErrorBoundary? errorBoundary;

    protected override void OnParametersSet()
    {
        errorBoundary?.Recover();
    }
}

import svelte from 'rollup-plugin-svelte';
import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import livereload from 'rollup-plugin-livereload';
import { terser } from 'rollup-plugin-terser';

const production = !process.env.ROLLUP_WATCH;

export default {
input: 'src/main.js',
output: {
sourcemap: true,
format: 'iife',
name: 'app',
file: 'public/bundle.js'
},
plugins: [
svelte({
// enable run-time checks when not in production
dev: !production,
// we'll extract any component CSS out into
// a separate file — better for performance
css: css => {
css.write('public/bundle.css');
}
}),

// If you have external dependencies installed from
// npm, you'll most likely need these plugins. In
// some cases you'll need additional configuration —
// consult the documentation for details:
// https://github.com/rollup/rollup-plugin-commonjs
resolve(),
commonjs(),

// Watch the `public` directory and refresh the
// browser on changes when not in production
!production && livereload('public'),

// If we're building for production (npm run build
// instead of npm run dev), minify
production && terser()
],
watch: {
clearScreen: false
}
};

<form action="/rest/login" method="POST">
    <input name="username" required>
    <input type="password" name="password" required>
</form>

 <input name=username required>

 <input name=username required>

<div class="bold">I'm a bold element</div>

 <a href="http://www.site.com/blog/">Read the blog</a>

<script>
   document.querySelector('A').href = 'https://www.dntips.ir';
</script>

  <input type="checkbox" checked>

  <script>
      // this does not remove the checked attribute 
      document.querySelector('INPUT').checked = false;
  </script>

  <form action="/submitHandler" method="POST">
      <input name="first-name">
      <input name="last-name" required>
      <input type="email" name="email" required>
      <button disabled>submit</button>
  </form>

 var $result = $('[required], [disabled]');

 var result = document.querySelectorAll('[required], [disabled]');

  <div class="bold">I'm bold</div>
  <span class>I'm not</span>

  var result = document.querySelectorAll('[class]');

  <section>
     <h2>Sites</h2>
     <ul>
          <li>
              <a href="https://www.dntips.ir/">dotnettips</a>
          </li>
          <li>
              <a href="https://google.com/">Google</a>
          </li>
      </ul>
  </section>

 var $result = $('A[href="https://www.dntips.ir/"]');

 var result = document.querySelectorAll('A[href="https://www.dntips.ir/"]');

 var result = document.querySelectorAll('[class]:not([class=""]');

  <a href="https://www.dntips.ir/">home page</a>
  <a href="https://www.dntips.ir/postsarchive">articles</a>
  <a href="https://www.dntips.ir/newsarchive">news</a>

 var result = document.querySelectorAll('A[href*="www.dotnettips.info"]');

<div class="one two three">1 2 3</div>
<div class="onetwothree">123</div>

 var result = document.querySelectorAll('[class∼=two]');

 var hasTwoClass = $divEl.hasClass('two');

 var hasTwoClass = divEl.classList.contains('two');

divEl.classList.remove('red');
divEl.classList.add('blue');

// removes "hide" class
divEl.classList.toggle('hide');

// re-adds "hide" class
divEl.classList.toggle('hide');

  <img id="cat" src="/images/cat.gif">
  <img id="zebra" src="zebra.gif">
  <a href="#zebra">watch the zebra</a>
  <a href="/logout">logout</a>

 var result = document.querySelectorAll('A[href^="#"], [src$=".gif"]');

 <input type="password" name="user-password" required>

// returns "password"
$inputEl.attr('type');

// returns "true"
$inputEl.is('[required]');

// returns "password"
inputEl.getAttribute('type');

// returns "true"
inputEl.hasAttribute('required');

 <input name="temp" required>

 $inputEl
 .attr('type', 'email') // #1
 .removeAttr('required') // #2
 .attr('name', 'userEmail'); // #3

 inputEl.setAttribute('type', 'email'); // #1
inputEl.removeAttribute('required'); // #2
inputEl.setAttribute('name', 'userEmail'); // #3

 <div id="my-element-id"></div>

 var result = $('#my-element-id');

 var result = document.getElementById('my-element-id');

  var result = document.querySelector('#my-element-id');

 result.id === 'my-element-id'; // returns true

<span class="some-class"></span>

 var result = $('.some-class');

  var result = document.getElementsByClassName('some-class');

 var result = document.querySelectorAll('.some-class');

 result[0].className === 'some-class'; // returns true

 <code>Console.WriteLine("Hello world!");</code>

 var result = $('code');

 var result = document.getElementsByTagName('code');

 var result = document.querySelectorAll('code');

 result[0].tagName === 'code'; // returns true

  <form>
     <label>Full Name
        <input name="full-name">
     </label>
     <label>Company
        <input name="company">
     </label>
  </form>

  var focusedInputs = $('INPUT:focus');

 var companyInput = document.querySelector('INPUT:focus');

  <div>
     <a href="https://www.dntips.ir">
        <span>Go to site</span>
     </a>
     <p>Some text</p>
     Some other text
  </div>

 var $result = $a.parent();

 var result = a.parentNode;

 var result = $('#myParent').children();

 var result = document.querySelectorAll('DIV > *');

  var result = document.querySelectorAll('DIV > P');

 var result = document.getElementById('myParent').childNodes;
var result = div.childNodes;

 var result =document.getElementById('myParent').children;

 var result =document.querySelectorAll('#myParent A');

  <ul role="menu">
     <li>choice 1</li>
     <li class="active">choice 2</li>
     <li>choice 3</li>
  </ul>

 var $result = $('UL LI').not('.active');

 var result = document.querySelectorAll('UL LI:not(.active)');

  <div id="link-container">
     <a href="https://github.com/VahidN">GitHub</a>
  </div>
  <ol>
     <li>one</li>
     <li>two</li>
  </ol>
  <span class="my-name">VahidN</span>

 var $result = $('#link-container, .my-name, OL');

 var result = document.querySelectorAll('#link-container, .my-name, OL');

 var result = document.querySelectorAll(
 'BUTTON[type="submit"], INPUT[type="submit"]'
);

window.$ = function(selector) {
     return document.querySelectorAll(selector);
};

  $('.some-class');
  $('#some-id');
  $('.some-parent > .some-child');
  $('UL LI:not(.active)');

 npm install @aspnet/signalr-client --save

npm init
npm install @aspnet/signalr-client --save
bower install

[
  {
    "outputFileName": "wwwroot/css/site.min.css",
    "inputFiles": [
      "wwwroot/lib/bootstrap/dist/css/bootstrap.min.css",
      "wwwroot/css/site.css"
    ]
  },
  {
    "outputFileName": "wwwroot/js/site.min.js",
    "inputFiles": [
      "wwwroot/lib/jquery/dist/jquery.min.js",
      "wwwroot/lib/bootstrap/dist/js/bootstrap.min.js",
      "node_modules/@aspnet/signalr-client/dist/browser/signalr-client-1.0.0-alpha1-final.min.js",
      "wwwroot/lib/jquery-validation/dist/jquery.validate.min.js",
      "wwwroot/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js",
      "wwwroot/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js",
      "wwwroot/js/site.js"
    ],
    "minify": {
      "enabled": false,
      "renameLocals": false
    },
    "sourceMap": false
  }
]

<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" />
<script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>

public class MessageHub : Hub
{
   public Task Send(string message)
   {
     return Clients.All.InvokeAsync("broadcastMessage", message);
   }
}

<form method="post"
      asp-action="Index"
      asp-controller="Home"
      data-ajax="true"
      role="form">
  <div class="form-group">
     <label label-for="message">Message: </label>
     <input id="message" name="message" class="form-control"/>
  </div>
  <button class="btn btn-primary" type="submit">Send To Home/Index</button>
  <button class="btn btn-success" id="sendmessageDirect" type="button">Send To /message hub directly</button>
</form>

<div id="discussion">
</div>

@section Scripts
{
   <script type="text/javascript" asp-append-version="true">
   $(function() {
      var connection = new signalR.HubConnection('/message');
      connection.on('broadcastMessage', function (message) {
          // Add the message to the page.
          var encodedMsg = $('<div />').text(message).html();
          $('#discussion').append('<li>' + encodedMsg + '</li>');
      });

      connection.start().then(function () {
          console.log('connected.');
          $('#sendmessageDirect').click(function () {
              // Call the Send method on the hub.
              connection.invoke('send', $('#message').val());
          });
      });
   });
   </script>
}

dotnet restore
npm install
npm install -g bower
bower install
dotnet watch run

> ng new my-app

> ng new my-app --dry-run

>ng new my-app --dry-run
installing ng
You specified the dry-run flag, so no changes will be written.
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
.
.
.
Project 'my-app' successfully created.

> ng new my-app --skip-install

> ng new --help

"project": {
      "name": "my-app"
  },

"apps": [
{
   "root": "src",
   "outDir": "dist",

"prefix": "app",

@Component({
  selector: 'app-root',

> ng new my-project --skip-install --prefix myCompany

> ng new my-project --skip-install --skip-git --skip-tests --skip-commit

"styles": [
     "styles.css"
],

"defaults": {
   "styleExt": "css",
   "component": {}
  }

> ng new my-project --skip-install --style sass

"styles": [
    "styles.sass"
],
"defaults": {
   "styleExt": "sass",
   "component": {}
}

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.sass']
})

> ng new my-project --skip-install --routing

const routes: Routes = [
  {
     path: '',
     children: []
  }
];

imports: [
   BrowserModule,
   FormsModule,
   HttpModule,
   AppRoutingModule
],

>ng serve -o

 http://localhost:4200/

 <h1>
Test
  {{title}}
</h1>

>ng set apps.prefix myCompany
>ng set apps.prefix myCompany -g

>ng set defaults.styleExt sass
>ng set defaults.styleExt sass -g

> ng lint

> ng lint --help

> ng lint --format stylish

>ng lint --fix

import { Component } from '@angular/core'
let number = 10;

>ng lint --format stylish

/src/app/app.component.ts[3, 5]: Identifier 'number' is never reassigned; use 'const' instead of 'let'.
/src/app/app.component.ts[1, 42]: Missing semicolon

Lint errors found in the listed files.

import { Component } from '@angular/core';
const number = 10;

آیا به این نتیجه رسیدید که اصل DRY  را نقض کرده‌ایم؟ بله همین طور است. تکرار کلاس‌های css مربوط به بوت استرپ، تکرار هلپرهای توکار ASP.NET MVC بارها و بارها، خوانایی کد را پایین میارود و در برخی موارد هم خسته کننده خواهد بود. اگر با مباحث مربوط به EditorTemplate‌ها قبلا آشنا شده باشید، خیلی سریع عنوان خواهید کرد که بهتر است از این امکان بهره برد؛ بله درست است. برای این منظور در مسیر Views/Shared/EditorTemplates، فایل cshtml. همنام با نوع داده مد نظر را ایجاد میکنیم.

String.cshtml

@model string
    @Html.TextBox("",ViewData.TemplateInfo.FormattedModelValue,
    new { @class="form-control",placeholder=ViewData.ModelMetadata.Watermark})

Enum.cshtml

@model Enum
@Html.EnumDropDownListFor(m => Model, new { @class = "form-control" })

حال دوباره به نتیجه حاصل از تغییرات اعمال شده توجه کنید:

این نتیجه امیدوار کننده است ولی  بازهم یکسری از کدها بی دلیل تکرار شده‌اند. هلپرهای زیر نیز میتوانند در کاهش کدها به کمک ما برسند :

public static class BootstrapHelpers
    {
        public static IHtmlString BootstrapLabelFor<TModel,TProp>(
            this HtmlHelper<TModel> helper,
            Expression<Func<TModel,TProp>> property)
        {
            return helper.LabelFor(property, new
            {
                @class = "col-md-2 control-label"
            });
        }
        public static IHtmlString BootstrapLabel(
            this HtmlHelper helper,
            string propertyName)
        {
            return helper.Label(propertyName, new
            {
                @class = "col-md-2 control-label"
            });
        }
    }

از کلاس بالا برای عدم تکرار کلاس‌های بوت استرپ مربوط به Label، استفاده میشود .

حال دوباره نتیجه را مشاهده کنید:

خیلی عالی؛ توانستیم از تکرار یکسری از کلاس‌های بوت استرپ خلاص شویم. اما در ادامه با استفاده از یک Object Template به عنوان EditorTemplate برای نوع داده‌های Complex، کار را تمام خواهیم کرد.

 EditorTemplate‌های تعریف شده در بالا، صرفا برای نوع داده‌های خاصی مورد استفاده قرار خواهند گرفت؛ ولی پیاده سازی یک EditorTemplate جنریک که حتی از ویومدل‌های موجود در پروژه نیز پشتیابی کند، به شکل زیر خواهد بود.

Object.cshtml

@model dynamic

@foreach (var prop in ViewData.ModelMetadata.Properties
                            .Where(p => p.ShowForEdit))
{
    if (prop.TemplateHint == "HiddenInput")
    {
        @Html.Hidden(prop.PropertyName)
    }
    else
    {
        <div class="form-group">
            @Html.BootstrapLabel(prop.PropertyName)
            <div class="col-md-10">
                @Html.Editor(prop.PropertyName)
                @Html.ValidationMessage(prop.PropertyName)
            </div>
        </div>
    }
}

با استفاده از ViewData.ModelMetadata میتوان به خصوصیات مدل مربوط به ویو دسترسی پیدا کرد که در بالا با استفاده از همین خصوصیت به تمام پراپرتی‌های مدل دسترسی پیدا کرده و مقداری کد تکراری باقی مانده را هم در اینجا کپسوله کردیم.

حال کافی است به شکل زیر عمل کنیم: