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 Application for Interior Design Company

We are trying to develop a web application for an interior design company.

Functionality of the program

User is able to:-

1) Drag and drop from a list of design elements such as flat rectangular pieces (doors, panel, etc), tubular parts (legs, etc) to a design plan (which is an ASP.NET Panel Control) to form a finished product such as table, shelves, drawer, etc. This design elements are stored as images in MS SQL 2005

2) Change color of the design elements in the design plan

Questions

1) Ajax had a control called the "DragPanel". We had used the "DragPanel" control to allow user to drag a design elements to the design plan. Using "DragPanel" control, we will need to place the design elements in a panel, and then assigned the "DragPanel" control's DragHandleID to the panel. However, we do not want to limit user on the numbers of design elements that they are going to add into design plan to form a finished product. Is there any way we can allow user to add unlimited design elements to the design plan.

2) We are thinking of using the "UpdatePanelAnimation" to change the color of the design elements that are in the design plan. But our design elements are in jpg/gif format, is there any way we can change the design elements to our desired color using any of the AJAX control.

Any help/suggestion will be highly appreciated

My recommendation would be to hire someone who knows javascript to do this; the requirements you're describing are going to require you to delve into it quite a bit.

For the first one, you can more easily create new / additional dragging elements on the client with javascript functions

for the second one, you can either use partially transparent images and use javascript to change the background color on them, or else do image swapping. For best functionality, I'd actually use flash objects and have the javascript send commands to the movieclips to tell them to change colors.

just my 2c.

Have you checked the scope of using these elements being used like or as web parts?

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