Asp.net UserControls in datagrid using AJAX and __doPostBack

Question

I'm using ASP.NET w/ AJAX to build a site that's similar to

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

If you scroll down to the food menu, and click on a food item in the middle collumn, you see that the item expands downward to let the user to provide menu item details for ordering. There is no page reload.

I am trying to get this effect using ASP.NET w/ AJAX using Javaccript in C#. I'm having some problems.

I want to expand each individual food menu item and display item detail data from a database without a complete page reload. In my attempt (code below), the whole page is always re-loaded and every menu item is expanded every time I chick on an individual item.

My food menu is comprised of a single-collumn databound asp:datagird. Each datagird item is a user control (OM:MnuItem) :

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

MenuItem.ascx has2 divs. One div (menuItemDisplay) has the MenuItem's name, etc.. It is initially displayed in the food menu datagrid. When the user clicks on the menuItemDisplay div in the menu, the javascript DisplayItem function displays the second div (itemDetails). MenuItem.ascx contains the UpdatePanel and 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:

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

The ScriptManager is in default.aspx:

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

Again, my problem: The whole page is always re-loaded and every menu item is expanded every time I chick on an individual item.

Does anybody have any thoughts? Thanks for the band with.

Answer 1

You can use __doPostBack() to refresh an UpdatePanel, if you target the UpdatePanel itself.

This is how Dave Ward does it:

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