Create an animated 'stack' via AJAX - asp.net

I'm using ASP.NET for a search app web site.
My search retrieves exactly one result per fetch. Once the search is complete and the user selects "Update", a new result is fetched and the old result is written to the ViewState as a generic List. The new result replaces the old one.
I am trying to get the page to update (via partial post-back), so that the old result drops down the screen and the new result sits on top of it. Much like the concept of a stack.
Does anyone know how this can be achieved? I've started looking at the Ajax Control Toolkit.
Would appreciate any hints and tips with regard to my problem.
Thanks!

Using JQuery, this sort of things is fairly straightforward. I would suggest avoiding the partial post-back and using a WebMethod (on a "page method"), then calling that to get the results. In that scenario, JQuery can manage the request to the server and process the response data exactly how you wish.

I'm a just beginning to play around with AJAX animations, but this reference page has been a big help to me.
AJAX Animation Reference

Related

In asp.net, how to FULLY ajaxfy a page with a photo gallery retrieved from database by ListView server control?

I believe this is a fundamental question regarding asp.net's way of manipulating database items. Basically the server side way of manipulating database items (using ListView or similar) is outdated due to the post back model is outdated compared to AJAX. Let's say you have forward and backward buttons on the gallery to update images from the database. You need to postback in order to update page. Clearly this could use an ajaxfied approach. I have been thinking about this long and hard and have observed most websites that uses ListView or GridView or whatever do not ajaxfy the process, probably due to the difficulty of this problem. For those that ajaxfy the page, they use the UpdatePanel, which is only "pseudo-ajax".
I would like to know do other programmers have a FULLY ajaxfied way of updating a page of a photo gallery, retrieved from database by ListView? As I said I have been thinking about this long and hard and I think there might be two approaches: First, use ListView to first populate photo gallery. On pressing forward or backword button, use jQuery's ajax method to connect to an .ashx page and use .ashx page to retrieve data items and then use jQuery to update the photo gallery at the client side.
The second way I forsee would be abandoning the ListView altogether and use a for loop in .ashx to populate gallery from the beginning. This approach unifies the initial data retrieval method and the "postback" data retrieval method, which could mean less code needed, since you do not need the aspx page at all.
My question is, what is the realistic way to fully ajaxfy the page mentioned above?
I still use code behind in my asp.net website.. but I do use ajax elements on the .aspx page
take a look at ASP.Net Ajax Control Toolkit
All the Ajax elements, with the benefit or still using code behind
So far the best way I have found would be to use jQuery AJAX to update whatever changes, although it can be much more time consuming than posting back to server and update from there

refresh grid without page post back, please advise

I am doing some grid work just like a stock exchange application which will have good data volume and page should be automatically refresh after some mentioned time say 1 min or 30 sec without being post back.
What is best way to do this ? Should I use grid with ajax or grid with ajax and web service should be used ? If possible please refer me some article or link on implementation of your suggestion.
You can use an UpdatePanel (place the grid inside the panel) and maybe have a JavaScript timer to update the panel periodically.
Alternatively you can have a straight HTML table and periodically call a webservice and update the table from the client side. I think you would get slightly better performance but there is a bit more work involved.
A webservice call from JavaScript will not cause a postback. When calling a webservice you might get better performance because you are only getting data instead of formatted HTML. However, you will probably return the data in XML or Json format, so there will be an overhead (Json will be better in that respect).
If you know that only a small portion of values are going to change between two refreshes, then you will get better performance by only returning the values that have changed.
If you're not very experienced with JavaScript then I would suggest that you use a library such as jQuery. You may read the following resources for implementation details:
Calling an ASP.NET webservice with jQuery
Updating an HTML table from Json data using jQuery
Depending how experienced you are with webservices, Json and jQuery, it may not be an easy task. The UpdatePanel option is definitely easier to implement.

A big dilemma - ASP.NET and jQuery

I have a wizard style interface where I need to collect data from users. I've been asked by my managers that the information is to be collected in a step by step type process.
I've decided to have a page.aspx with each step of the process as a separate user control. step1.ascx step2.ascx etc...
The way it works now, is that when the initial GET request comes in, I render the entire page (which sits inside of a master page) and step1.ascx. When then next POST request comes in for step 2 (using query string step=2), I render only step2.ascx to the browser by overriding the Render(HtmlTextWriter) method and use jQuery html() method to replace the contents of a div.
The problem with this whole approach, besides being hacky (in my opinion) is that it's impossible to update viewstate as this is usually handled server side.
My workaround is to store the contents of step1.ascx into temporary session storage so if the user decides to click the Back button to go back one step, I can spit out the values that were stored for it previously.
I feel I'm putting on my techy hat on here in wanting to try the latest Javascript craze as jQuery with .NET has taken a lot of hack like approaches and reverse engineering to get right. Would it be easier to simply use an updatepanel and be done with it or is there a site with a comprehensive resource of using jQuery to do everything in ASP.NET?
Thanks for taking the time to read this.
Another approach, that might be easier to work with, is to load the entire form with the initial GET request, and then hide all sections except the first one. You then use jQuery to hide and show different parts of the form, and when the final section is shown the entire form is posted in one POST to the server. That way you can handle the input on the server just as if the data entry was done in one step by the user, and still get the step-by-step expreience on the client side.
You could just place all your user controls one after another and turn on the visibility of the current step's control and turn on other controls when appropriate . No need to mess with overriding Render(). This way the user controls' viewstate will be managed by the server. and you can focus on any step validation logic.
Using an UpdatePanel to contain the steps would give the ajax experience and still be able to provide validation on each step. If you are OK with validating multiple steps at once, Tomas Lycken's suggestion (hide/show with JQuery), would give a fast step by step experience.
Did you look into using the ASP.NET Wizard control? It's a bit of a challenge to customize the UI, but otherwise it's worked well for me in similar scenarios.

ASP.NET code inside Google Maps info window

Clarification:
Put simply, I'd like to put an ASP.NET UpdatePanel inside the info window of Google Maps. This would mean that users could interact with my application from within an info window, without refreshing the page and without closing the currently open info window.
Does anyone know if this is possible?
Update:
Thank you to all those who have so far responded. Very much appreciated.
What I have gleaned from the answers is that:
the update panel has it's own "mysterious mechanics" which might be causing the UpdatePanel to not work correctly inside the InfoWindow. Going down the more direct route of using JQuery to make ajax calls to simple web services should eliminate the hidden complexity of the UpdatePanel and enable the functionality I want.
I am still intrigued as to why the UpdatePanel approach does not work, and as to why using one would "break the model" of Google Maps, when surely an UpdatePanel merely renders as HTML and javascript with a link to the XMLHttpRequest object.
Is it possible to place ASP.NET code inside Google Maps info window?
I'd like to place an UpdatePanel with some AJAXified asp:Button's inside the info window.
AFAICT you simply provide the HTML to place in the info window as a string, so was thinking of rendering a UserControl to a string and placing that string in the info window for the browser to render. Does anyone know if this is likely to work?
If this is not possible in Google maps, does anyone have any idea whether such an implementation would be possible with the corresponding Virtual Earth technology?
José Basilio is right. Instead, use $jquery Live Events and put regular HTML in the Info Window then use Ajax calls with jQuery to get the interactivity you want. Reframe the problem.
VirtualEarth has tigether integration with SilverLight, which should mean that you'll have greater .NET control over your web mapping application. With most Google Maps implementations that we've done we typically just use pure HTML/JavaScript/CSS solutions to create AJAX functionality. Thus we would inject HTML/javascript into the InfoWindow class, for any custom functionality that we needed.
Consider another approach and possibly. What you are really looking for is to be able to respond to a server side event. Maybe something like this if you really and truely need to respond to server side events.
http://windyroad.org/2006/07/25/event-driven-ajax-part-1-pushing-server-side-events/
Once you are handling the events on the client in javascript you can do whatever you like to the map
I'm not sure I'd take this approach, but if you want to get ASP.NET code within an info window, you could use an iframe.
Alternatively have you considered an ASP.NET control such as GoogleMap Control, which would handle all the integration for you?
Rich
UpdatePanel != AJAX. Take a look at using jQuery to make Ajax calls ($.ajax) and creating simple web services/etc. to achieve what you're after. While technically you could wiggle an UpdatePanel into there somehow, it just isn't worth it.
Look here for an excellent example on calling AJAX/web methods with jQuery.
Have you looked at the ExtInfoWindow control? Since you did not state your problem, I can't say whether it is a solution, but it seems that it should be mentioned here.

Facebook Wall functionality using ASP.Net

I want to create something similiar to a facebook wall on my social site. I want to store the posts in an sql database and that should be rather simple. What I am looking for is a good way to display the posts? I guess I don't even really know where to start, as I can only think of using a loop to display asp:textboxes. Which obviously is not correct.
I want there to be multiple posts displayed on the page, which should include:
the user who posted,
the text posted,
the date posted,
and if I want to get crazy...a means of deleting/editing the post.
I really have no idea of how to implement this concept, so any ideas would help greatly.
To get started, view this article from asp.net on the Repeater control, or this great article.
The Repeater control lets you databind to a list of objects, and then define one template for how that object should be displayed. Then, ASP.NET will handle showing it as many times as necessary. You can write the code-behind for dealing with delete and edit as if there were only one instance on the page.
go ahead with jquery, use a lot of ajax. for the mark up, use a repeater control with all clean html mark up (instead of server side controls which would generate a lot of unnecessary mark up quickly creating performance issues)
only populate x number of items on initial load, and then using jquery pull data as required based on user action. you can serve this data via json, decode json on client side using jquery and perform a loop which converts this json into appropriate html and injects it into the correct html element
should be simple ;-)
ASP.NET gives you lots of ways to do this. A Repeater, DataGrid, GridView are the first that come to mind. If you'd rather use ASP.NET MVC, there's always the good old foreach loop.
Additionally, check out ListView too.

Resources