فقط مثل برنامه فوق نسخهی آفلاین ندارد.
معرفی برنامه jQueryPad
فقط مثل برنامه فوق نسخهی آفلاین ندارد.
PM> Install-Package Microsoft.AspNet.SignalR.JS
Signalr.exe ghp http://localhost/
$.connection
$.connection.chatHub
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script> <script src="http://localhost:1072/signalr/hubs" type="text/javascript"></script> </head> <body> <div> <input id="txtMsg" type="text" /><input id="send" type="button" value="send msg" /> <ul id="messages"> </ul> </div> <script type="text/javascript"> $(function () { var chat; $.connection.hub.logging = true; //اطلاعات بیشتری را در جاوا اسکریپت کنسول مرورگر لاگ میکند chat = $.connection.chat; //این نام مستعار پیشتر توسط ویژگی نام هاب تنظیم شده است chat.client.hello = function (message) { //متدی که در اینجا تعریف شده دقیقا مطابق نام متد پویایی است که در هاب تعریف شده است //به این ترتیب سرور میتواند کلاینت را فراخوانی کند $("#messages").append("<li>" + message + "</li>"); }; $.connection.hub.start(/*{ transport: 'longPolling' }*/); // فاز اولیه ارتباط را آغاز میکند $("#send").click(function () { // Hub's `SendMessage` should be camel case here chat.server.sendMessage($("#txtMsg").val()); }); }); </script> </body> </html>
<script src="http://localhost:1072/signalr/hubs" type="text/javascript"></script>
- webSockets - forverFrame - serverSentEvents - longPolling
$.connection.hub.url = 'http://localhost:1072/signalr'; //چون در یک پروژه دیگر قرار داریم
using System; using System.Web; using System.Web.Routing; using Microsoft.AspNet.SignalR; namespace SignalR02 { public class Global : HttpApplication { protected void Application_Start(object sender, EventArgs e) { // Register the default hubs route: ~/signalr RouteTable.Routes.MapHubs(new HubConfiguration { EnableCrossDomain = true }); } } }
SignalR: Auto detected cross domain url. jquery.signalR-1.0.1.min.js:10 SignalR: Negotiating with 'http://localhost:1072/signalr/negotiate'. jquery.signalR-1.0.1.min.js:10 SignalR: SignalR: Initializing long polling connection with server. jquery.signalR-1.0.1.min.js:10 SignalR: Attempting to connect to 'http://localhost:1072/signalr/connect?transport=longPolling&connectionToken…NRh72omzsPkKqhKw2&connectionData=%5B%7B%22name%22%3A%22chat%22%7D%5D&tid=3' using longPolling. jquery.signalR-1.0.1.min.js:10 SignalR: Longpolling connected jquery.signalR-1.0.1.min.js:10
<!DOCTYPE> <html> <head> <title></title> <script src="Scripts/jquery-1.6.4.min.js" type="text/javascript"></script> <script src="Scripts/jquery.signalR-1.0.1.min.js" type="text/javascript"></script> </head> <body> <div> <input id="txtMsg" type="text" /><input id="send" type="button" value="send msg" /> <ul id="messages"> </ul> </div> <script type="text/javascript"> $(function () { $.connection.hub.logging = true; //اطلاعات بیشتری را در جاوا اسکریپت کنسول مرورگر لاگ میکند var connection = $.hubConnection(); connection.url = 'http://localhost:1072/signalr'; //چون در یک پروژه دیگر قرار داریم var proxy = connection.createHubProxy('chat'); proxy.on('hello', function (message) { //متدی که در اینجا تعریف شده دقیقا مطابق نام متد پویایی است که در هاب تعریف شده است //به این ترتیب سرور میتواند کلاینت را فراخوانی کند $("#messages").append("<li>" + message + "</li>"); }); $("#send").click(function () { // Hub's `SendMessage` should be camel case here proxy.invoke('sendMessage', $("#txtMsg").val()); }); connection.start(); }); </script> </body> </html>
PM> Install-Package Microsoft.AspNet.SignalR.Client
using System; using Microsoft.AspNet.SignalR.Client.Hubs; namespace SignalR02.WinClient { class Program { static void Main(string[] args) { var hubConnection = new HubConnection(url: "http://localhost:1072/signalr"); var chat = hubConnection.CreateHubProxy(hubName: "chat"); chat.On<string>("hello", msg => { Console.WriteLine(msg); }); hubConnection.Start().Wait(); chat.Invoke<string>("sendMessage", "Hello!"); Console.WriteLine("Press a key to terminate the client..."); Console.Read(); } } }
npm update -g
ng new MaterialAngularClient --routing
cd MaterialAngularClient ng serve -o
ng add @angular/material
npm install --save @angular/material @angular/cdk npm install --save @angular/animations npm install --save hammerjs
import "hammerjs";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, AppRoutingModule ] }) export class AppModule { }
import { CommonModule } from "@angular/common"; import { NgModule, Optional, SkipSelf } from "@angular/core"; import { RouterModule } from "@angular/router"; @NgModule({ imports: [CommonModule, RouterModule], exports: [ // components that are used in app.component.ts will be listed here. ], declarations: [ // components that are used in app.component.ts will be listed here. ], providers: [ /* ``No`` global singleton services of the whole app should be listed here anymore! Since they'll be already provided in AppModule using the `tree-shakable providers` of Angular 6.x+ (providedIn: 'root'). This new feature allows cleaning up the providers section from the CoreModule. But if you want to provide something with an InjectionToken other that its class, you still have to use this section. */ ] }) export class CoreModule { constructor(@Optional() @SkipSelf() core: CoreModule) { if (core) { throw new Error("CoreModule should be imported ONLY in AppModule."); } } }
import { CommonModule } from "@angular/common"; import { HttpClientModule } from "@angular/common/http"; import { ModuleWithProviders, NgModule } from "@angular/core"; import { FormsModule } from "@angular/forms"; @NgModule({ imports: [ CommonModule, FormsModule, HttpClientModule ], entryComponents: [ // All components about to be loaded "dynamically" need to be declared in the entryComponents section. ], declarations: [ // common and shared components/directives/pipes between more than one module and components will be listed here. ], exports: [ // common and shared components/directives/pipes between more than one module and components will be listed here. CommonModule, FormsModule, HttpClientModule, ] /* No providers here! Since they’ll be already provided in AppModule. */ }) export class SharedModule { static forRoot(): ModuleWithProviders { // Forcing the whole app to use the returned providers from the AppModule only. return { ngModule: SharedModule, providers: [ /* All of your services here. It will hold the services needed by `itself`. */] }; } }
import { CoreModule } from "./core/core.module"; import { SharedModule } from "./shared/shared.module"; @NgModule({ imports: [ BrowserModule, BrowserAnimationsModule, CoreModule, SharedModule.forRoot(), AppRoutingModule ] }) export class AppModule { }
import { CdkTableModule } from "@angular/cdk/table"; import { NgModule } from "@angular/core"; import { MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatSortModule, MatStepperModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, } from "@angular/material"; @NgModule({ imports: [ MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatFormFieldModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatStepperModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, CdkTableModule ], exports: [ MatAutocompleteModule, MatButtonModule, MatButtonToggleModule, MatCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, MatDialogModule, MatExpansionModule, MatGridListModule, MatIconModule, MatInputModule, MatListModule, MatMenuModule, MatNativeDateModule, MatPaginatorModule, MatProgressBarModule, MatProgressSpinnerModule, MatRadioModule, MatRippleModule, MatSelectModule, MatSidenavModule, MatSliderModule, MatSlideToggleModule, MatSnackBarModule, MatStepperModule, MatSortModule, MatTableModule, MatTabsModule, MatToolbarModule, MatTooltipModule, CdkTableModule ] }) export class MaterialModule { }
import { MaterialModule } from "./material.module"; @NgModule({ imports: [ CommonModule, FormsModule, HttpClientModule, MaterialModule ], exports: [ // common and shared components/directives/pipes between more than one module and components will be listed here. CommonModule, FormsModule, HttpClientModule, MaterialModule ] }) export class SharedModule { }
<button mat-button>Click me!</button>
<mat-checkbox>Check me!</mat-checkbox>
@import "~@angular/material/prebuilt-themes/indigo-pink.css";
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<button mat-button> <mat-icon>face</mat-icon> Click me! </button> <mat-checkbox>Check me!</mat-checkbox>
npm install material-design-icons --save
"styles": [ "node_modules/material-design-icons/iconfont/material-icons.css", "src/styles.css" ],
namespace EmberJS02.Models { public class User { public int Id { set; get; } public string UserName { set; get; } public string Email { set; get; } } }
using System.Collections.Generic; using System.Web.Http; using EmberJS02.Models; namespace EmberJS02.Controllers { public class UsersController : ApiController { // GET api/<controller> public IEnumerable<User> Get() { return UsersDataSource.UsersList; } } }
using System; using System.Web.Http; using System.Web.Routing; namespace EmberJS02 { public class Global : System.Web.HttpApplication { protected void Application_Start(object sender, EventArgs e) { RouteTable.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{id}", defaults: new { id = RouteParameter.Optional } ); } } }
PM> Install-Package EmberJS
App = Ember.Application.create(); App.IndexRoute = Ember.Route.extend({ setupController:function(controller) { controller.set('content', ['red', 'yellow', 'blue']); } });
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script> <script src="Scripts/handlebars.js" type="text/javascript"></script> <script src="Scripts/ember.js" type="text/javascript"></script> <script src="Scripts/app.js" type="text/javascript"></script> </head> <body> <script type="text/x-handlebars" data-template-name="application"> <h1>Header</h1> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="index"> Hello, <strong>Welcome to Ember.js</strong>! <ul> {{#each item in content}} <li> {{item}} </li> {{/each}} </ul> </script> </body> </html>
App.Router.map(function() { this.resource('about'); });
<script type="text/x-handlebars" data-template-name="about"> <h2>Our about page</h2> </script>
<script type="text/x-handlebars" data-template-name="application"> <h1>Ember Demo App</h1> <ul class="nav"> <li>{{#linkTo 'index'}}Home{{/linkTo}}</li> <li>{{#linkTo 'about'}}About{{/linkTo}}</li> </ul> {{outlet}} </script>
App.Router.map(function() { this.resource('about'); this.resource('users'); });
App.UsersLink = Ember.Object.extend({}); App.UsersLink.reopenClass({ findAll: function () { var users = []; $.getJSON('/api/users').then(function(response) { response.forEach(function(item) { users.pushObject(App.UsersLink.create(item)); }); }); return users; } });
App.UsersRoute = Ember.Route.extend({ model: function() { return App.UsersLink.findAll(); } }); App.UsersController = Ember.ObjectController.extend({ customHeader : 'Our Users List' });
<script type="text/x-handlebars" data-template-name="users"> <h2>{{customHeader}}</h2> <ul> {{#each item in model}} <li> {{item.Id}}-{{item.UserName}} ({{item.Email}}) </li> {{/each}} </ul> </script>
using System;
using System.IO;
namespace NHibernate.Helper.DbSpecific
{
public class SqlCEDbHelper
{
const string engineTypeName = "System.Data.SqlServerCe.SqlCeEngine, System.Data.SqlServerCe";
/// <summary>
/// note: this method will delete existing db and then creates a new one.
/// </summary>
/// <param name="filename"></param>
/// <param name="password"></param>
public static void CreateEmptyDatabaseFile(string filename, string password = "")
{
if (File.Exists(filename))
File.Delete(filename);
var type = System.Type.GetType(engineTypeName);
var localConnectionString = type.GetProperty("LocalConnectionString");
var createDatabase = type.GetMethod("CreateDatabase");
var engine = Activator.CreateInstance(type);
string connectionStr = string.Format("Data Source='{0}';Password={1};Encrypt Database=True", filename, password);
if (string.IsNullOrWhiteSpace(password))
connectionStr = string.Format("Data Source='{0}'", filename);
localConnectionString.SetValue(
obj: engine,
value: connectionStr,
index: null);
createDatabase.Invoke(engine, new object[0]);
}
/// <summary>
/// use this method to compact or encrypt existing db or decrypt it to a new db with all records
/// </summary>
/// <param name="sourceConnection"></param>
/// <param name="destConnection"></param>
public static void CompactDatabase(string sourceConnection, string destConnection)
{
var type = System.Type.GetType(engineTypeName);
var engine = Activator.CreateInstance(type);
var localConnectionString = type.GetProperty("LocalConnectionString");
localConnectionString.SetValue(
obj: engine,
value: sourceConnection,
index: null);
var compactDatabase = type.GetMethod("Compact");
compactDatabase.Invoke(engine, new object[] { destConnection });
}
}
}
Data Source=c:\path\db.sdf;Password=1234;Encrypt Database=True
private Configuration getConfig()
{
var configure = new Configuration();
configure.SessionFactoryName("BuildIt");
configure.DataBaseIntegration(db =>
{
db.ConnectionProvider<DriverConnectionProvider>();
db.Dialect<MsSqlCe40Dialect>();
db.Driver<SqlServerCeDriver>();
db.KeywordsAutoImport = Hbm2DDLKeyWords.AutoQuote;
db.IsolationLevel = IsolationLevel.ReadCommitted;
db.ConnectionString = ConnectionString;
db.Timeout = 10;
//for testing ...
db.LogFormattedSql = true;
db.LogSqlInConsole = true;
});
return configure;
}
@page "/LearnRouting" <h3>Learn Routing</h3>
<li class="nav-item px-3"> <NavLink class="nav-link" href="LearnRouting"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Routing </NavLink> </li>
@page "/LearnRouting" @page "/NewRouting" <h3>Learn Routing</h3>
@page "/LearnRouting" @page "/NewRouting" @page "/LearnRouting/{parameter1}" @page "/LearnRouting/{parameter1}/{parameter2}" <h3>Learn Routing</h3> <p>Parameter1: @Parameter1</p> <p>Parameter2: @Parameter2</p> @code { [Parameter] public string Parameter1 { set; get; } [Parameter] public string Parameter2 { set; get; } }
@page "/LearnAdvancedRouting" <h3>Learn Advanced Routing</h3>
<NavLink class="btn btn-secondary" href="LearnAdvancedRouting"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Advanced Routing </NavLink>
<NavLink class="btn btn-secondary" href="LearnAdvancedRouting?param1=value1¶m2=value2"> <span class="oi oi-list-rich" aria-hidden="true"></span> Learn Advanced Routing </NavLink>
@page "/LearnAdvancedRouting" @inject NavigationManager NavigationManager <h3>Learn Advanced Routing</h3> <h4>Parameter 1 : @Param1</h4> <h4>Parameter 2 : @Param2</h4> @code { string Param1; string Param2; protected override void OnInitialized() { base.OnInitialized(); var absoluteUri = new Uri(NavigationManager.Uri); var queryParam = System.Web.HttpUtility.ParseQueryString(absoluteUri.Query); Param1 = queryParam["Param1"]; Param2 = queryParam["Param2"]; } }
@page "/LearnAdvancedRouting" @inject NavigationManager NavigationManager @*<NavLink href="/learnrouting" class="btn btn-secondary">Back to Routing</NavLink>*@ @*<a href="/learnrouting" class="btn btn-secondary">Back to Routing</a>*@ <button class="btn btn-secondary" @onclick="BackToRouting">Back to Routing</button> @code { private void BackToRouting() { NavigationManager.NavigateTo("learnrouting"); } }
<h1>News</h1> <div>Welcome to our site!</div> <h2>World</h2> <h3>Title 1</h3> <div>description 1.</div> <h2>Science</h2> <h3>Title 2</h3> <div>description 2.</div>
var headings = document.querySelectorAll('h2, h3'); for (var i = 0; i < headings.length; i++) { if (headings[i].tagName === 'H2') { headings[i].style.color = 'blue'; } else { headings[i].style.color = 'green'; } }
<h2 style="color: blue">….</h2> <h3 style="color: green">….</h3>
<h2>World</h2> ... <h2>Science</h2> <script> var headings = document.querySelectorAll('h2'); for (var i = 0; i < headings.length; i++) { headings[i].style.color = 'blue'; headings[i].style.fontWeight = 'bold'; } </script>
headings[i].style['font-weight'] = 'bold';
var headings = document.querySelectorAll('h2'); for (var i = 0; i < headings.length; i++) { headings[i].style.cssText = 'color: blue; font-weight: bold'; }
h2 { color: blue; } h3 { color: green; }
<link href="styles.css" rel="style sheet">
<style> h2 { color: blue; } h3 { color: green; } </style>
var sheet = document.styleSheets[0]; sheet.insertRule('h2 { font-style: italic; }', sheet.cssRules.length - 1);
// hide an element $element.hide(); // show it again $element.show();
element.setAttribute('hidden', '');
element.removeAttribute('hidden');
<style> .box { padding: 10px; margin: 5px; border: 3px solid; display: inline-block; } </style> <span class="box">a box</span>
// returns 38 var clientHeight = document.querySelector('.box').clientHeight; // returns 55 var clientWidth = document.querySelector('.box').clientWidth;
// returns 44 var offsetHeight = document.querySelector('.box').offsetHeight; // returns 61 var offsetWidth = document.querySelector('.box').offsetWidth;
DocerMaster : OS : CentOS7 IP: 192.168.64.3 DockerWorker: OS: CentOS7 IP: 192.168.64.4
sudo yum install docker
$ sudo service docker start $ sudo systemctl start docker.service
firewall-cmd --permanent --add-port=2376/tcp firewall-cmd --permanent --add-port=2377/tcp firewall-cmd --permanent --add-port=7946/tcp firewall-cmd --permanent --add-port=7946/udp firewall-cmd --permanent --add-port=4789/udp firewall-cmd --permanent --add-port=80/tcp firewall-cmd --reload
systemctl restart docker
~]# firewall-cmd --permanent --add-port=2376/tcp ~]# firewall-cmd --permanent --add-port=7946/tcp ~]# firewall-cmd --permanent --add-port=7946/udp ~]# firewall-cmd --permanent --add-port=4789/udp ~]# firewall-cmd --permanent --add-port=80/tcp ~]# firewall-cmd --reload ~]# systemctl restart docker
sudo docker swarm init –advertise-addr 192.168.64.3
همانطور که مشاهده میکنید، پس از راه اندازی، اعلانی مبنی بر اینکه این نود به عنوان Manager شناخته شده و اینکه برای اضافه کردن یک نود Worker چه دستوری را باید اجرا کرد، نمایش داده شدهاست.
اکنون کافیاست این خط کد را در نود Worker کپی کنیم:
بعد از موفقیت آمیز بودن اجرای آن، میتوانید در کامپیوتر Master، با دستور زیر تمام نودها را مشاهده کنید:
$ sudo docker node ls
همانطور که مشاهده میکنید، دو نود وجود دارد که یکی به عنوان Leader شناخته میشود. هر زمانی که نیاز بود، میشود به راحتی یک Worker دیگر را اضافه کرد.
برای راه اندازی یک کانتینر، swarm از CLI کاملی برخوردار هست؛ اما مایلم اینجا از یک ابزار خوب، برای مدیریت Swarm استفاده کنم. Portainer به عنوان یه ابزار عالی برای مدیریت Imageها و Containerهای داکر محسوب میشود که کاملا swarm را پشتیبانی میکند.
برای راه اندازی portainer کافی است کد زیر را در سیستم Master اجرا کنید:
$ docker volume create portainer_data $ docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/data portainer/portainer
البته به دلیل عدم دسترسی به داکر هاب از کشور ایران، عملا امکان pull کردن این image، مستقیما از داکر هاب و بدون وی پی ان وجود ندارد.
بعد از موفقیت آمیز بودن راه اندازی portainer میتوانید از طریق آدرس http://192.168.64.3:9000 به آن دسترسی داشته باشید. در اولین ورود، پسورد ادمین را تنظیم میکنید و بعد از وارد شدن، صفحهای مطابق شکل زیر را خواهید دید:
اگر بر روی منوی swarm کلیک کنید، همهی نودها را مشاهده خواهید کرد و در صورتیکه بر روی Containers کلیک کنید، همهی Container هایی را که بر روی این سرور وجود دارند، خواهید دید. مهمترین قسمت، بخش Service هاست که مشخصات Container هایی که روی swarm توزیع شدن را نشان میدهد و همینطور تعداد Container هایی از این image که Scale شدند. همینطور که میبینید فعلا فقط همین Portainer در حال اجراست.
اجازه دهید یک مثال کاربردیتر بزنیم و یک سرویس را ایجاد کنیم.
من بر روی کامپیوتر شخصیام و نه سرورها، با دستور زیر یک پروژهی MVC را با دات نت Core ایجاد میکنم:
dotnet new mvc
و سپس دستور dotnet publish را اجرا میکنم و به پوشهای که محتویات پابلیش شده در آن قرار دارند رفته و یک فایل بدون پسوند را به نام dockerfile ایجاد میکنم و متن زیر را در آن مینویسم:
همینطور که میبینید من از image مخصوص اجرای دات نت Core در این container استفاده میکنم. پوشهی کانتینر را تنظیم میکنم و همهی فایلهایی که در پوشهی جاری سیستم خودم وجود دارند را به پوشهی جاری کانتینر منتقل میکنم و سپس دستور دات نت را با پارامتر اسم dll پروژهام اجرا میکنم. این کل محتویات فایل داکر من هست.
ترمینال را در همین پوشهی publish باز میکنم و دستور زیر را اجرا میکنم:
docker build –t swarmtest:dev .
docker save swarmtest:dev –o swarmtest.tar
طبق شکل زیر یک فایل tar که حاوی image برنامه من هست، ایجاد شد:
حالا با دستور زیر این فایل رو به سرور Master منتقل میکنم:
scp –r swarmtest.tar root@192.168.64.3:/srv/images
همانطور که میبینید، فایل tar به پوشهای که قبلا در سرور ایجاد کردم، منتقل شد.
حالا به سرور و پوشهای که فایل tar آنجا قرار دارد رفته و با دستور زیر این image را بر روی سیستم load میکنم:
sudo docker load –i swarmtest.tar
همانطور که در تصویر میبینید، بعد از load شدن، image مورد نظرمان به داکر اضافه شدهاست.
حالا برای اجرا کردن این سرویس بر روی swarm، آدرس portainer را باز میکنیم و به قسمت services میرویم و بر روی دکمهی add service کلیک میکنیم:
در قسمت نام، نام سرویس و در قسمت imageConfiguration از منوی imageها، ایمیجی را که ایجاد کردیم، انتخاب میکنیم. در قسمت Replicas تعداد instanceهای container ای را که میخواهیم از روی image ایجاد شوند، مشخص میکنیم. (این قسمت را بر روی هر وضعیتی میتوانیم قرار دهیم و زیاد و کم کنیم) و در قسمت port mapping، پورت درون Container و پورتی را که میخواهیم بر روی هاست به نمایش درآید، وارد میکنیم.
همانطور که میبینید من به راحتی میتوانم تعداد Containerها را Scale کنم و نگرانیای بابت load balancing و اینکه کدام container بر روی کدوم سرور ایجاد میشود، نخواهم داشت.
برای نمایش برنامه کافی است پورتی را که برای هاست وارد کردیم، با آی پی Master وارد کنیم:
npm install moment-jalaali --save
node_modules/moment/min/moment.min.js node_modules/moment-jalaali/build/moment-jalaali.js
Install-Package MD.BootstrapPersianDateTimePicker
<link href="~/css/site.min.css" rel="stylesheet" asp-append-version="true" /> <script src="~/js/site.min.js" type="text/javascript" asp-append-version="true"></script>
{ field: "addDate", title: "تاریخ ثبت", template: "#=moment(addDate).format('jYYYY/jMM/jDD')#",
editor: function(container, options) { }
// دریافت تاریخ میلادی و تبدیل آن به شمسی جهت نمایش در تکست باکس var persianAddDate = moment(options.model.addDate).format('jYYYY/jMM/jDD'); // ایجاد کنترل انتخاب تاریخ سفارشی با مقدار تاریخ شمسی دریف جاری var input = $('<div dir="ltr" class="input-group">'+ '<div class="input-group-addon" data-name="datepicker1" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#' + options.field + '" data-fromdate="false" data-enabletimepicker="false" data-englishnumber="true" data-placement="left">'+ '<span class="glyphicon glyphicon-calendar"></span>'+ '</div>'+ '<input type="text" value="'+ persianAddDate +'" class="form-control" id="' + options.field + '" placeholder="از تاریخ" data-mddatetimepicker="true" data-trigger="click" data-targetselector="#' + options.field + '" data-englishnumber="true" data-fromdate="true" data-enabletimepicker="false" data-placement="right" />'+ '</div>'); // افزودن کنترل جدید به صفحه input.appendTo(container);
// با خبر سازی کتابخانه انتخاب تاریخ از تکست باکس جدید EnableMdDateTimePickers();
// هر زمانیکه کاربر تاریخ جدیدی را وارد کرد، آنرا به میلادی تبدیل کرده و در مدل ردیف جاری ثبت میکنیم // در نهایت این مقدار میلادی است که به سمت سرور ارسال خواهد شد $('#' + options.field).change(function(){ var selectedPersianDate = $(this)[0].value; var gregorianAddDate = moment(selectedPersianDate, 'jYYYY/jMM/jDD').format('YYYY-MM-DD'); options.model.set('addDate', gregorianAddDate); });
// با از دست رفتن فوکوس نیاز است این کنترل مخفی شود $('#' + options.field).blur(function(){ $('[data-name="datepicker1"]').MdPersianDateTimePicker('hide'); });
CACHE MANIFEST #Cache Section CACHE: /Content/Images/icons-18-white.png /Content/Images/icons-36-white.png /Content/Images/ajax-loader.png /Content/css /Scripts/js
NETWORK webService.Js
CACHE MANIFEST # 2010-06-18:v2 # Explicitly cached 'master entries'. CACHE: /favicon.ico index.html css images/ stylesheet .logo.png scripts/main.js # Resources that require the user to be online. NETWORK: login.php /myapi http://api.twitter.com
AddType text/cache-manifest .appcache
using System.Web; namespace JavaScriptReference { public class Manifest : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/cache-manifest"; context.Response.WriteFile(context.Server.MapPath("Manifest.txt")); } public bool IsReusable { get { return false; } } } }
CACHE MANIFEST # Version Jesus 3! CACHE: index.html js/Custom.js js/Utility.js styles/index.css styles/kendo.common.min.css styles/BlueOpal/loading.gif styles/BlueOpal/slider-h.gif styles/BlueOpal/slider-v.gif NETWORK: * <%@ Page Language="VB" ContentType="text/cache-manifest" ResponseEncoding="utf-8" AutoEventWireup="true" CodeFile="manifest.aspx.vb" Inherits="Configuration_manifest" %>
<!DOCTYPE html> <html manifest="/manifest.aspx">