ASP에 Type Script를 배치합니다.NET MVC 편입

6109 단어 TypeScriptASP.NET_MVC
이번에는 ASP.NET MVC에 Type Script를 넣어 보십시오.
환경은 Visual Studio 2015입니다.

ASP.NET MVC 샘플 만들기


먼저 파일 -> 새로 만들기 -> 프로젝트에서 프로젝트 생성 화면을 엽니다.
그리고 ASP.NET 웹 응용 프로그램을 선택합니다.

이번에는 Empty와 MVC를 선택했다.

빈 MVC인 만큼 구성은 이런 느낌이다.

하늘에는 아무것도 없다.cs를 추가합니다.
HomeController.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace TypeScriptSample.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }
    }
}
Views/Home 에 대응하는 View 를 추가하십시오.
Index.html
<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <label>Sample page</label>
</body>
</html>
이렇게 해결 방안을 실행하면 다음과 같은 화면이 나타날 것이다.

TypeScript 불러오기


방금 제작한 샘플에 타입 스크립트를 넣어 보세요.
먼저 솔루션을 마우스 오른쪽 버튼으로 클릭하여 TypeScript를 배치할 새 폴더를 만듭니다.
폴더 이름은 상관없습니다.
추가된 폴더를 마우스 오른쪽 버튼으로 클릭하여 추가 ->TypeScript 파일로 TypeScript 파일을 만듭니다.
app.ts
class Person {
    private name: string;
    public getName(): string {
        return this.name;
    }
    constructor(name: string) {
        this.name = name;
    }
}

window.onload = function () {
    const p = new Person("Hoge");
    alert(p.getName());
}
해결 방안을 구축하면 js로 전송됩니다.

화면 응용.js에 대한 참고를 추가하세요.
Index.html
<!DOCTYPE html>

<html>
<head>        
    <script src="~/ts/app.js"></script>
    <meta name="viewport" content="width=device-width" />
    <title></title>
</head>
<body>
    <label>Sample page</label>
</body>
</html>
준비됐습니다.
프로젝트를 실행한 후 다음 화면이 나타날 것입니다.

지금까지 Type Script의 ASP였습니다.NET MVC에 가입한 거예요.

좋은 웹페이지 즐겨찾기