I have mini modules(think iGoogle) that are currently loaded via the page calling LoadUserControl method and loading that control into PlaceHolders. I need to switch that implementation to loading the controls through a jQuery AJAX request. The problem currently lies in the fact that when I perform an AJAX Get, I can load the modules by appending them to the content but none of the functionality that would otherwise be working on a normal loaded control is there. For example, when I select a different option on the a DDL the page refreshes and nothing changes. I suspect because it is because the methods aren't being tied in when I perform a load through AJAX. Additionally when I use this method my flash content is not being loaded.
Am I doing something wrong here, or is there a better solution ?
$.ajax({
url: '/modules/UserModules.aspx?CID=12345',
type: "GET",
dataType: "html",
success: function(data) {
$('#column1').append($(data).find('div#lm li'));
$('#column2').append($(data).find('div#cm li'));
$('#column3').append($(data).find('div#rm li'));
alert('Load was performed.');
}
});
When you post back to the server, the server doesn't know about your user control because it was added to the page dynamically. Actually, you render the UC HTML, then add part of the rendered HTML to your page.
I would recommend steering clear of posting back to the server and using jQuery to retrieve any data using a Page Method or web method when you make a selection using your DDL.
I'm not sure I see the utility in using a UC for this. There are a number of ways to do this sort of thing. Like Jamie said, you can have a plain .aspx page that uses web methods. An asmx page. You can also not use web methods and just do as you would with php or classic ASP by writing your string results directly and processing them (shouldn't be your first choice though!).
But the most important thing you can take from this is debugging. Put a break point in your UC code to track server side. Use Firebug: open it, choose console and watch to see if your GET requests are actually doing what they need to. These days, you rarely need an alert to debug.
Related
I'm retro-fitting a .aspx page with AJAX functionality (using VB, not C#). The codebehind populates the page with data pulled from a web-service. The page has two panels that are populted (with different data, of course) in this way. On a full page refresh, one or both panels might need to be populated. But populating Panel 2 can take a long time, and I need to be able to update panel 1 without refreshing Panel 2. Hence the need for AJAX (right?)
The solution I've come up with still has the old .aspx page with .aspx.vb codebehind, but introduces a Generic Handler (.ashx) page into the mix. Those first two components do the work on the user's first visit or on a full page refresh, but when AJAX is invoked, the request is handled by the .ashx page.
First question: Is this sound architecture? I haven't found a situation online quite like mine. Originally, I wanted to make the .aspx page into the AJAX handler by having the codebehind implement IHttpRequest, and then providing "ProcessRequest" and "IsReusable" methods, but I found I couldn't separate a regular visit to the page from an AJAX request, so my AJAX handlers took over even on the first visit to the page. Second question: Am I right to think that this approach (making the .aspx page do double-duty as the AJAX handler) will never work? Is it impossible to tell whether we're getting a full-page request or a partial-page (AJAX) request?
If the architecture is good, then I need to dynamically generate a lot of HTML in the .ashx file, right? If that is right, should I send HTML back to the client, or should I encode it in some way? I've heard of JSON encryption, but haven't figured out how to use it yet. So, Third question: Is "context.Response.Write" the only pipeline for sending data back to the client? And, if so, should I send back HTML or some kind of JSON-encoded objects?
Thanks in advance.
It sounds as if the page requires some AJAX functionality added to the UI.
Suggest using an UpdatePanel for each web form element that needs to have AJAXy refresh
functionality. That'll save you from having to refactor a bunch of code, and introduce a whole lot of HTML creation on your .ashx.
It'll be more maintainable over the long run, and require a shorter development cycle.
As pointed out by others, UpdatePanel would be a easier way - but you need to use multiple update panels with UpdateMode property set as conditional. Then you can trigger the update-panel refresh using any button on the page (see AsyncPostBackTrigger) or even using java-script (see this & this). On the server side, you may decide what has triggered the partial post-back and act accordingly by bypassing certain code if not needed.
You can also go with your approach - trick here is to capture the page output using HttpServerUtility.Execute in your ashx and write it back into the response (see this article where this trick has been used to capture user control output). Only limitation with this approach is that you can only simulate GET requests to your page and so you may have to change your page to accept parameters via query string. Personally, I will suggest that you create a user control that accept parameters via method/properties and will generate necessary output and then use the control on your page and in ashx (by dynmaically loading it in a temperory page - see this article).
EDIT: I am using jquery to illustrate how to do it from grid-row-view.
$(document).ready(function() {
$("tr.ajax-grid-row").click(function() {
$("#hidden-field-id").val($(this).find(".row-id").val()); // fill hidden filed
$("#hidden-button-id").click(); // simulate button click
});
});
You can place above script in the head element in markup - it is assuming that you have decorated each grid-row-view with css class "ajax-grid-row" and each row will have hidden field decorated with css class "row-id" to store row identifier or the value that you want to pass to server for that row. You can also use cell (but then you need to use innerHTML to get the value per row). "hidden-field-id" and "hidden-button-id" are client ids for hidden field and submit button - you should use Control.ClientID to get actual control ids if those are server controls.
JSON is not for that purpose, it is to pass objects serialized with a nice light weight notation, is you need to stream dinamically generated html using ashx, response.Write is what you have. You may want to take a look at MVC
Or you could use jquery if it's just html, the simpliest would be the load function, or you can look into Ajax with jquery. Since the ashx can be served as any resource it can be used in the load function.
I agree with #p.campbell and #R0MANARMY here. UpdatePanel could be the easiest approach here.
But then like me, if you don't want to go the UpdatePanel route, I don't see anything wrong with your approach. However, generating the html dynamically (entirely) at the back end is not a route I'll personally prefer (for the maintainence reasons). I'd rather prefer implementing a solution that will keep the design separate from the data.
I'm calling an asp.net webservice from an ASP clasic page basically just with:
<a href='http://domain/webservice.asmx/command'>Command</a>
and when users hit that button it works but they're just shown an xml page. The function will either work or not so I was wondering if it'd be possible to just have a pop up box appear to tell them if it worked or not after they clicked it rather than redirecting them to an xml page.
I'd prefer to not have to use jQuery or another javascript library.
If that's not possible, is there any way to dress up the XML page? Currently it says 'This XML file does not appear to have any style information associated with it. The document tree is shown below.' at the top.
Also, the domain that the webservice is on is different to the domain that the website that's call the webservice is on. Not sure if that matters.
Thanks
Check out this MSDN Link on Calling A WebService From Javascript Using AJAX. No JQuery is required and it boils down to having to use the ScriptService attribute on your WebService method and adding a ServiceReference in a ScriptManager control. You can then easily call your WebService from Javascript and it will call another Javascript function when it finishes. It is in that response function where you can add your confirmation display.
be aware that this is a bad idea to let the user handle directly - web services are almost always called by your code rather than a client browser session. One reason is that raw error information would be hown to the client if there were a problem.
If you really want to do this, you can either:
Use AJAX (No framework required - just JS) or
You can make the webservice non-standard so it returns user-friendly content - perhaps by wrapping it in a website which calls the API behind the scenes and formats the response in a meaningful fashion.
We have a method on an asp.net page that is called on a button click. The problem is that the method take a long time to process. I've been asked to have the page call the method (or call the postback) and then display the jquery.ui dialog which will let the user know that this process could take a long time. I'm looking at serializing the asp.net form and doing a $.post() but to be honest I'm completely stuck on whether this will even work and how I can prevent the actual postback from happening and just displaying the dialog. Has anyone had any experience with doing this that can give me some pointers?
I found this http://dotnet.dzone.com/news/eliminating-postbacks-setting- but I'm not sure if it's a bit OTT. The article is a little long winded.
Hope someone can help.
That would be easier if you can use an UpdatePanel (which basically boils down to ASP.NET's way of doing what you're considering with the $.post(), but automatically gets the ASP.NET specific stuff right).
Then, you can do something simple like this: http://encosia.com/2008/10/04/using-jquery-to-enhance-aspnet-ajax-progress-indication/
You can send a post request through javascript (AJAX) without using asp.net's ajax framework. So in other words do it manually. Ajax would be perfect in this case, because you are trying to show loading indicators on the front-end while you are waiting for a response from the server.
To do this, take the logic out of your button_click method and put it in a separate page (text.aspx see below). Then you can call that page like this (using JQuery):
$('#ProgressIndicator').show();
$.post("test.aspx", function(data){
alert("Data Loaded: " + data);
$('#ProgressIndicator').hide();
});
If you can't use JQuery in your project, see: AJAX
As far i learned ....AJAX is used for partial page refresh (overcoming the flickering effect in the web page) ....Is there any other features in AJAX....
Technically Yes. Ajax is used for "partial page" refresh there by eliminating the complete page refresh. There are 2 main advantages
Data transfer : Data transfer (To and from the server) is less compared to the entire page refresh
Better User experience : Since the user will not be seeing a blank page it gives the user an illusion of interacting with the site.
What can be done using AJAX is an ever ending list.
Ex: Gmail uses AJAX for it email. If you are using gmail and compare it with other email providers you will know the difference.
Facebook has rich AJAX features in its site.
SO uses AJAX for comments
I think What AJAX cannot do will be easier to mention. For example
AFAIK web browsers cannot maintain the view state of the AJAX enabled website.
Some AJAX enabled websites do not render properly in mobile browsers.
Anythign more?
Your question is a bit confusing, but you can do Ajax with ASP.NET. You can do partial page refreshes with Ajax among other things using the UpdatePanel in ASP.NET. You may also want to look at jQuery for a simpler more lightweight Ajax solution.
I think you're very mistaken. If AJAX had been created only to solve the problem of partial page refresh/page flickering, it would not have revolutionized the web in the way it has.
The single biggest advantage offerred by AJAX is Client-to-Server Communication that is initiated based on some action on the client. This instantly gives us the ability to make the web much more responsive and user friendly without users having to wait for page reloads and postbacks.
I would suggest that you spend some time researching the subject. Read up on the Wiki article on AJAX.
As far as ASP.NET is concerned, AJAX integrates very well into it. Mature AJAX frameworks such as ASP.NET AJAX and Anthem.NET obfuscate much of the internal details of the XmlHttpRequest.
Ajax has let me add some great new features to my web applications with the free Ajax toolkit. See the link
Ajax Examples
They do not come with out their issues but once you learn how to use them they can really add to the the users experience in you site.
ASP.NET uses as you know UpdatePanel for partial page refresh using AJAX.
A less known feature is something .NET calls web methods. This is really AJAX calls that is not connected to the GUI part of the page. You can declare (server-side) a method as a WebMethod, and in the client side, you can call that using JavaScript.
Example:
This example shows how to get the value of a session variable. Note that the method must be Shared - which means that it does not know of any member values on the page object.
As for all ASP.NET AJAX functionality, you need to have a ScriptManager element on the page. To enable page methods, you also need to add EnablePageMethods="true" to the ScriptManager like this:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
Server side code (VB):
<Services.WebMethod()> Public Shared Function GetPreviewImages() As String
Dim lPreviewImages As String = HttpContext.Current.Session("mPreviewImages")
If lPreviewImages IsNot Nothing Then
Return lPreviewImages
Else
Return ""
End If
End Function
Client side code:
//Declare the return methods:
function GetPreviewImages_Success(result, userContext, methodName) {
alert(result);
}
function GetPreviewImages_Failed(error, userContext, methodName) {
var errorMessage = 'Error in map server method ' + methodName ;
if(error !== null) errorMessage += '\n' + error.get_message();
alert(errorMessage);
}
// Call the page method:
PageMethods.GetPreviewImages(GetPreviewImages_Success, GetPreviewImages_Failed);
See also example in C#, which also includes how parameters work in the web method.
in asp.net 2.0 (not mvc), the form's action is to itself. how can I use the forms plugin to send information to server?
I need to send data from the form (let's say name, email, comment) and to display the result on the client side.
Any ideas?
Thanks,
Dave
ms ajax? if i use update panel, i don't need jquery. i want to use jquery and the form plugin (plus the validation plugin) only. no microsoft ajax for me, thank you!
just look at the trafic they produce in firebug to understand why.
It depends on how much of asp.net you want to use during the form submit. I am using the forms plugin in this same way but you need to think in terms of a more classic web model.
The forms plugin does a 'submit' which does not include any viewstate information. That is to say, if you try to get a value like so
sName = txtName.text
the text for txtName will be blank. But if you use your request object you should be able to pull back the value provided your know the control's UniqueID
sName = Request.Form(txtName.UniqueID)
Then what I would do is use the form plugin's success: callback to run an ajax call that will pull back your results. You can use ms ajax WebMethods for this, and you can call the webmethods directly from jquery without the need for the ms script manager. In this case, the WebMethod is returning the html I want displayed on the page.
$(form).ajaxSubmit(function(){
success:function(ret){
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
data: "{}",
url: "SomePage.aspx/SomeWebMethod",
success: function(msg){
$('#somediv').html(msg);
}
}
});
More info on calling ms ajax with jquery here
Because of the way viewstate is tightly coupled to the form in ASP.NET, unless you set up a service to accept the request I'm not sure if this is going to be possible. If you don't want to use viewstate, then you could just use a normal HTML form on the aspx page and submit that to a service that returns your expected results.
When you submit an asp.net form to postback, it sends everything back through the page lifecycle, I don't think there really is anything for a jQuery ajax request to talk to. You could setup a WebMethod on the page, which essentially exposes a service and you could get the jQuery request to talk to that, but I'm not conviced that it would work.
However, you can do ASP.NET AJAX with the MS libraries without using UpdatePanels, see this article for a good rundown of what you can do with WebMethods and the ajax javascript libraries
I ran into this problem today and eventually solved it using the following combination of hacks:
Suppose you have a search page and a results page and you have a form on the search page that you want to post to the results page and load via ajax using the jquery forms plugin. You need to do the following:
Create a Search.aspx page and a Results.aspx page
ASP.NET webform pages have a single form on a page with and id of aspnetForm but the action will always be set to post to itself, so the first thing you need to do when you load the Search.aspx page is to change the action of the aspnetForm to be Results.aspx like this:
$('#aspnetForm').attr('action', 'Results.aspx');
You then need to deal with viewstate so that when you POST from Search.aspx to Results.aspx you don't get invalid viewstate errors. To do this just remove the viewstate variable from the page like this:
$('#__VIEWSTATE').remove();
then you should be able to set up the #aspnetForm to use the jquery forms plugin like so:
$('#aspnetForm').ajaxForm();
This then allows you to post to the Results.aspx webform. This is just a start to get you going in the right direction, but basically it comes down to needing to change the action that the aspnet form posts to and then removing viewstate.
I currently use a mix of asp.net and jquery and the way i solved the issues with the page life cycle and such is to simply not use the autopostbacks and asp.net buttons to submit the form.
I use either ajax calls attached to simple html buttons or, when i really want to submit the entire page i use the __doPostBack(eventTarget, eventArgument) javascript function.
These articles were useful to me:
Understanding the JavaScript __doPostBack Function
Calling __doPostBack in javascript
It doesn't seem VS08 works for you, but others may be interested:
I went to a MSDN Roadshow the other day that seemed to make it very easy.
Scott Gu's blog has this:
http://weblogs.asp.net/scottgu/archive/2008/11/21/jquery-intellisense-in-vs-2008.aspx
It doesn't work, as ASP.NET force you to put everything within a server form as long as you use server control (this is the way how it handles postback). The primary problem you would have is HTML does not allow nested form anyway, so you can't even use jQuery to find the form element (thats my experience with FF3)
The good answer (but hard to achieve)- throw away WebForm and use MVC.
The compromise workaround- I did a small plugin myself which converts a div into an ajax submit with the div abused with method="post" and action="url" dress up, then utilize jQuery Form Plugin to serialize, submit with a plugin pattern. It doesn't do File Upload though (as that requires IFrame, I think its still feasible, but take some more hack). The code is in my client's project so I still dont have permission to post it as a plugin. However I think this is not too hard to do it once you know the theory :)
Really, aim for the good answer (get rid of WebForm) next time. Its not just jQuery Form going to hurt you, there's a lot more pain you have to take if you decided to do jQuery + Web Form, if its not my client's requirement I would never take this path.