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

我有一个

列表

，用于创建多个面板。对于这些面板中的每一个，我想绑定一个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;
    }

Table Table=新表（）；
表.样式.添加（“宽度”、“100%”）；
var foos=\u fooManager.OrderedFoos；
var row=新表行（）；
for（int i=0；i0）
table.Rows.Add（行）；
返回表；
私有TableCell CreateButton（Foo-Foo）
{
TableCell=新的TableCell（）；
Panel Panel=new Panel（）{CssClass=“tile third color blue”}；
Label Label=new Label（）{Text=foo.FooName}；
面板。控件。添加（标签）；
单元格.控件.添加（面板）；
Add（“data foo id”，foo.FooID.ToString（））；
添加（“onClick”、@“onFooClick（this）；返回false；”；
返回单元；
}

---

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

您可以通过两种方式来实现

首先（由于可以向客户端发送大量数据，因此不推荐）： 加载时创建所有面板，但将其隐藏（style=“display:none”）。然后，当用户单击按钮时，响应此单击并显示相应的面板

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

---

这里有一个很好的例子：

使用jQueryAjax，您可以向服务器发送请求，而无需回发。您的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);
    });
}

在Web服务中，根据fooID获取数据并返回对象（序列化为json）

---

done（）。了解Ajax当/如果您有任何问题时，请返回。任何不使用回发的操作最好完全通过客户端代码完成。这意味着按钮的添加应该在javascript中完成，而不是在代码中完成。Ajax是另一种可能性，但既然您没有提到它，我假设您希望网页能够自给自足，而不需要来自后端的输入。这意味着基于javascript的DOM操作。不是说它不能通过后端代码和Ajax调用来完成，只是说如果您能够在第一次页面加载时提供所有需要的数据（如果实现正确，这将是唯一的页面加载），那么开发起来就不那么容易了。@EhsanSajjad正在阅读UpdatePanel。