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.
Related
I want to make a dynamic control on a web page that does an action and generates new HTML code without needing to refresh the page (what would traditionally be handled by JavaScript, I presume). However, my project is currently comfortably and neatly nestled in as a pure ASP.NET Web Pages project strictly using Razor, no MVC at all.
I've hunted everywhere and haven't gotten a clear answer; what answers I have found always concern deep MVC or Web Forms components. As I understand, it should be fairly easy to make use of bits and pieces of those, but I'm still fairly inexperienced with ASP.NET.
What I want to make in short: A button that
Is an image
When clicked, increments a record value (already stored in the Razor code, simple to push to the database), and replaces itself with another image button
This button has a different image, will decrement the record value and replace itself with the original button (they are effectively the inverse of each other)
This is the most complex control I need at the moment for my project, and learning about this will hopefully provide a basis from which to engineer different controls.
The underlying technology of the server is irrelevant, whether it's PHP, ASP.NET, Ruby, et cetera - if you want a web page to "do something", you need to send a request to the server. If you want it to do something without the user directly submitting a form or clicking on a link and changing their location, you have to send the request to your server with javascript. Javascript is how you get the client to do things. The razor templating system operates on the server, not on the client.
Specifically, you should look in to Javascript AJAX requests; I'd particularly recommend learning about jQuery, because it simplifies a lot of aspects of Javascript.
I've been searching for this and couldn't find something that works as I'd want it to. I have a classic asp.net webpage which makes a lot of SQL queries, some longer than others. I am not very familiar with terms to use, but the page doesn't load on each commands. So let's say the user fills some fields, then presses "Submit", it looks like nothing is happening even though SQL is processing a query.
I am looking for a way to let the user know a process is going on (busy/wait/hourglass cursor is enough for me). I tried some JavaScript calls on onbeforeunload and onunload events but as I said, page doesn't "reload" once the user did an action on it. I tried to look for the same for postbacks, but I couldn't find much and I'm not even sure postback is what is happening.
Any help with what to look for would be appreciated. As it is right now and with my limited understanding of how things work in a asp.net webpage, I'm not sure what to search for anymore.
Thanks.
You could do this if your using classic ASP.NET
Create a JS function
function doHourglass()
{
document.body.style.cursor = 'wait';
}
Add these two events on your Body Tag. If your using an update panel add them to the update panel tag instead
<body onbeforeunload="doHourglass();" onunload="doHourglass();">
http://www.codeproject.com/Articles/8243/Hourglass-cursor-for-Web-ASP-NET-pages
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.
I have a web application, in which browser's back button functionality should be customized. It's like, whenever we click on browser's back button, it should take us to landing page(Login page), It should display error message saying that 'session expired. Please login again'.
I have gone through so many posts and even in stack overflow also, i saw few posts. But nothing worked for me. The java script approach i am using as a temporary workaround.Basically this JavaScript never allow us to go back. instead it will keep us in same page.
JavaScript i have used <script>history.go(1)</script>
Please help me to customize the functionality of Browser's back button.
Any suggestions will be really helpful to me.
Short answer: You cannot
A little longer: You shouldn't even try.
But if you insist: A Thorough Examination of "Disabling the Back Button." (from 2000, but since it is ASP I guess still valid for you :)
Newer dot net: Restrict user go back to previous page after signout
Ignore the older browsers do not support location.replace - IE3.2 is not considered older any more but ancient.
For this - you would need a custom solution and disabling back button will not help...
Usually you should not try to change the behavior of back button. But since this is the requirement, I would suggest the following:
Approach 1:
This calls for creating a navigation framework where you know which is the current page in the flow... This is only possible if you a sequence in which the pages will be called (like a wizard)
Approach 2:
Specific to your case : You can use jquery/javascript to identify if the back button is clicked.. If it is then you can do an ajax call to server to kill the session and then redirect the user to login page.
You can programmatically manipulate browser history using something like this:
window.history.back();
window.history.forward();
window.history.go(2); etc.
In HTML5 ready modern browsers like Chrome you can also do more advanced things including completely overwriting back button functionality using history.pushState() and history.replaceState() methods.
(https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history)
You can also go dirty and use javascript + ajax calls to react specifically to back button events, but this will also not work on some browsers. What you ask is not a native part of a web, so no matter what you will decide to use in the end, it wont be very easy or widely supported.
I'm just wondering if anyone can help with this problem I have?
I have a form view and don't like the current paging that is provided by microsoft. So in the pagertemplate I am adding a button in for Next, Previous etc. Is it possible to create an ajax paging method without using the horrible update panels? Is it possible to have a pager method that gets the event args etc?
When the user clicks next it should populate the form view and two other controls on the page. So say I click next to go to page two, this will get the ID from the List, this Id should also be passed onto the other controls on the page.
Also, if anyone has any suggestions for using a better control please let me know!
If anyone has an answer, suggestion or site that could help, please let me know!
thanks all!!
Louis
How's your javascript? This kind of thing is quite trivial once you get used to writing ajax calls from javascript. I'd recommend using something like jquery as a wrapper around the ajax call. Look at the jquery documentation.
How you implement the server side depends on what framework you're using. It's very natural if you use MVC, but if you use WebForms then you probably want a .asmx webservice.
If you don't want to get into javascript then an updating form region is the kind of thing that update panels are quite good for - although I agree they are 'horrible' in that they're a bit of a lazy way of doing ajax.