페이지에 html 구성 요소를 추가하기위한 AJAX 베스트 프랙티스

Question

저는 AJAX/javascript를 처음 사용하고있어서 최선의 접근 방법이 무엇을 하려는지 확실하지 않습니다.

Javascript를 사용하여 내 페이지에서 페이지 메소드 (WebMethods)를 호출합니다. 검색하는 데이터는 Div의 목록입니다.

얼마나 많은 내용이 반환 될지 모르지만 내용에 따라 페이지의 적절한 위치에 삽입해야합니다.

1. 이 HtmlGenericControls의 목록을 작성하고 다시 전달할 :

   나는이 일을 몇 가지 방법을 참조하십시오.

2. String 목록을 만듭니다. 여기서 각 String은 페이지에 드롭하려는 전체 Div 코드입니다. (어떤 이유로 든 잘못된 느낌이 들었습니다.)
3. 필요한 데이터가 들어있는 간단한 컨테이너 개체를 만듭니다. 이들을 페이지에 전달하고 자바 스크립트 내에서 Div를 생성하는 데 사용하십시오.

이 중 하나라도 효과가 있다고 생각되지만 표준 연습을 따르고 싶습니다. 어느 쪽을 선택하겠습니까?

Answer 1

실제로 IMHO는 HTML이 아닌 서비스에서 데이터를 반환하고 클라이언트에서 UI를 빌드하는 것이 가장 좋습니다. 일반적으로 이는 동일한 데이터가 다른 위치에서 사용될 수 있기 때문입니다. 이제 PageMethods는 해당 페이지에 대한 데이터 만 반환하므로 재사용이 필요하지 않으면 서버 측 HTML이 정상이 될 수 있지만 개인적으로 JQuery를 사용하여 클라이언트에서 UI를 작성하고 데이터 만 전달합니다. 이 방법은 유선을 통해 전송되는 데이터가 적어 앱의 속도가 빨라지고 클라이언트의 브라우저로 페이지 렌더링을 푸시합니다.

HTH.

Answer 2

데이터를 JSON 객체로 반환하는 것이 좋습니다. 각 컨트롤 유형에 대한 JSON 객체의 배열을 만든 다음 for (var q in json_object['div_type_q'])을 사용하여 순환 처리하고 동적으로 페이지에 추가 할 수 있습니다.

예 JSON 객체 :

json_object = { 
div_type_1: [ 0: "Content", 1: "More content", 2: "Even more content" ], 
div_type_2: [ 0: "This is navigation content" ] 
}

당신은 문자열로 그런 일을 전달하고이 너무 이후 약간의 시간을하고 var object = eval('(' + returned string + ')')

행운

Answer 3

미안를 사용할 수 있습니다. 이렇게하는 것이 쉽지 않다고 말할 수 있습니다. 하지만 지금은 좋은 해결책을 발견했고, 당신에게 말하지만, 여전히 가장 좋은 것은 업데이트 패널을 사용하고 있습니다. 왜? 예를 들어 msajax Extender를 사용하는 경우 updatepanel을 사용할 때 올바르게 초기화되므로 updatePanel은 새 스크립트 파일을 전송합니다 (없는 경우).

내 페이지에 5 개의 컨트롤이 있습니다. 각각은 조건부 갱신 패널로 랩핑됩니다. 사용자는 모든 단일 항목에 대한 설정을 변경할 수 있으며 저장하면 하나의 컨트롤 만 놀라 울 정도로 동기화됩니다.찾는이 새로운 하나를 추가 할 경우

지금, 나는 사용자가 다른 updatepanel을 추가하는 경우, (당신이 관리해야 전체 컬렉션을

이제

<updatepanel> 
     <updatepanel-inner> 
      <control> 
     </updatepanel-inner> 
     <updatepanel-inner> 
      <control> 
     </updatepanel-inner> 
     <updatepanel-inner> 
      <control> 
     </updatepanel-inner> 
     <updatepanel-inner> 
      <control> 
     </updatepanel-inner> 
    </updatepanel> 

등에, 또 다른 updatepanel을 클라이언트 측에서는 webmethods를 사용하여 일부를 저장하고이 설정을 사용하여 updatepanels 생성) 전체 컬렉션을 업데이트합니다.

업데이트 패널을 사용하면 많은 시간을 절약 할 수 있습니다.