PosionGOD_F: [ASP.NET] ASP.NET에서 Kendo UI 사용해보자. (1) [MVC4][Kendo UI]

개발 환경
OS : Windows 8 64 Bit
Platform : Microsoft Visual Studio Professional 2013
Project : ASP.NET MVC 4 웹 응용 프로그램 (EMPTY 셋팅)
DBMS : no need
My mental state : not good
The reliability of this article : Low

이런 Dog18, SeeFoot, StickLike 헉헉. 됐다.
고만해라 Kendo UI에 대한 욕은 이만하면 됐다 아이가.
ㅜㅜ Kendo UI 넌 힘든 녀석이였어.
...
...
...
ASP.NET MVC 4에 Kendo UI를 적용하는 것을 한번 시도해보자.
Kendo UI <넌 어디에 있냐?>
Kendo UI는 최신 웹 및 모바일 응용 프로그램 개발을위한 포괄적 인 HTML5/JavaScript 프레임 워크입니다. 그것은 웹, 코어 프레임 워크, 모바일 제품군 및 완전한 데이터 시각화 솔루션을위한 20 + 위젯으로 구성되어 있습니다. 라고 되어있네.
좋은거군. 그런데 왜 이렇게 사용하기가 힘들냐... 내가 아직 몰라서 그렇다고 하지만. ㅜㅜ
일단 나의 판단은 이렇다. 공부하면서 하려면 힘들것이야~ ㅎㅎㅎ
...
...
...
자 그럼 다운받아야지. <나는 여기에 있지!>
내가 받은 파일 이름은 'TelerikUITrialForASPNETMVC_2014_1_318.exe'

[어케 설치하지]

...
...
...
이제 설치가 끝났으니 Visual Studio에서 구동이 가능하게 해야지~
자 켄두유아이 이제 너를 줄여서 너라고 부르고, Visual Studio는 야라고 부를게.
너는 야하고 이제 친구가 되면 되는거야. 친하게 지내야되.
그런데 어떻게 하면 너를 야한테 잘 소개시켜주지?
이렇게 하자고? <아~ 아~~ 아~~~ 그런데 왜 다 영어야?>
...
...
...
알았어 일단 친철하게 그림이 있네.
참고로 난 식당에 갔을때 그림이 있는 메뉴판이 제일 좋더라. 특히 외국식당일때 (@_@);;

일단 아까 설치한 곳에 가야되네.
Telerik 폴더에 가서 난 MVC랑 놀고 있으니깐 MVC 들어가서 js를 찾고.
js 폴더 너를 복사하면?

야한테 가서 솔루션 탐색기에 있는 scripts 폴더에 오른쪽 마우스 대고 클릭하면 팝업창 뜨고
붙여넣기를 하면 된다는거구나!
흠 그런데 js라는 이름을 kendo로 바꾸라고? 아 야한테 가면 너 다른 사람이 되는구나?
이중인격같으니.
그럼 styles도 해볼까.

야한테 잘 보이라고 너의 이름을 kendo로 다 바꿔줬어.

나의 이런 수고를 넌 헛되게 하면... 넌 날 모욕했어.

...

마지막으로 야한테 너를 소개시켜주고 야가 너를 이제 친구라고 생각할꺼야.

그럼 너랑 야랑 잘 맞는지 한번 볼까?

...

아 이거저것 테스트하고 싶은데 좋은거 없나? <나를 찾았나?>

머 간단하게 달력같은거랑 메뉴 같은거 잼있을것 같네 해볼까.

[어케 코딩하지]

[이제 필요없어]

@{
ViewBag.Title = "Index";
}

<p>Woo Kyeong Test!</p>

<div>
@(Html.Kendo().DatePicker().Name("datepicker"))
</div>

@(Html.Kendo().Menu()
.Name("Menu")
.Items(items =>
{
items.Add()
.Text("Products")
.Items(children =>
{
children.Add().Text("Furniture")
.Items(innerChildren =>
{
innerChildren.Add().Text("Tables & Chairs");
innerChildren.Add().Text("Sofas");
innerChildren.Add().Text("Occasional Furniture");
innerChildren.Add().Text("Childerns Furniture");
innerChildren.Add().Text("Beds");
});

children.Add().Text("Decor")
.Items(innerChildren =>
{
innerChildren.Add().Text("Bed Linen");
innerChildren.Add().Text("Throws");
innerChildren.Add().Text("Curtains & Blinds");
innerChildren.Add().Text("Rugs");
innerChildren.Add().Text("Carpets");
});

children.Add().Text("Storage")
.Items(innerChildren =>
{
innerChildren.Add().Text("Wall Shelving");
innerChildren.Add().Text("Kids Storage");
innerChildren.Add().Text("Baskets");
innerChildren.Add().Text("Multimedia Storage");
innerChildren.Add().Text("Floor Shelving");
innerChildren.Add().Text("Toilet Roll Holders");
innerChildren.Add().Text("Storage Jars");
innerChildren.Add().Text("Drawers");
innerChildren.Add().Text("Boxes");
});

children.Add().Text("Lights")
.Items(innerChildren =>
{
innerChildren.Add().Text("Ceiling");
innerChildren.Add().Text("Table");
innerChildren.Add().Text("Floor");
innerChildren.Add().Text("Shades");
innerChildren.Add().Text("Wall Lights");
innerChildren.Add().Text("Spotlights");
innerChildren.Add().Text("Push Light");
innerChildren.Add().Text("String Lights");
});
});

items.Add().Text("Stores")
.Content(@<text>
<h2>Around the Globe</h2>
<ol>
<li>United States</li>
<li>Europe</li>
<li>Canada</li>
<li>Australia</li>
</ol>
<img src='@Url.Content("~/Content/web/menu/map.png")' alt="Stores Around the Globe" />
<button class="k-button">See full list</button>
</text>);

items.Add().Text("Blog");
items.Add().Text("Company");
items.Add().Text("Events");
items.Add().Text("News").Enabled(false);
})
)

<style scoped="scoped">
#menu h2 {
font-size: 1em;
text-transform: uppercase;
padding: 5px 10px;
}

#template img {
margin: 5px 20px 0 0;
float: left;
}

#template {
width: 380px;
}

#template ol {
float: left;
margin: 0;
padding: 10px 10px 0 10px;
}

#template:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

#template .k-button {
float: left;
clear: left;
margin: 5px 0 5px 12px;
}
</style>

뭐 싹 복사해서 Index.cshtml에 넣으면 되겠지. 이것이 복사신공 ㅎㅎㅎ
그러면 이런 화면이 나오겠지.
...
...
...