var onSuccess = function(result) {
// enable unobtrusive validation for the contents
// that was injected into the <div id="result"></div> node
$.validator.unobtrusive.parse("#result");
};
<div>
<input type="file" name="siteIcon" id="siteIcon" />
@Html.ValidationMessageFor(model => model.SiteImage)
</div> public virtual ActionResult Create(Site site, HttpPostedFileBase siteIcon)
{
} 
<div id="app">
<div><video #video id="video" width="640" height="480" autoplay></video></div>
<div><button id="snap" (click)="capture()">ضبط تصویر</button></div>
<canvas #canvas id="canvas" width="640" height="480"></canvas>
<ul>
<li *ngFor="let capture of captures">
<img src="{{ capture }}" height="50" />
</li>
</ul>
</div> export class AppComponent implements OnInit, AfterViewInit {
@ViewChild('video')
public video: ElementRef;
@ViewChild('canvas')
public canvas: ElementRef;
public captures: Array<any>;
public constructor() {
this.captures = [];
}
public ngOnInit() { }
public capture() {
this.canvas.nativeElement.getContext('2d').drawImage(this.video.nativeElement, 0, 0, 640, 480);
this.captures.push(this.canvas.nativeElement.toDataURL('image/png'));
}
public ngAfterViewInit() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
this.video.nativeElement.src = window.URL.createObjectURL(stream);
this.video.nativeElement.play();
});
}
}
} public ngAfterViewInit() {
if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
this.video.nativeElement.src = window.URL.createObjectURL(stream);
this.video.nativeElement.play();
});
}
} public capture() {
this.canvas.nativeElement.getContext('2d').drawImage(this.video.nativeElement, 0, 0, 640, 480);
this.captures.push(this.canvas.nativeElement.toDataURL('image/png'));
} وب اسمبلی چیست؟
<BlazorMode> ... </BlazorMode> <WebAppDeploymentType> ... </WebAppDeploymentType>
<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> همان Label قدیمی خودمان است که برای نمایش متون کاربر دارد. متن داخل آن بین دو تگ قرار می‌گیرد و یا از خاصیت Text آن کمک گرفته خواهد شد. حتما از خاصیت Width و height آن برای مقداردهی کمک بگیرید، زیرا در غیر آن صورت کل Container خود را خواهد پوشاند. در صورتی که متنی در مکان خود جا نشود میتوان از دو ویژگی استفاده کرد. آن را برش داد یا به خطوط بعدی شکست. برای حذف یا برش باقی مانده متن میتوان از خصوصیت TextTrimming استفاده کرد که سه مقدار می‌گیرد:
None مقدار پیش فرض
CharacterEllipsis با نزدیک شدن به آخر پهنای کار از ... استفاده مینماید. در صورتی که لیستی یا مورد مشابهی دارید میتواند بسیار کاربردی باشد.
WordEllipsis این گزینه هم مانند مورد بالاست با این تفاوت که سعی دارد تا آنجا که ممکن است خود را به آخرین حرف کلمه برساند تا شکستگی در وسط کلمه اتفاق نیفتد و آخرین کلمه کامل دیده شود و بعد ... قرار بگیرد؛ هر چند در تست‌های خودم تفاوتی مشاهده نکردم.
گزینه TextWrapping جهت شکستن یک خط به خطوط است؛ موقعی که متن شما به انتهای صفحه می‌رسد، این ویژگی باعث میشود متن به بیرون از پنجره نرفته و یک خط به سمت پایین حرکت کند. این گزینه سه مقدار را دارد:
تصویر زیر حالت اصلی نمایش بدون نیاز به Wrap شدن است:
None: مقدار پیش فرض که خصوصیت Wrap را به همراه ندارد.
Wrap: فعال سازی ویژگی TextWrapping
WrapWithOverflow: فرق این گزینه با گزینه بالا در این است که ، گزینه بالا در هر موقعیتی که پیش بیاید عمل خط شکن را روی عبارت یا حتی آن کلمه انجام میدهد. ولی در این گزینه فرصت خط شکنی مثل بالا فراهم نیست و اگر روی کلمه‌ای خط شکنی رخ دهد، مابقی آن کلمه از ناحیه‌ی خودش خارج شده و از کلمه‌ی بعدی، خط شکنی صورت می‌گیرد.
خصوصیت LineStackingStrategy:
این خصوصیت فاصله‌ی بین خطوط را با استفاده از یک واحد منطقی dp مشخص میکند. هر چند دو گزینه دیگر هم دارد که دو تصویر زیر را در این صفحه به شما نمایش میدهد:
برای ساخت فرم از یک گرید با سه ستون و 6 سطر استفاده می‌کنم.
<Grid Margin="5">
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"></ColumnDefinition>
<ColumnDefinition Width="*"></ColumnDefinition>
<ColumnDefinition Width="Auto"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
<RowDefinition Height="Auto"></RowDefinition>
</Grid.RowDefinitions>
</Grid> <TextBlock Grid.Column="0" Grid.Row="0" VerticalAlignment="Center" HorizontalAlignment="Left" >Name</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="1" VerticalAlignment="Center" HorizontalAlignment="Left" >Gender</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="2" VerticalAlignment="Center" HorizontalAlignment="Left" >Field Of Work</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Left" >Country</TextBlock>
<TextBlock Grid.Column="0" Grid.Row="4" VerticalAlignment="Center" HorizontalAlignment="Left" >Birth Date</TextBlock>
<TextBox Grid.Row="0" Grid.Column="1" Name="Txtname" HorizontalAlignment="Left" Margin="5" Width="200" ></TextBox> به صورت کلی دکمه‌ها به چند دسته زیر تقسیم می‌شوند:
که همگی این عناصر از کلاسی به نام ButtonBase مشتق شده اند. کد زیر RadioButtonها را به صورت عمودی چینش کرده است:
<StackPanel Orientation="Vertical" Grid.Row="1" Grid.Column="1" Margin="10">
<RadioButton GroupName="Gender" Name="RdoMale" IsChecked="True" >Male</RadioButton>
<RadioButton GroupName="Gender" Name="RdoFemale" Margin="0 5 0 0" >Female</RadioButton>
</StackPanel> <StackPanel Orientation="Horizontal" Grid.Row="2" Grid.Column="1" Margin="10">
<CheckBox Name="ChkActor" >Actor/Actress</CheckBox>
<CheckBox Name="ChkDirector" >Director</CheckBox>
<CheckBox Name="ChkProducer" >Producer</CheckBox>
</StackPanel>
<ListBox Grid.Row="3" Grid.Column="1" Margin="10" Height="80">
<ListBoxItem>
<TextBlock>UnitedStates</TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock >UK</TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock >France</TextBlock>
</ListBoxItem>
<ListBoxItem>
<TextBlock >Japan</TextBlock>
</ListBoxItem>
</ListBox>
<Calendar Grid.Row="4" Grid.Column="1" HorizontalAlignment="Left" Margin="10"></Calendar> <Grid Grid.Row="0" Grid.Column="2" Grid.RowSpan="4">
<Grid.RowDefinitions>
<RowDefinition Height="*"></RowDefinition>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="*"></ColumnDefinition>
</Grid.ColumnDefinitions>
<Image HorizontalAlignment="Right" Source="man.jpg" Stretch="UniformToFill" VerticalAlignment="Top" Width="100" Height="150"></Image>
<Button Width="25" Height="15" Padding="0" HorizontalAlignment="Left" VerticalAlignment="Bottom" Margin="0,0,0,83">
<TextBlock VerticalAlignment="Center" Margin="0 -7 0 0">...</TextBlock>
</Button>
</Grid> 
<ListBox>
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<VirtualizingStackPanel Orientation="Horizontal" />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox> 
<ListBox ScrollViewer.HorizontalScrollBarVisibility="Disabled">
<ListBox.ItemsPanel>
<ItemsPanelTemplate>
<WrapPanel />
</ItemsPanelTemplate>
</ListBox.ItemsPanel>
</ListBox> 
<Calendar DisplayDate="01.01.2010" />
<Calendar DisplayDateStart="01.01.2015" DisplayDateEnd="05.01.2015" />
<Calendar SelectionMode="MultipleRange" />
<Calendar>
<Calendar.BlackoutDates>
<CalendarDateRange Start="01/01/2010" End="01/06/2010" />
<CalendarDateRange Start="05/01/2010" End="05/03/2010" />
</Calendar.BlackoutDates>
</Calendar> 
<Calendar DisplayMode="Year" />
.Button {
padding: 20px;
} import React, { Component } from 'react';
import './Button.css';
class Button extends Component {
render() {
return <div className="Button" />;
}
} import React from 'react';
import logo from './logo.svg';
console.log(logo);
function Header() {
return <img src={logo} alt="Logo" />;
}
export default Header; .Logo {
background-image: url(./logo.png);
} import progressBar from '../images/progress_bar.gif';
<img alt="loading..." src={progressBar} /> declare module "*.gif"; declare module "*.jpg"; declare module "*.jpeg"; declare module "*.png"; declare module "*.svg";
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
render() {
return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
} 
public partial class Resource {
public partial class Attribute
{
}
public partial class Drawable {
public const int Icon=0x7f020000;
}
public partial class Id
{
public const int Textview=0x7f050000;
}
public partial class Layout
{
public const int Main=0x7f030000;
}
public partial class String
{
public const int App_Name=0x7f040001;
public const int Hello=0x7f040000;
}
} @[<PackageName>.]Resource.<ResourceType>.<ResourceName>
@[<PackageName>:]<ResourceType>/<ResourceName>
namespace jqGrid10.Models
{
public class Post
{
public int Id { set; get; }
public string Title { set; get; }
public string CategoryName { set; get; }
public int NumberOfViews { set; get; }
}
} 
$('#list').jqGrid({
caption: "آزمایش دهم",
//...
grouping: true,
groupingView: {
groupField: ['CategoryName'],
groupOrder: ['asc'],
groupText : ['<b>{0} - {1} ردیف</b>'],
groupDataSorted: true,
groupColumnShow: false,
groupCollapse: true,
groupSummary: [true],
showSummaryOnHide: true
}
}); colModel: [
// ........
{
name: '@(StronglyTyped.PropertyName<Post>(x => x.Title))',
index: '@(StronglyTyped.PropertyName<Post>(x => x.Title))',
align: 'right',
width: 150,
summaryTpl: '<div style="text-align: left;">خلاصه </div>',
summaryType: function (val, name, record) {
return "";
}
},
// ........
{
name: '@(StronglyTyped.PropertyName<Post>(x => x.NumberOfViews))',
index: '@(StronglyTyped.PropertyName<Post>(x => x.NumberOfViews))',
align: 'center',
width: 70,
summaryType: 'sum', summaryTpl: '<b>جمع مشاهدات: {0}</b>'
}
], $('#list').jqGrid({
caption: "آزمایش دهم",
//.........
loadComplete: function() {
//.........
$('#list').jqGrid('groupingToggle', 'list' + 'ghead_0_0');
$("tr.jqfoot td").css({
"background": "#2f4f4f",
"color": "#FFF"
});
},
});