Ajax based navigation scheme

Hello,

I am trying to implement Ajax based navigation schema for a complex web application.

Basically, I will have a tree on the left. When item is clicked I want the content area on the page to load some content via Ajax (instead of refreshing the whole page).

I got somewhat far with having an update panel around content area and loading content via custom user controls (e.g. panel.Controls.Add(Page.LoadControl("blah.ascx")) ). However, I am running into some issues with this approach (for complex controls it appears this dynamic loading is breaking javascript etc). Can someone suggest any other mechanism one might use to implement this? Keep in mind, controls cannot be hardcoded on the page and need to come from an external file (e.g. the tree would load from xml file that specifies which controls correspond to which item on the tree).

Thanks

Unless I'm missing something, it sounds like you'd be better off using an IFRAME for your content area and just change it's .src with the navigation system.

AJAX Baby Steps - removing an item

i am working on my first little ajax project.

Basically i have no idea how to start. I created a AJAX enabled website and i have a simple page on there that basically has a list of items taken from a Class thats stored in the session.

So I have

1 Gridview that bases its DataSource to a Dataset i create from a object (just a class that contains an array list)

2. I have methods in place to loop through the array list, create a datatable and bind it to the gridview

3. I have a method that also removes a selected item from a dataset and refreshes the gridview its a "remove" button.

I would like to have AJAX handle the removal of items (for now, eventually i want the whole thing ajax enabled) but just to start i want to just activate my Remove method from ajax.

But i dont know where to go from here.

So what do i have to do to call my method via AJAX ?

Any advice or help appreciated!

thanks

mcm

well i seem to have figured it out although i dont know what i did or how it works!

I added the ScriptManager tag to the page.

I added an UpdatePanel surrounding my Gridview,

and now my REMOVE buttons work without postbacks!

Holy Momma! How did it do it?!? I thought i'd have to be writing javascript and hooking into new events , etc.

is it REALLY all this easy?

mcm

Yep, it can really be that easy. caveat, though; the UpdatePanels can get pretty heavy in terms of resource requirements if you use them extensively, and there are also issues with certain combinations of controls (witness the volume on the forum of "Update panel and my..." posts. For simple things like you're describing, they work very well, though.

great! So now that i have seen how easy it "can be". I do have a couple more questions.

I created a sample AJAX enabled site to test this bin and it works GREAT im so impressed with myself.

But how complicated is it going to be to make this a component. My idea for the site is to use Master Pages (another first for me)

and down the left side this "component" will sit. I still dont know wether to make it a component or just a content page.

There will be a repeater or a formView on the right with products to add to the bin. I want those to be ajax enabled too. Is it hard to make different elements in different content pages "speak" to each other? Really all im doing (as stated in the first post) is adding items to a Collection stored in a Session Variable (using a facade pattern with a SessionManager class)

Also. I am using the new Web Application templates to build my stuff (from ScottGu's blogs) Can i switch this AJAX enabled site to be a WEb Application and keep the functionality?

thanks,

mcm

Ajax AutoCompleteExtender causing validators to fire

Hi,

I'm having a problem with validators firing whenever I select an item in a field extended with autocomplete (I guess pressing the enter key is trying to submit the form?). How can I get around this?

Thanks

The autocomplete extender does not stop the enter key event from propagating to the form which causes the validators to kick in. I think we would like to stop that and let the event propagate if an item has been selected. Could you please open a bug on this? Thanks.

AJAX and the Querystring

Having a slight problem with Atlas/Ajax. I have an item page which displays items based on the item id being passed by querystring into the page. The querystring parm is useful for bookmarking the exact product to be displayed on the page and returning to it later. If people click on a "go to next item in item category" button on this page, they get the next item in the category displayed and the URL querystring item parm changes to that item number. I accomplish this with a Response.Redirect to the same page with the new querystring parm value, but I can't seem to do this with an Ajax setup because the redirect loads the page over again.

How do I keep the benefits of Ajax by having a client side refresh without reloading the page and alter the querystring to the new product number?

what u store in the query string could also be stored in the session object & the session object could be passed as a parameter to the database.

That's a good suggestion; but the issue would be the user coming back to the page at a later point, having changed the item id on the querystring via the show next item in category button. They may wander off; close their browser; destroying the session info and then want to return to their "bookmarked" page. Even if I kept the data in the DB for retrieval and could identify that customer coming in again, how would I know which product they were after? What if they bookmarked two different products originally. I wouldn't have the querystring information under AJAX to know that. I don't think I would want to show them "last product viewed" when they come back in.

write a small procedure to evaluate the query string when the user comes back.if there is a query string, pass that to the session & databind.so in any case, whether there is a session variable or not you would be able to databind.

hello.

well, i think that's not he problem he wants to solve. what he needs to do is to change the query string so that it identifies the current product but he doesn't want to perform a navigation when changing the query string.

hum...i really don't know if you'll be able to do that...try to look at the location object, though i really think this is only ie specific

Luis,

I think you described exactly what I want to do. I can do it server side with no issue using a redirect, but client side with AJAX is a problem, even though AJAX does a great job with client side refreshes on the page!

hello.

well, the problem is that what you're trying to do is not an ajax related thing. i mean, for the browser, the query string really isn't something that you can program against. it's just an url, so i think that changing it for adding or modifying a query string parameter will force the browser to navigate to a new url. if this is not a problem to you, then simply changing thw window.location property will do what you want from the client side. however, you should note that this is the same as loading a new page in the browser...

Ajax and displaying information

Hi everyone:

a) Say, i have a website and a user types a keyword to search for a particular item which has to be retrieved from the databases using the "Search box", would Ajax help me in anyway. If not, what would be the best solution so that the information is displayed to the user in the shortest amount of time.

b) What doe Ajax really do and when is it useful to omplement Ajax in your website design ? (Help! I am new to programming so I would appreciate it if I could get like a simple explanation :)

Thanks
Lisa Green

AJAX can be used to update the user's page after it has initially been sent to the users browser (by using javascript as it's language to make and receive calls to the web server), and without the full page having to post back. It could be used in your situation, however it should only be used to enhance the existing functionality of the site so if you do use it, make sure you still provide this functionality to those users who can't (or don't want to) take advantage of the AJAX methods.