Loading content from server without postback - asp.net

I have a div and inside that I need to show a slide of divs. On the page load there would be only 3 div slides but when all three divs are displayed on the next button press I want to load some more divs (actually I have data on a sql database, I need to get them and print on the page a slide divs) on each next button press. (Asp.net)
How do I achieve this? what's the best way? Ajax, javascript, jquery. Show me a way.
Thank you.

There could be many possiblities but you can use asp.net update panel avialable in ASP.net ajax control toolkit, it will be easy for you to integrate and you need to do very small work at your end.
The other option is using jQuery ajax it could reletively more efficent and gives you more control but it will require good javascript/ jQuery skills. This tutorial is good starting point for using jQuery ajax with asp.net.

Related

Dynamically loading asp.net controls with javascript

I am developing a series of ASP.NET controls that allow for a dynamically created sites where the layout gets generated from a class.cs file, the controls then get Loaded into an Placeholder in an update panel.
what I am hoping to achieve is using stuff like ajax to build the screen with javascript.
can you guys maybe point me in the right direction,
my google is not helping today.
I want to use stuff like ajax, json
thanks in advance
Javascript is a client-side scripting language and cannot be used to trigger loading of server-side controls.
You can use ASP.NET elements like etc., which have runat=server to trigger server side code, though.
Through AJAX? Not possible without page reload.

TableToGrid initially ugly. Then it formats correctly. How to get hide table until everything is ready

I like using jqGrid and TableToGrid especially. Getting Json data is nice as well, and I use that functionality in a couple of views in my asp.net MVC4 application, however, the one page where I have jqGrid TableToGrid. The only thing is, when you first load the page or when you refresh a page with a table to grid page on it, The table looks ugly, and then it stabilizes. Is there a way I can hide the table or show a loading screen until the thing is fully ready to view...
I know regular jqGrid has a loading text option, but that is only when your table is being loaded via ajax...
You can put a load dialog over the grid... But I have my loading dialog pop up on document.ready and the ugly looking grid is still there initially. Maybe there is a way I can hide the table earlier than $(document).ready ?
Maybe you can put your entire grid into a div with visibility:hidden or display:none and just show that div with jquery in document.ready.
[Update]
You may show div in jqgrid's gridComplete event. According to their documentation "This fires after all the data is loaded into the grid and all other processes are complete. Also the event fires independent from the datatype parameter and after sorting paging and etc."
Check their wiki for more info http://www.trirand.com/jqgridwiki/doku.php?id=wiki:events

Ajax in existing asp .net project

I have a web page devoloped in visual studio 2008.
I have 4 dropdowns and a repeater in the page.based on the selection(search criteria) from the dropdowns the repeater value will change.
and one dropdown selection will bind values to the other dropdown also.
Since the page is causing a lot of postback we decided to implement ajax here.
I am yet to learn ajax.
Can anyone tell what is the best way to do this .which ajax control replace dropdowns?
i have already server side code written on all dropdowns.
Please give me a good solution which i can implement in less time and reuse my code.
One more update: i have a master page used in the project.
I am using update panel of ajax which does not work if i use master page.
(That means all the dropdown controls and repeater i put it in update panel.But still page postback occurs.)
In a normal page(without master page) it works? why is this happening?
Thanks
SNA
You are able to use UpdatePanel and place dropdowns inside it.
Your solution will depend on the AJAX framework you choose, but here are cascading dropdown examples in ASP.NET AJAX and jQuery
If your main reason for using AJAX is to remove the number of postbacks you are getting, then I would recommend against using Microsoft's built in solution, e.g updatepanels.
The learning curve will be higher but learn to use jQuery, maybe with a little help from jTemplate to help you build your drop downs on the page.
Using updatepanels will not reduce your postbacks as behind the scenes asp.net is doing a full page life-cycle, sending all content back to your client but only updating the update panel. jQuery will be far more efficient. (and the reason I use it!!)
Update
If you don't believe me, see... Why Update Panels are dangerous
Update #2
If you don't want to go the whole way of learning Ajax just yet (although I'd recommend it) you could always pre-load your page with all the possible drop down combinations and then swap them using javascript / javascript + jQuery.
Here is one example of how you may do it -- use jQuery for dependent drop down combos
Using this method you are more likely to be able to save the code you've already written to work out the drop down options.

I've built a ascx control and I would like to be able to keep adding them using Javascript instead of having to do a full call back

I've built a ascx control and I would like to be able to keep adding new instances of it using JavaScript instead of having to do a AJAX callback. Is this possible? I am basically building a web form for a query control and should clause X be filled in, I want to generate a control for the next clause below. I would like to learn how to do this without doing a callback.
Thanks
ASCX are server side user controls and, to my knowledge, can only be loaded by a server event. This can be accomplished through a full page postback or using UpdatePanels and ASP.net AJAX.
If you don't want to use these options and stick with a full JavaScript solution, you're looking at probably doing DOM manipulation and dynamically adding straight HTML.
If the ASCX controls don't change their appearance and all you're doing is showing and hiding them, one last alternative could be to load all of them into DIV tags that have their display style set to none. Then when the user clicks on a checkbox or whatever, you can use JavaScript to show that DIV tag containing the next control. This is how many JavaScript tab setups work.

How do I control the amount of JavaScript Ajax Control Toolkit spits out?

With the Ajax Control Toolkit, one can easily drag and drop all types of great extender onto controls, but they register a boatload of JavaScript to do it.
How do I control this?
If the ScriptManager is in the MasterPage, is there anyway to control the loading of a script on one page that isn't in another?
For example: calendar extender is on one page, but the script for it gets loaded on every page that is a child of the master page.
I'd love to have an answer to this, as well.
The toolkit's blind insertion of javascript,
without regard to best practices, has led our
devs to make ridiculously large pages.
The whole POINT to the toolkit is to make design
easy, but now we have to refactor our entire UI,
because of the 'ease' it provided. We're sending
HUGE pages out, which we cannot cache.
Consider moving away from the Ajax control toolkit. The huge JavaScript load is the reason why we are moving away from it. You should consider a library such as jquery.

Resources