Web-based applications run smoother if instead of using the traditional form method, they use JavaScript to post data to the server and to update the user interface after posting data: It also makes it easier to keep POST and GET actions separated. SignalR makes it even slicker; it can even update multiple pages at the same time. Is it time to use JavaScript to post data rather than posting via the browser the traditional way?
Number of items :<span data-bind="text: myList().count"></span>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script> <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
#map { height: 600px; } var map = L.map('map').setView([29.6760859,52.4950737], 13); 
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib}).addTo(map); 
Marker، دایره و چندضلعی
در کنار نمایش Tileها می‌توان اشکال گرافیکی نیز به نقشه اضافه کرد؛ مثل مارکر(نقطه)، مستطیل، دایره و یا یک Popup. اضافه کردن یک Marker به سادگی، با کد زیر صورت می‌پذیرد:
var marker = L.marker([29.623116,52.497856]).addTo(map);
محل مورد نظر به شیء مارکر پاس داده شده و مقدار بازگشتی به map اضافه شده است.
نمایش چند ضلعی و دایره هم کار ساده ای است. برای دایره باید ابتدا مختصات مرکز دایره و شعاع به متر را به L.circle پاس داد:
var circle = L.circle([29.6308217,52.5048021], 500, {
color: 'red',
fillColor: '#f03',
fillOpacity: 0.5
}).addTo(map); در کد بالا علاوه بر محل و اندازه دایره، رنگ محیط، رنگ داخل و شفافیت (opacity) نیز مشخص شده‌اند.
برای چند ضلعی‌ها می‌توان به این صورت عمل کرد:
var polygon = L.polygon([ [29.628453, 52.488838], [29.637368, 52.493987], [29.637168, 52.503987] ]).addTo(map);
کار کردن با Popup ها
از Popup می‌توان برای نمایش اطلاعات اضافه‌ای بر روی یک محل خاص یا یک عنوان به مانند Marker استفاده کرد. برای مثال می‌توان اطلاعاتی درباره‌ی محل یک Marker یا دایره نمایش داد. در هنگام ایجاد marker، دایره و چندضلعی مقادیر بازگشتی در متغیر‌های جدایی ذخیره شدند. اکنون می‌توان به آن اشیاء یک popup اضافه کرد:
marker.bindPopup("باغ عفیف آباد").openPopup();
circle.bindPopup("I am a circle.");
polygon.bindPopup("I am a polygon."); 
به علت اینکه openPopup برای Marker صدا زده شده، به صورت پیشفرض popup را نمایش می‌دهد. اما برای بقیه، نمایش با کلیک خواهد بود. البته الزاما نیازی نیست که popup روی یک شیء نمایش داده شود، می‌توان popupهای مستقلی نیز ایجاد کرد:
var popup = L.popup()
.setLatLng([51.5, -0.09])
.setContent("I am a standalone popup.")
.openOn(map); <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)'); $.trim(someString);
jQuery.trim(someString);
window.onload = function() {
$("table tr:nth-child(even)").addClass("even");
};$(document).ready(function() {
$("table tr:nth-child(even)").addClass("even");
});$(function() {
$("table tr:nth-child(even)").addClass("even");
});$("<p>Hi there!</p>")<html>
<head>
<title>Follow me!</title>
<script type="text/javascript" src="../scripts/jquery-1.2.js"></script>
<script type="text/javascript">
// در زمان Reday بودن صفحه عنصر مورد نظر ایجاد میشود
$(function(){
$("<p>Hi there!</p>").insertAfter("#followMe");
});
</script>
</head>
<body>
<p id="followMe">Follow me!</p>
</body>
</html>
موفق وموید باشید
columns: [
{
field: "IsAvailable", title: "موجود است",
template: '<input type="checkbox" #= IsAvailable ? checked="checked" : "" # disabled="disabled" ></input>'
}
] <!--دریافت اطلاعات از منبع محلی-->
<script id="javascriptTemplate" type="text/x-kendo-template">
<ul>
# for (var i = 0; i < data.length; i++) { #
<li>#= data[i] #</li>
# } #
</ul>
</script>
<div id="container1"></div>
<script type="text/javascript">
$(function () {
var data = ['User 1', 'User 2', 'User 3'];
var template = kendo.template($("#javascriptTemplate").html());
var result = template(data); //Execute the template
$("#container1").html(result); //Append the result
});
</script> namespace KendoUI04.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;
using System.Linq;
using System.Web.Http;
using KendoUI04.Models;
namespace KendoUI04.Controllers
{
public class ProductsController : ApiController
{
public IEnumerable<Product> Get()
{
return ProductDataSource.LatestProducts.Take(10);
}
}
} <!--دریافت اطلاعات از سرور-->
<div>
<div id="container2"><ul></ul></div>
</div>
<script id="template1" type="text/x-kendo-template">
<li> #=Id# - #:Name# - #=kendo.toString(Price, "c")#</li>
</script>
<script type="text/javascript">
$(function () {
var producatsTemplate1 = kendo.template($("#template1").html());
var productsDataSource = new kendo.data.DataSource({
transport: {
read: {
url: "api/products",
dataType: "json",
contentType: 'application/json; charset=utf-8',
type: 'GET'
}
},
error: function (e) {
alert(e.errorThrown);
},
change: function () {
$("#container2 > ul").html(kendo.render(producatsTemplate1, this.view()));
}
});
productsDataSource.read();
});
</script> /// <reference path="jquery.min.js" /> /// <reference path="kendo.all.min.js" />
Tools menu –> Options -> Text Editor –> JavaScript –> Intellisense –> References
<html>
<head>
<meta charset="UTF-8">
<title>dotnet</title>
</head>
<body id="dotnettips">
<a v-on:click="message" href="bank.html">click here!</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.27/vue.min.js">
</script>
<script type="text/javascript">
new Vue({
el: '#dotnettips',
data:{
},
methods:{
message: function () {
alert("hi friends");
}
}
});
</script>
</body>
</html> new Vue({
el: '#dotnettips',
data:{
},
methods:{
message: function () {
alert("hi friends");
}
}
}); <html>
<head>
<meta charset="UTF-8">
<title>dotnet</title>
</head>
<body id="dotnettips">
<a v-on:click="message" href="bank.html">click here!</a> 