使用 AJAX 和 __doPostBack 的数据网格中的 Asp.net UserControls

Question

我正在使用带有 AJAX 的 ASP.NET 来构建一个类似于

的网站

http://sanjosepizzaexpress.com/order-online/

如果您向下滚动到食物菜单，然后单击中间列中的食物项目，您会看到该项目向下扩展，以便用户提供菜单项详细信息以进行订购。没有页面重新加载。

我正在尝试使用带有 AJAX 的 ASP.NET 在 C# 中使用 Javaccript 来获得这种效果。我遇到了一些问题。

我想扩展每个单独的食物菜单项并显示数据库中的项详细数据，而无需重新加载完整的页面。在我的尝试中（下面的代码），整个页面总是会重新加载，并且每次我点击单个项目时都会扩展每个菜单项。

我的食物菜单由单列数据绑定 asp:datagird 组成。每个 datagird 项目是一个用户控件（OM:MnuItem）：

<asp:datagrid Runat="server">
   <Columns>
     <asp:TemplateColumn>
        <ItemTemplate>
          <OM:MenuItem ID="MenuItem1" ...  runat="server" />
        </ItemTemplate>
     </asp:TemplateColumn>
  </Columns>
</asp:datagrid>

MenuItem.ascx 有 2 个 div。一个 div (menuItemDisplay) 具有 MenuItem 的名称等。 它最初显示在食物菜单数据网格中。当用户点击菜单中的 menuItemDisplay div 时，javascript DisplayItem 函数显示 第二个 div (itemDetails)。 MenuItem.ascx 包含 UpdatePanel 和 ContentTemplate ：

<asp:UpdatePanel  ID="UpdatePanel1" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">

<ContentTemplate>

<div id="menuItemDisplay" onclick="DisplayDetails();">
<table   >
    <tr>
        <td align="left" style="width:90%;">
            <table >
               <tr>
                 <td >
                     <asp:Label ID="nameLbl" runat="server" />
                </td>
       ... etc ...
    </tr>
</table>

<div id="itemDetails" style="visibility:hidden;" runat="server">
  ... item details ...
</div>
</div>

</ContentTemplate>

</asp:UpdatePanel>

Javascript DisplayDetails 函数：

function DisplayDetails() 
{
    __doPostBack("DisplayDetails", "");

}

MenuItem.ascx.cs Page_Load：

protected void Page_Load(object sender, EventArgs e)
{
   if (IsPostBack)
  {
       if (Request.Form["__EVENTTARGET"] == "DisplayDetails")
       {
           itemDetails.Style.Value = "visibility:visible";
        }
   }
}

MenuItem.ascx.cs Page_Load：

protected void Page_Load(object sender, EventArgs e)
{
   if (IsPostBack)
  {
       if (Request.Form["__EVENTTARGET"] == "DisplayDetails")
       {
           itemDetails.Style.Value = "visibility:visible";
        }
   }
}

ScriptManager 在 default.aspx 中：

<asp:ScriptManager EnablePartialRendering="true"
 ID="ScriptManager1"  runat="server"></asp:ScriptManager>

再次，我的问题： 每次我点击单个项目时，整个页面都会重新加载，并且每个菜单项都会展开。

有人有什么想法吗？感谢乐队。

Answer 1

您可以使用__doPostBack() to refresh an UpdatePanel, if you target the UpdatePanel itself。

这就是戴夫·沃德的做法：

<div id="Container" onclick="__doPostBack('UpdatePanel1', '');">