ASP.Net Core 3.0 MVC 프로젝트에서 Material Design Compoent를 사용하는 방법에 대해 알아봅니다.

기본적인 솔루션 및 패키지 구성은 이 글을 참고해 주세요.

 

 

 

1. package.json 수정

 

Material degisn을 사용하기 위해 NPM에서 "material-components-web"을 설치해야 합니다.

pakckage.json의 내용을 다음과 같이 변경합니다.

{
  "version": "1.0.0",
  "name": "asp.net",
  "private": true,
  "devDependencies": {
    "gulp": "4.0.2",
    "del": "5.1.0",
    "material-components-web": "4.0.0"
  }
}

이후 package.json 파일을 우클릭 후 패키지 복원을 클릭해 주세요.

 

 

 

2. css 생성

 

MDC을 사용할 CSS파일을 만듭니다.

 

"Styles"폴더를 생성하고 그 안에 "Home.css"파일을 생성한 후 다음과 같이 코딩합니다.

@import "../node_modules/material-components-web/dist/material-components-web.css";
body {
    margin: 0px;
}

 

 

 

3. gulpfile.js 수정

 

설치한 MDCWeb 패키지와 생성한 CSS파일을 빌드시 wwwroot 폴더로 복사해주는 코드를 작성합니다.

 

gulp.file.js를 다음과 같이 수정합니다.

/// <binding AfterBuild='default' Clean='clean' />
var gulp = require('gulp');
var del = require('del');
var paths = {
    scripts: ['scripts/**/*.js'],
    styles: ['styles/**/*'],
    MDCWeb: ['./node_modules/material-components-web/**/*'],
};
gulp.task('clean', function () {
    return del(['wwwroot/scripts/**/*', 'wwwroot/node_modules/**/*']);
});
gulp.task('default', function () {
    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'));
    gulp.src(paths.styles).pipe(gulp.dest('wwwroot/styles'));
    gulp.src(paths.MDCWeb).pipe(gulp.dest('wwwroot/node_modules/material-components-web'));
});

 

 

 

4. 페이지 수정.

 

예시에서는 기본 페이지를 사용합니다.

 

index.cshtml을 다음과 같이 수정합니다.

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="~/styles/home.css">
    <title>Index</title>
</head>
<body>
    <header class=" mdc-top-app-bar">
        <div class="mdc-top-app-bar__row">
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
                <button class="mdc-icon-button material-icons mdc-top-app-bar__navigation-icon--unbounded">menu</button><span class="mdc-top-app-bar__title">San Francisco, CA</span>
            </section>
            <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end">
                <button class="mdc-icon-button material-icons mdc-top-app-bar__action-item--unbounded" aria-label="Download">file_download</button>
                <button class="mdc-icon-button material-icons mdc-top-app-bar__action-item--unbounded" aria-label="Print this page">print</button>
                <button class="mdc-icon-button material-icons mdc-top-app-bar__action-item--unbounded" aria-label="Bookmark this page">bookmark</button>
            </section>
        </div>
    </header>
    <script src="~/scripts/home.js"></script>
</body>
</html>

 

 

 

 

5. 빌드

 

이제 빌드 후 실행해봅시다.

 

다음과 같은 화면을 확인할 수 있습니다.

 

 

 

 

 

ASP.NET Core에서 TypeScript 사용하기

 

ASP.NET Core를 사용하는 솔루션에서 TypeScript를 사용하는 방법에 대해 알아봅니다.

 

 

 

0. 솔루션 및 프로젝트 생성.

 

TypeScript를 사용할 솔루션 및 프로젝트를 생성합니다.

예시에 사용된 솔루션은 ASP.Net Core 3.0을 사용하였으며 ASP.Net Core 웹 응용 프로그램 프로젝트중 웹 응용프로그램(Razor)을 사용하였습니다.

 

 

 

1. NuGet 패키지 설치

 

"프로젝트 -> NuGet 패키지 관리자"를 클릭해 NuGet 패키지 관리자를 엽니다.

 

"StaticFiles"와 "TypeScript.MsBuild"를 검색해 설치합니다.

 

 

 

 

2. Node.js 설치

 

TypeScript를 빌드하기 위해 gulp를 사용합니다. 여기에서 Nodejs를 설치하세요.

 

 

 

 

3. 외부 웹 도구 설정 변경.

 

PATH 환경 변수에서 npm을 찾도록 Visual Studio를 구성합니다. 기본적으로 Visual Studio는 설치 디렉터리에 있는 npm의 버전을 사용합니다.

 

도구 > 옵션 > 프로젝트 및 솔루션 > 웹 패키지 관리 > 외부 웹 도구로 이동한 후 목록에서 $(PATH) 항목을 선택합니다. 위쪽 화살표를 클릭하여 이 항목을 목록의 두 번째 위치로 이동합니다.

 

 

 

 

4. ts 파일 생성.

 

다음과 같이 프로젝트에 "scripts" 폴더를 추가한 후 "app.ts" 파일을 생성합니다.

 

그리고 다음과 같이 코딩합니다.

 

function sayHello() { 
    const compiler = (document.getElementById("compiler") as HTMLInputElement).value; 
    const framework = (document.getElementById("framework") as HTMLInputElement).value; 
    return `Hello from ${compiler} and ${framework}!`; 
}

 

 

 

5. TypeScript 구성 파일 생성.

 

이제 TypeScript 컴파일러 구성 파일을 생성합니다. "script" 폴더 내에 "tsconfig.json" 파일을 생성합니다.

 

새 항목 추가를 이용해 "TypeScript JSON 구성 파일"을 선택해서 생성하면 기본 설정을 자동으로 입력해 줍니다.

 

"tsconfig.json"의 설정을 다음과 같이 수정합니다.

 

{ 
  "compilerOptions": { 
    "noImplicitAny": true, 
    "noEmitOnError": true, 
    "removeComments": true, 
    "sourceMap": true, 
    "target": "es6" 
  }, 
  "exclude": [ 
    "wwwroot" 
  ], 
  "files": [ 
    "./app.ts" 
  ], 
  "compileOnSave": true 
} 

 

 

6. NPM 패키지 설치

 

이제 TypeScript 컴파일을 위한 npm 패키지를 설치해야 합니다.

 

프로젝트에 "package.json" 파일을 추가합니다. 새 항목 추가를 이용해 "NPM 구성 파일"을 선택해서 생성하면 기본 설정을 자동으로 입력해 줍니다.

 

"package.json"파일을 다음과 같이 수정해줍니다.

 

{ 
  "version": "1.0.0", 
  "name": "asp.net", 
  "private": true, 
  "devDependencies": { 
    "gulp": "4.0.2", 
    "del": "5.1.0" 
  } 
}

 

** "package.json" 파일을 수동으로 만들지 않고 npm cmd를 이용해서 생성해주셔도 됩니다.

 

수정이 끝났다면 "package.json" 파일을 우클릭 해 "패키지 복원"을 클릭합니다.

 

복원이 완료되면 프로젝트의 종속성에서 추가한 "del" 및 "gulp"를 확인할 수 있습니다.

 

 

 

 

 

 

 

7. gulp 설정

 

이제 설치한 gulp가 TypeScript를 빌드하도록 일을 시켜야 합니다.

 

프로젝트에 "gulpfile.js"를 추가한 후 다음과 같이 코딩합니다.

 

/// <binding AfterBuild='default' Clean='clean' />
var gulp = require('gulp');
var del = require('del');
var paths = {
    scripts: ['scripts/**/*.js', 'scripts/**/*.ts', 'scripts/**/*.map'],
};
gulp.task('clean', function () {
    return del(['wwwroot/scripts/**/*']);
});
gulp.task('default', function () {
    gulp.src(paths.scripts).pipe(gulp.dest('wwwroot/scripts'));
});

 

수정이 끝났다면 "gulpfile.js" 파일을 우클릭 해 "작업 러너 탐색기"를 클릭합니다.

 

 

 

 

 

 

 

 

 

 

정상적으로 적용되었다면 좌측 화면과 같은 내용이 보입니다.

만약 반영이 안 되었다면 하늘색 화살표를 눌러 새로고침을 해주세요.

 

 

 

 

 

 

 

 

 

8. HTML 작성

 

"Pages -> index.cshtml"파일을 수정합니다.

 

<div class="text-center">
    <h1 class="display-4">Welcome</h1>
    <div id="message"></div>
    <div>
        Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
        Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
    </div>
</div>
<script src="~/scripts/app.js"></script>

 

 

 

9. 빌드 및 결과 확인.

 

이제 빌드 및 디버그를 수행합니다.

 

빌드가 완료되면 "webroot"에 "scripts"폴더가 생성되고 "app.js"파일이 생성된 것을 확인할 수 있습니다.

 

 

 

 

 

 

 

컴파일러 내의 문자열을 수정하면 위에 텍스트가 변경됩니다.

 

 

 

 

 

 


Refernces: Int32.TryParse Method




Source


string test = "12345"

int result;

bool isParsed = Int32.TryParse(test, out result);


* 입력한 문자열값이 정상이면 isParsed = true, result는 변환된 int값이 입력됨.

* 입력한 문자열값이 비정상이면 isParsed = false, result는 0이 입력됨.



Sources 


List<T> listT = new List<T> { };


listT.Sort(delegate (T x, T y) {

    return x.ORDER.CompareTo(y.ORDER);

});



'C#' 카테고리의 다른 글

ASP.NET Core에서 TypeScript사용하기  (0) 2019.10.28
[C#] string to int null및 0 확인  (0) 2018.12.10
[C#] List<T> 정렬  (0) 2018.10.24
[C#] Sort Asc/Desc  (0) 2018.09.20
[C#-Linq] List<int>에서 최빈값(mode) 구하기  (0) 2018.09.20
[HTML] display:grtid; IE에서 사용하기  (0) 2018.07.24

References


How can I sort generic list DESC and ASC?



Sources


1. Use Linq


var ascendingOrder = li.OrderBy(i => i);

var descendingOrder = li.OrderByDescending(i => i);



2. Not use Linq


li.Sort((a, b) => a.CompareTo(b)); // ascending sort

li.Sort((a, b) => -1* a.CompareTo(b)); // descending sort



3. Make to list.


li = li.OrderBy(i => i).ToList();


References


How to find the Mode in Array C#? 




Sources


int mode = x.GroupBy(v => v).OrderByDescending(g => g.Count()).First().Key;


References : Should I try to use the IE implementation of CSS Grid Layout?



.grid_container { 

    display: -ms-grid; -ms-grid-columns : 80% 20%; 

    display: grid; grid-template-columns: 80% 20%; 

    }


display에 grid대신 -ms-gird를 사용하고 grid-template-columns 대신 -ms-grid-columns를 사용한다.



또한 추가로 해당 그리드에 포함될 div에 col/row설정을 해준다.


.grid_item:nth-child(1) { -ms-grid-row:1; -ms-grid-column:1; }

.grid_item:nth-child(2) { -ms-grid-row:1; -ms-grid-column:2; }

.grid_item:nth-child(3) { -ms-grid-row:1; -ms-grid-column:3; }

.grid_item:nth-child(4) { -ms-grid-row:1; -ms-grid-column:4; }

.grid_item:nth-child(5) { -ms-grid-row:1; -ms-grid-column:5; }



자세한 내용은 참조 링크에 잘 나와있다.



References : runat=server 구문과 함께 form 태그 내부에 와야 합니다.



aspx의 CS파일 내부


public override void VerifyRenderingInServerForm(System.Web.UI.Control control)

{

     // Confirms that an HtmlForm control is rendered for the specified ASP.NET server control at run time.

}


를 추가하자.




참조 : How do I turn a C# object into a JSON string in .NET?



using System;

using System.Web.Script.Serialization;


public class MyDate

{

    public int year;

    public int month;

    public int day;

}


public class Lad

{

    public string firstName;

    public string lastName;

    public MyDate dateOfBirth;

}


class Program

{

    static void Main()

    {

        var obj = new Lad

        {

            firstName = "Markoff",

            lastName = "Chaney",

            dateOfBirth = new MyDate

            {

                year = 1901,

                month = 4,

                day = 30

            }

        };

        var json = new JavaScriptSerializer().Serialize(obj);

        Console.WriteLine(json);

    }

}



Reference 

[C#] linq를 사용하여 목록에서 중복 항목 제거

Converting from IEnumerable to List [duplicate]


IList<Something> variable = listVariable.GroupBy(x=>x.GROUP_BY_KEY).Select(grp => grp.First()).ToList();



* ToList()를 안하면 enumerable타입으로 반환됨.

+ Recent posts