AJAX best-practice page design

This may seem like a trivial question, but I have been away from web-based programming for some time and am not sure what the current best-practice is for page layout. Over the years there have been many approaches to web page design: frames, tables, masterpages, etc...

I'm asking because i'm trying to make an AJAX web-app with toolbars above and to the side of the content. Take a look at the current pages atwww.stairmand.com. There isn't any real content linked to the menus, but its enough to demonstrate my question. I managed to place the content in the correct position using an iframe (which i don't like), but i'd like to acheive an AJAX style content area... with "loading"images, etc. The problem is that the content is all dynamically generated in asp.net too, and I haven't worked out a way to place this in a div dynamically.

I'm sure there must be a really simple way to do this, either directly using javascript or one of the Ajax Toolkit components, but i'm stuck! I manage to put a static html string into a div with no problem, but how do i do this with dynamic pages - for example to return a datagrid. Help!!!!

if you want a page that is changed depending on selections made above and to the side menus of the page i would use a masterpage with a iframe. The master page can then use its menu options to tell the iframe where to go while keeping the menus in their current state

Ok.. in that case it seems like i'm doing the right thing. Is it possible to show an "updating" image while the i frame is loading?

yes, using ajax you can place this item called the "UpdateProgress" on a page. Basically you tie this to an update panel and set a time in milliseconds. This time determins after how long of the update panels loading time should the contents of the updateprogress should be shown. So if updateProgress contaings the word loading and a .gif pic that spins around, as soon as the update panel has spent more then the entered amount of time loading, the text and image will be shown to the user and take away when the panel is loaded

better yet just watch this, it will show you everything

http://www.asp.net/learn/videos/view.aspx?tabid=63&id=123

Excellent.

Thanks very much for your help!

no problem. if this info helped please mark as an answer, it gimes me points, which boost my confidence in all aspects of my life

You can use UpdateProgress Control for it..

Here you will get details..

http://ajax.asp.net/docs/overview/UpdateProgressOverview.aspx

AJAX becomes full postback in IIS

I made a simple AJAX page in Visual Studio 2005, which has a button click to get server's system time. It works fine inside the VS2005. But when I put it on IIS in Windows Server 2003, the button click becomes a full postback. Do I miss something? Does anyone have any idea?I wrote a testing Ajax website to get server time in a asp:UpdatePanel and deplyed it to Windows Server 2003 IIS.It worked fine and didn't?happen?to full postback.Here are my sample codes for your reference.Wish this can give you some helps.
<div>
<asp:UpdatePanel ID="upnlServerTime" runat="server">
<ContentTemplate>
<asp:Label ID="lblServerTime" runat="server" Text="Server Time"></asp:Label>
<asp:Button ID="btnServerTime" runat="server" Text="Get Server Time" OnClick="btnServerTime_Click" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="btnServerTime" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
Behind Code:
protected void btnServerTime_Click(object sender, EventArgs e)
{
Label lblServerTime = upnlServerTime.FindControl("lblServerTime") as Label;
lblServerTime.Text = DateTime.Now.ToLongTimeString();
}

I doubt you don't create web application when you create a virtual directory in IIS.Right mouse click virtual directory in IIS and select Properties,Click "Create" button to create application name and Choose Execute Permission for "Scripts only" or "Scripts Executable" from permission DropDownList.Try to addNetwork Service to virtual directory?when?deploying?Ajax?
website.
Wish this can give you some ideas.

ajax and webservices...

I have created a dataset. Each method of the tableadapter shows the right data when I preview it at design time.
However, when I load the page I get the value in both dropdownlists: [method error 500]

If I step throught the code, the webmethod is not hit even though I put a breakpoint on it (or is that normal?)

Here's my code:

.ASPX

<asp:DropDownList ID="ddlCountry1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlLocalCity" runat="server">
</asp:DropDownList>

<cc1:CascadingDropDown ID="CascadingDropDown1"
runat="server"
TargetControlID="ddlCountry1"
Category="CountryName"
prompttext="Select country"
ServicePath="LocalCities.asmx"
ServiceMethod="GetCountries">
</cc1:CascadingDropDown>
<cc1:CascadingDropDown ID="CascadingDropDown2"
runat="server"
TargetControlID="ddlLocalCity"
Category="CityName"
prompttext="Select city"
ServicePath="LocalCities.asmx"
ServiceMethod="GetCitiesForCountry"
LoadingText="Loading...">
</cc1:CascadingDropDown>

Local.vb

<WebMethod()> _
Public Function GetCountries(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim countryAdapter As CountryMainCitiesTableAdapters.CountriesTableAdapter = New CountryMainCitiesTableAdapters.CountriesTableAdapter
Dim countries As CountryMainCities.tblCountriesDataTable = countryAdapter.GetData
Dim values As New List(Of CascadingDropDownNameValue)
For Each dr As DataRow In countries
Dim CountryName As String = CType(dr("CountryName"), String)
Dim countryId As Integer = CType(dr("CountryID"), Integer)
values.Add(New CascadingDropDownNameValue(CountryName, countryId.ToString))
Next
Return values.ToArray
End Function

<WebMethod()> _
Public Function GetCitiesForCountry(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
Dim countryId As Integer
If (Not kv.ContainsKey("CountryID") _
OrElse Not Int32.TryParse(kv("CountryID"), countryId)) Then
Return Nothing
End If
Dim cityAdapter As New DataTable

Dim adapter As CountryMainCitiesTableAdapters.CountryMainCitiesTableAdapter = New CountryMainCitiesTableAdapters.CountryMainCitiesTableAdapter
Dim cityTable As CountryMainCities.tblCountryMainCitiesDataTable = adapter.GetDataByCountryID(countryId)
Dim values As New List(Of CascadingDropDownNameValue)
For Each dr As DataRow In cityTable
values.Add(New CascadingDropDownNameValue(CType(dr("CityName"), String), dr("CityID").ToString))
Next
Return values.ToArray
End Function

Try to follow up the following suggestions to fix the famous Method Error 500 for reference.
1.Try to read this thread -http://forums.asp.net/1476672/ShowThread.aspx#1476672
2.Try to write a web method in behind code to call web service as the following
???Country:<asp:DropDownList ID="ddlCountry" runat="server">
???</asp:DropDownList>
???<AjaxControls:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="ddlCountry" Category="Country" ????LoadingText="Loading....." ServiceMethod="GetCountries" BehaviorID="CascadingDropDown1" PromptText="- select country -">
???</AjaxControls:CascadingDropDown
???[WebMethod]
???[ScriptMethod]
???public CascadingDropDownNameValue[] GetCountries()
???{
???????WebService ws = new WebService();
???????return ws.GetCountries();
???}
Wish the above can help you.

The other thread did not help me a lot. But I changed some code, however I still receive the error [method 500]

and if I add the attribute
ServicePath="default.aspx.vb" to CascadingDropDown2 I receive the error [method 404]

The code-behind method GetCitiesForCountry is never hit...

DEFAULT.ASPX

<asp:DropDownList ID="ddlCountry1" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlLocalCity" runat="server">
</asp:DropDownList>

<cc1:CascadingDropDown ID="CascadingDropDown1"
runat="server"
TargetControlID="ddlCountry1"
Category="CountryID"
prompttext="Select country"
ServicePath="LocalCities.asmx"
ServiceMethod="GetCountries">
</cc1:CascadingDropDown>
<cc1:CascadingDropDown ID="CascadingDropDown2"
runat="server"
TargetControlID="ddlLocalCity"
ParentControlID="ddlCountry1"
Category="CityID"
prompttext="Select city"
ServicePath="default.aspx.vb"
ServiceMethod="GetCitiesForCountry"
LoadingText="Loading...">
</cc1:CascadingDropDown>

DEFAULT.ASPX.VB

<WebMethod(), Microsoft.Web.Script.Services.ScriptMethod()> _
Public Function GetCitiesForCountry(ByVal knownCategoryValues As String, ByVal category As String) As CascadingDropDownNameValue()
Dim kv As StringDictionary = CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues)
Dim CountryID As Integer
If (Not kv.ContainsKey("CountryID") _
OrElse Not Int32.TryParse(kv("CountryID"), CountryID)) Then
GlobalFunctions.ReportError("CountryID: ", "WHOOPS")
Return Nothing
End If
GlobalFunctions.ReportError("CountryID: ", CountryID.ToString)
Dim cityadapter As CountryMainCitiesTableAdapters.CountryMainCitiesTableAdapter = New CountryMainCitiesTableAdapters.CountryMainCitiesTableAdapter
Dim cities As CountryMainCities.tblCountryMainCitiesDataTable = cityadapter.GetDataByCountryID(CountryID)
Dim values As New List(Of CascadingDropDownNameValue)
For Each dr As DataRow In cities
GlobalFunctions.ReportError("CityID: ", dr("CityID").ToString)
values.Add(New CascadingDropDownNameValue(CType(dr("CityName"), String), dr("CityID").ToString))
Next
Return values.ToArray
End Function

AJAX and using the onbeforeunload event

When my form loads I set a variable in the database to lock the form. Only one user at a time can edit/view the form. When they click the Save button I remove the flag via a database query and the form is no longer locked. This works great when the user clicks the Save button. But what do you think happens when they do not click the Save button and they leave the page? Since no button on the form was pushed I cannot update the database to unlock the form. So I thought of using the onbeforeunload event. I am using it now to tell the user that if they leave the form before they click the Save button their data will be lost. What I would like to be able to do is when the user does click the OK button on the alert box and they do leave the form I would like to run a sql statement to update the database and to unlock the form. Is this do-able? With or without AJAX?

Just theorizing... but since you succesfully have the alert box going - on the unload event.. can you tie up an asynchpostback event in javascript to handle this - once the request is fired all should be good (the migration guide has some examples of this I believe...) or as an alternative you can popup a modal (however at that point the user can just hit the back button again anyways)...

For a double measure - either use an event timer in the global.asax that call the stored procedure. One additional field in the database would be needed "TimeofRecordLock"... and modify the sp to search for all records that time expired from initial lock that excedes your lock time... get reset... Any postbacks that occur just have the sp that does whatever or the code behind itself to update the new time value... - then you could have a special updatepanel that is set to refresh on a timer - "Record is locked" kinda of deal - when timer expires and no updates have been made - it provides another option - "re-lock record"... if it trys to and another user grabbed it then it reverts to a option - notify me when record is unlocked... The cool thing about ajax you can make that happen and the user really needs to not do anything...

You could also create a cache that that stores the time and you update the time in cache and map it to the session of the user ...and on clearing the cache entry you run through all sessions tied to records and perform a batch sql to reset those values in the db...

Just some thoughts as you have multiple scenarios - not only in the ajax enviroment - to consider...

Thanks for all the suggestions Jody. I am most interested in the asynchpostback on the unload event. Seems that this would be the best way to go. Where is the migration guide?

AJAX and the Upload Control - My Solution

Hello everyone,

I thought I should post this solution since I had a hard time finding any solution on this forum.

If you have an<asp:FileUpload control in an AJAX you need to add a section like:

<Triggers>
<asp:PostBackTriggerControlID="myUploadSubmitButton"/>
</Triggers>

This will add a postback for the button. If the upload control is hidden and visable by a button in the UpdatePanel you will need to add a postback trigger for that too.

This works for me without any issues.

- Chris

P.S. Visit wiki.cdyne.com for some more cool programming things!

Thanks for this solution. But full page update will occur in this case.

The Postback Trigger allows for the file upload to work correctly but then it breaks all the rest of my other AJAX update panels (calendars popups, etc.) that are on the page.

Using ASP.NET AJAX Beta 2.

Hey cchenoweth,

I am having trouble with FileUpload inside UpdatePanel, there is no data when a button click happens. Where is this PostBackTrigger control? Is this in Atlas toolkit? can you post where to put this and where to get this control. Thanks.

den2005

Hey Chris,

I have worked it out it's working.. Tahnsk for this tip very helpful.

Thanks again.

Dennis

Hey Chris,

I have worked it out it's working.. Thanks for this tip very helpful.

Thanks again.

Dennis

den2005:

Hey cchenoweth,

I am having trouble with FileUpload inside UpdatePanel, there is no data when a button click happens. Where is this PostBackTrigger control? Is this in Atlas toolkit? can you post where to put this and where to get this control. Thanks.

den2005

come on then den2005 dish the info ..... where is it then;)??

I'm having the same problems but i just canna find this so called PostBackTrigger - within the <trigger> section all i get is <atlas:ControlEventTrigger> and <atlas:ControlValueTrigger>

now i think i've got the latest version etc... is there a namespace i should be using to access this r??

(yes i'm very new to all this..8-)]

ta in advance

Sprayball,

Just as Chris mentioned, you need to put this on after the

<asp:UpdatePanel

but before the

<

ContentTemplate>and add in your load event or before you used the buttonclick, say id of your script manager is sm,

sm.RegisterPostBackControl(myUploadSubmitButton)

<Triggers>
<asp:PostBackTriggerControlID="myUploadSubmitButton"/>
</Triggers>

Hi !

I tried your solutions but i think my case is a little bit more complicated : my FileUpload Control is in an edittemplate of a gridview, in an updatepanel.

So my first question is : how can you define the ID of the Upload Submit Button ? I have only access to the ID of the FileUpload ...

and my second question is : when do i have to register the upload submit button as a PostbackControl ? during the rowdatabinding of the gridview ? during gridview updating ?

Thank you very much in advance for your help because for now it works, but without update panel (i get nothing in the postedfile property of the fileupload with the updatepanel) !

Axel

Is there a way to do the same thing but with JavaScript (on client side)?

koistya,

It is possible using hidden field and setting this control value after getting the value of the FileUpload control...Then you can get the value of this hidden field control at server side...

This works...Try it...

HI,

Is there a way to make FileUpload control work with partial page update?

<asp:PostBackTrigger> makes a full page refresh and resets all my ajax dragpanels to their original position.

I tried AsyncPostBackTrigger, with the submit button outside the update panel, and it doesn't function well (doesn't upload the file).

Thanks in advance!

Ajax and RequiredFieldValidator

Hello,

The ErrorMessage of My RequiredFieldValidator is not display when I submit again (the second time) my resquest.

<asp:UpdatePanel runat="server" id="UPContact">
<ContentTemplate>
...
<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="Comments" ErrorMessage="*" Font-Size="XX-Small" SetFocusOnError="True"></asp:RequiredFieldValidator>
...

Any idea?

Are you using the updated validators? See:http://forums.asp.net/thread/1545781.aspx

Thank you a lot. It's just work fine!

Have nice day.

AJAX and image Background

Hi,

I am using panel with in AJAX update panel, the panel background is using an image. So first time I run the form the panel will be displayed with the background image that I have set up, but when I click a button and partial update happen the panel background image will disappear. Can any one help me to keep the background of the panel even if partial update happens.

Place your Panel inside the UpdatePanel and that will solve your problem most likely. If that is not a solution because the panel contains other controls outside the updatepanel it contains then just wrap the the panel with a update panel and retain the current one you have. Nothing prvents you from having multiple update panels. No idea why you're experiencing the problem unless somehow the divs / spans created by the panels get mishandled or something but try the two possible workarounds listed above and see if that fixes it...

Thanks for the replay,

I have the background set up on the master page which contains the panel and inside the panel is the content place holder, The panel is setup with background image, when partial update trigger, the background image for the page that is displayed within the content place holder will disappear but for the remaining panel still contain the background image,

Hi!! put your panel inside the update panel and also the other controls. It will trigger the page. u wil get the image displayed.
Thanks, I have missed some controles to be inside the update panel.