使用 jQuery 将 JSON 数据捎带到 UpdatePanel 触发器上

Question

>VS2010 页面，带有 UpdatePanel 和 UserControl。 该页面是具有 10 个条件>大表的搜索实用程序。 更新面板接收搜索结果。 用户控件是页面的新添加项。

假设该页面找到了拥有音乐CD的人。 以前，每个人都有一个与他们的 ID 相关的流派，这是一种 1-1 的关系。 数据库已更新为支持多对多，因此 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，我已将其更改为接受所选流派的表值参数。 我需要的是一种将这些流派从$('.genre_pinned')获取到处理程序的方法，以便我可以构建要传递给 sproc 的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

我是否违反了任何规则/有更好的方法吗？

Answer 1

好吧，看来我必须回答我自己的问题了。 如果你想像我一样做，这里是人们需要的片段。

希望它对某人有所帮助，

干杯.pd.

在放置用户控件的页面中，需要捕获提交更新面板的单击。

<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 到代码隐藏。 请注意隐藏元素接收会话密钥的成功部分。 还有异步：假(感谢凯文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;
}

然后编写您的网络方法(首先是 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;
}