无需回发即可填充控件的最简单方法

本文关键字：控件 最简单 方法 填充 | 更新日期: 2023-09-27 18:03:14

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

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

。如何在同一页面的面板上显示所单击的Foo对象(通过fooID可识别)的内容?我知道如何通过ASP按钮和回发来实现这一点，但如果可能的话，我想避免这种情况。

无需回发即可填充控件的最简单方法

有两种方法。

首先(不推荐，因为可以向客户端发送大量数据):在加载时创建所有隐藏的面板(style="display:none")。然后，当用户单击按钮时，响应此单击并显示相应的面板。

第二:

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

这里有一个很好的例子:ajax和webmethods

使用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/panel

相关文章：