我正在使用带有 AJAX 的 ASP.NET 来构建一个类似于
http://sanjosepizzaexpress.com/order-online/
如果您向下滚动到食物菜单，然后单击中间列中的食物项目，您会看到该项目向下扩展，让用户提供菜单项详细信息以进行订购。没有页面重新加载。
我正在尝试使用 C# 中的 Javaccript 使用带有 AJAX 的 ASP.NET 来获得这种效果。我遇到了一些问题。
我想扩展每个单独的食物菜单项并显示数据库中的项目详细信息，而无需重新加载完整的页面。在我的尝试中（下面的代码），整个页面总是重新加载，并且每次我点击单个项目时都会扩展每个菜单项。
我的食物菜单由单列数据绑定 asp: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>
再说一次，我的问题是：整个页面总是会重新加载，每次我点击单个项目时都会扩展每个菜单项。
有人有什么想法吗？感谢乐队。