Trying to get started with AJAX

Last post 05-13-2008 1:12 PM by TonyDong. 3 replies.

Sort Posts:

  • Trying to get started with AJAX

    05-12-2008, 5:52 PM
    • Loading...
    • SamU
    • Joined on 07-29-2002, 4:09 PM
    • West Palm Beach, FL
    • Posts 541

    Hi,

    I'm trying to handle DB connections through AJAX. I watched the AJAX implementation video on this site but looks like when I click a button to request data, my page is still making that trip to the server -- or I should say refreshing. I

    Here's the scenario: I have three GridViews sitting side by side in a user control. First GridView is used to populate the second one and the second one is used to populate the third one. The first GridView has a button control in a template field. When user clicks the button, the second GridView gets populated which requires a database lookup.

    I simply added a ScriptManager to the user control then put the GridViews in an UpdatePanel control. Is there anything else I need to do implement AJAX in this scenario?

    Here's the code:

     

    1    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MyUserControl.ascx.cs" Inherits="MyApp.UserControls.MyUserControl" %>
    2    <%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="System.Web.UI" TagPrefix="asp" %>
    3    <asp:ScriptManager ID="ScriptManager1" runat="server">
    4    </asp:ScriptManager>
    5    <asp:UpdatePanel ID="P1" runat="server">
    6        <ContentTemplate>
    7            <table border="0" width="98%">
    8                <tr>
    9                    <td width="30%" valign="top">
    10                       <span style="color: Maroon; font-weight: bold;">Campaigns List</span><br /><br />
    11                       <asp:Label ID="lblMessage" runat="server" EnableViewState="false" />
    12                       <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    13                           <Columns>
    14                               <asp:BoundField DataField="Description" HeaderText="Campaign" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="left" />
    15                               <asp:BoundField DataField="ProjectedStartDate" HeaderText="Projected Start Date" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center" DataFormatString="{0:d}" HtmlEncode="false" />
    16                               <asp:TemplateField HeaderText="Airing Info" HeaderStyle-HorizontalAlign="center" ItemStyle-HorizontalAlign="center">
    17                                   <ItemTemplate>
    18                                       <asp:Button ID="btnMyList" runat="server" Text="Get Info" OnClick="btnMyList_Clicked" CommandArgument='<%# Eval("CampaignID") %>' />
    19                                   </ItemTemplate>
    20                               </asp:TemplateField>
    21                           </Columns>
    22                       </asp:GridView>
    23                   </td>
    24                   <td class="ms-verticaldots"> </td>
    25                   <td width="35%" valign="top">
    26                       <span style="color: Maroon; font-weight: bold;">Airing List</span><br /><br />
    27                       <asp:Label ID="lblMessage2" runat="server" EnableViewState="false" />
    28                       <asp:GridView ID="GridView2" runat="server"></asp:GridView>
    29                   </td>
    30                   <td class="ms-verticaldots"> </td>
    31                   <td width="35%" valign="top">
    32                       <span style="color: Maroon; font-weight: bold;">Airing Schedule</span><br /><br />
    33                       <asp:Label ID="lblMessage3" runat="server" EnableViewState="false" />
    34                       <asp:GridView ID="GridView3" runat="server"></asp:GridView>
    35                   </td>
    36               </tr>
    37           </table>
    38       </ContentTemplate>
    39   </asp:UpdatePanel>
     

    And here's the code behind:

    1    public void btnMyList_Clicked(object sender, EventArgs e)
    2            {
    3                // User wants to retrieve airing list for specified CampaignID
    4    
    5                Button btnA = (Button)sender;
    6                string strCampaignID = string.Empty;
    7                strCampaignID = btnA.CommandArgument.ToString();
    8    
    9                GetMyList(strCampaignID);
    10           }
    11   
    12   
    13   private void GetMyList(string strCampaignID)
    14           {
    15               // This method gets all the airing info for specified CampaignID
    16               DataTable dt = new DataTable();
    17               dt = MyApp.ClassLibrary.DataClasses.DBRGetMyList(strCampaignID);
    18   
    19               // Check for data
    20               if (dt.Rows.Count == 0)
    21               {
    22                   // No data
    23                   lblAiringMessage.Text = "Currently, there is no info for this campaign...";
    24                   GridView2.Visible = false;
    25               }
    26               else
    27               {
    28                   // Some data. Validate it.
    29                   if (dt.Rows[0][0].ToString() == "err")
    30                   {
    31                       // Database error
    32                       err = 1;
    33                       ErrorHandler();
    34                   }
    35                   else
    36                   {
    37                       // Good data
    38                       GridView2.DataSource = dt;
    39                       GridView2.DataBind();
    40   
    41                       lblMessage2.Visible = false;
    42                       GridView2.Visible = true;
    43                   }
    44               }
    45           }
    
     
    Thanks,

    Sam
  • Re: Trying to get started with AJAX

    05-12-2008, 7:25 PM
    • Loading...
    • TonyDong
    • Joined on 02-01-2006, 1:30 PM
    • BC, Canada
    • Posts 743

    You have two ways to do it

    1. use update panel, so it is postback a part of page

    2. use HTML button instead of server button

    <asp:Button ID="btnMyList" runat="server" Text="Get Info" OnClick="btnMyList_Clicked" CommandArgument='<%# Eval("CampaignID") %>' />

    change to

    <input type="button" Text="Get info" onclick="btnMyListAjaxCall('<%# Eval("CampaignID") %>')" />

    Don't forget to click "Mark as Answer" on the post(s) that helped you.
  • Re: Trying to get started with AJAX

    05-12-2008, 11:31 PM
    • Loading...
    • SamU
    • Joined on 07-29-2002, 4:09 PM
    • West Palm Beach, FL
    • Posts 541

    Tony,

    Thanks for your response. A few questions:

    Am I supposed to do 1 OR 2 or both to fix the issue?

    I'm also not sure about your first point. I'm already using UpdatePanels.

    Also, when I switch to an HTML button, I get "The server tag is not well formed." error. I think it's due to single and double quotes.

    Last question: Can I not use ASP.NET buttons if I want AJAX in my code?

    Thanks,

    Sam
  • Re: Trying to get started with AJAX

    05-13-2008, 1:12 PM
    Answer
    • Loading...
    • TonyDong
    • Joined on 02-01-2006, 1:30 PM
    • BC, Canada
    • Posts 743

    Let's do 2 to fix your problem

    The server tag is not well formed error came from the server tag, check the single and double quotes and also try to remove it with hard code like "abc"

    Yes, of cause you can use html button without use asp.net buttons if you want to use ajax in your code.

    The html button is the base, and asp.net button is base on html button.

    Don't forget to click "Mark as Answer" on the post(s) that helped you.
Page 1 of 1 (4 items)