2013-10-01 81 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; 
}