جی‌کوئری به انگلیسی jQuery یکی از محبوب‌ترین کتابخانه‌های جاوااسکریپتی سبک وزن چند مرورگری است که بسیاری از سایت‌ها به منظور افکت‌های داینامیک و پیاده سازی قابلیت Ajax و همچنین برای ساده سازی کدهای اسکریپتی سمت مشتری در اچ تی ام ال به انگلیسی HTML در خود اتخاذ نموده‌اند...
SQL Server 2000/2005/2008/2012/2014/Express/LocalDB SQL Server Compact 3.1/3.5/4.0 (*.sdf;*.*) SQL Azure 10/11 MS Access 97/2000/2002/2003 (*.mdb;*.mde;*.*), 2007/2010/2013 (*.accdb;*.accde;*.*) MS Excel 97/2000/2002/2003(*.xls;*.*), 2007/2010/2013 (*.xlsx;*.xlsm;*.xlsb;*.*) Firebird SuperServer/Embedded 1.5/2.0/2.1/2.5 (*.gdb;*.fdb;*.*) SQLite 3.x (*.db;*.db3;*.sqlite;*.*) MySQL 5.x, MariaDB 5.x/10.x PostgreSQL 8.x/9.x Oracle 10g/11g/12c IBM DB2 9.x/10.x IBM Informix 11.x/12.x Sybase ASE 15.x dBASE IV (*.dbf) Visual FoxPro (*.dbc) Data Sources (OleDB)(*.udl;*.*) ODBC DSN (Data Source Name)(*.dsn;*.*) OData (Open Data Protocol) v1/v2/v3/v4
<script src="_framework/blazor.webassembly.js" autostart="false"></script>
<body>
<div id="app">
<div class="d-flex flex-column min-vh-100">
<div class="d-flex vh-100">
<div class="d-flex w-100 justify-content-center align-self-center">
<div class="d-flex flex-column w-25">
<div>Loading <label id="progressbarLabel"></label></div>
<div class="progress mt-2" style="height: 2em;">
<div id="progressbar" class="progress-bar progress-bar-striped"></div>
</div>
</div>
</div>
</div>
</div>
</div> 
(function () {
let resourceIndex = 0;
const fetchResponsePromises = [];
const progressbar = document.getElementById("progressbar");
const progressbarLabel = document.getElementById("progressbarLabel");
const loadStart = new Date().getTime();
if (!isAutostartDisabled()) {
console.warn(
"`blazor.webassembly.js` script tag doesn`t have the `autostart=false` attribute."
);
return;
}
Blazor.start({
loadBootResource: function (type, filename, defaultUri, integrity) {
if (type === "dotnetjs") {
progressbarLabel.innerText = filename;
return defaultUri;
}
const responsePromise = fetch(defaultUri, {
cache: "no-cache",
integrity: integrity,
});
fetchResponsePromises.push(responsePromise);
responsePromise.then((response) => {
if (!progressbar) {
console.warn("Couldn't find the progressbar element on the page.");
return;
}
if (!progressbarLabel) {
console.warn(
"Couldn't find the progressbarLabel element on the page."
);
return;
}
resourceIndex++;
const totalResourceCount = fetchResponsePromises.length;
const percentLoaded = Math.round(
100 * (resourceIndex / totalResourceCount)
);
progressbar.style.width = `${percentLoaded}%`;
progressbar.innerText = `${percentLoaded} % [${resourceIndex}/${totalResourceCount}]`;
progressbarLabel.innerText = filename;
if (percentLoaded >= 100) {
var span = new Date().getTime() - loadStart;
console.log(`All done in ${span} ms.`);
}
});
return responsePromise;
},
});
function isAutostartDisabled() {
var wasmScript = document.querySelector(
'script[src="_framework/blazor.webassembly.js"]'
);
if (!wasmScript) {
return false;
}
var autostart = wasmScript.attributes["autostart"];
return autostart && autostart.value === "false";
}
})(); <script src="_framework/blazor.webassembly.js" autostart="false"></script> <script src="js/blazorLoader.js"></script> </body>
<html dir="rtl">
<head>
<title>وب سایت</title>
<script src="angular.min.js">
</script>
</head>
<body ng-app="app">
<ul ng-controller="ctrl">
<li ng-repeat="item in list">{{item}}</li>
</ul>
</body>
<script>
var app=angular.module('app',[]);
app.controller('ctrl',function($scope,$timeout){
$scope.list=[
'اردبیل',
'تهران',
'شیراز',
'قزوین',
]
});
</script>
</html> $timeout(function(){
$scope.list.push('مشهد')
},5000); 
<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
<scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" staticCompressionLevel="9" dynamicCompressionLevel="4" />
<scheme name="deflate" dll="%Windir%\system32\inetsrv\gzip.dll" staticCompressionLevel="9" dynamicCompressionLevel="4" />
<dynamicTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/x-javascript" enabled="true" />
<add mimeType="application/atom+xml; charset=utf-8" enabled="true" />
<add mimeType="*/*" enabled="false" />
</dynamicTypes>
<staticTypes>
<add mimeType="text/*" enabled="true" />
<add mimeType="message/*" enabled="true" />
<add mimeType="application/javascript" enabled="true" />
<add mimeType="*/*" enabled="false" />
</staticTypes>
</httpCompression>
<body ng-app ="app">
<div ng-controller="firstControllerScope">
<div ng-controller="secondControllerScope">
<div ng-controller="thirdControllerScope">
</div>
</div>
</div>
</body> var firstControllerScope = function ($scope) {
// Initialize the model variables
$scope.firstName = "John";
};
var secondControllerScope = function ($scope) {
// Initialize the model variables
$scope.lastName = "Doe";
// Define utility functions
$scope.getFullName = function () {
return $scope.firstName + " " + $scope.lastName;
};
};
var thirdControllerScope = function ($scope) {
// Initialize the model variables
$scope.middleName = "Al";
$scope.lastName = "Smith";
// Define utility functions
$scope.getFullName = function () {
return $scope.firstName + " " + $scope.middleName + " " + $scope.lastName;
};
}; <div ng-controller="firstControllerScope">
<h3>First controller</h3>
<strong>First name:</strong> {{firstName}}<br />
<br />
<label>first name: <input type="text" ng-model="firstName" /></label><br />
<br />
<div ng-controller="secondControllerScope">
<h3>Second controller (inside First)</h3>
<strong>First name (from First):</strong> {{firstName}}<br />
<strong>Last name (new variable):</strong> {{lastName}}<br />
<strong>Full name:</strong> {{getFullName()}}<br />
<br />
<label>first name: <input type="text" ng-model="firstName" /></label><br />
<label>last name: <input type="text" ng-model="lastName" /></label><br />
<br />
<div ng-controller="thirdControllerScope">
<h3>Third controller (inside Second and First)</h3>
<strong>First name (from First):</strong> {{firstName}}<br />
<strong>Middle name (new variable):</strong> {{middleName}}<br />
<strong>Last name (from Second):</strong> {{$parent.lastName}}<br />
<strong>Last name (redefined in Third):</strong> {{lastName}}<br />
<strong>Full name (redefined in Third):</strong> {{getFullName()}}<br />
<br />
<label>first name: <input type="text" ng-model="firstName" /></label><br />
<label>middle name: <input type="text" ng-model="middleName" /></label><br />
<label>last name: <input type="text" ng-model="lastName" /></label>
</div>
</div>
</div> 
<?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
<filters>
<filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
</filters>
<resourceSets url="~/combres.axd"
defaultDuration="30"
defaultVersion="auto"
defaultDebugEnabled="false"
defaultIgnorePipelineWhenDebug="true"
localChangeMonitorInterval="30"
remoteChangeMonitorInterval="60">
<resourceSet name="siteCss" type="css">
<resource path="~/content/Site.css" />
<resource path="~/content/anotherCss.css" />
<resource path="~/scripts/yetAnotherCss.css" />
</resourceSet>
<resourceSet name="siteJs" type="js">
<resource path="~/scripts/jquery-1.4.4.js" />
<resource path="~/scripts/anotherJs.js" />
<resource path="~/scripts/yetAnotherJs.js" />
</resourceSet>
</resourceSets>
</combres> <?xml version="1.0" encoding="utf-8" ?>
<combres xmlns='urn:combres'>
<filters>
<filter type="Combres.Filters.FixUrlsInCssFilter, Combres" />
</filters>
<resourceSets url="~/combres.axd"
defaultDuration="30"
defaultVersion="auto"
defaultDebugEnabled="false"
defaultIgnorePipelineWhenDebug="true"
localChangeMonitorInterval="30"
remoteChangeMonitorInterval="60">
<resourceSet name="siteCss" type="css">
<resource path="~/Styles/Site.css" />
</resourceSet>
<resourceSet name="siteJs" type="js">
<resource path="~/Scripts/jquery-1.10.2.js" />
<resource path="~/Scripts/jquery-1.10.2.min.js" />
</resourceSet>
</resourceSets>
</combres> <configuration>
<configSections>
<section name="combres" type="Combres.ConfigSectionSetting, Combres, Version=2.2, Culture=neutral, PublicKeyToken=1ca6b37997dd7536" />
</configSections>
<system.web>
<pages>
<namespaces>
<add namespace="Combres" />
</namespaces>
</pages>
</system.web>
<combres definitionUrl="~/App_Data/combres.xml" />
<appSettings>
<add key="CombresSectionName" value="combres" />
</appSettings>
<runtime>
<assemblyBinding xmlns="urn:schemas-microsoft-com:asm.v1">
<dependentAssembly>
<assemblyIdentity name="AjaxMin" publicKeyToken="21ef50ce11b5d80f" culture="neutral" />
<bindingRedirect oldVersion="0.0.0.0-4.84.4790.14405" newVersion="4.84.4790.14405" />
</dependentAssembly>
</assemblyBinding>
</runtime>
</configuration> protected void Application_Start(object sender, EventArgs e)
{
RouteTable.Routes.AddCombresRoute("Combres Route");
} <%@ Import Namespace="Combres" %>
<head runat="server">
<%= WebExtensions.CombresLink("siteCss") %>
<%= WebExtensions.CombresLink("siteJs") %>
</head> <%= Url.CombresLink("siteCss") %>
<%= Url.CombresLink("siteJs") %> 
در ادامه میتوانید فایل site.css قبلی و فعلی را مقایسه کنید!
در قسمت بعد با سازوکار combres و روش استفاده از فیلترها، بیشتر آشنا میشویم.
<!--no binding --> <input name="firstname" ngModel>
<!--one way binding --> <input name="firstname" [ngModel]="firstName">
<!--two way binding --> <input name="firstname" [ngModel]="firstName" (ngModelChange)="firstName=$event">
<!--two way binding --> <input name="firstname" [(ngModel)]="firstName">
> ng g cl Employee/Employee
installing class create src\app\Employee\employee.ts
export class Employee {
constructor(
public firstName: string,
public lastName: string,
public isFullTime: boolean,
public paymentType: string,
public primaryLanguage: string
) {}
} import { Employee } from "app/employee/employee";
export class EmployeeRegisterComponent implements OnInit {
languages = ["Persian", "English", "Spanish", "Other"];
model = new Employee("Vahid", "N", true, "FullTime", "Persian"); <form #form="ngForm" novalidate>
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName" [(ngModel)]="model.firstName">
</div>
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" name="lastName" [(ngModel)]="model.lastName">
</div> <button class="btn btn-primary" type="submit">Ok</button>
</form>
Model: {{ model | json }}
<br> Angular: {{ form.value | json }}
<br> form.pristine: {{ form.pristine }} 
<div class="checkbox">
<label>
<input type="checkbox" name="is-full-time"
[(ngModel)]="model.isFullTime"> Full Time Employee
</label>
</div> <label>Payment Type</label>
<div class="radio">
<label>
<input type="radio" name="paymentType" value="FullTime" checked
[(ngModel)]="model.paymentType">
Full Time
</label>
</div>
<div class="radio">
<label>
<input type="radio" name="paymentType" value="PartTime"
[(ngModel)]="model.paymentType">
Part Time
</label>
</div> <div class="form-group">
<label>Primary Language</label>
<select class="form-control" name="primaryLanguage" [(ngModel)]="model.primaryLanguage">
<option *ngFor="let lang of languages">
{{ lang }}
</option>
</select>
</div> 
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" name="firstName"
[ngModel]="model.firstName"
(ngModelChange)="firstNameToUpperCase($event)">
</div> firstNameToUpperCase(value: string) {
if (value.length > 0)
this.model.firstName = value.charAt(0).toUpperCase() + value.slice(1);
else
this.model.firstName = value;
} 
function gettData(code) {
$.ajax({
url: '@Url.Action(MVC.X.Y())',
data: { code: code },
type: "POST",
success: function (data) {
$("#title").html(data.Title);
$("#user-image").html(data.imagePath);
},
error: function (response) {
}
});
} $(document).on('click', '.item', function () {
getData($(this).data("code"));
$("#SecondModal").modal('toggle');
});