2 3 4 5 6 7 8 9 10 11 12 13 14 var myObject = eval('(' + myJSONtext + ')'); //JSON 파서 사용 //e.g json.org 의 json2.js var myObject = JSON.parse(myJSONtext,

jQuery 와 함께하는 ASP.NET MVC

김수영

Visual C# MVP훈스닷넷 Sysop(http://www.hoons.kr).NET N’Gene(http://www.dotnetngene.kr)

2010.09.08

2

Agenda

− Prologue− Contents 링크 설정

− Client Script− ASP.NET AJAX− jQuery

− 성능향상을 위한 jQuery Tip

3

Prologue $(jQuery).for("ASP.NET MVC")

4

Prologue사용목적

Q. Client Script 작성 시 고충 ( 문제점 ) 은 ?

Q. Script Library 를 사용하는 이유는 ?− 사용의 편의성− 크로스 브라우저 지원− 다양한 검증− 재 사용성 증가− etc…

− 스파게티 코드− 브라우저 별 코드 작성− 많은 양의 코드 작성− etc…

5

PrologueContents 링크 설정

− Url.Content() 사용− e.g <%: Url.Content("~/Scripts/jquery-

1.4.2.min.js") %>− 공개 CDN 사용

− http://www.asp.net/ajaxlibrary/CDN.ashx

− 주요 Library− jquery-1.4.2.min.js

(VS 2010 기본 : jquery-1.4.1.min.js)− MicrosoftAjax.js− MicrosoftMvcAjax.js

6

Prologue참고 – ASP.NET 에서 Contents 링크 설정

− ResolveClientUrl()− e.g. <%# ResolveClientUrl("~/Scripts/jquery-1.4.2.min.js")

%>

− Page_Load 이벤트에 Page.Header.DataBind(); 작성if(!IsPostBack) {

Page.Header.DataBind();}

7

PrologueAjax Min 으로 *.min.css, *.min.js 생성하기

8

PrologueAjax Minifier 로 *.min.css, *.min.js 생성하기

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" /> <Target Name="AfterBuild"> <ItemGroup> <JS Include="**\*.js" Exclude="**\*.min.js;Scripts\*.js" /> </ItemGroup> <ItemGroup> <CSS Include="**\*.css" Exclude="**\*.min.css" /> </ItemGroup> <AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" /> </Target>

− 프로젝트 파일에 구분 추가− Ajax Minifier

− http://www.asp.net/ajaxlibrary/AjaxMinDocumentation.ashx

9

Client Script

10

Client ScriptASP.NET AJAX

− 라이브러리 참조− <script type="text/javascript" src="<%: Url.-

Content("~/Scripts/MicrosoftAjax.js") %>"></script>

− <script type="text/javascript" src="<%: Url.-Content("~/Scripts/MicrosoftMvcAjax.js") %>"></script>

− Ajax.BeginForm( 컨트롤러액션 , AjaxOptions)− AjaxOptions.UpdateTargetId

− Partial View

11

Client ScriptASP.NET AJAX

− Ajax 요청인지 확인− Request.IsAjaxRequest()

요청시 헤더에 x-requested-with 포함됨

12

Client Script jQuery

− $.ajax()− $.getJSON()

13

jQuery Tip

14

jQuery TipJSON 타입 활성화 – eval() 함수를 피하라 .

var myObject = eval('(' + myJSONtext + ')');

//JSON 파서 사용//e.g json.org 의 json2.jsvar myObject = JSON.parse(myJSONtext, reviver);

15

jQuery Tip성능향상을 위한 jQuery Selector($)

− class 보다는 Id 로 탐색하라 .− 최대한 많은 정보를 제공하라 .− Selector 를 캐싱하라 .

− $('.clientX') < $('td.clientX') < $('#log .clientX') < $('#log td.-clientX')

16

jQuery Tip$(this)$(document).ready(function () { $('.bold').click(function () { $(this).addClass('changeColor'); setTimeout(function () { $(this).removeClass('changeColor'); }, 1000); });});

$(document).ready(function () { $('.bold').click(function () { var $element = $(this); $element.addClass('changeColor'); setTimeout(function () { $element.removeClass('changeColor'); }, 1000); });});

17

jQuery Tip페이지 로드시 텍스트 박스 포커스$(document).ready(function(){ // focus the <input id="username" type="text" ...> $('#username').focus();});

18

jQuery TipjQuery.grep 을 통한 배열 필터링(function($) { $(document).ready(function() { var months = [ 'January', 'February', 'March', 'April', 'May','June', 'July', 'August', 'September', 'October','November', 'December']; months = $.grep(months, function(value, i) { return ( value.indexOf('J') == 0 ); }); $('#months').html( '<li>' + months.join('</li><li>') + '</li>' ); });})(jQuery);

19

jQuery Tip빠른 HTML 테이블 로딩 – 일반적 사용

$(document).ready( function() { function fillTable( names ) { $.each( names, function() { $('<tr>') .append( $('<td>').addClass('name').html(esc(this.first) + ' ' + esc(this.last)) ) .append( $('<td>').addClass('address').html( esc(this.street) + '<br />' + esc(this.city) + ', ' + esc(this.state) + ' ' + esc(this.zip) ) ) .appendTo('#nameTable'); }); } $.getJSON( 'names/names-1000.json', function( json ) { fillTable( json.names ); });});

20

jQuery Tip빠른 HTML 테이블 로딩 - 개선

$(document).ready( function() {function fillTable( names ) {// Reduce name lookups with local function namevar e = esc;//var html = [], h = ?1;html[++h] = '<table id="nameTable">';html[++h] = '<tbody>';for( var name, i = ?1; name = names[++i]; ) {html[++h] = '<tr><td class="name">';html[++h] = e(name.first);html[++h] = ' ';html[++h] = e(name.last);html[++h] = '</td><td class="address">';html[++h] = e(name.street);html[++h] = '<br />';html[++h] = e(name.city);html[++h] = ', ';html[++h] = e(name.state);html[++h] = ' ';html[++h] = e(name.zip);html[++h] = '</td></tr>';}html[++h] = '</tbody>';html[++h] = '</table>';$('#container')[0].innerHTML = html.join('');}$.getJSON( 'names/names-1000.json', function( json ) {fillTable( json.names );});});

21

jQuery TipXML 데이터를 빠르게 DOM 적용<h1 id="title"></h1>$(document).ready(function() { var xml = '<myxml><title>Hello world!</title></myxml>'; var title = $.xmlDOM( xml ).find('myxml > title').text(); $('#title').html( title );});

22

References− ASP.NET 모델 뷰 컨트롤러 (MVC)

− http://msdn.microsoft.com/ko-kr/library/dd394709.aspx

− jQuery− http://jquery.com/

− Introducing JSON− http://www.json.org/

− Microsoft Ajax CDN(Content Delivery Network)− http://www.asp.net/ajaxlibrary/CDN.ashx

− Northwind and pubs Sample Databases for SQL Server 2000− http://www.microsoft.com/downloads/details.aspx?FamilyID=06616212-0

356-46a0-8da2-eebc53a68034&displaylang=en

− Microsoft SQL Server Sample Database− http://msftdbprodsamples.codeplex.com/

© 2009 Microsoft Corporation. All rights reserved. Microsoft, Visual Studio, the Visual Studio logo, and [list other trademarks referenced] are trademarks of the Microsoft group of companies.

 The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation.  Because Microsoft must respond

to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. 

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.