Preface

TypeScript  It's a kind of Microsoft Developed free and Open source Programming language . It is JavaScript A superset of , And it essentially adds optional static and class based types to the language object-oriented programming . Anders · hejlsberg , C# Chief architect of , Have worked in TypeScript Development of .TypeScript Expanded JavaScript Syntax of , So any existing JavaScript The program can be in TypeScript Work under the .TypeScript It is designed for the development of large-scale applications , When compiled, it produces JavaScript To ensure compatibility .TypeScript Support for existing JavaScript Library add type information header file , Extended it for popular libraries such as   jQuery, MongoDB, Node.js and D3.js The benefits of .
 
TypeScript Official address of : http://www.typescriptlang.org/

actual combat

1. Defining entity classes

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web; namespace TypeScriptMvc.Models
{
public class TaskDetails
{
public int Id { get; set; }
public string Title { get; set; }
public string Details { get; set; }
public DateTime Starts { get; set; }
public DateTime Ends { get; set; }
}
}

2. controller (Controller) Code

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TypeScriptMvc.Models; namespace TypeScriptMvc.Controllers
{
public class HomeController : Controller
{ public ActionResult Tasks()
{
List<TaskDetails> tasks = new List<TaskDetails>();
for (int i = ; i < ; i++)
{
TaskDetails newTask = new TaskDetails
{
Id = i,
Title = "Task " + (i + ),
Details = "Task Details " + (i + ),
Starts = DateTime.Now,
Ends = DateTime.Now.AddDays(i + )
};
tasks.Add(newTask);
}
return View(tasks);
} }
}

Here it's just a loop generation 10 strip TaskDetails Record , And use it as Model Pass to View.

3. View.cshtml Code

@model IEnumerable<TypeScriptMvc.Models.TaskDetails>
<p>
@Html.ActionLink("Create New", "Create")
<input type="hidden" id="serverJSON" value="@Newtonsoft.Json.JsonConvert.SerializeObject(Model)" />
</p>
<table class="table">
<tr>
<th>
Title
</th>
<th>
Details
</th>
<th>
Starts
</th>
<th>
Ends
</th>
<th></th>
</tr>
<tbody data-bind="foreach: tasks">
<tr>
<td data-bind="text: title"></td>
<td data-bind="text: details"></td>
<td data-bind="text: starts"></td>
<td data-bind="text: ends"></td>
<td></td>
</tr>
</tbody>
</table> @section Scripts{
<script src="~/Scripts/knockout-2.3.0.js"></script>
<script src="~/Scripts/moment.min.js"></script>
<script src="~/Scripts/typescript-list.js"></script>
}

First , We see JSON Serialized Controller From here Model, Then I used a HTML Hidden To preserve . And then use  Knockout JS The grammar of ( Please note that <tbody> Medium data-bind) To present data , that   Knockout JS Where does the data source come from ? Let's move on . We see a quote at the bottom typescript-list.js , Go in and have a look .PS:typescript-list.js This JS The document is not a third party Javascript library , It can be changed into aaa.js . The other 2 individual JS file (knockout-2.3.0.js and moment.min.js) It's a third-party library .

4. Get into  typescript-list.js

find typescript-list.js file

///<reference path="typings/jquery/jquery.d.ts" />
///<reference path="typings/knockout/knockout.d.ts" />
var TaskDetails = (function () {
function TaskDetails(id, title, details, starts, ends) {
this.id = ko.observable(id);
this.title = ko.observable(title);
this.details = ko.observable(details);
this.starts = ko.observable(moment(starts).format("MMM DD, YYYY h:mm:ss a"));
this.ends = ko.observable(moment(ends).format("MMM DD, YYYY h:mm:ss a"));
}
return TaskDetails;
})(); var TaskViewModel = (function () {
function TaskViewModel() {
this.tasks = ko.observableArray([]);
}
return TaskViewModel;
})(); $(document).ready(function () {
var serverData;
serverData = JSON.parse($("#serverJSON").val());
var vm;
var i;
vm = new TaskViewModel();
for (i = 0; i < serverData.length; i++) {
var serverTask;
serverTask = serverData[i];
vm.tasks.push(new TaskDetails(serverTask.Id, serverTask.Title, serverTask.Details, serverTask.Starts, serverTask.Ends));
}
ko.applyBindings(vm);
});
//# sourceMappingURL=typescript-list.js.map

according to TypeScript The background of , I guess this js Files are generated dynamically after compilation , Language is TypeScript. Sure enough , In the catalog /Scripts Next , I have found the typescript-list.ts. The extension is ts, That is to say TypeScript Of 2 The first letter of a word . I also noticed that there was another typescript-list.js.map file , I guess it's also caused by TypeScript Dynamically generated , So let's go into  typescript-list.ts Take a look .

typescript-list.js.map The contents are as follows :

{
"version":3,
"file":"typescript-list.js",
"sourceRoot":"",
"sources":["typescript-list.ts"],
"names":["TaskDetails","TaskDetails.constructor","TaskViewModel","TaskViewModel.constructor",""],
"mappings":"AAAA,kDAAkD;AAClD,sDAAsD;AAEtD;IAOIA,qBAAYA,EAAUA,EAAEA,KAAaA,EAAEA,OAAeA,EAClDA,MAAcA,EAAEA,IAAYA;QAC5BC,IAAIA,CAACA,EAAEA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,EAAEA,CAACA,CAACA;QAC5BA,IAAIA,CAACA,KAAKA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,KAAKA,CAACA,CAACA;QAClCA,IAAIA,CAACA,OAAOA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,OAAOA,CAACA,CAACA;QACtCA,IAAIA,CAACA,MAAMA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,MAAMA,CAACA,MAAMA,CAACA,CAACA,MAAMA,CAACA,yBAAyBA,CAACA,CAACA,CAACA;QAC9EA,IAAIA,CAACA,IAAIA,GAAGA,EAAEA,CAACA,UAAUA,CAACA,MAAMA,CAACA,IAAIA,CAACA,CAACA,MAAMA,CAACA,yBAAyBA,CAACA,CAACA,CAACA;IAC9EA,CAACA;IACLD;AAACA,CAAAA,IAAA;;AAED;IAEIE;QACIC,IAAIA,CAACA,KAAKA,GAAGA,EAAEA,CAACA,eAAeA,CAACA,EAAEA,CAACA,CAACA;IACxCA,CAACA;IACLD;AAACA,CAAAA,IAAA;;AAED,CAAC,CAAC,QAAQ,CAAC,CAAC,KAAK,CAAC;IACdE,IAAIA,UAAUA,CAAQA;IACtBA,UAAUA,GAAGA,IAAIA,CAACA,KAAKA,CAACA,CAACA,CAACA,aAAaA,CAACA,CAACA,GAAGA,CAACA,CAACA,CAACA,CAACA;IAChDA,IAAIA,EAAEA,CAAgBA;IACtBA,IAAIA,CAACA,CAASA;IACdA,EAAEA,GAAGA,IAAIA,aAAaA,CAACA,CAACA,CAACA;IACzBA,KAAKA,CAACA,GAAGA,CAACA,EAAEA,CAACA,GAAGA,UAAUA,CAACA,MAAMA,EAAEA,CAACA,EAAEA,CAAEA;QACpCA,IAAIA,UAAUA,CAAMA;QACpBA,UAAUA,GAAGA,UAAUA,CAACA,CAACA,CAACA,CAACA;QAC3BA,EAAEA,CAACA,KAAKA,CAACA,IAAIA,CAACA,IAAIA,WAAWA,CAACA,UAAUA,CAACA,EAAEA,EAAEA,UAAUA,CAACA,KAAKA,EAAEA,UAAUA,CAACA,OAAOA,EAAEA,UAAUA,CAACA,MAAMA,EAAEA,UAAUA,CAACA,IAAIA,CAACA,CAACA,CAACA;KAC3HA;IACDA,EAAEA,CAACA,aAAaA,CAACA,EAAEA,CAACA,CAACA;AACzBA,CAACA,CAAC,CAAC"
}

After watching , We continue to explore .

5.  Get into  typescript-list.ts

find typescript-list.ts file .

///<reference path="typings/jquery/jquery.d.ts" />
///<reference path="typings/knockout/knockout.d.ts" /> class TaskDetails {
id: KnockoutObservable<number>;
title: KnockoutObservable<string>;
details: KnockoutObservable<string>;
starts: KnockoutObservable<string>;
ends: KnockoutObservable<string>; constructor(id: number, title: string, details: string,
starts: string, ends: string) {
this.id = ko.observable(id);
this.title = ko.observable(title);
this.details = ko.observable(details);
this.starts = ko.observable(moment(starts).format("MMM DD, YYYY h:mm:ss a"));
this.ends = ko.observable(moment(ends).format("MMM DD, YYYY h:mm:ss a"));
}
} class TaskViewModel {
public tasks: KnockoutObservableArray<TaskDetails>;
constructor() {
this.tasks = ko.observableArray([]);
}
} $(document).ready(function () {
var serverData: any[];
serverData = JSON.parse($("#serverJSON").val());
var vm: TaskViewModel;
var i: number;
vm = new TaskViewModel();
for (i = ; i < serverData.length; i++) {
var serverTask: any;
serverTask = serverData[i];
vm.tasks.push(new TaskDetails(serverTask.Id, serverTask.Title, serverTask.Details, serverTask.Starts, serverTask.Ends));
}
ko.applyBindings(vm);
});

Please pay attention to this 2 Line code :

///<reference path="typings/jquery/jquery.d.ts" />
///<reference path="typings/knockout/knockout.d.ts" />

This may be caused by TypeScript Officially provided components .

See the website :

In near static language 、 Strongly typed languages TypeScript Development is a dynamic language 、 Weakly typed languages JavaScript

The code download :https://github.com/dotnetcurry/typescript-ko-mvc

Thank you for browsing. !

A simple ASP.NET MVC Examples show how to Knockout JS With the help of , Use TypeScript . More articles about

  1. ASP.NET MVC Examples show how to Knockout JS With the help of , Use TypeScript .

    A simple ASP.NET MVC Examples show how to Knockout JS With the help of , Use TypeScript . Preface TypeScript  Is a free and open source programming language developed by Microsoft . It is JavaS ...

  2. A simple ASP.NET MVC Exception handling module

    One . Preface Exception handling is an essential part of every system , It allows our program to friendly prompt when an error occurs . Record error messages , More importantly, it does not destroy the normal data and affect the system operation . Exception handling should be a crosscutting point , The so-called crosscutting point is that all parts are ...

  3. ASP.NET MVC Verification code demonstration (Ver2)

    Previous version <ASP.NET MVC Verification code demonstration >http://www.cnblogs.com/insus/p/3622116.html,Insus.NET Still using Generic handle ...

  4. 【 problem 】Asp.net MVC Of cshtml Call in page JS Method to pass string variable parameters

    [ problem ]Asp.net MVC Of cshtml Call in page JS Method to pass string variable parameters . [ solve ] Quote variables directly , Such as : <button onclick="deleteProduct('@ ...

  5. stay ASP.Net MVC in , How to be in Global.asax Configure a point to Area Internal default Route

    ASP.Net MVC Middle configuration Route You can set a default Route. For example, I'm going to input http://localhost The default entry is http://localhost/home/index. Can be in ...

  6. Start a simple ASP.NET Web API 2 (C#)

    Create a Web API project In this tutorial , You will use ASP.NET Web API To create a web API And return to the product list . The front end of the web page uses jQuery Show results . choice ASP.NET Web Appl ...

  7. From a simple ASP.NET 5 The site opens .NET Cross platform travel

    After experiencing Alibaba cloud “ black 1 second ” After the empty joy , We “ Forced to ” Consider implementing .NET cross-platform , take Web Server by Windows Switch to Linux. And this kind of “ Forced to ” Under a long-standing wish , It's going to happen . The wish is —— “ ...

  8. ASP.NET MVC Verification code demonstration

    When we log in to a website or make a comment , You can put a captcha (Captcha), The system can be free from malicious refresh and other functions . this Insus.NET stay asp.net mvc Application implementation and demonstration of the generation and application of verification code . The day before yesterday ...

  9. ordinary ASP.NET MVC Release

    Learning so long ASP.NET MVC, But it has never been released MVC Program . Try it today . In two parts , First, the first part ,Visual Studio Of publish: Create a ASP.NET MVC: ...

Random recommendation

  1. python drawing

    Sine image : #coding:utf-8import numpy as npimport matplotlib.pyplot as pltx=np.linspace(0,10,1000)y=np.sin ...

  2. 2、 Object oriented and winform Simple application ( Four basic characteristics of object-oriented )

    Four basic characteristics of object-oriented The core concept of object-oriented is encapsulation . abstract . Inherit . The four basic characteristics of polymorphism , Let's explain their definition first : encapsulation : It's a feature of hiding information . Find the change and encapsulate it , You can do it without affecting other parts ...

  3. Android Coordinate and width height research getLeft() getTop() getRight() and getBottom()

    hold view Think of it as a rectangle , What they represent respectively is a view Left side , above , On the right , The distance below from his parent component . getRight() =getLeft() + getWidth() getBottom()= getT ...

  4. mvp(1) Introduction and its relationship with mvc difference

    Be careful : They are software architecture , It's not a design pattern On the left mvc     On the right mvp MVC and MVP The difference between ? MVP It's from the classic MVC Architecture evolved , Their basic ideas have something in common :Controller/Presenter be responsible for ...

  5. *[topcoder]LCMSetEasy

    http://community.topcoder.com/stat?c=problem_statement&pm=13040 DFS Set all permutations +LCM and GCD. But in fact , There are simpler algorithms , Listed in ...

  6. Yii2 A quick summary

    1. Project directory The following summary is based on this project directory , Be careful : This Yii2 Framework of the basic The original directory structure of the version , No changes have been made . 2. New controller and view controllers In this directory SiteControlle ...

  7. Struts2 Intercept SQL Inject

    <interceptors> <!-- Set the timeout interceptor --> <interceptor name="sessionOut" class="c ...

  8. utilize fastjson analysis json And pass js&amp;ajax Realize page refresh without jump

    1.json It's an excellent data format , In mobile development and web It's used a lot in development , In this example, a small case is used to explain how to pass alibaba Open source framework of fastjson Parsing jason Data format and through js Achieve no jump refresh 2, New one ...

  9. Coder Decompression exploration === Meditate and replenish the blue v.1.0

    What's the theme ? This is an article about my own exploration of meditation , There are some shallow gains , So write it down and share it . I don't remember why I first learned meditation , At first for me , The word has many prejudices , Such as “ very calm and without worldly passions -- said of a monk ”“ Three realms and six roads ” ...

  10. day 9 - 2 Function exercises

    1. Write function , Check to get all the odd index elements of the incoming list or tuple object , And return it as a new list to the caller . def func(lis): print(lis[1::2]) # Take even number return lis[::2 ...