To AJAX, or not to AJAX?

Some body suggested to me to use AJAX. I figured it's not the brand name detergent nor the Dutch city. Confused

So here is what I have and please tell me if it ca be done with ajax, and perhaps point me to some examples, etc.

The page contains several GridViews and FormViews that display data using several data calls. (Yeah, there is my first issue. Need to figure out how to cash all that.)

This is an application that track work orders, so the top most FV has the user info and summary information of the work order. It is editable and so far it works well. There is also another set of infroamtion that I want to fit into the picture: is the "log history" of the work order - a chronological track record.

I want to be able to have the summary FV and log history GV displayed in such way that you toggle a button or link to display either of the views. Similarly as this forums Compose and Options tab. I don't want to make a trip to the DB each time user clicks the tab.

I realize this may be complex matter, but any information that points me to that direction will be appreciated.

Thanks,

EJM


Software engineering is a team sport.
0
EJM
11/19/2007 5:00:01 PM
📁 asp.net.ajax-discussion
📃 13973 articles.
⭐ 1 followers.

💬 3 Replies
👁️‍🗨️ 4056 Views

I'd say you Ajax. It's pretty easy, or in fact very easy and you get a really different feel to your app. Clients are still enjoying the Ajax feel and don't take it for granted, so it's a nice addition that doesn't take a long time to implement.

Also, you don't have to make as many db calls, and if you use caching you can get it all pretty efficient.

Install the "Ajax control toolkit" and then an example page would look like:

 

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    YOUR DYNAMIC AJAX STUFF GOES HERE
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>

 

Cheers!

/Eskil

0
utlandsfantomenno1
11/19/2007 9:04:24 PM

I did some "learning" in the meantime and tried to implement a CollapsiblePanelExtender, which seemed like solution to the problem above, but did get very far because after I ran it realize that the Edit link on my formview stopped working. As it turned out the entire formview became a "clickable" object that would collapse or expand the log history panel.

What I wanted to accomplish was to have toggle effect. Here the code, can you figure it out and let me know what I'm doing wrong?  Thanks.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReqDetailx.aspx.cs" Inherits="Requirements_ReqDetailx" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>Requirement Detail View</title>

<link href='<%= Application["strAppPath"] + "/StyleSheets/MainStyles.css" %>' type=text/css rel=stylesheet>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" EnableScriptGlobalization="false" />

<p align="right"><a href="javascript:window.opener='x';window.close();" class="Menu">Close This Window</a></p>

<table cellpadding="0" cellspacing="0" border="0" class="ContentBox" bgcolor="#ece9d8" >

<tr>

<td colspan="2">

 

<cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server"

TargetControlID="pnlLog"

ExpandControlID="fvCommonDetail"

CollapseControlID="fvCommonDetail"

Collapsed="false"

TextLabelID="lblGeneral"

ExpandedText="Log History"

CollapsedText="General Information"

SuppressPostBack="true" />

 

<asp:Panel ID="pnlGeneral" runat="server" CssClass="CollapsePanelHeader">

<asp:Label ID="lblGeneral" runat="server" Text="See Log History" />

<br />

<asp:FormView ID="fvCommonDetail" runat="server" BackColor="#ece9d8" Width="800" DataKeyNames="ReqID"

OnModeChanging="fvCommonDetail_ModeChanging" OnItemUpdating="fvCommonDetail_ItemUpdating" OnPageIndexChanging="fvCommonDetail_PageIndexChanging">

<ItemTemplate>

<table cellpadding="0" border="0" cellspacing="0">

<tr>

<td colspan="2">

<asp:HiddenField ID="hLblReqID" runat="server" Value='<%# Eval("ReqID") %>' />

<asp:Label id="lblReqNum" runat="server" Text='<%# Eval("ReqNumber") %>' ForeColor="#ff0000" Font-Bold="true" />&nbsp;-&nbsp;<asp:Label id="lblReqTitle" runat="server" Text='<%# Eval("ReqTitle") %>' ForeColor="#ff0000" Font-Bold="true" />

</td>

</tr>

<tr valign="top">

<td colspan="2">

<table cellpadding="0" cellspacing="0" border="1">

<tr valign="top">

<td>

<table cellpadding="3" border="0" cellspacing="0" >

<tr valign="top"><td nowrap class="TableColumnMainPageHeader">&nbsp;Submitted by:</td><td><asp:Label id="lblSubmitter" runat="server" Text='<%# Eval("Submitter") %>' Width="160" /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Entry Date:</td><td><asp:Label id="lblEntryDate" runat="server" Text='<%# Eval("EntryDate") %>' Width="160" /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Date Needed:</td><td><asp:Label id="lblDateNeeded" runat="server" Text='<%# Eval("DateNeeded") %>' Width="160" /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Funding Org:</td><td><asp:Label id="lblFundOrg" runat="server" Text='<%# Eval("FundingOrg") %>' Width="160" /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Total Cost:</td><td><asp:Label id="lblCost" runat="server" Text='<%# Eval("TotalCost") %>' Width="160" /></td></tr>

<tr valign="top"><td nowrap class="TableColumnMainPageHeader">&nbsp;Funding Available:</td><td><asp:Label id="lblFundingAvailable" runat="server" Text='<%# ((Int32)Eval("FundingAvailable")==0?"Yes":"No") %>' Width="160" /></td></tr>

</table>

</td>

<td>

<table cellpadding="3" border="0" cellspacing="0" Width="540">

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Description:&nbsp;</td><td width="490"><asp:Label id="lblDescription" runat="server" Text='<%# Eval("Description") %>' /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Justification:&nbsp;</td><td><asp:Label id="lblJustification" runat="server" Text='<%# Eval("Justification") %>' /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Impact:&nbsp;</td><td><asp:Label id="lblImpact" runat="server" Text='<%# Eval("Impact") %>' /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Building No:</td><td><asp:Label id="lblBldg" runat="server" Text='<%# Eval("FacilityNum") %>' Width="160" /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Floor No:</td><td><asp:Label id="lblFloor" runat="server" Text='<%# Eval("FloorNum") %>' Width="160" /></td></tr>

<tr valign="top"><td class="TableColumnMainPageHeader">&nbsp;Room No:</td><td><asp:Label id="lblRoom" runat="server" Text='<%# Eval("RoomNum") %>' Width="160" /></td></tr>

</table>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="TableColumnMainPageHeader">&nbsp;</td><td align="right">

<asp:LinkButton CommandName="Edit" ID="btnEdit" runat="server" Text="Edit" cssclass="Menu" />

</td>

</tr>

</table>

</ItemTemplate>

<EditItemTemplate>

 

<table cellpadding="3" border="1" cellspacing="0" Width="400">

<tr>

<td colspan="2">

<asp:Label id="lblReqNum" runat="server" Text='' ForeColor="#ff0000" Font-Bold="true" />&nbsp;-&nbsp;<asp:Label id="lblTitle" runat="server" Text='<%# Eval("ReqTitle") %>' ForeColor="#ff0000" Font-Bold="true" /></td></tr>

<tr valign="top">

<td>

<table cellpadding="3" border="0" cellspacing="0">

<tr valign="top">

<td nowrap class="TableColumnMainPageHeader">&nbsp;Submitted by:</td>

<td>

<asp:Label id="lblSubmitter" runat="server" Text='<%# Eval("Submitter") %>' Width="160" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Entry Date:</td>

<td>

<asp:Label id="lblEntryDate" runat="server" Text='<%# Eval("EntryDate") %>' Width="160" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Date Needed:</td>

<td>

<asp:Calendar ID="calDateNeeded" runat="server" SelectedDate='<%# Bind("DateNeeded") %>' Width="100" >

<SelectedDayStyle BackColor="Yellow" ForeColor="Black" />

<TitleStyle ForeColor="Black" Font-Size="11px" />

</asp:Calendar></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Funding Org:</td>

<td>

<asp:TextBox id="txtFundOrg" runat="server" Text='<%# Bind("FundingOrg") %>' Width="100" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Total Cost:</td>

<td>

<asp:TextBox id="txtTcost" runat="server" Text='<%# Bind("TotalCost") %>' Width="100" /></td></tr>

<tr valign="top">

<td nowrap class="TableColumnMainPageHeader">&nbsp;Funding Available:</td>

<td>

<asp:DropDownList ID="ddlFunding" runat="server">

<asp:ListItem Text="Yes" Value="0" />

<asp:ListItem Text="No" Value="1" />

</asp:DropDownList>

</td>

</tr>

</table>

</td>

<td>

<table cellpadding="3" border="0" cellspacing="0" width="500">

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Description:&nbsp;</td>

<td>

<asp:TextBox id="txtDescription" runat="server" Text='<%# Bind("Description") %>' MaxLength="256" TextMode="MultiLine" Rows="4" Width="350" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Justification:&nbsp;</td>

<td>

<asp:TextBox id="txtJustification" runat="server" Text='<%# Bind("Justification") %>' MaxLength="256" TextMode="MultiLine" Rows="4" Width="350" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Impact:&nbsp;</td>

<td>

<asp:TextBox id="txtImpact" runat="server" Text='<%# Bind("Impact") %>' MaxLength="256" TextMode="MultiLine" Rows="4" Width="350" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Building No:</td>

<td>

<asp:TextBox id="txtBldg" runat="server" Text='<%# Bind("FacilityNum") %>' Width="100" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Floor No:</td>

<td>

<asp:TextBox id="txtFloor" runat="server" Text='<%# Bind("FloorNum") %>' Width="100" /></td></tr>

<tr valign="top">

<td class="TableColumnMainPageHeader">&nbsp;Room No:</td>

<td>

<asp:TextBox id="txtRoom" runat="server" Text='<%# Bind("RoomNum") %>' Width="100" /></td></tr>

</table>

</td>

</tr>

<tr>

<td class="TableColumnMainPageHeader">&nbsp;</td>

<td align="right">

<asp:HiddenField ID="hReqDesc" runat="server" Value='<%# Bind("Description") %>' />

<asp:HiddenField ID="hReqID" runat="server" Value='<%# Bind("ReqID") %>' />

<asp:LinkButton CommandName="Update" ID="btnUpdate" runat="server" Text="Update" cssclass="Menu" />

<asp:LinkButton CommandName="Cancel" CausesValidation="False" ID="btnCancel" runat="server" Text="Cancel" cssclass="Menu" />

</td>

</tr>

</table>

</EditItemTemplate>

</asp:FormView>

</asp:Panel>

<br />

 

<asp:Panel ID="pnlLog" runat="server" CssClass="CollapsePanel">

<asp:Label ID="lblLogHist" runat="server" Text="This is Log History" />

<!-- This is where the log history GridView goes -->

</asp:Panel>

 

</td>

</tr>

</table>

<p align="center"><asp:Label ID="lblConfirmation" ForeColor="red" runat="server" /></p>

<p align="right"><a href="javascript:window.opener='x';window.close();" class="Menu">Close This Window</a></p>

</form>

</body>

</html>


Software engineering is a team sport.
0
EJM
11/19/2007 9:19:01 PM

Had a quick look and it seems you need to add an updatepanel: 

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>
    YOUR DYNAMIC AJAX STUFF GOES HERE
    </ContentTemplate>
    </asp:UpdatePanel>

Cheers!

/Eskil

0
utlandsfantomenno1
11/19/2007 9:49:45 PM
Reply: