2009-04-15 3 views
1

양식 제출시 .aspx 파일 내의 Jquery Treeview에 어떻게 액세스합니까? 또한 노드를 Jquery Treeview에 즉시 추가 할 수 있습니까? #서버에서 Jquery TreeView에 액세스하는 방법은 무엇입니까?

편집 c를

(클라이언트 측에서) 나는 asp.net 웹 양식을 사용하고 있습니다 : 누군가가 질문 중 하나에 다음과 같은 언급 : "양식에 제출, 사람이 작성해야 할 것입니다 클라이언트의 코드를 사용하여 해당 데이터를 수집하고 Ajax를 통해 서버 메소드로 전송하십시오. "

어떻게 수행됩니까 ?????

답변

1

jQuery Treeview는 클라이언트 측 구성 요소이므로 서버 측에서 액세스 할 수 없습니다. 따라서 트리에서 서버로 데이터를 전달하려면 클라이언트 측 자바 스크립트 코드 (실제로는 jQuery 코드)를 작성해야합니다. 클라이언트 측 jQuery 코드 만 사용하여 트리 뷰에 노드를 추가하는 것과 동일한 작업. 서버 측의 C#에서는 TreeView에 대해 전혀 몰랐습니다.

jQuery와 ASP.NET WebForms 간의 통합은 문제가 많으며 "너무 자연스럽지"않은 이유는 ASP.NET이 다른 개념으로 구축되었으므로 ... ASP.NET WebForms로 작업하는 경우 대신 서버 측 구성 요소를 사용할 수 있습니다 (Microsoft 자체 ASP 인 TreeView 또는 기타 타사 WebForms 대상 구성 요소 일 수 있음). 또는 새로운 ASP.NET MVC 프레임 워크를 사용해 볼 수도 있습니다.이 프레임 워크는 다른 웹 개발 플랫폼의 공통 개념을 기반으로 만들어졌으며 jQuery와의 통합은 간단합니다 (실제로 jQuery도 함께 제공됩니다).

틀리게하지 마라. 나는 jQuery와 ASP.NET WebForms의 통합이 완전히 불가능하다고 말하지 않는다. 것이 가능하다. 그러나 "별로 아름답 지 않은"일을하고 모든 간단한 작업을 위해 열심히 일해야합니다. 그래도 jQuery를 사용하려면 클라이언트 쪽 애니메이션에만 사용하십시오.

업데이트 :이 견적에 대해 - "양식을 제출할 때 누군가가 클라이언트에 코드를 작성하여 수집해야합니다 그 데이터를 Ajax를 통해 서버 메소드로 보내라. "- 음, 이것이 내가 말하고자하는 것과 정확히 일치한다. 클라이언트 측에서는 폼을 제출할 때 javascript 메서드를 호출합니다 (예 : "제출"버튼에 onclick = 'mymethod();'설정). 이 코드는 필요한 작업을 수행 한 다음 jQuery nice 구문을 사용하여 AJAX 호출을 수행한다고 가정합니다. 그러나 앞에서 설명한 것처럼 ASP.NET WebForms에서는 작동하지 않습니다. 자, Microsoft AJAX 클라이언트 측 라이브러리 (여기서는 http://msdn.microsoft.com/en-us/magazine/cc163300.aspx)에 대해 읽을 수 있습니다. 아마도 도움이 될 것입니다. 그러나 나는 아직도이 통합이 쉽지 않을 것이라고 생각한다. 다른 모든 것들을 위해 애니메이션과 ASP.NET 서버 측 구성 요소에 jQuery를 사용하십시오!

+0

감사합니다. 드미트리, 저는 jQuery 트리 뷰를 사용하지 않았습니다. 난 순수한 클라이언트 기반의 treeview가 필요하다. 필요한 것은 클라이언트 측의 트리 뷰입니다. 그런 다음 저장 버튼을 클릭하면 트리 뷰 데이터를 수집하고 서버로 전송하는 콜백을 트리거합니다. – sarsnake

+0

물론 내 자신의 treeview를 구현할 수 있지만이 시대에 나는해서는 안된다. – sarsnake

+0

클라이언트의 트리에 액세스 할 수있는 한 MS 콜백 (내 페이지는 System.Web.UI.ICallbackEventHandler 인터페이스를 구현)을 사용하여 트리를 소비하고 데이터를 서버, JSON 형식. 나는 Jquery ajax를 사용하는 것이 .net에서 작동하지 않는다는 것을 알고있다. – sarsnake

3

글쎄, 당신이 원하는 것을 발견했다고 생각합니다. 보십시오 here.

요약하면 서버 측에서 WebMethod를 정의해야하며 jQuery를 사용하여 쉽게 액세스 할 수 있습니다. 위의 링크 아래에 우수 실행 예제가 있으며 여기서 인수를 전달하는 방법을 보여주기 위해 수정합니다. 그래서 ... 당신의 코드 숨김 페이지에서

* .cs :에 다음

// We'll use this class to communicate 
public class Dog 
{ 
    public string Name { get; set; } 
    public string Color { get; set; } 
} 

// This is your page, in my case Default.aspx 
public partial class _Default : System.Web.UI.Page 
{ 
    [WebMethod] 
    public static string ProcessData(Dog myDog) 
    { 
     return "Your " + myDog.Color + " dog's name is " + myDog.Name + "!"; 
    } 
} 

당신의 *에서 .aspx : 그래서 여기 당신이 텍스트 상자를 입력 한 다음 데이터가 전송됩니다

<script src="jquery-1.3.2.min.js" type="text/javascript"></script> 
<script src="json2.js" type="text/javascript"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 
     $("#btnProcess").click(function() { 
      // This is what we want to send to the server 
      var dogItem = 
      { 
       Color: $("#txtColor").val(), 
       Name: $("#txtName").val() 
      }; 

      // And this is how it should be sent - in serialized way 
      var dogItemSerialized = JSON.stringify(dogItem); 

      $.ajax({ 
       type: "POST", 
       url: "Default.aspx/ProcessData", 
       data: "{'myDog':" + dogItemSerialized + "}",  
       contentType: "application/json; charset=utf-8", 
       dataType: "json", 
       success: function(msg) { 
        $("#result").text(msg.d); 
       } 
      }); 
     }); 
    }); 

</script> 
Color: <input id="txtColor" type="text" /><br /> 
Name: <input id="txtName" type="text" /><br /> 
<input id="btnProcess" type="button" value="Click Me" /> 
<div id="result"></div> 

을 Dog 객체로 이해하는 서버에 전달합니다. 전달 인자에주의를 기울이십시오. 가장 혼란스러운 부분이기 때문입니다. JSON 형식으로 전달해야합니다. JSON 형식은 "너무 많은 문자열"입니다. 그래서 여기서 json2를 사용합니다.JSON 직렬화 된 문자열 (JSON.stringify() 메서드)로 일반적인 자바 스크립트 개체를 변환하는 데 도움이 js 스크립트. 사용할 수 있습니다 here. 하지만 여전히 다소 못 생깁니다 =) "myDog"라는 인수를 전달하는 것이 중요합니다. 그 값은 직렬화 된 dogItem입니다. .

data: "{'someAnotherArgumentName':" + dogItemSerialized + "}" 

그리고 마지막 일을 다음에주의 :이 서버가 그래서, 예를 들어, 내가 인수 이름을 변경할 수 없습니다 (얻을 것으로 예상 정확히 무엇 때문에이 작동하지 않습니다 라인은 :

당신이 이전에 3.5 ASP.NET 작업하는 경우
success: function(msg) { 
      $("#result").text(msg.d); 
     } 

(예를 들어, ASP.NET 2.0), 당신은 ("# 결과") 단지를 $ 작성해야 텍스트 (MSG.) 대신 msg.d. ASP.NET 3.5만이 "d"멤버의 모든 데이터를 캡슐화합니다. 어떤 이유로 ...

어쨌든, 위의 기사에서 유용한 링크 (기사와 주석 내부에 있음)를 찾을 수 있으므로 인수, "msg.d"등에 대한 자세한 내용을 볼 수 있습니다.

도움이 되었기를 바랍니다.

관련 문제