I'm looking to optimize pages within our application so they perform better. I want to dynamically add controls (Textbox, Button, Custom Control, etc) to a page using AJAX to minimize postbacks done. I'm looking for an alternative to using an UpdatePanel (nothing wrong with them, they're just not built for performance).
The trick though is that the ViewState will need to be updated with the new controls added, so I can't see WebServices or static Page Method calls fitting in well here.
Ajax calls cannot update viewstate as that is created in code behind.
Maybe if you manage to access the viewstate server side you could send it back in the ajax call and store it in the viewstate field but you risk loosing anything that was not touched in the callback, I have never delved that deep into viewstate.
Related
Apologies if this is vague or too general, I know we are supposed to ask specific programming questions, but this is to try and understand how postbacks work in ASP.NET when something is rendered on page initially, and not touched on postback, yet still appears on screen after these postbacks.
Detail: I have an ASPX page - on initial page load it sets up all the labels and controls and a repeater with thumbnails in it.
I can follow the code through as it sets up all components, which will then be rendered.
On postback, if a value has been changes (status for example), the page makes updates to database, and then re initializes the screen (calls the init method with postback set to false), setting up everything again (I think the aim was to set up certain controls like radio buttons for the status), including the image repeater again (which I think is a waste of time).
I have tested skipping the code that sets up the image repeater etc. on a status update (postback), and the image repeater displays fine in the browser - however I am not sure why - ASP.NET is stateless, so on a postback, if the page does not render all the components on the page everytime how can they persist between postbacks?
I know there is a reason out there, just can't frame my question well enough in google to find it. Does the server send back and update which the browser merges with the existing displayed page? Leaving all unchanges components as is?
The reason I need to know this, is I have a screen with a lot of images on it, and I do not want to be setting them every time unless I have to.
This link - provided by Steve (thank you very much) - was what I was looking for goes into depth on ViewState - vaguely remember reading about that when I first stated doing .NET - have completely forgotten about it, but this explains it perfectly!
Understanding ASP.NET ViewState
https://msdn.microsoft.com/en-us/library/ms972976.aspx
I'm starting to believe there is no way for me to interact with asp controls from within a webmethod. I wouldve thought i could some how accomplish this, by finding the page the webmethod was called from, and from there find and update controls on the page.
But after having an open question for 3 days and numerous google searches, it seems that there is no way for me to do this.
Or is there? I would really appreciate if someone could provide some useful information for me on this matter.
The problem is quite simple from a perspective.
1. I'm calling a webmethod through ajax, this is happening on say page A.
2. After a succesful ajax call, i wish to update an ASP control on page A.
3. The update of the ASP control must happen without a postback hence the ajax.
Is this really impossible?
Also if you know anything about this matter, but you don't understand my question, please have a look at my other active question: Update object on masterpage through ajax webmethod
When you call a webmethod, what happens is quite different compared to a button click for example in asp.net webforms.
The webmethod doesn't construct all the controls as a standard click event does.
So that's why you can't have access to the page controls.
Also, how would this work even if you had that access? Your webmethod only sends back some data, not the entire html code, so there's no way to update a control's value server side, since it has to be rendered in html.
If you want to update the value of a control on the client side (webbrowser), you can only do it via javascript when you receive the result of your webmethod. You only have to find the control by its id, and update its value.
For more information, you can look at this post:
What's the ASP.NET Webservice request lifecycle?
Another way to achieve what you want to do is to use the UpdatePanel. I personally don't like it, but it lets you access all the controls that are inside it, and update their values.
This control takes care of the client side update via javascript (but it actually replaces big parts of html in the page so it might be quite slow)
Calling a web method via AJAX has no impact on the HTML that has already been rendered to the browser.
What you'll need to do is return some information from your web method, and when the AJAX call completes, use jQuery to modify the appearance of the screen using the new information.
If what you're doing in the web method would result in a big change, one that you couldn't easily make happen in jQuery (such as re-rendering a GridView) you might want to look at UpdatePanels.
The Asp.Net's ajax implementation using UpdatePanel is really slow and experienced people know that the whole ViewState is sent to server even though we are only interested in doing partial postback. So I started using Jquery but I don't know how do I make a request from Jauery to server and get UserControl's HTML in output? The UserControl in turn may have some controls like textbox etc.
In short, I want some functionality that Asp.Net MVC has which uses RenderPartial.
In the context of Page, you can load a control and render its output.
Control myControl = Page.LoadControl("myControl.ascx");
myControl.RenderControl(System.Web.UI.HtmlTextWriter);
But that just gets the html that the control would output to the page. This is fine if your control has no more events and just does something onload, but if you want to postback from it, then this will not work (as mentioned in the comments.)
From my experience, sometimes ago, trying to invoke a user control directly is a pain.
I sometimes put my userControl in a blank page and simply do a $.get(
So, for each userControl, I have to make a dedicated blank page...
Other times, the userControl is already embedded in an existing page within a named div container. I then invoke $.load( on the page, targetting the container div.
In this case, I don't have to make a page, but I waste bandwith and lose script and style tags (jQuery cleans them up since v1.4)
I'm trying to learn about how AJAX stuff works under the hood. Say I have an asp.net form with a button on it. I then have a database with a single column DateTime. When I click the button on the asp.net form I want to insert a column in the database with the current time.
I'll have a C# event handler:
protected void btnButton_OnClick(Eventargs e, object sender)
{
//insert DateTime.now into DB
//This part is easy
}
What I would like to happen on the form itself is to have the button click NOT reload the form. It would just send a message to the server; there is no reason for the page to reload. What are some ways I could accomplish this?
I've looked into the AJAX framework a little bit and it seems like this could be done within an update panel, but the page would still reload, it would just be less noticable to the user.
Use the __doPostBack call in javascript. I have no idea how this works.
It sounds like you're partial to Microsoft's provided javascript libraries, which is fine. The UpdatePanel and the like have their place, but I've found that when you need to do something very simple and straightforward like what you're describing it is easier and cleaner to get it done with a direct call to a server resource from Javascript.
There are many ways to do this, but I like using jquery's $.ajax() method to invoke webservice methods (or MVC actions more recently). If you're willing to examine some slightly different technologies here's a blog post that will give you a taste of what I'm talking about.
ASP.NET Ajax has 2 major parts:
server side controls based
client side framework (which is called Microsoft Ajax)
With the first you would opt to make use of an UpdatePanel control. This however still sends a lot of unneeded data over the wire like the full viewstate, your pages follow almost the full page life cycle like with a normal postback. Mostly I recommend against using that in production code.
The second part is an ajax library based on pure javascript with a touch of Microsoft sauce over it. It has similarities with the page life cycle like a pageLoad function and such and is quite easy to learn.
__doPostBack
That function gets inserted when you place certain server controls on your page like a LinkButton control. You can call that from javascript directly but know that it'll cause a full page postback to the server so if you want to avoid that don't go that path.
During the last 2 years however I've become a big fan of jQuery which works quite well together with ASP.NET and ASP.NET MVC.
I suggest that you read this fine article to get more information about it: Using jQuery with ASP.NET Part 2: Making an AJAX Callback to ASP.NET.
jQuery itself has also been adopted and favored by Microsoft. I strongly suggest you take a look at it and its power.
For example, I have three UpdatePanels on the page. I click a button, and I get pretty long response, that contains all the data for the three UpdatePanels, the viewstate string.
I want to optimize my query and receive response like "ok" or "not ok". How can I do that?
The short answer is that with MS Ajax and especially UpdatePanels, you can't.
The long answer:
The core of UpdatePanels is that they do a full post, and the full page lifecycle runs for whatever controls they contain, and they are able to parse out the portions of the reponse that pertain to their individual viewports on the page and update just those portions.
You can reduce the amount of data significantly by turning off ViewState for controls that don't need it. Another tip is to set the UpdateMode property of your Panels to "Conditional", so that all the update panels on the page aren't involved in every post. If you are posting from one panel and the response just updates that panel, then there is no need to transfer data about the controls in the other panels.
Read here for Update Panel tips and tricks to get better performance out of them.
If you really want to do just simple messages with your posts, I would look at using jQuery and its ajax/post methods to post to alternate pages or webservices. MS Ajax is designed around the postback architecture though, so while it's very convienent, you can't escape the overhead of it easily.