می خواهیم یک Timer سمت سرور با SignalR ایجاد و آن را در کلاینت نمایش دهیم.
خوب بدون مقدمه به سراغ طراحی این مثال می‌رویم. متد HostingEnvironment.RegisterObject می‌تواند برای ثبت کردن یک نمونه (instance) از یک شی که می‌خواهیم lifetime توسط hosting environment مدیریت شود، مورد استفاده قرار گیرد...
<!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.src.js"></script>
<script src="~/Scripts/ajaxfileupload.js"></script>
<script src="~/Scripts/jquery.blockUI.js"></script>
@RenderSection("Scripts", required: false)
</body>
</html> PM> Install-Package jQuery.BlockUI
<div dir="rtl" id="grid1" style="width:100%;" align="center">
<div id="rsperror"></div>
<table id="list" cellpadding="0" cellspacing="0"></table>
<div id="pager" style="text-align:center;"></div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Responsive jqGrid
$(window).bind('resize', function () {
var targetContainer = "#grid1";
var targetGrid = "#list";
$(targetGrid).setGridWidth($(targetContainer).width() - 2, true);
}).trigger('resize');
$('#list').jqGrid({
caption: "آزمایش هفتم",
/// .....
}).navGrid(
/// .....
).jqGrid('gridResize', { minWidth: 400, minHeight: 150 });
});
</script> colModel: [
{
name: '@(StronglyTyped.PropertyName<Product>(x=>x.ImageName))',
index: '@(StronglyTyped.PropertyName<Product>(x => x.ImageName))',
align: 'center', width: 220,
editable: true,
edittype: 'file',
formatter: function (cellvalue, options, rowObject) {
return "<img src='/images/" + cellvalue + "?rnd=" + new Date().getTime() + "' />";
},
unformat: function (cellvalue, options, cell) {
return $('img', cell).attr('src').replace('/images/', '');
}
}
], colModel: [
{
name: 'myac', width: 80, fixed: true, sortable: false,
resize: false, formatter: 'actions',
formatoptions: {
keys: true,
afterSave: function (rowid, response) {
doInlineUpload(response, rowid);
},
delbutton: true,
delOptions: {
url: "@Url.Action("DeleteProduct","Home")"
}
}
}
], $('#list').jqGrid({
caption: "آزمایش هفتم",
// ....
}).navGrid(
'#pager',
//enabling buttons
{ add: true, del: true, edit: true, search: false },
//edit option
{
width: 'auto',
reloadAfterSubmit: true, checkOnUpdate: true, checkOnSubmit: true,
beforeShowForm: function (form) {
centerDialog(form, $('#list'));
},
afterSubmit: doFormUpload,
closeAfterEdit: true
},
//add options
{
width: 'auto', url: '@Url.Action("AddProduct","Home")',
reloadAfterSubmit: true, checkOnUpdate: true, checkOnSubmit: true,
beforeShowForm: function (form) {
centerDialog(form, $('#list'));
},
afterSubmit: doFormUpload,
closeAfterAdd: true
},
//delete options
{
url: '@Url.Action("DeleteProduct","Home")',
reloadAfterSubmit: true
}).jqGrid('gridResize', { minWidth: 400, minHeight: 150 }); function doInlineUpload(response, rowId) {
return doUpload(response, null, rowId);
}
function doFormUpload(response, postdata) {
return doUpload(response, postdata, null);
}
function doUpload(response, postdata, rowId) {
// دریافت خروجی متد ثبت اطلاعات از سرور
// و استفاده از آی دی رکورد ثبت شده برای انتساب فایل آپلودی به آن رکورد
var result = $.parseJSON(response.responseText);
if (result.success === false)
return [false, "عملیات ثبت موفقیت آمیز نبود", result.id];
var fileElementId = '@(StronglyTyped.PropertyName<Product>(x=>x.ImageName))';
if (rowId) {
fileElementId = rowId + "_" + fileElementId;
}
var val = $("#" + fileElementId).val();
if (val == '' || val === undefined) {
// فایلی انتخاب نشده
return [false, "لطفا فایلی را انتخاب کنید", result.id];
}
$('#grid1').block({ message: '<h4>در حال ارسال فایل به سرور</h4>' });
$.ajaxFileUpload({
url: "@Url.Action("UploadFiles", "Home")", // مسیری که باید فایل به آن ارسال شود
secureuri: false,
fileElementId: fileElementId, // آی دی المان ورودی فایل
dataType: 'json',
data: { id: result.id }, // اطلاعات اضافی در صورت نیاز
complete: function () {
$('#grid1').unblock();
},
success: function (data, status) {
$("#list").trigger("reloadGrid");
},
error: function (data, status, e) {
alert(e);
}
});
return [true, "با تشکر!", result.id];
} 
[HttpPost]
public ActionResult AddProduct(Product postData)
{
// ...
return Json(new { id = postData.Id, success = true }, JsonRequestBehavior.AllowGet);
}
[HttpPost]
public ActionResult EditProduct(Product postData)
{
// ...
return Json(new { id = postData.Id, success = true }, JsonRequestBehavior.AllowGet);
}
// todo: change `imageName` according to the form's file element name
[HttpPost]
public ActionResult UploadFiles(HttpPostedFileBase imageName, int id)
{
// ....
return Json(new { FileName = product.ImageName }, "text/html", JsonRequestBehavior.AllowGet);
} 
namespace BlazorDemoApp.Models;
public record Product
{
public int Id { get; set; }
public required string Title { get; set; }
public required string Description { get; set; }
public decimal Price { get; set; }
public List<int> Related { get; set; } = new();
} using BlazorDemoApp.Models;
namespace BlazorDemoApp.Services;
public interface IProductStore
{
IList<Product> GetAllProducts();
Product GetProduct(int id);
IList<Product> GetRelatedProducts(int productId);
}
public class ProductStore : IProductStore
{
private static readonly List<Product> ProductsDataSource =
new()
{
new Product
{
Id = 1, Title = "Smart speaker", Price = 22m,
Description =
"This smart speaker delivers excellent sound quality and comes with built-in voice control, offering an impressive music listening experience.",
Related = new List<int> { 2, 3 },
},
new Product
{
Id = 2, Title = "Regular speaker", Price = 89m,
Description =
"Enjoy room-filling sound with this regular speaker. With its slick design, it perfectly fits into any room in your house.",
Related = new List<int> { 1, 3 },
},
new Product
{
Id = 3, Title = "Speaker cable", Price = 12m,
Description =
"This high-quality speaker cable ensures a reliable and clear audio connection for your sound system.",
},
};
public IList<Product> GetAllProducts() => ProductsDataSource;
public Product GetProduct(int id) => ProductsDataSource.Single(p => p.Id == id);
public IList<Product> GetRelatedProducts(int productId)
{
var product = ProductsDataSource.Single(x => x.Id == productId);
return ProductsDataSource.Where(p => product.Related.Contains(p.Id)).ToList();
}
} builder.Services.AddScoped<IProductStore, ProductStore>();
@page "/Products"
@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@inject IProductStore Store
@attribute [StreamRendering]
<h3>Products</h3>
@if (_products == null)
{
<p>Loading...</p>
}
else
{
@foreach (var item in _products)
{
<a href="/ProductDetails/@item.Id">
<div>
<div>
<h5>@item.Title</h5>
</div>
<div>
<h5>@item.Price.ToString("c")</h5>
</div>
</div>
</a>
}
}
@code {
private IList<Product>? _products;
protected override Task OnInitializedAsync() => GetProductsAsync();
private async Task GetProductsAsync()
{
await Task.Delay(1000); // Simulates asynchronous loading to demonstrate streaming rendering
_products = Store.GetAllProducts();
}
} 
@page "/ProductDetails/{ProductId}"
@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@inject IProductStore Store
@attribute [StreamRendering]
@if (_product == null)
{
<p>Loading...</p>
}
else
{
<div>
<div>
<h5>
@_product.Title (@_product.Price.ToString("C"))
</h5>
<p>
@_product.Description
</p>
</div>
@if (_product.Related.Count > 0)
{
<div>
<RelatedProducts ProductId="Convert.ToInt32(ProductId)" />
</div>
}
</div>
<NavLink href="/Products">Back</NavLink>
}
@code {
private Product? _product;
[Parameter]
public string? ProductId { get; set; }
protected override Task OnInitializedAsync() => GetProductAsync();
private async Task GetProductAsync()
{
await Task.Delay(1000); // Simulates asynchronous loading to demonstrate streaming rendering
_product = Store.GetProduct(Convert.ToInt32(ProductId));
}
} <RelatedProducts ProductId="Convert.ToInt32(ProductId)" />
@using BlazorDemoApp.Models
@using BlazorDemoApp.Services
@inject IProductStore Store
<button @onclick="LoadRelatedProducts">Related products</button>
@if (_loadRelatedProducts)
{
@if (_relatedProducts == null)
{
<p>Loading...</p>
}
else
{
<div>
@foreach (var item in _relatedProducts)
{
<a href="/ProductDetails/@item.Id">
<div>
<h5>@item.Title (@item.Price.ToString("C"))</h5>
</div>
</a>
}
</div>
}
}
@code{
private IList<Product>? _relatedProducts;
private bool _loadRelatedProducts;
[Parameter]
public int ProductId { get; set; }
private async Task LoadRelatedProducts()
{
_loadRelatedProducts = true;
await Task.Delay(1000); // Simulates asynchronous loading to demonstrate InteractiveServer mode
_relatedProducts = Store.GetRelatedProducts(ProductId);
}
} <RelatedProducts ProductId="Convert.ToInt32(ProductId)" @rendermode="@InteractiveServer"/>
<script src="_framework/blazor.web.js"></script>
<RelatedProducts ProductId="Convert.ToInt32(ProductId)" @rendermode="@(new InteractiveServerRenderMode(false))"/>
@using static Microsoft.AspNetCore.Components.Web.RenderMode
public static class RenderMode
{
public static InteractiveServerRenderMode InteractiveServer { get; } = new InteractiveServerRenderMode();
public static InteractiveWebAssemblyRenderMode InteractiveWebAssembly { get; } = new InteractiveWebAssemblyRenderMode();
public static InteractiveAutoRenderMode InteractiveAuto { get; } = new InteractiveAutoRenderMode();
}
public class InteractiveServerRenderMode : IComponentRenderMode
{
public InteractiveServerRenderMode()
: this(true)
{
}
public InteractiveServerRenderMode(bool prerender) => this.Prerender = prerender;
public bool Prerender { get; }
}
$.ajax(), load(), $.get(), $.getJSON(), $.getScript(), and $.post()
using System;
using System.Globalization;
using System.Web.Script.Services;
using System.Web.Services;
namespace TestJQueryAjax
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.ComponentModel.ToolboxItem(false)]
[ScriptService]
public class AjaxSrv : WebService
{
public class TimeInfo
{
public string Date { set; get; }
public string Hr { set; get; }
public string Min { set; get; }
}
[WebMethod(EnableSession = true)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public TimeInfo GetTime()
{
DateTime now = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day);
PersianCalendar pc = new PersianCalendar();
string today = string.Format("{0}/{1}/{2}",
pc.GetYear(now),
pc.GetMonth(now).ToString("00"),
pc.GetDayOfMonth(now).ToString("00"));
TimeInfo ti = new TimeInfo
{
Date = today,
Hr = DateTime.Now.Hour.ToString("00"),
Min = DateTime.Now.Minute.ToString("00")
};
return ti;
}
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestFillCtrls.aspx.cs"
Inherits="TestJQueryAjax.TestFillCtrls" %>
<!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></title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function validate() {
$.ajax({
type: "POST",
url: 'AjaxSrv.asmx/GetTime',
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success:
function(msg) {
$("#<%=txtDate.ClientID %>").val(msg.d.Date);
$("#<%=txtHr.ClientID %>").val(msg.d.Hr);
$("#<%=txtMin.ClientID %>").val(msg.d.Min);
},
error:
function(XMLHttpRequest, textStatus, errorThrown) {
alert("خطایی رخ داده است");
}
});
//debugger;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" />
<br />
<asp:TextBox ID="txtHr" runat="server" />
<br />
<asp:TextBox ID="txtMin" runat="server" />
<br />
<asp:Button ID="btnGetTime" runat="server" Text="Click here!" UseSubmitBehavior="false"
OnClientClick="validate();return false;" />
</div>
</form>
</body>
</html>
{"d":{"__type":"TestJQueryAjax.AjaxSrv+TimeInfo","Date":"1388/07/14","Hr":"12","Min":"59"}}
$.ajaxSetup({cache: false});
<!DOCTYPE html>
<html ng-app>
<head>
<title>Sample2</title>
</head>
<body>
<div>
<input type="text" ng-model="greeting.text" />
<p>{{greeting.text}}, World!</p>
</div>
<script src="../Scripts/angular.js"></script>
</body>
</html> <!DOCTYPE html>
<html ng-app>
<head>
<title>Sample2</title>
</head>
<body>
<div ng-controller="GreetingController">
<input type="text" ng-model="greeting.text" />
<p>{{greeting.text}}, World!</p>
<button ng-click="showData()">Show</button>
</div>
<script src="../Scripts/angular.js"></script>
<script>
var GreetingController = function ($scope, $window) {
$scope.greeting = {
text: "Hello"
};
$scope.showData = function () {
$window.alert($scope.greeting.text);
};
};
</script>
</body>
</html> var FN_ARGS = /^function\s*[^\(]*\(\s*([^\)]*)\)/m; var FN_ARG_SPLIT = /,/; var FN_ARG = /^\s*(_?)(\S+?)\1\s*$/; var STRIP_COMMENTS = /((\/\/.*$)|(\/\*[\s\S]*?\*\/))/mg;
<form method="post" action="submit" enctype="multipart/form-data">
<div>
<input name="files" id="files" type="file" />
<input type="submit" value="Submit" class="k-button" />
</div>
</form>
<script>
$(document).ready(function() {
$("#files").kendoUpload();
});
</script> <script type="text/javascript">
$(function () {
$("#files").kendoUpload({
name: "files",
async: { // async configuration
saveUrl: "@Url.Action("Save", "Home")", // the url to save a file is '/save'
removeUrl: "@Url.Action("Remove", "Home")", // the url to remove a file is '/remove'
autoUpload: false, // automatically upload files once selected
removeVerb: 'POST'
},
multiple: true,
showFileList: true
});
});
</script> [HttpPost]
public ActionResult Save(IEnumerable<HttpPostedFileBase> files)
{
if (files != null)
{
// ...
// Process the files and save them
// ...
}
// Return an empty string to signify success
return Content("");
}
[HttpPost]
public ContentResult Remove(string[] fileNames)
{
if (fileNames != null)
{
foreach (var fullName in fileNames)
{
// ...
// delete the files
// ...
}
}
// Return an empty string to signify success
return Content("");
} 
<!-- Content Type with wildcard. All Images --> <input type="file" id="demoFile" title="Select file" accept="image/*" /> <!-- List of file extensions --> <input type="file" id="demoFile" title="Select file" accept=".jpg,.png,.gif" /> <!-- Any combination of the above --> <input type="file" id="demoFile" title="Select file" accept="audio/*,application/pdf,.png" />
<div class="k-rtl k-header">
<input name="files" id="files" type="file" />
</div> <script type="text/javascript">
$(function () {
$("#files").kendoUpload({
name: "files",
async: {
//...
},
//...
localization: {
select: 'انتخاب فایل‌ها برای ارسال',
remove: 'حذف فایل',
retry: 'سعی مجدد',
headerStatusUploading: 'در حال ارسال فایل‌ها',
headerStatusUploaded: 'پایان ارسال',
cancel: "لغو",
uploadSelectedFiles: "ارسال فایل‌ها",
dropFilesHere: "فایل‌ها را برای ارسال، کشیده و در اینجا رها کنید",
statusUploading: "در حال ارسال",
statusUploaded: "ارسال شد",
statusWarning: "اخطار",
statusFailed: "خطا در ارسال"
}
});
});
</script> <style type="text/css">
div.k-dropzone {
border: 1px solid #c5c5c5; /* For Default; Different for each theme */
}
div.k-dropzone em {
visibility: visible;
}
</style> <script id="fileListTemplate" type="text/x-kendo-template">
<li class='k-file'>
<span class='k-progress'></span>
<span class='k-icon'></span>
<span class='k-filename' title='#=name#'>#=name# (#=size# bytes)</span>
<strong class='k-upload-status'></strong>
</li>
</script> <script type="text/javascript">
$(function () {
$("#files").kendoUpload({
name: "files",
async: {
// ...
},
// ...
template: kendo.template($('#fileListTemplate').html()),
// ...
});
});
</script> <script type="text/javascript">
$(function () {
$("#files").kendoUpload({
name: "files",
async: { // async configuration
//...
},
//...
localization: {
},
cancel: function () {
console.log('Cancel Event.');
},
complete: function () {
console.log('Complete Event.');
},
error: function () {
console.log('Error uploading file.');
},
progress: function (e) {
console.log('Uploading file ' + e.percentComplete);
},
remove: function () {
console.log('File removed.');
},
select: function () {
console.log('File selected.');
},
success: function () {
console.log('Upload successful.');
},
upload: function (e) {
console.log('Upload started.');
}
});
});
</script> <script type="text/javascript">
$(function () {
$("#files").kendoUpload({
name: "files",
async: {
//...
},
//...
localization: {
},
upload: function (e) {
console.log('Upload started.');
// Sending metadata to the save action
e.data = {
codeId: "1234567",
param2: 12
//, ...
};
}
});
});
</script> [HttpPost] public ActionResult Save(IEnumerable<HttpPostedFileBase> files, string codeId)
<script type="text/javascript">
$(function () {
$("#files").kendoUpload({
name: "files",
async: {
// ....
batch: true
},
});
});
</script> <?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<!-- The request length is in kilobytes, execution timeout is in seconds -->
<httpRuntime maxRequestLength="10240" executionTimeout="120" />
</system.web>
<system.webServer>
<security>
<requestFiltering>
<!-- The content length is in bytes -->
<requestLimits maxAllowedContentLength="10485760"/>
</requestFiltering>
</security>
</system.webServer>
</configuration> 
namespace KendoUI07.Models
{
public class Registration
{
public int Id { set; get; }
public string UserName { set; get; }
public string CourseName { set; get; }
public int Credit { set; get; }
public string Email { set; get; }
public string Tel { set; get; }
}
} <script type="text/javascript">
$(function () {
var model = kendo.data.Model.define({
id: "Id",
fields: {
Id: { type: 'number' }, // leave this set to 0 or undefined, so Kendo knows it is new.
UserName: { type: 'string' },
CourseName: { type: 'string' },
Credit: { type: 'number' },
Email: { type: 'string' },
Tel: { type: 'string' }
}
});
});
</script> <script type="text/javascript">
$(function () {
var viewModel = kendo.observable({
accepted: false,
course: new model()
});
});
</script> <div id="coursesSection" class="k-rtl k-header">
<div class="box-col">
<form id="myForm" data-role="validator" novalidate="novalidate">
<h3>ثبت نام</h3>
<ul>
<li>
<label for="Id">Id</label>
<span id="Id" data-bind="text:course.Id"></span>
</li>
<li>
<label for="UserName">نام</label>
<input type="text" id="UserName" name="UserName" class="k-textbox"
data-bind="value:course.UserName"
required />
</li>
<li>
<label for="CourseName">دوره</label>
<input type="text" dir="ltr" id="CourseName" name="CourseName" required
data-bind="value:course.CourseName" />
<span class="k-invalid-msg" data-for="CourseName"></span>
</li>
<li>
<label for="Credit">مبلغ پرداختی</label>
<input id="Credit" name="Credit" type="number" min="1000" max="6000"
required data-max-msg="عددی بین 1000 و 6000" dir="ltr"
data-bind="value:course.Credit"
class="k-textbox k-input" />
<span class="k-invalid-msg" data-for="Credit"></span>
</li>
<li>
<label for="Email">پست الکترونیک</label>
<input type="email" id="Email" dir="ltr" name="Email"
data-bind="value:course.Email"
required class="k-textbox" />
</li>
<li>
<label for="Tel">تلفن</label>
<input type="tel" id="Tel" name="Tel" dir="ltr" pattern="\d{8}"
required class="k-textbox"
data-bind="value:course.Tel"
data-pattern-msg="8 رقم" />
</li>
<li>
<input type="checkbox" name="Accept"
data-bind="checked:accepted"
required />
شرایط دوره را قبول دارم.
<span class="k-invalid-msg" data-for="Accept"></span>
</li>
<li>
<button class="k-button"
data-bind="enabled: accepted, click: doSave"
type="submit">
ارسال
</button>
<button class="k-button" data-bind="click: resetModel">از نو</button>
</li>
</ul>
<span id="doneMsg"></span>
</form>
</div> <script type="text/javascript">
$(function () {
var model = kendo.data.Model.define({
// ...
});
var viewModel = kendo.observable({
// ...
});
kendo.bind($("#coursesSection"), viewModel);
});
</script> <input type="text" id="UserName" name="UserName" class="k-textbox"
data-bind="value:course.UserName"
required /> <input type="checkbox" name="Accept"
data-bind="checked:accepted"
required />
<button class="k-button"
data-bind="enabled: accepted, click: doSave"
type="submit">
ارسال
</button> <script type="text/javascript">
$(function () {
var model = kendo.data.Model.define({
//...
});
var dataSource = new kendo.data.DataSource({
type: 'json',
transport: {
read: {
url: "api/registrations",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
},
create: {
url: "api/registrations",
contentType: 'application/json; charset=utf-8',
type: "POST"
},
update: {
url: function (course) {
return "api/registrations/" + course.Id;
},
contentType: 'application/json; charset=utf-8',
type: "PUT"
},
destroy: {
url: function (course) {
return "api/registrations/" + course.Id;
},
contentType: 'application/json; charset=utf-8',
type: "DELETE"
},
parameterMap: function (data, type) {
// Convert to a JSON string. Without this step your content will be form encoded.
return JSON.stringify(data);
}
},
schema: {
model: model
},
error: function (e) {
alert(e.errorThrown);
},
change: function (e) {
// فراخوانی در زمان دریافت اطلاعات از سرور و یا تغییرات محلی
viewModel.set("coursesDataSourceRows", new kendo.data.ObservableArray(this.view()));
}
});
var viewModel = kendo.observable({
//...
});
kendo.bind($("#coursesSection"), viewModel);
dataSource.read(); // دریافت لیست موجود از سرور در آغاز کار
});
</script> <script type="text/javascript">
$(function () {
$("#coursesSection").kendoValidator({
// ...
});
var model = kendo.data.Model.define({
// ...
});
var dataSource = new kendo.data.DataSource({
// ...
});
var viewModel = kendo.observable({
accepted: false,
course: new model(),
doSave: function (e) {
e.preventDefault();
console.log("this", this.course);
var validator = $("#coursesSection").data("kendoValidator");
if (validator.validate()) {
if (this.course.Id == 0) {
dataSource.add(this.course);
}
dataSource.sync(); // push to the server
this.set("course", new model()); // reset controls
}
},
resetModel: function (e) {
e.preventDefault();
this.set("course", new model());
}
});
kendo.bind($("#coursesSection"), viewModel);
dataSource.read(); // دریافت لیست موجود از سرور در آغاز کار
});
</script> <button class="k-button"
data-bind="enabled: accepted, click: doSave"
type="submit">
ارسال
</button>
<button class="k-button" data-bind="click: resetModel">از نو</button> using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using KendoUI07.Models;
namespace KendoUI07.Controllers
{
public class RegistrationsController : ApiController
{
public HttpResponseMessage Delete(int id)
{
var item = RegistrationsDataSource.LatestRegistrations.FirstOrDefault(x => x.Id == id);
if (item == null)
return Request.CreateResponse(HttpStatusCode.NotFound);
RegistrationsDataSource.LatestRegistrations.Remove(item);
return Request.CreateResponse(HttpStatusCode.OK, item);
}
public IEnumerable<Registration> Get()
{
return RegistrationsDataSource.LatestRegistrations;
}
public HttpResponseMessage Post(Registration registration)
{
if (!ModelState.IsValid)
return Request.CreateResponse(HttpStatusCode.BadRequest);
var id = 1;
var lastItem = RegistrationsDataSource.LatestRegistrations.LastOrDefault();
if (lastItem != null)
{
id = lastItem.Id + 1;
}
registration.Id = id;
RegistrationsDataSource.LatestRegistrations.Add(registration);
// ارسال آی دی مهم است تا از ارسال رکوردهای تکراری جلوگیری شود
return Request.CreateResponse(HttpStatusCode.Created, registration);
}
[HttpPut] // Add it to fix this error: The requested resource does not support http method 'PUT'
public HttpResponseMessage Update(int id, Registration registration)
{
var item = RegistrationsDataSource.LatestRegistrations
.Select(
(prod, index) =>
new
{
Item = prod,
Index = index
})
.FirstOrDefault(x => x.Item.Id == id);
if (item == null)
return Request.CreateResponse(HttpStatusCode.NotFound);
if (!ModelState.IsValid || id != registration.Id)
return Request.CreateResponse(HttpStatusCode.BadRequest);
RegistrationsDataSource.LatestRegistrations[item.Index] = registration;
return Request.CreateResponse(HttpStatusCode.OK);
}
}
} <div id="coursesSection" class="k-rtl k-header">
<div class="box-col">
<form id="myForm" data-role="validator" novalidate="novalidate">
<!--فرم بحث شده در ابتدای مطلب-->
</form>
</div>
<div id="results">
<table class="metrotable">
<thead>
<tr>
<th>Id</th>
<th>نام</th>
<th>دوره</th>
<th>هزینه</th>
<th>ایمیل</th>
<th>تلفن</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody data-template="row-template" data-bind="source: coursesDataSourceRows"></tbody>
<tfoot data-template="footer-template" data-bind="source: this"></tfoot>
</table>
<script id="row-template" type="text/x-kendo-template">
<tr>
<td data-bind="text: Id"></td>
<td data-bind="text: UserName"></td>
<td dir="ltr" data-bind="text: CourseName"></td>
<td>
#: kendo.toString(get("Credit"), "c0") #
</td>
<td data-bind="text: Email"></td>
<td data-bind="text: Tel"></td>
<td><button class="k-button" data-bind="click: deleteCourse">حذف</button></td>
<td><button class="k-button" data-bind="click: editCourse">ویرایش</button></td>
</tr>
</script>
<script id="footer-template" type="text/x-kendo-template">
<tr>
<td colspan="3"></td>
<td>
جمع کل: #: kendo.toString(totalPrice(), "c0") #
</td>
<td colspan="2"></td>
<td></td>
<td></td>
</tr>
</script>
</div>
</div> <script type="text/javascript">
$(function () {
// ...
var viewModel = kendo.observable({
accepted: false,
course: new model(),
coursesDataSourceRows: new kendo.data.ObservableArray([]),
doSave: function (e) {
// ...
},
resetModel: function (e) {
// ...
},
totalPrice: function () {
var sum = 0;
$.each(this.get("coursesDataSourceRows"), function (index, item) {
sum += item.Credit;
});
return sum;
},
deleteCourse: function (e) {
// the current data item is passed as the "data" field of the event argument
var course = e.data;
dataSource.remove(course);
dataSource.sync(); // push to the server
},
editCourse: function(e) {
// the current data item is passed as the "data" field of the event argument
var course = e.data;
this.set("course", course);
}
});
kendo.bind($("#coursesSection"), viewModel);
dataSource.read(); // دریافت لیست موجود از سرور در آغاز کار
});
</script> <script type="text/javascript">
$(function () {
var dataSource = new kendo.data.DataSource({
//...
change: function (e) {
// فراخوانی در زمان دریافت اطلاعات از سرور و یا تغییرات محلی
viewModel.set("coursesDataSourceRows", new kendo.data.ObservableArray(this.view()));
}
});
});
</script> 
public class ChatHub : Hub
{
public void Send(string name, string message)
{
Clients.All.messageReceived(name, message);
}
} 
قدم بعدی افزودن کدهای سمت کلاینت برای SignalR می‌باشد. دقت داشته باشید که کدهایی که در ادامه مشاهده خواهید کرد دقیقاً مطابق دستورالمعل‌هایی است که قبلاً مشاهده کرده‌اید. برای اینکار داخل کلاس MainActivity.java کدهای زیر را اضافه کنید:
Platform.loadPlatformComponent( new AndroidPlatformComponent() );
HubConnection connection = new HubConnection(DEFAULT_SERVER_URL);
HubProxy hub = connection.createHubProxy("ChatHub");
connection.error(new ErrorCallback() {
@Override
public void onError(final Throwable error) {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(getApplicationContext(), error.getMessage(), Toast.LENGTH_LONG).show();
}
});
}
});
hub.subscribe(new Object() {
@SuppressWarnings("unused")
public void messageReceived(final String name, final String message) {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(getApplicationContext(), name + ": " + message, Toast.LENGTH_LONG).show();
}
});
}
});
connection.start()
.done(new Action<Void>() {
@Override
public void run(Void obj) throws Exception {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(getApplicationContext(), "Done Connecting!", Toast.LENGTH_LONG).show();
}
});
}
});
connection.received(new MessageReceivedHandler() {
@Override
public void onMessageReceived(final JsonElement json) {
runOnUiThread(new Runnable() {
public void run() {
JsonObject jsonObject = json.getAsJsonObject();
JsonArray jsonArray =jsonObject.getAsJsonArray("A");
Toast.makeText(getApplicationContext(), jsonArray.get(0).getAsString() + ": " + jsonArray.get(1).getAsString(), Toast.LENGTH_LONG).show();
}
});
}
}); همانطور که مشاهده می‌کنید توسط قطعه کد زیر SKD مربوطه در نسخه‌های قدیمی اندروید نیز بدون مشکل کار خواهد کرد:
Platform.loadPlatformComponent( new AndroidPlatformComponent() );
در ادامه توسط متد createHubProxy ارجاعی به هابی که در سمت سرور ایجاد کردیم، داده‌ایم:
HubProxy hub = connection.createHubProxy("ChatHub"); در ادامه نیز توسط یک روال رویدادگردان وضعیت اتصال را چک کرده‌ایم. یعنی در زمان بروز خطا در نحوه ارتباط یک پیام بر روی صفحه نمایش داده می‌شود:
connection.error(new ErrorCallback() {
@Override
public void onError(final Throwable error) {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(getApplicationContext(), error.getMessage(), Toast.LENGTH_LONG).show();
}
});
}
}); hub.subscribe(new Object() {
@SuppressWarnings("unused")
public void messageReceived(final String name, final String message) {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(getApplicationContext(), name + ": " + message, Toast.LENGTH_LONG).show();
}
});
}
}); connection.start()
.done(new Action<Void>() {
@Override
public void run(Void obj) throws Exception {
runOnUiThread(new Runnable() {
public void run() {
Toast.makeText(getApplicationContext(), "Done Connecting!", Toast.LENGTH_LONG).show();
}
});
}
}); connection.received(new MessageReceivedHandler() {
@Override
public void onMessageReceived(final JsonElement json) {
runOnUiThread(new Runnable() {
public void run() {
JsonObject jsonObject = json.getAsJsonObject();
JsonArray jsonArray =jsonObject.getAsJsonArray("A");
Toast.makeText(getApplicationContext(), jsonArray.get(0).getAsString() + ": " + jsonArray.get(1).getAsString(), Toast.LENGTH_LONG).show();
}
});
}
}); 