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. Follow

3 Replies
4202 Views

Similar Articles

[PageSpeed] 38
Get it on Google Play
Get it on Apple App Store

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:

Similar Artilces:

ajax or not to ajax.
Heres a strange one for you. I have a textbox, a button and a gridview on a page. I enter some search text which returns 500 odd records in under a second. When i wrap the gridview in an updatepanel, set its update mode to "conditional" and the trigger to the button the page can take 2-4 seconds to render. I think the problem is down to page redering some how as my progress indicator stops at around the same time as the normal postback would appear. I have also noticed this very behaviour and have come to the conclusion that in cases like this it is better to hand code a XMLHttp...

My AJAX is not AJAXing!
Hi, I was having trouble with a new AJAX enabled code so I tried to just to do a simple test page. I did the simple Label control with button example covered in this tutorial http://www.asp.net/learn/ajax/tutorial-01-cs.aspx I'm having the same problem. Functionalitw-wise it works but the page is refreshing and flickering. That means it's not the code but maybe my set up. I'm using VisualStudio 2005 and the application is currenty .NET 2.0. In VS.NET, I do see the AJAX controls though. What could this be?Thanks,Sam did you install the Ajax extensions? Now, it's AJAXing!...

Like AJAX, but not AJAX
When a user submits a page, i want the submit button to be disabled the text be something else like [ Loading.... ] and when the page loads after post back , the button should be enabled and the text  be [ Submit ]. Is it possible to do this without AJAX in asp.netNoob Rocks You will need to use javascript. One way you can do it, add this attribute in the page_load event:Button1.Attributes.Add("onclick", GetPostBackEventReference(Button1) + ";this.value='Please wait...';this.disabled = true;");This does have its limitations, but it should work. www.hopeasp.net Are you...

The Ajax Tabcontrol
Hi! Neat control that tabcontrol but for some reason it doesn't compleatly flies on the wings of ajax. This is what I have and what I want:  I have four tabpanels nested into the parent Tabcontrol container. In these tabpanels I have a Updatepanel each. What I want is that when I change tabs for example from tab 1 to tab 2 the content in the Updatepanel in tab 2 should be updated. I have on each page a refesh button that can refresh it with out a full postback, but for somereason no matter how I do it I can seem to get the updatepanel to refresh without a full postback wheb sw...

Converting Non Ajax enabled project - to an Ajax enabled
I have a new requirement which needs a calendar control as in the ajax toolkit.But my application is in VS 2005 and is not an ajax enabled project. How difficult is it to convert the project to an ajax enabled one?If it is relatively easy to do it, will the conversion affect the behavior of the other pages within the projectwhich essentially dont use ajax functionality? Can someone please advise ? Hi,Converting your web application to Ajax enabled is very simple. It won't affect the other pages in you application.You can read about it in the following links:How Do I:Add ASP.NET AJAX ...

adding Ajax to my non-Ajax .NET web site
Hi all I've a site that i developed by .NET (visual studio.net 2005 - VB.net) and want to add Ajax into the pages now. I've downloaded required AJAX tools and be able to develop AJAX enabled pages but want to integrate ajax features to existing pages. Could you please help me how i can do this? Thanksmcb Look at the videos here: http://www.asp.net/learn/ajax-videos/  (number 7 in particular)Steve Wellens My blog if a web site is a normal asp web site then u have to add these lines in web.config under the system.web tag         <httpHand...

Does anyone know of either an ajax.net blog available or an 'inline editor' for ajax.net?
Hey all:  I'm desperately trying to find an AJAX control (I don't care if it's currently for ASP.NET AJAX.NET, since if not, I'll do the conversion and make it available to others) for creating blogs and another inline editor control, so that if there is text on the page, I can click on the text and it will automatically display an editor and allow me to edit the text/html.  Does anyone know of a control like this that's AJAX enabled?  Especially AJAX.NET.  I'm only interested in open-source, since any improvements I make I will make available on codeplex.com Thanks in...

Old AJAX in .NET 1.1 compatibility with .NET framework 2.0. Ajax does not work always ....................
Hello,I have converted the web site from .NET 1.1 to .NET 2.0. Some of the pages in the web site use AJAX which was developed in .NET 1.1Ajax does not work smoothly in .NET 2.0. Do I have to use ATLAS or is there any fix I can use to make the AJAX work ?Please let me know. Many thanks in advance. Nick..........

AJAX Master Page, AJAX Web Form and AJAX Client Control Question?
I gues to get the ball rolling I have VS 2008 and I am creating ASP.NET websites. I have programmed with VS 2005 and always had to add AJAX features by hand. Now in VS 2008 you have new templates AJAX Master Page, AJAX Web Form, AJAX Client Behavior, AJAX Client Control, AJAX Client Library, AJAX-embeded WCF Service On these three templates AJAX Master Page, AJAX Web Form and AJAX Client Control. What makes them different from normal templates? Is it just a matter of adding the script manager to the page or is using a AJAX Master Page have a huge benefit over doing individual pages? I have...

old ajax-new Ajax
hi i am using atlas in some asp.net pages and january ctp in some pages. now that i want to reuse those pages in my new ctp enabled site i am getting atlas errors. is the january ajax not supporting atlas toolkit. Hi, If I'm not mistaking it uses the ASP.NET Extensions 1.0 version instead of Atlas. It's probably best that you upgrade your atlas site to use ASP.NET AJAX 1.0 unless you have a specific reason not to. Grz, Kris.Read my blog. Handy Firefox plugins for web developers.Workaround for non working Mark as answer buttons. What error exact u are getting.??? Post the error here...

Fetch a page ajax with ajax
In the video number 30 presented by Joe Stagner in “How Do I?” videos, just in the beginning he says that we can fetch an existing aspx page into our page. I doing exactly the same right now, but I’m inserting a page with some controls that triggers events against the update panel that contains a repeater control, such as paging events, filtering and ordering data. I’ve tested the repeater’s control page and it’s working perfectly, though when I insert into another page and trigger an event I got an error, which is undefined. I still can see the page rendered in the first time, the problem o...

Is AJAX really AJAX anymore?
Was just curious as to what others think of the term AJAX, and it's relevence. I mean yes we can still return XML, but I think most people return JSON now so does the term AJAX really apply anymore or should it be AJAXOJSON (Asyncronous Javascript And XML Or Javascript Object Notation) Thoughts?Evan's BlogCodeundrum: Code that puzzles. Evan Freeman: but I think most people return JSON now I think you may over estimate JSON.... I would say the opposite. Nearly all the "Ajax" work I see is actually Ajax..... I was drawing an architecture diagram on my whitebo...

What are Ajax and Aspnet Ajax ,both work the same?
Hi, Hope some1 can help to explain. I am a bit of confused. For what I know, ajax, it is a native Javascript inside the javascript Library. and it is supported by most browser. To use ajax , I have to create it like this for Ms IE: var xmlHttp xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");      or  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  I believe I can use this script in Aspx page in Html section.     To use Aspnet Ajax:  How do I create the Ajax Object? And How do I use the ajax Properties and Methods? ...

ajax gallery or ajax slideshow
where can i get codes for ajax gallery or ajax slideshow for asp.net 2.0(vb)??? Hi melvinc, "Silverlight powered Slide Show"gallery can be a option.Try using: http://nikhilk.net/Silverlight-Slideshow.aspx    PeeyushDo mark the most helpful reply/replies as "Answer". how can i link ms access to my slideshow using webservices ans asp.net(VB)??? Hi melvinc, The above control does not use any database. It uses an xml file to maintain albums and their associated photos.PeeyushDo mark the most helpful reply/replies as "Answer". Hi, Did you...

Web resources about - To AJAX, or not to AJAX? - asp.net.ajax-discussion

Ajax - Wikipedia
Ajax may refer to: Mythology Ajax (mythology), son of Telamon, ruler of Salamis and a hero in the Trojan War, also known as "Ajax the Great" ...

Senior Front-End Developer (Javascript and AJAX)
Company: Sometrics Category: Software Development Location: Los Angeles, CA How to Apply: jobs@sometrics.com Description: We are looking for ...

CIA : Operation Ajax the Interactive Graphic Novel for iPad for iPad on the iTunes App Store
Get CIA : Operation Ajax the Interactive Graphic Novel for iPad on the App Store. See screenshots and ratings, and read customer reviews.

Windows Live Hotmail - Non AJAX Screenshot - Flickr - Photo Sharing!
Windows Live Hotmail Integrates both mail and web search functionality.

U.S. and Them: Operation Ajax - Iran and the CIA coup (1/2) - YouTube
Part 2: As nationalism begins to spread through the region the Iranian call to nationalize its oil resources threatens Britains oil interests ...

UCL round-up: Celtic claim narrow win, Ajax held, Monaco put one foot in playoffs
Dedryck Boyata's late goal gave Celtic a 1-0 home win over Azerbaijani side Qarabag in their third qualifying round first leg clash on Wednesday. ...

Aussie DJ Ajax killed after being hit by a truck in Melbourne
UPDATE: AUSTRALIAN DJ Ajax, who died suddenly on his birthday yesterday, has been remembered as a pioneer who changed the nation's dance music ...

On-loan keeper's mistake helps Ajax to win at Eagles
Ajax Amsterdam had their own on-loan goalkeeper Mickey van der Hart to thank for a late 2-1 win at Go Ahead Eagles in the Dutch championship ...

Manchester United dominate Ajax in Europa League debut
Manchester United dominate Ajax in Europa League debut

Adelaide United's Awer Mabil inching closer to Ajax move
Adelaide United youngster Awer Mabil looks likely to move to Amsterdam club Ajax.

Resources last updated: 11/29/2015 3:19:46 PM