2013-10-01 16 views
0

帶有UpdatePanel和UserControl的VS2010頁面。該頁面是具有> 10個條件的大型表格的搜索實用程序。 UpdatePanel接收搜索結果。 UserControl是該頁面的新增內容。使用jQuery將JSON數據揹負到UpdatePanel觸發器上

比方說,網頁找到擁有音樂CD的人。以前,每個人都有一個與他們的ID相關的流派,這是一個1-1的關係。數據庫已更新爲支持多對多,因此用戶控件可用於在搜索時實現多種類型的選擇。

基本上,而之前你只能找到重金屬的人。你現在可以找到重金屬和朋克的人(AND ...)

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> 

爲觸發的處理程序調用一個存儲過程,我已經改變了接受所選類型的表值參數。我需要的是將這些流派從$('.genre_pinned')轉移到處理程序的方式,以便我可以將DataTable傳遞給存儲區。

乾杯, .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 

我是不是違反任何規則/有沒有更好的辦法?

+0

選擇您喜歡的類型,從中提取的值,然後把他們......正是你嘗試過什麼?給我們一個你如何試圖自己解決這個問題的例子,可以幫助我們更好地理解你想要完成的事情。 –

+0

你的ajax請求是否設置爲'async:false'?否則正常的按鈕處理程序將在ajax完成之前以及隱藏輸入更新之前返回true。 –

+0

這解釋了爲什麼它只有當我通過它但沒有斷點時才工作:)謝謝。 – twelveFunKeys

回答

0

好吧,看起來我必須回答我自己的問題。以下是人們需要的片段,如果你想按照我做的那樣做。

希望它可以幫助別人,

乾杯, .PD。

在您將用戶控件置於其中的頁面上,您需要捕獲提交updatepanel的點擊。

<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到表單中的數據AJAX來代碼隱藏。請注意隱藏元素接收會話密鑰的成功部分。還有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; 
} 

最後在提交按鈕單擊,從會話中抓取額外的數據。

Dim o As Object = yourUserControl.FindControl("hdnSessionKey") 
    Dim hdn As HtmlInputHidden = CType(o, HtmlInputHidden) 
    If hdn IsNot Nothing Then 
     Dim key As String = hdn.Value 
     Dim filterValues As List(Of SearchArgs) = CType(Session(key), List(Of SearchArgs)) 
     For Each filterValue As SearchArgs In filterValues 
      ' do what you need to prep this for your data layer 
     Next 
     Session(key) = Nothing 
    End If 

而在C#:

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; 
} 
相關問題