ASP.NET Ajax 클라이언트 또는 서버의 Html 렌더링?

Question

webservice 호출을 통해 asp.net ajax를 사용하여 바인딩 한 asp.net webform에서 html <select> (서버 컨트롤 아님)을 사용하고 있습니다. 내 웹 서비스에서 기본적으로 내가 이렇게 내 JS에서

Private Function GetStores() As String 
    dim stores as DataTable = GetStores() 
    dim html as new StringBuilder 
    for each row as DataRow in stores.Rows 
    html.append("<option>") 
    html.append(row("store")) 
    html.append("</option>") 
    next 
    return html.tostring() 
End Function 

을, 나는 단순히 사용합니다 :

$get("myddl").innerHTML = "<select>" + result + "</select>"; 

I 서버가 빠르게 필요한 HTML을 만드는 때문에 이것이 할 이유. dataTable을 반환하여 클라이언트 쪽에서 ddl을 채우려면 행에 따라 조금 더 오래 걸릴 것이라고 생각합니다.

또한 페이지가로드 될 때 한 번만 이렇게주의하시기 바랍니다.

이 점에 대해 어떻게 생각하십니까? 이거 나쁜거야? 그렇다면 왜?

Answer 1

나는 다양한 브라우저 방금 요소의 innerHTML을 설정할 때 발생에서 나는 많은 문제를 볼 수 있기 때문에 나쁜 생각합니다.

그냥 innerHTML을가, html로 DOM 항상 업데이트되지 않습니다 일부 컨트롤로의 HTML 태그를 넣어 요소를 만들려고하면

. 이로 인해 양식 제출시 값이 다시 전달되지 않거나 javascript를 사용하여 요소를 참조 할 수 없게 될 수도 있습니다.

대신 WebService에서 필요한 정보 (상점 이름 만)로 JSON 또는 XML 데이터를 반환해야합니다. 그런 다음 javascript를 사용하여 드롭 다운에 옵션을 동적으로 만들고 추가합니다.

// do your AJAX call and pass back the responseText to this function (For a JSON response) 
function FillDDL(text) 
{ 
    eval("var data="+text); 
    var ddl=document.getElementById('ddlID'); 

    for(var i=0; i<data.items.count; i++) 
    { 
     var option = document.createElement("option"); 
     option.text=data.items[i]; 
     option.value=data.items[i]; //IE wont automatically copy the text to the value 
     ddl.options.add(option,0); //FF will error if you dont tell it where to add the option 
    } 
} 

을 그리고 당신은 JSON에 익숙하지 않은 경우,이 위의 코드를 사용하는 형식입니다 :

이런 식으로 뭔가가 잘 작동

{items:['name','name2','name3']} 

그냥 문자열을 반환은 위와 같이 WebService에서 설정해야합니다.

Answer 2

서버 측 방법은 옵션의 목록을 필터링 할 수없는 것, 그래서 당신은 단지 선택 목록을 표시하는 경우, 왜 오히려 후속 요청을하는 것보다, 초기 페이지로 렌더링하지 않습니다.

은 훨씬 성과 같은 관계에서 JSON 포맷으로 데이터를 다시 전송하는 정보량을 너무 적게 킬로바이트이다. 드롭 다운 목록에서 50 개 항목을 말하는 경우 JavaScript를 사용하여 서버를 만들 때와 서버에서 수행 할 때의 오버 헤드에 거의 주목할 필요가 없습니다.

또한, 당신은 단순히 옵션을 업데이트하는 것이 아니라 전체 선택을 교체해야 의미 인터넷 익스플로러의 일부 버전에서 알려진 버그가 있습니다 - 다만 경우에 당신은 그것으로 실행!