使用 jQuery 将 JSON 数据搭载到 UpdatePanel 触发器上

Question

带有 UpdatePanel 和 UserControl 的 VS2010 页面。该页面是具有 > 10 个条件的大型表的搜索实用程序。 UpdatePanel 接收搜索结果。 UserControl 是页面的新增功能。

假设该页面查找拥有音乐 CD 的用户。以前，每个人都有一个与其 ID 相关联的流派，这是 1-1 的关系。数据库已更新以支持多对多，因此用户控件可以在搜索时实现多种类型的选择。

基本上，而之前你只能找到喜欢重金属的人。您现在可以找到喜欢重金属和朋克 (AND ...) 的人

用户控件将 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') 获取到处理程序的方法，这样我就可以构建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

好的，看来我得回答我自己的问题了。如果您想像我一样做，这里是人们需要的 sn-ps。

希望对某人有所帮助，

干杯， .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 到代码隐藏。注意隐藏元素接收会话密钥的成功部分。还有 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;
}

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

最后在提交按钮点击，从Session中抓取多余的数据。

    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;
}