Question

我有List<Foo>用于创建多个面板。对于这些面板中的每一个，我想绑定一个javascript函数，当单击该函数时，将使用此Foo对象的内容填充不同的Panel。像这样：

Table table = new Table();
        table.Style.Add("width", "100%");
        var foos = _fooManager.OrderedFoos;
        var row = new TableRow();

        for (int i = 0; i < foos.Count; i++)
        {
            row.Cells.Add(CreateButton(foos[i]));
            if (i % 3 == 2)
            {
                table.Rows.Add(row);
                row = new TableRow();
            }
        }
        if (row.Controls.Count > 0)
            table.Rows.Add(row);

        return table;

private TableCell CreateButton(Foo foo)
    {
        TableCell cell = new TableCell();
        Panel panel = new Panel() { CssClass = "tile third color-blue" };
        Label label = new Label() { Text = foo.FooName };
        panel.Controls.Add(label);
        cell.Controls.Add(panel);
        cell.Attributes.Add("data-foo-id", foo.FooID.ToString());
        cell.Attributes.Add("onClick", @"onFooClick(this); return false;");
        return cell;
    }

因此。我将如何在同一页面上的Panel上显示单击的Foo对象的内容（可通过fooID识别）？我理解如何通过ASP BUtton和回发来实现这一点，但我想尽可能避免这种情况。

Answer 1

你可以用两种方式做到。

首先（不太建议，因为可以向客户端发送大量数据）：在加载但隐藏时创建所有面板（style =＆＃34; display：none＆＃34;）。然后当用户点击按钮响应此点击并显示相应的面板时。

第二：使用ajax和webmethods加载面板内容。

这里有一个很好的例子：ajax and webmethods

Answer 2

使用jQuery ajax，您可以在没有回发的情况下向服务器发送请求。你的onFooClick看起来像下面的

function onFooClick(foo){
    //get data-foo-id
    var fooID = $(foo).data("foo-id");
    $.ajax({
        requestType: "get",
        url: "WEBSERVICEURL",
        data: { "fooid": fooID },
        contentType: "application/json; charset=utf-8",
        dataType: "json"
    }).done(function(data){
        data = JSON.parse(data);
        $("#otherPanel").text(data.Name);//or whatever field/data you want to display
    }).fail(function(error){
        alert(error);
    });
}

在你的WEBSERVICE中，你根据fooID获取数据并返回对象（序列化为json）

done()方法将接收此数据并可显示到您想要的任何div /面板

最简单的方法来填充控制而无需回发？

2 个答案: