<PropertyGroup Condition="'$(Configuration)' == 'Debug'"> <TypeScriptModuleKind>commonjs</TypeScriptModuleKind> <TypeScriptCompileOnSaveEnabled>True</TypeScriptCompileOnSaveEnabled> <TypeScriptOutDir>.\Scripts</TypeScriptOutDir> <TypeScriptNoImplicitAny>True</TypeScriptNoImplicitAny> <TypeScriptTarget>ES5</TypeScriptTarget> <TypeScriptRemoveComments>false</TypeScriptRemoveComments> <TypeScriptOutFile></TypeScriptOutFile> <TypeScriptGeneratesDeclarations>false</TypeScriptGeneratesDeclarations> <TypeScriptSourceMap>true</TypeScriptSourceMap> <TypeScriptMapRoot></TypeScriptMapRoot> <TypeScriptSourceRoot></TypeScriptSourceRoot> <TypeScriptNoEmitOnError>true</TypeScriptNoEmitOnError> </PropertyGroup>
Your project file uses a different version of the TypeScript compiler and tools than is currently installed on this machine. No compiler was found at C:\Program Files (x86)\Microsoft SDKs\TypeScript\1.8\tsc.exe. You may be able to fix this problem by changing the <TypeScriptToolsVersion> element in your project file.
C:\Program Files (x86)\Microsoft SDKs C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v11.0\ C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v12.0\ C:\Program Files (x86)\MSBuild\Microsoft\VisualStudio\v14.0\
@rem Add path to TypeScript Compiler @if exist "%ProgramFiles%\Microsoft SDKs\TypeScript\1.8" set PATH=%ProgramFiles%\Microsoft SDKs\TypeScript\1.8;%PATH% @if exist "%ProgramFiles(x86)%\Microsoft SDKs\TypeScript\1.8" set PATH=%ProgramFiles(x86)%\Microsoft SDKs\TypeScript\1.8;%PATH%
ReSharper -> Options -> Code Editing -> TypeScript -> Inspections -> Typescript language level
Tools -> Options -> ReSharper Options -> Code Inspection -> Settings -> File Masks to Skip -> add *.ts
{
"compilerOptions": {
"target": "es5",
"outDir": "../Scripts",
"module": "commonjs",
"sourceMap": true,
//"watch": true, // JsErrorScriptException (0x30001)
//"compileOnSave": true, // https://github.com/Microsoft/TypeScript/issues/7362#issuecomment-196586037
"experimentalDecorators": true,
"emitDecoratorMetadata": true
}
} 
PM> Install-Package Trirand.jqGrid
<!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/themes/base/jquery.ui.all.css" rel="stylesheet" />
<link href="~/Content/jquery.jqGrid/ui.jqgrid.css" rel="stylesheet" />
<link href="~/Content/Site.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>
@RenderBody()
</div>
<script src="~/Scripts/jquery-1.7.2.min.js"></script>
<script src="~/Scripts/jquery-ui-1.8.11.min.js"></script>
<script src="~/Scripts/i18n/grid.locale-fa.js"></script>
<script src="~/Scripts/jquery.jqGrid.min.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html> .ui-widget {
}
/*how to move jQuery dialog close (X) button from right to left*/
.ui-jqgrid .ui-jqgrid-caption-rtl {
text-align: center !important;
}
.ui-dialog .ui-dialog-titlebar-close {
left: .3em !important;
}
.ui-dialog .ui-dialog-title {
margin: .1em 0 .1em .8em !important;
direction: rtl !important;
float: right !important;
} namespace jqGrid01.Models
{
public class Product
{
public int Id { set; get; }
public string Name { set; get; }
public decimal Price { set; get; }
public bool IsAvailable { set; get; }
}
} using System.Collections.Generic;
namespace jqGrid01.Models
{
public class JqGridData
{
public int Total { get; set; }
public int Page { get; set; }
public int Records { get; set; }
public IList<JqGridRowData> Rows { get; set; }
public object UserData { get; set; }
}
public class JqGridRowData
{
public int Id { set; get; }
public IList<string> RowCells { set; get; }
}
} @{
ViewBag.Title = "Index";
}
<div dir="rtl" align="center">
<div id="rsperror"></div>
<table id="list" cellpadding="0" cellspacing="0"></table>
<div id="pager" style="text-align:center;"></div>
</div>
@section Scripts
{
<script type="text/javascript">
$(document).ready(function () {
$('#list').jqGrid({
caption: "آزمایش اول",
//url from wich data should be requested
url: '@Url.Action("GetProducts","Home")',
//type of data
datatype: 'json',
jsonReader: {
root: "Rows",
page: "Page",
total: "Total",
records: "Records",
repeatitems: true,
userdata: "UserData",
id: "Id",
cell: "RowCells"
},
//url access method type
mtype: 'GET',
//columns names
colNames: ['شماره', 'نام محصول', 'موجود است', 'قیمت'],
//columns model
colModel: [
{ name: 'Id', index: 'Id', align: 'right', width: 50, sorttype: "number" },
{ name: 'Name', index: 'Name', align: 'right', width: 300 },
{ name: 'IsAvailable', index: 'IsAvailable', align: 'center', width: 100, formatter: 'checkbox' },
{ name: 'Price', index: 'Price', align: 'center', width: 100, sorttype: "number" }
],
//pager for grid
pager: $('#pager'),
//number of rows per page
rowNum: 10,
rowList: [10, 20, 50, 100],
//initial sorting column
sortname: 'Id',
//initial sorting direction
sortorder: 'asc',
//we want to display total records count
viewrecords: true,
altRows: true,
shrinkToFit: true,
width: 'auto',
height: 'auto',
hidegrid: false,
direction: "rtl",
gridview: true,
rownumbers: true,
footerrow: true,
userDataOnFooter: true,
loadComplete: function() {
//change alternate rows color
$("tr.jqgrow:odd").css("background", "#E0E0E0");
},
loadError: function(xhr, st, err) {
jQuery("#rsperror").html("Type: " + st + "; Response: " + xhr.status + " " + xhr.statusText);
}
//, loadonce: true
})
.jqGrid('navGrid', "#pager",
{
edit: false, add: false, del: false, search: false,
refresh: true
})
.jqGrid('navButtonAdd', '#pager',
{
caption: "تنظیم نمایش ستون‌ها", title: "Reorder Columns",
onClickButton: function() {
jQuery("#list").jqGrid('columnChooser');
}
});
});
</script>
}
ts.p.jsonReader = $.extend(true,{
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: true,
cell: "cell",
id: "id",
userdata: "userdata",
subgrid: {root:"rows", repeatitems: true, cell:"cell"}
},ts.p.jsonReader); 
PM> Install-Package DynamicQuery
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Linq;
using System.Web.Mvc;
using jqGrid01.Models;
using jqGrid01.Extensions; // for dynamic OrderBy
namespace jqGrid01.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult GetProducts(string sidx, string sord, int page, int rows)
{
var list = ProductDataSource.LatestProducts;
var pageIndex = page - 1;
var pageSize = rows;
var totalRecords = list.Count;
var totalPages = (int)Math.Ceiling(totalRecords / (float)pageSize);
var products = list.AsQueryable()
.OrderBy(sidx + " " + sord)
.Skip(pageIndex * pageSize)
.Take(pageSize)
.ToList();
var jqGridData = new JqGridData
{
UserData = new // نمایش در فوتر
{
Name = "جمع صفحه",
Price = products.Sum(x => x.Price)
},
Total = totalPages,
Page = page,
Records = totalRecords,
Rows = (products.Select(product => new JqGridRowData
{
Id = product.Id,
RowCells = new List<string>
{
product.Id.ToString(CultureInfo.InvariantCulture),
product.Name,
product.IsAvailable.ToString(),
product.Price.ToString(CultureInfo.InvariantCulture)
}
})).ToList()
};
return Json(jqGridData, JsonRequestBehavior.AllowGet);
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="AjaxTest.aspx.cs" Inherits="testWebForms87.AjaxTest" %>
<!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>jQuery Ajax Text</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#<%= TextBox1.ClientID %>").blur(function(event) {
$.ajax({
type: "POST",
url: "AjaxTest.aspx/IsUserAvailable",
data: "{'username': '" + $('#<%= TextBox1.ClientID %>').val() + "'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
$('#valid').html("<img src='ajaxImages/waiting.gif' alt='لطفا کمی تامل کنید'>");
var delay = function() {
AjaxSucceeded(msg);
};
setTimeout(delay, 2000); //remove this
},
error: AjaxFailed
});
});
});
function AjaxSucceeded(result) {
if (result.d == true)
$('#msg').html("<img src='ajaxImages/available.gif' alt='نام کاربری درخواستی موجود است'>");
else
$('#msg').html("<img src='ajaxImages/taken.gif' alt='متاسفانه نام کاربری مورد نظر پیشتر دریافت شده‌است'>");
}
function AjaxFailed(result) {
alert(result.status + ' ' + result.statusText);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
user name:
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<span id="msg"></span>
<br />
pass:
<asp:TextBox ID="TextBox2" TextMode="Password" runat="server"></asp:TextBox>
</div>
<!-- preload -->
<div style="display: none">
<img src="ajaxImages/available.gif" alt="available" />
<img src="ajaxImages/taken.gif" alt="taken" />
<img src="ajaxImages/waiting.gif" alt="waiting" />
</div>
</form>
</body>
</html>
using System;
using System.Web.Services;
namespace testWebForms87
{
public partial class AjaxTest : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static bool IsUserAvailable(string username)
{
// این مورد را با خواندن اطلاعات از دیتابیس می‌شود تعویض کرد
return username != "test";
}
}
}
type: "POST"
url: "AjaxTest.aspx/IsUserAvailable"
data: "{'username': '" + $('#<%= TextBox1.ClientID %>').val() + "'}",contentType: "application/json; charset=utf-8",
dataType: "json",
<xx yy="nn"></xx>
{ "xx": {"yy":"nn"} }
success: function(msg)
error: AjaxFailed
|
توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد |
توسط jQuery |
fetch('/my/name').then(function(response) {
if (response.ok) {
return response.text();
}
else {
throw new Error();
}
}).then(
function success(name) {
console.log('my name is ' + name);
},
function failure() {
console.error('Name request failed!');
}
); | var xhr = new XMLHttpRequest();
xhr.open('GET', '/my/name');
xhr.onload = function() {
if (xhr.status >= 400) {
console.error('Name request failed!');
}
else {
console.log('my name is ' + xhr.responseText);
}
};
xhr.onerror = function() {
console.error('Name request failed!');
};
xhr.send(); | $.get('/my/name').then(
function success(name) {
console.log('my name is ' + name);
},
function failure() {
console.error('Name request failed!');
}
); |
| توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد | توسط jQuery |
fetch('/user/name', {
method: 'POST',
body: 'some data'
}); | var xhr = new XMLHttpRequest();
xhr.open('POST', '/user/name');
xhr.send('some data'); | $.ajax({
method: 'POST',
url: '/user/name',
contentType: 'text/plain',
data: 'some data'
}); |
| توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد | توسط jQuery |
fetch('/user/1', {
method: 'PUT',
body: //record including new mobile number
}); | var xhr = new XMLHttpRequest();
xhr.open('PUT', '/user/1');
xhr.send(/* record including new data */); | $.ajax({
method: 'PUT',
url: '/user/1',
contentType: 'text/plain',
data: //record including new data
}); |
| توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد | توسط jQuery |
fetch('/user/1', {method: 'DELETE'}); | var xhr = new XMLHttpRequest();
xhr.open('DELETE', '/user/1');
xhr.send(); | $.ajax('/user/1', {method: 'DELETE'}); |
$.param({
key1: 'some value',
'key 2': 'another value'
}); key1=some+value&key+2=another+value
$.ajax({
method: 'POST',
url: '/user',
data: {
name: 'VahidN',
address: 'Address 1',
phone: '555-555-5555'
}
}); var xhr = new XMLHttpRequest();
var data = encodeURI('name=VahidN&address=Address 1&phone=555-555-5555');
xhr.open('POST', '/user');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(data); var data = encodeURI('name=VahidN&address=Address 1&phone=555-555-5555');
fetch('/user', {
method: 'POST',
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
body: data
}); function param(object) {
var encodedString = '';
for (var prop in object) {
if (object.hasOwnProperty(prop)) {
if (encodedString.length > 0) {
encodedString += '&';
}
encodedString += encodeURI(prop + '=' + object[prop]);
}
}
return encodedString;
} $.ajax({
method: 'POST',
url: '/user',
contentType: 'application/json',
data: JSON.stringify({
name: 'VahidN',
address: 'Address 1',
phone: {
home: '555-555-5555',
mobile: '444-444-4444'
}
});
}); var xhr = new XMLHttpRequest();
var data = JSON.stringify({
name: 'VahidN',
address: 'Address 1',
phone: {
home: '555-555-5555',
mobile: '444-444-4444'
}
});
xhr.open('POST', '/user');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(data); var xhr = new XMLHttpRequest();
xhr.open('GET', '/user/1');
xhr.onload = function() {
var user = JSON.parse(xhr.responseText);
// do something with this user JavaScript object
};
xhr.send(); fetch('/user', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({
name: 'VahidN',
address: 'Address 1',
phone: {
home: '555-555-5555',
mobile: '444-444-4444'
}
});
}); fetch('/user/1').then(function(response) {
return response.json();
}).then(function(userRecord) {
// do something with this user JavaScript object
}); fetch('/user/1')
.then(response => response.json()) // Transform the data into json
.then(userRecord => {
// do something with this userRecord object
}); <form action="my/server" method="POST" enctype="multipart/form-data"> <label>First Name: <input name="first"> </label> <label>Last Name: <input name="last"> </label> <button>Submit</button> </form>
-----------------------------1686536745986416462127721994 Content-Disposition: form-data; name="first" Vahid -----------------------------1686536745986416462127721994 Content-Disposition: form-data; name="last" N -----------------------------1686536745986416462127721994--
var formData = new FormData();
formData.append('name', 'VahidN');
formData.append('address', 'Address 1');
formData.append('phone', '555-555-5555');
$.ajax({
method: 'POST',
url: '/user',
contentType: false,
processData: false,
data: formData
}); multipart/form-data; boundary=—————————1686536745986416462127721994
| توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد |
var formData = new FormData();
formData.append('name', 'VahidN');
formData.append('address', 'Address 1');
formData.append('phone', '555-555-5555');
fetch('/user', {
method: 'POST',
body: formData
}); | var formData = new FormData(),
xhr = new XMLHttpRequest();
formData.append('name', 'VahidN');
formData.append('address', 'Address 1');
formData.append('phone', '555-555-5555');
xhr.open('POST', '/user');
xhr.send(formData); |
| توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد | توسط jQuery |
var file = document.querySelector(
'INPUT[type="file"]').files[0];
fetch('/uploads', {
method: 'POST',
body: file
});
} | var file = document.querySelector(
'INPUT[type="file"]').files[0],
xhr = new XMLHttpRequest();
xhr.open('POST', '/uploads');
xhr.send(file); | var file = $('INPUT[type="file"]')[0].files[0];
$.ajax({
method: 'POST',
url: '/uploads',
contentType: false,
processData: false,
data: file
}); |
fetch(url)
.then((resp) => resp.json()) // Transform the data into json
.then(function(data) {
// use data object
})
}) function downloadBlob()
{
fetch('/Home/InMemoryReport')
.then(function(response) {
return response.blob();
})
.then(function(xlsxBlob) {
var a = document.createElement("a");
document.body.appendChild(a);
a.style = "display: none";
let url = window.URL.createObjectURL(xlsxBlob);
a.href = url;
a.download = "report.xlsx";
a.click();
window.URL.revokeObjectURL(url);
});
} $.ajax('http://jsonp-aware-endpoint.com/user/1', {
jsonp: 'callback',
dataType: 'jsonp'
}).then(function(response) {
// handle user info from server
}); window.myJsonpCallback = function(data) {
// handle user info from server
};
var scriptEl = document.createElement('script');
scriptEl.setAttribute('src',
'http://jsonp-aware-endpoint.com/user/1?callback=myJsonpCallback');
document.body.appendChild(scriptEl); | توسط استاندارد جدید Fetch API | توسط XMLHttpRequest استاندارد | توسط jQuery |
fetch('http://someotherdomain.com', {
method: 'POST',
headers: {
'Content-Type': 'text/plain'
},
credentials: 'include'
}); | var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://someotherdomain.com');
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'text/plain');
xhr.send('sometext'); | $.ajax('http://someotherdomain.com', {
method: 'POST',
contentType: 'text/plain',
data: 'sometext',
beforeSend: function(xmlHttpRequest) {
xmlHttpRequest.withCredentials = true;
}
}); |
{
"name": "asp.net",
"private": true,
"dependencies": {
"bootstrap": "3.3.6",
"jquery": "2.2.0",
"jquery-validation": "1.14.0",
"jquery-validation-unobtrusive": "3.2.6"
}
} 
<script src="~/bower_components/jquery/dist/jquery.min.js"></script>
<script src="~/bower_components/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
@RenderSection("scripts", required: false)
</body>
</html> // Serve wwwroot as root
app.UseFileServer();
// Serve /bower_components as a separate root
app.UseFileServer(new FileServerOptions
{
// Set root of file server
FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), "bower_components")),
// Only react to requests that match this path
RequestPath = "/bower_components",
// Don't expose file system
EnableDirectoryBrowsing = false
}); <environment name="Development"> <script src="~/bower_components/jquery/dist/jquery.min.js"></script> <script src="~/bower_components/jquery-validation/dist/jquery.validate.min.js"></script> <script src="~/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script> </environment>
<environment names="Staging, Production"> <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js" asp-fallback-src="/bower_components/jquery/dist/jquery.min.js" asp-fallback-test="window.jQuery"> </script> <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js" asp-fallback-src="bower_components/jquery-validation/dist/jquery.validate.min.js" asp-fallback-test="window.jQuery && window.jQuery.validator"> </script> <script src="https://ajax.aspnetcdn.com/ajax/mvc/5.2.3/jquery.validate.unobtrusive.min.js" asp-fallback-src="/bower_components/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js" asp-fallback-test="window.jQuery && window.jQuery.validator && window.jQuery.validator.unobtrusive"> </script> </environment>
@Html.ValidationSummary(false)
<div asp-validation-summary="All"></div>
@Html.ValidationSummary(true)
<div asp-validation-summary="ModelOnly"></div>
@Html.ValidationMessageFor(m => m.UserName, "", new { @class = "text-danger" }) <span asp-validation-for="UserName" class="text-danger"></span>
همانطور که می‌دانیم پلاگین‌های جی‌کوئری، نقش مهمی را در محیط وب ایفا می‌کنند. در اینجا با یکی از این پلاگین‌ها و چگونگی استفاده از آن آشنا میشویم.
برای آشنایی با نوشتن Plugin در jQuery، می‌توان مباحث پیشین این سایت را دنبال کرد.( JQuery Plugins #1 و JQuery Plugins #2)
این Plugin برای ایجاد یک TextBox برای ورود زمان توسط کاربر استفاده می‌شود. با توجه به اینکه قبلاً چند Plugin برای این کار نوشته شده است ولی هر کدام از آنها معایب و مزایای خاص خود را داشتند، برای نمونه می‌توانید به این سایت مراجعه کنید.
ویژگی‌های این Plugin عبارتند از:
1- تنظیم زمان پیش فرض
2- کنترل حداقل و حداکثر زمان وارد شده
3- تغییر ساعت و دقیقه بوسیله کلید‌های جهتی بالا و پایین
4- تغییر انتخاب ساعت و دقیقه بوسیله کلید‌های جهتی چپ و راست
5- تغییر ساعت و دقیقه بوسیله فشردن اعداد روی صفحه کلید
چگونگی استفاده از این Plugin
ابتدا کتابخانه jQuery و این پلاگین را به
صفحه خود اضافه نمایید و سپس کدهای زیر را برای استفاده از این Plugin اضافه نمایید:
jQuery(document).ready(function () {
$("#TextBox1").TickTack();
$("#TextBox2").TickTack({
initialTime: '8:44',
minHour: 8,
minMinute: 0,
maxHour: 22,
maxMinute: 40
});
});initialTime : زمان اولیه جهت نمایش به کاربر (حتما بایستی ساعت و دقیقه بوسیله ‘:’ از یکدیگر جداشوند)
minHour : حداقل ساعت ورودی
minMinute : حداقل دقیقه ورودی
maxHour : حداکثر ساعت ورودی
maxMinute : حداکثر دقیقه ورودی
پس از انتخاب TextBox، قسمت ساعت به صورت پیش فرض انتخاب می‌شود و کاربر باید ساعت مد نظر را وارد کند؛ در اینجا، عدد اول ساعت، مد نظر است.
برای نمونه در اینجا عدد 2 توسط کاربر وارد می‌شود؛ پس از ورود عدد و با توجه به تنظیمات انجام شده، ساعت به صورت اتوماتیک به حداکثر مقداری که می‌تواند بپذیرد تغییر می‌کند (در این مثال چون کاربر عدد 2 را وارد کرده و در تنظیمات انجام شده حداکثر ساعت دریافتی 22 و حداکثر دقیقه 40 تعریف شده است، ساعت به صورت پیشفرض به 22:40 تغییر می‌یابد)
و پس از وارد کردن عدد دوم ساعت توسط کاربر مکان نما به قسمت دقیقه منتقل می‌شود که در این جا عدد اول دقیقه مد نظر است
وارد کردن عدد 3 برای دقیقه
وارد کردن عدد دوم دقیقه
پس از وارد کردن کامل دقیقه مکان نما دوباره به قسمت ساعت باز می‌گردد.
در ادامه دوستان علاقمند لطفا جهت بهبود کیفیت کار، باگ و یا مشکلات کدنویسی را اطلاع دهند.
با تشکر
