<base href="/blazor/" />
<base href="/Blazor/" />
System.ArgumentException: The URI is not contained by the base URI
<script>
var path = window.location.pathname.split('/');
var baseTag = document.getElementsByTagName('base');
baseTag[0].setAttribute('href', '/' + path[1] + '/');
</script> I can press Ctrl-I and start to type and all occurrences of what I type get highlight throughout the document
$(document).ready(function () {
dataparam2 = "cmd=FillScope";
$.ajax({
url: "Default2.aspx",
type: "POST",
data: dataparam2,
async: true,
success: function (msg) {
if (msg != '') {
var data = eval("(" + msg + ")");
$("#tbodytblMain").html('');
for (var i = 0; i < data.length; i++) {
$("#tbodytblMain").append(
"<tr class='odd gradeX'>"
+ "<td style='width:200px'>" + data[i].T + "</td>"
+ "<td style='width:150px'>" + data[i].P + "</td>"
+ "<td>" + data[i].S + "</td>"
+ "<td>" + data[i].TP + "</td>"
+ "<td>" + data[i].Sp + "</td>" + "</tr>");
}
}
},
error: function (msg) {
}
});
$('#tblMain').dataTable();
}); if (Request["cmd"] == "FillScope")
{
string Val = "برخوار";
JavaScriptSerializer js = new JavaScriptSerializer();
string serText = "";
MUIDataClassesDataContext db = new MUIDataClassesDataContext();
var LST = (from x in db.tblProjectInfos
where x.tblScope.xScopeName.Contains(Val)
orderby x.tblScope.xScopeName
select new
{
P = x.xPlace,
S = x.tblScope.xScopeName,
TP = x.tblProjectType.xProjectTypeName,
Sp = x.tblStatus.xStatusName
});
serText = js.Serialize(LST);
Response.Write(serText);
Response.End();
}dotnet new blazor --interactivity None
@page "/ssr-page/{Data:int}"
<PageTitle>An SSR component</PageTitle>
<h1>An SSR component rendered by a Minimal-API!</h1>
<div>
Data: @Data
</div>
@code {
[Parameter]
public int Data { get; set; }
} 
var builder = WebApplication.CreateBuilder(args);
// ...
builder.Services.AddRazorComponents();
// ...
// http://localhost:5227/ssr-component?data=2
// or it can be called directly http://localhost:5227/ssr-page/2
app.MapGet("/ssr-component",
(int data = 1) =>
{
var parameters = new Dictionary<string, object?>
{
{ nameof(SsrTest.Data), data },
};
return new RazorComponentResult<SsrTest>(parameters);
});
app.UseStaticFiles();
app.UseAntiforgery();
app.MapRazorComponents<App>();
app.Run();
// ... <LayoutView Layout="@typeof(MainLayout)">
<PageTitle>Home</PageTitle>
<h2>Welcome to your new app.</h2>
</LayoutView> // ...
builder.Services.AddRazorComponents()
.AddInteractiveServerComponents();
// ...
app.MapRazorComponents<App>().AddInteractiveServerRenderMode();
// ... <script src="_framework/blazor.web.js"></script>
@rendermode InteractiveServer
<h1>Counter</h1>
<p role="status">Current count: @_currentCount</p>
<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
@code {
private int _currentCount;
private void IncrementCount()
{
_currentCount++;
}
} // http://localhost:5227/server-interactive-component
app.MapGet("/server-interactive-component", () => new RazorComponentResult<Counter>()); <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Interactive server component</title>
<base href="/"/>
</head>
<body>
<h1>Interactive server component</h1>
<Counter/>
<script src="_framework/blazor.web.js"></script>
</body>
</html> // http://localhost:5227/server-interactive-component
app.MapGet("/server-interactive-component", () => new RazorComponentResult<CounterInteractive>()); using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
namespace WebApi8x.Services;
public class BlazorStaticRendererService
{
private readonly HtmlRenderer _htmlRenderer;
public BlazorStaticRendererService(HtmlRenderer htmlRenderer) => _htmlRenderer = htmlRenderer;
public Task<string> StaticRenderComponentAsync<T>() where T : IComponent
=> RenderComponentAsync<T>(ParameterView.Empty);
public Task<string> StaticRenderComponentAsync<T>(Dictionary<string, object?> dictionary) where T : IComponent
=> RenderComponentAsync<T>(ParameterView.FromDictionary(dictionary));
private Task<string> RenderComponentAsync<T>(ParameterView parameters) where T : IComponent =>
_htmlRenderer.Dispatcher.InvokeAsync(async () =>
{
var output = await _htmlRenderer.RenderComponentAsync<T>(parameters);
return output.ToHtmlString();
});
} builder.Services.AddScoped<HtmlRenderer>(); builder.Services.AddScoped<BlazorStaticRendererService>();
app.MapGet("/static-renderer-service-test",
async (BlazorStaticRendererService renderer, int data = 1) =>
{
var parameters = new Dictionary<string, object?>
{
{ nameof(SsrTest.Data), data },
};
var html = await renderer.StaticRenderComponentAsync<SsrTest>(parameters);
return Results.Content(html, "text/html");
}); "dependencies": {
// ...
"jssha": "^2.1.0",
// ...
}, <script src="node_modules/jssha/src/sha512.js"></script>
// map tells the System loader where to look for things
var map = {
// ...
'jssha': 'node_modules/jssha/src'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
// ...
'jssha': { main: 'sha512.js', defaultExtension: 'js' }
}; import { Component, OnInit } from '@angular/core';
var jsSHA = require("jssha"); // ==> loads `sha512.js` file dynamically using `systemjs.config.js` file definitions
//declare var jsSHA: any; // ==> this requires adding <script src="node_modules/jssha/src/sha512.js"></script> to the first page manually.
@Component({
templateUrl: 'app/using-third-party-libraries/untyped-sha.component.html'
})
export class UnTypedShaComponent implements OnInit {
hash: String;
ngOnInit(): void {
let shaObj = new jsSHA("SHA-512", "TEXT");
shaObj.update("This is a test");
this.hash = shaObj.getHash("HEX");
}
} <h1>SHA-512 Hash / UnTyped</h1>
<p>String: This is a test</p>
<p>HEX: {{hash}}</p> var jsSHA = require("jssha"); npm install -g typings typings install jssha --save --ambient
{
"ambientDependencies": {
// ...
"jssha": "registry:dt/jssha#2.1.0+20160317120654"
}
} /// <reference path="../typings/browser/ambient/jssha/index.d.ts" />
import { Component, OnInit } from '@angular/core';
//import { jsSHA } from "jssha";
import * as jsSHA from "jssha"; // ===> var jsSHA = require("jssha"); // ===> loads `sha512.js` file dynamically using `systemjs.config.js` file definitions
@Component({
templateUrl: 'app/using-third-party-libraries/typed-sha.component.html'
})
export class TypedShaComponent implements OnInit{
hash: String;
ngOnInit(): void {
let shaObj = new jsSHA("SHA-512", "TEXT");
shaObj.update("This is a test");
this.hash = shaObj.getHash("HEX");
}
} 
<script> let src = 'https://svelte.dev/tutorial/image.gif'; let name = 'Rick Astley'; </script> <img src={src} alt="{name} dancing">
<img {src} alt="{name} dancing"> <script>
export let siteName = "dotnettips";
</script>
<p>this is a nested component for third tutorial on {siteName}</p> <script>
import Nested from "./Nested.svelte";
export let name;
</script>
<h1>Hello {name}!</h1>
<Nested siteName="dotnettips.info" /> Hello world! this is a nested component for third tutorial on dotnettips.info
در مثال بالا ما یک کامپوننت جدید را ایجاد کرده و از طریق دستور import به App.svelte اضافه کردیم. نکته‌ای که در اینجا وجود دارد، نحوه مقدار دهی props در کامپوننت‌ها است. اگر به خط 9 دقت کنیم، کامپوننت ما از طریق تگ جدیدی با نام (Nested) به بدنه html برنامه اضافه شده است که یک attribute به نام siteName دارد. siteName متغیر export شده در کامپوننت Nested.svelte است که در کامپوننت‌ها به این صورت مقدار دهی میشود. قبلا نحوه مقدار دهی این خصیصه‌ها را در فایل‌های جاوا اسکریپت مشاهده کرده بودیم. نکته دیگری که باید به آن دقت داشت این است که خصیصه siteName مقدار پیش فرض dotnettips را در Nested.svelte به خود اختصاص داده بود. به همین جهت اگر ما siteName را هنگام استفاده از کامپوننت مقدار دهی نکنیم، از مقدار پیش فرض خود استفاده خواهد کرد. ولی اینجا ما با مقدار دهی آن، siteName را به dotnettips.info تغییر داده‌ایم.
نکته مهم : دقت داشته باشید کامپوننت‌های شما همیشه باید با حروف بزرگ شروع شوند؛ به طور مثال در صورت نوشتن <nested/> محتوای کامپوننت نمایش داده نخواهد شد. svelte، از طریق زیر نظر گرفتن حروف کوچک و بزرگ در ابتدای تگ‌ها، بین تگ‌های html و کامپوننت‌ها تمایز قائل میشود.
Spread props :
تا اینجا به صورت خلاصه با props یا خصیصه‌ها آشنا شده‌اید و دیدیم که با export کردن یک متغیر در یک کامپوننت، میتوانیم آن را هنگام استفاده مقدار دهی نماییم. برای اینکه تمرینی هم باشد با توجه به مطالبی که تاکنون گفته شده، پروژه‌ی جدیدی را ایجاد کنید و محتوای App.svelte را مانند کد زیر تغییر دهید.
<script>
import Info from './Info.svelte';
const pkg = {
name: 'svelte',
version: 3,
speed: 'blazing',
website: 'https://svelte.dev'
};
</script>
<Info name={pkg.name} version={pkg.version} speed={pkg.speed} website={pkg.website}/> همانطور که در خط دوم کد می‌بینید، کامپوننتی به نام Info.svelte به این بخش اضافه شده‌است. این کامپوننت را با محتوای زیر ایجاد نمایید:
<script>
export let name;
export let version;
export let speed;
export let website;
</script>
<p>
The <code>{name}</code> package is {speed} fast.
Download version {version} from <a href="https://www.npmjs.com/package/{name}">npm</a>
and <a href={website}>learn more here</a>
</p> اگر برنامه را اجرا کنید یک چنین خروجی را مشاهده خواهید کرد:
The svelte package is blazing fast. Download version 3 from npm and learn more here
<Info {...pkg}/>
<script>
let count = 0;
function handleClick() {
count += 1;
}
</script>
<p>Count : {count}</p>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button> <script>
let count = 0;
let doubled = count * 2;
function handleClick() {
count += 1;
}
</script>
<button on:click={handleClick}>
Clicked {count} {count === 1 ? 'time' : 'times'}
</button>
<p>{count} doubled is {doubled}</p> $: doubled = count * 2;
$: console.log(`the count is ${count}`); $: {
console.log(`the count is ${count}`);
alert(`I SAID THE COUNT IS ${count}`);
} $: if (count >= 10) {
alert(`count is dangerously high!`);
count = 9;
} <script>
let numbers = [1, 2, 3, 4];
function addNumber() {
let newNumber = numbers.length + 1;
numbers.push(newNumber);
}
$: sum = numbers.reduce((t, n) => t + n, 0);
</script>
<p>{numbers.join(' + ')} = {sum}</p>
<button on:click={addNumber}>Add a number</button> function addNumber() {
let newNumber = numbers.length + 1;
numbers.push(newNumber);
numbers = numbers;
} function addNumber() {
let newNumber = numbers.length + 1;
numbers = [...numbers, newNumber];
} <script>
let name = "";
function updateName(event) {
name = event.target.value;
}
</script>
<h4>My Name Is {name}</h4>
<input value={name} on:input={updateName} /> <script>
let name = "";
</script>
<h4>My Name Is {name}</h4>
<input bind:value={name} /> {#if condition}
<!-- you html codes ... -->
{/if} <script>
let user = { loggedIn: false };
function toggle() {
user.loggedIn = !user.loggedIn;
}
</script>
{#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{/if}
{#if !user.loggedIn}
<button on:click={toggle}>
Log in
</button>
{/if} {#if condition}
<!-- you html code when condition is true -->
{:else}
<!-- you html code when condition is false -->
{/if} {#if user.loggedIn}
<button on:click={toggle}>
Log out
</button>
{:else}
<button on:click={toggle}>
Log in
</button>
{/if} {#if condition}
<!-- you html code when condition is true -->
{:else if condition2}
<!-- you html code when condition2 is true -->
{:else}
<!-- you html code when condition and condition2 are false -->
{/if} {#each list as item}
<!-- you html code per each item in list -->
{/each} <script>
let cats = [
{ id: 'J---aiyznGQ', name: 'Keyboard Cat' },
{ id: 'z_AbfPXTKms', name: 'Maru' },
{ id: 'OUtn3pvWmpg', name: 'Henri The Existential Cat' }
];
</script>
<h1>The Famous Cats of YouTube</h1>
<ul>
{#each cats as cat}
<li><a target="_blank" href="https://www.youtube.com/watch?v={cat.id}">
{cat.name}
</a></li>
{/each}
</ul> <ul>
{#each cats as {id,name}}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{name}
</a></li>
{/each}
</ul> <ul>
{#each cats as { id, name }, i}
<li><a target="_blank" href="https://www.youtube.com/watch?v={id}">
{i + 1}: {name}
</a></li>
{/each}
</ul> کدهای اسپاگتی کافیست! چرا از Type Script در پروژه‌های وب خود استفاده نمی‌کنید؟
var colMdl = [];
colMdl.push({ name: 'id', index: 'id', hidden: true });
@if (User.IsInRole("myCustomRole")) {
<text>
colMdl.push(تعریف ستون اکشن در اینجا اضافه شود);
</text>
} Here’s a sampling of the great new features and improvements in ASP.NET Core for .NET 7:
AddCallCredentials : Create clients that send authorized requests using bearer tokens.[JSImport]/[JSExport] support.
[{"id":"OrganizationTree","text":"ساختار سازمانی","icon":"/Content/images/tree_icon.png","state":{"opened":true,"disabled":false,"selected":false},"children":[{"id":"2","text":"آنات","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[{"id":"4","text":"آموزش","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[],"li_attr":{"data":null},"a_attr":{"href":null}},{"id":"5","text":"هیات مدیره","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[],"li_attr":{"data":null},"a_attr":{"href":null}}],"li_attr":{"data":null},"a_attr":{"href":null}},{"id":"1","text":"پرنیان","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[{"id":"1","text":"BPM","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[],"li_attr":{"data":null},"a_attr":{"href":null}},{"id":"3","text":"پشتیبانی","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[],"li_attr":{"data":null},"a_attr":{"href":null}},{"id":"2","text":"فروش","icon":"/Content/images/nuclear.png","state":{"opened":true,"disabled":false,"selected":false},"children":[],"li_attr":{"data":null},"a_attr":{"href":null}}],"li_attr":{"data":null},"a_attr":{"href":null}}],"li_attr":{"data":null},"a_attr":{"href":null}}] 
اینهم تنظیمات فراخوانی
<script>
$(function () {
$('#jstree').jstree({
"core": {
"multiple": true,
"check_callback": true,
'data': {
'url': '@getTreeJsonUrl',
"type": "POST",
"dataType": "json",
"contentType": "application/json; charset=utf8",
'data': function (node) {
return { 'id': node.id };
}
},
'themes': {
'variant': 'large',
'stripes': false
}
},
"types": {
"default": {
"icon": '@Url.Content("~/Content/images/bookmark_book_open.png")'
},
},
"plugins": ["contextmenu", "dnd", "state", "types", "checkbox", "wholerow", "sort", "unique", "real_checkboxes"],
"contextmenu": {
"items": function (o, cb) {
var items = $.jstree.defaults.contextmenu.items();
items["create"].label = "ایجاد زیر شاخه";
items["rename"].label = "تغییر نام";
items["remove"].label = "حذف";
var cpp = items["ccp"];
cpp.label = "ویرایش";
var subMenu = cpp["submenu"];
subMenu["copy"].label = "کپی";
subMenu["paste"].label = "پیست";
subMenu["cut"].label = "برش";
return items;
}
}
});
});
</script> فکر میکنین مشکل از کجا باشه؟
جالب اینجاست که اگه فقط یه سطح پایین برم مشکلی نیست!