asp.net 아약스 4.0 클라이언트 템플릿, 선택 바인딩하는 방법?

행을 추가 및 제거하고 일부 열을 편집하고 다른 열의 입력을 기반으로 직접 계산 된 다른 열을 가질 수있는 간단한 아약스 그리드를 작성하려고합니다. 나는 이것이 asp.net ajax 4.0과 클라이언트 템플리트로 놀기 좋은 oppurtunity가 될 것이라고 생각했다. 꽤 괜찮아 보이지만 json 데이터를 바인딩하는 방법을 찾을 수없는 것 같습니다. 어떻게해야합니까? select 태그가 있었다 경우 값이 것이 확실한 해결책을 속성 :asp.net 아약스 4.0 클라이언트 템플릿, 선택 바인딩하는 방법?

정상적인 템플릿은 내가

<select id=""> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select>

편집 드롭 다운으로 데이터 바인딩 구문을 사용하는 방법이

<div id="authorsTemplate" style="visibility:hidden;display:none;"> 
    <ul> 
     <li>First Name: {{ FirstName }}</li> 
     <li>Last Name: {{LastName}}</li> 
     <li>Url: <a href="{{Url}}">{{Url}}</a></li> 
    </ul> 
</div>

처럼 보인다 있다. Edit2 : 아래 구문은 실제로 Thx Roatin의 솔루션이었습니다. select에 실제로 value 특성이 있다는 것을 알지 못했습니다.

<select id="" value="{binding nr}"> 
    <option value="1">1</option> 
    <option value="2">2</option> 
</select>

당신은 내가 실제로 시도하지 않은

출처

2009-09-30 terjetyl

(다시 테스트하지, 당신은 === 선정 수행 할 수있는 진정한하지 못할 수도 있습니다). 내 json 객체에서 값을 가져 와서 선택한 요소를 설정하기 위해 클라이언트 템플릿 바인딩 구문을 사용할 수 있기를 원합니다.을
사실

, select DOM 요소는 value 속성이 있습니다 (그러나 마크 업의 속성으로 노출되지 않음). 이를 설정하는 것은 자식 <option>을 반복하는 것과 같고 더 빠르며 selectedIndex을 일치하는 옵션의 찾은 옵션 색인으로 설정합니다 (value). 여기

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style type="text/css">.sys-template {display:none}</style> <script src="MicrosoftAjax.debug.js"></script> <script src="MicrosoftAjaxTemplates.debug.js"></script> <script type="text/javascript"> var dataItem = { Foo: '3' }; function pageLoad() { $create(Sys.Binding, { target: $get("list"), targetProperty: 'value', source: dataItem, path: 'Foo', mode: Sys.BindingMode.twoWay }); } </script> </head> <body> <select id="list"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select> </body> </html>

원하는 경우, 선언적으로 같은 일을하는 방법은 다음과 같습니다 :

어쨌든, 여기 Sys.Binding 직접 그것을 (전체 테스트 케이스)를 결합하는 방법

<body xmlns:sys="javascript:Sys" xmlns:binding="javascript:Sys.Binding" sys:activate="*"> <select id="list" sys:attach="binding" binding:target="{{ $get('list') }}" binding:targetproperty="value" binding:source="{{ dataItem }}" binding:path="Foo"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>

을 (물론 pageLoad 개의 자바 스크립트를 제거하십시오.)

두 예제 모두 dataItem 개체에 대한 양방향 바인딩을 설정합니다. 페이지가로드 될 때를 볼 수 있으며 값과 일치하는 옵션 인 세 번째 <option>이 선택됩니다. 드롭 다운에서 다른 항목을 선택하면 dataItem.Foo이 선택된 새 값으로 업데이트됩니다.

희망 하시겠습니까?

출처

2009-10-09 04:15:33

ps ASP.NET AJAX 미리보기 5를 사용하고 있습니다. –

Thx, 내가 찾고있는 것, 나중에 사용해 보겠습니다. – terjetyl

A 입력 태그의 값에 바인딩 같은 방식으로 개체 내가 어쩌면 선택한 옵션을 설정하는 사용자 정의 자바 스크립트를 사용할 수 있지만, 포인트는 라이브 내 JSON으로 구속력 이건 마치 these three links 블로그 게시물이 도움이 될 수 있습니다. 모든 예는 데이터 목록에 대한 바인딩을 보여줍니다. 이 같은 아마 뭔가 :

* 샘플은 다음 (무력 방식으로 수행) 원하는 값을 선택 내 VS 2010 빌려 체포되어 테스트와 밀접하게 third link *

var sampleData = [ 
    { Value: "1", Text: "1" }, 
    { Value: "2", Text: "2" }, 
]; 
var select = "1"; 

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}"> 
    <option value="{{ Value }}">{{ Text }}</option> 
</select>

에서 파생되지

var list = document.getElementById("list"); 
foreach (var option in list.options) 
{ 
    if(option.value == select) 
    { 
     option.selected = true; 
     break; 
    } 
}

또는 '선택'옵션에 대한 바인딩을 포함하도록 템플릿을 조정하십시오. 이미 채워집니다, 내가 드롭 다운을 채울하지 않으

var sampleData = [ 
    { Value: "1", Text: "1", Selected: true }, 
    { Value: "2", Text: "2" }, 
]; 
var select = "1"; 

<select id="list" class="sys-template" 
    sys:attach="dataview" 
    dataview:data="{{ sampleData }}"> 
    <option value="{{ Value }}" selected="{{ Selected === true }}">{{ Text }}</option> 
</select>

출처

2009-10-08 02:35:33 smaclell

Thx,하지만 그게 내가 찾고있는 것이 아닙니다. 드롭 다운을 채우고 싶지 않다. 이미 채워져있다. 내 json 객체에서 값을 가져 와서 선택한 요소를 설정하기 위해 클라이언트 템플릿 바인딩 구문을 사용할 수 있기를 원합니다. 그것은 내가 잘못된 각도에서 문제를보고있을 수 있습니다.

asp.net 아약스 4.0 클라이언트 템플릿, 선택 바인딩하는 방법?

답변