jQuery를 사용하여 JSON 데이터를 UpdatePanel 트리거에 피기 백

Question

VS2010 페이지 (UpdatePanel 및 UserControl 포함). 이 페이지는 10 개 이상의 기준으로 구성된 큰 테이블의 검색 유틸리티입니다. UpdatePanel은 검색 결과를받습니다. UserControl은 페이지에 새로 추가되었습니다.

페이지에서 음악 CD를 소유 한 사람을 찾습니다. 이전에는 각 사람마다 자신의 ID와 관련된 장르가 있었으며 이것은 1-1 관계였습니다. DB는 Many-to-Many를 지원하도록 업데이트되었으므로 UserControl은 검색 할 때 여러 장르의 선택을 구현합니다.

기본적으로 전에는 중금속으로 사람을 찾을 수있는 반면.

usercontrol이 html 테이블을 페이지로 다시 보내고 jQuery가 가능한 옵션이 보이지 않도록 CSS 클래스를 변경하여 keyup()에 응답합니다. 사용자가 눈에 보이는 버튼을 클릭하면 표시되거나 고정됩니다.

<tr class='genre_hidden'><td>Jazz-Bebop</td></tr> 
<tr class='genre_hidden'><td>Jazz-Trad</td></tr> 
<tr class='genre_hidden'><td>Jazz-Dixie</td></tr> 
<tr class='genre_pinned'><td>Punk</td></tr> 
<tr class='genre_pinned'><td>Heavy Metal</td></tr> 
<tr class='genre_visible'><td>Classic Rock</td></tr> 

트리거의 핸들러 내가 선택한 장르의 테이블 값 매개 변수를 허용하도록 변경했습니다의 sproc를 호출 :

그래서 나는이 있습니다. 내가 필요로하는 것은 을 sproc에 전달할 수 있도록 $('.genre_pinned')에서 장르를 가져 오는 방법입니다.

건배, .pd.

내가 작업 한 내용 :

- handle click event of Search button in UpdatePanel 
    -- in this function, fire an ajax request to a webmethod on the main page 
    -- webmethod generates key for session and 
    -- ajax success copies key to a server hidden input 
    -- preventdefault not called so normal button action occurs 
- button click handler on server side 
    -- retrieve key from hidden control 
    -- convert list to datatable fitting table value parameter type 
    -- add datatable to params and call sproc 

내가 어떤 규칙을 위반 AM/더 나은 방법은 무엇입니까?

Answer 1

좋아, 이제 내 자신의 질문에 대답해야 할 것 같습니다. 내가 한 것과 같은 방식으로하고 싶다면 사람들이 필요로하는 발췌 문장을 여기에있다.

, 그것은 누군가를하는 데 도움이

건배, .pd를 바랍니다.

사용자 정의 컨트롤을 배치 한 페이지에서 updatepanel을 제출하는 클릭을 파악해야합니다. 당신의 UserControl을에서

<script type="text/javascript"> 
    $(subscribeClicks); 

    // for use on pages with updatepanels. once the panel has reloaded, the jquery 
    // events get slagged so we need to rebind them here. 
    var prm = Sys.WebForms.PageRequestManager.getInstance(); 
    prm.add_endRequest(subscribeClicks); 

    function subscribeClicks() { 
     // catch the search button before it (partially) posts back and send 
     // data 
     $('input[id*="btnSearch"]').click(function (e) { 
      // this function is in a script in your usercontrol 
      senddataFromUserControl('ThisPage.aspx/NameOfYourWebMethod'); 
     }); 
    } 
</script> 

당신은 senddataFromUserControl은 코드 숨김에 양식 데이터를 아약스해야합니다. 숨겨진 요소가 세션 키를받는 성공 부분을 주목하십시오. 또한 async : false (Kevin B에게 감사).이름/값 쌍을받을 수있는 클래스를 설정 한 뒤에 코드에서

function senddataFromUserControl(url) { 
    var arr = new Array(); 
    var ele = $('.jq_idt_selected'); 
    for (var i = 0; i < ele.length; i++) { 
     arr.push({ Name: $(ele[i]).find('.jq_idt_path').text(), Value: $(ele[i]).find(':hidden').val() }); 
    } 

    $.ajax({ 
     type: "POST", 
     async: false, 
     url: url, 
     data: "{args:" + JSON.stringify(arr) + "}", 
     dataType: "text", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      $('input[id*="hdnSessionKey"]').val($.parseJSON(data)["d"]); 
     }, 
     error: function (data) { 
      alert(data.responseText); 
     } 
    }); 
} 

(이 하나의 VB에서)

Public Class SearchArgs 
    Public Name As String 
    Public Value As String 
End Class 

그리고 C#에서 :

public class SearchArgs { 
    public string Name; 
    public string Value; 
} 

그런 다음의 WebMethod를 코딩 (VB에서 먼저)

<System.Web.Services.WebMethod()> _ 
Public Shared Function NameOfYourWebMethod(args As List(Of SearchArgs)) As String 
    ' generate a session key for the client to pass back when the page postback occurs 
    Dim key As String = String.Format("IDT_{0:yyMMddhhmmss}", Now) 
    HttpContext.Current.Session(key) = args 
    Return key 
End Function 

그는 C# 버전 :

[System.Web.Services.WebMethod()] 
public static string NameOfYourWebMethod(List<SearchArgs> args) 
{ 
    // generate a session key for the client to pass back when the page postback occurs 
    string key = string.Format("IDT_{0:yyMMddhhmmss}", DateAndTime.Now); 
    HttpContext.Current.Session[key] = args; 
    return key; 
} 

마지막으로 제출 버튼에서 세션의 추가 데이터를 클릭하십시오. 정확하게 당신이 시도 무엇

object o = yourUserControl.FindControl("hdnSessionKey"); 
HtmlInputHidden hdn = (HtmlInputHidden)o; 
if (hdn != null) { 
    string key = hdn.Value; 
    List<SearchArgs> filterValues = List<SearchArgs>)Session[key]; 
    foreach (SearchArgs filterValue in filterValues) { 
     // do what you need to prep this for your data layer 
    } 
    Session[key] = null; 
}