Question

Windows 7, visual web developer express 2010, c#, asp.net, webforms. Running program with ctrl-F5 from vwd.

Using tabs with an asp:listview on each tab. I have code-behind the items in each listview.
The code behind uses an ID (from the item) to pull a record from a database (mdf file) via xsd. to populate textboxes on the page.

When I click on an item, the program properly grabs the correct record and properly puts the information from that record into the textboxes on the screen. The problem is that it’s either refreshing or reloading the page … which causes it to go to the first tab instead of the tab I’m on. I assume this would be disconcerting and unexpected to the user (it’s disconcerting and unexpected to me).

Here’s how I handle the code behind for an item click in the listview:

    protected void lv_PBP_click(object sender, ListViewCommandEventArgs e)
    {
        if (!e.CommandName.Equals("Sort"))
        {
            int searchID = Convert.ToInt32(e.CommandArgument.ToString());
            TableAdapters.PBPTableAdapter pbpAdapt =
                new TableAdapters.PBPTableAdapter();
            PBPDataTable tbl = pbpAdapt.GetData(searchID);
            tbMessage.Text = tbl.Rows[0]["pMessage"].ToString();
            lbField2.Text = tbl.Rows[0]["pField2"].ToString();
            lbField3.Text = tbl.Rows[0]["pField3"].ToString();
        }
    }

Here’s how the the listview is defined:

    <div class="tab-content" style="width:1000px;">
           <h1 class="tab" title="title1">title1</h1>
           <asp:ListView runat= "server"   ID="somid" DataSourceID="ads" OnItemCommand="lv_PBP_click">
              <LayoutTemplate>
                <table  id="table1"  style="background-color:White;border-collapse:collapse;" width="100%">      
                <tr>                  
                    <td width="75%">    <asp:Button runat="server" ID="SortButton" 
                     Text="msg" CommandName="Sort" CommandArgument="pMessage" /></td>
                     <td>    <asp:Button runat="server" ID="LinkButton1" 
                     Text="F2 CommandName="Sort" CommandArgument="pField2" /> </td>
                    <td>    <asp:Button runat="server" ID="SortF3" 
                     Text="F3" CommandName="Sort" CommandArgument="pField3" /></td>
                  </tr>
                  <tr runat="server" id="itemPlaceholder" style="background-color:White" >
                  </tr> 
                </table>
                <asp:DataPager runat="server" ID="idxxx" PageSize="10" style="background-color:White">
                    <Fields> 
                      <asp:TemplatePagerField>              
                        <PagerTemplate>
                        <b>
                        Page
                        <asp:Label runat="server" ID="CurrentPageLabel" 
                          Text="<%# Container.TotalRowCount>0 ? (Container.StartRowIndex / Container.PageSize) + 1 : 0 %>" />
                        of
                        <asp:Label runat="server" ID="TotalPagesLabel" 
                          Text="<%# Math.Ceiling ((double)Container.TotalRowCount / Container.PageSize) %>" />
                        (
                        <asp:Label runat="server" ID="TotalItemsLabel" 
                          Text="<%# Container.TotalRowCount%>" />
                        records)
                        <br />
                        </b>
                        </PagerTemplate>
                      </asp:TemplatePagerField>

                      <asp:NextPreviousPagerField
                        ButtonType="Button"
                        ShowFirstPageButton="true"
                        ShowNextPageButton="false"
                        ShowPreviousPageButton="false" />

                      <asp:NumericPagerField 
                        PreviousPageText="&lt; Prev 10"
                        NextPageText="Next 10 &gt;"
                        ButtonCount="10" />

                      <asp:NextPreviousPagerField
                        ButtonType="Button"
                        ShowLastPageButton="true"
                        ShowNextPageButton="false"
                        ShowPreviousPageButton="false" />

                    </Fields>
                </asp:DataPager>
              </LayoutTemplate>
                <ItemTemplate>
                <tr id="Tr1" runat="server" style="background-color:#ECE5B6;" >
                    <td><asp:LinkButton runat="server" ID="ms1"   Text='<%# Eval("pMessage")%>'  CommandArgument='<%# Eval("pID") %>' /></td>
                    <td><asp:Label runat="server" ID="Label1"  Text='<%# Eval("pField2")%>'  /></td>
                    <td><asp:Label runat="server" ID="Status"  Text='<%# Eval("pSField3")%>' /></td>
                </tr>
                </ItemTemplate>
                <AlternatingItemTemplate>
                <tr id="Tr1" runat="server" style="background-color:#FAF8CC;" >
                    <td><asp:LinkButton runat="server" ID="ms2"   Text='<%# Eval("pMessage")%>'  CommandArgument='<%# Eval("pID") %>' /></td>
                    <td><asp:Label runat="server" ID="Label1"  Text='<%# Eval("pField2")%>'  /></td>
                    <td><asp:Label runat="server" ID="yyy"  Text='<%# Eval("pField3")%>' /></td>
                </tr>

                </AlternatingItemTemplate>

            </asp:ListView>
   </div>

The LinkButtons near the bottom of the code corresponds to the items in the listview which invoke the code behind in the first snippet above. I think I’m missing something fundamental about what buttons do. Maybe buttons (or linkbuttons) always do a page refresh (seems unlikely). Anyway, what I want to do is stop the page reload … how?

OTOH, maybe there’s some reason I should not stop this page reload … maybe the designers want this behavior. In that case, what should I do? Am I forced into ajax or is there another way to do this? (Just change the contents of some message boxes without the page refreshing… or refreshing into the exact same state it was left in so that it doesn’t look like it was refreshed.)

Answer 1

Your suspicion is correct.
All interactions with the server involve a postback, which reloads the page.

If you want the page to interact with the server without a postback, you need to use AJAX.