We are building a single page application using jQuery Mobile framework. the scenario we have is that we dont want to use the default behavior of having href links being hijacked and rendered as ajax response because practically, the page change causes the screen to flicker a bit and we dont want that to happen. so, to avoid that, we shall write our own ajax calls to the server to get specific data and update the content on page using the response from the server. However, in doing so any javascript that needs to be bound on the response AND the Css styling on the response HTML is completely lost.
Can somebody please advise what would be the best way to rebind / refresh the JS & CSS for the html received via Ajax.
Read "Enhancing new markup" in the JQM documentation. The trigger('create') event should solve this:
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );
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 have an ASP.Net page containing an IFrame. In the IFrame I load a html document. When the user clicks on a hyperlink in the content of the IFrame, I would need a callback to be called in the code-behind class of the ASP.Net page.
I guess that I need Ajax to do this but I'm not exactly sure about what I need to do. Could you give me some pointers?
By the way I'm fairly new to ASP.Net.
Thanks
A lot of this depends on what it is you want to do specifically.
The problem you've got is that the DOM of the page in the iframe doesn't appear to be in the DOM of the calling page. All the calling page sees is the iframe tag as a closed tag, like an image tag. Some browsers will detect a click inside an iframe nested within a DIV as a click in the div so you have
<DIV id="iframediv">
<Iframe blah...>
</DIV>
and then you might be able to use jQuery or similar to detect a click inside iframediv and do stuff.
The real solution would be to try not to use an iframe as, like I said, even this solution won't necessarily pay off. I can think of at least one scenario where not using an iframe is not an option so I'll leave that be.
Other than that Willem's suggestions also seem to be sound.
Because the html document is not an aspx page it will not be able to trigger any code-behind. If you can change the page in the iframe make it an aspx page and handle the click on a LinkButton like you would do otherwise.
An other option is to change the link in the html page to call a custom aspx page that handles your needs, but that will redirect the html-page to the new aspx page.
Or indeed change the link to call a webservice through javascript (XMLHttpRequest) and let that webservice do what you wanted to do in code-behind.
Finally I ended up writing a Control Extender for the IFrame. The Control Extender gets the links contained in the IFrame via the following Javascript:
var frame = this.get_element();
var links = frame.contentWindow.document.getElementsByTagName("a");
I then simply attach an event handler that reacts to each link's onclick event. The event handler calls back the ASP.Net side via a WCF service.
Not complicated to do once you know the various technologies.
I have used renderbegintag to create tags dynamically,
and i have created html button tag by this ,but i am not getting how to redirect page by passing querystring of id on the click of that button.
My code is:
writer.AddAttribute(HtmlTextWriterAttribute.Class, "Login-btn");
writer.AddAttribute(HtmlTextWriterAttribute.Id, "imgDetails");
writer.AddAttribute(HtmlTextWriterAttribute.Onclick,"Response.Redirect('ProductDetails.aspx?ProductId='+i)");
writer.RenderBeginTag(HtmlTextWriterTag.Button);
writer.Write("Details");
writer.RenderEndTag();//button close
Since you are writing out a HTML tag that is client side, the OnClick is client side as well - this means any script should be javascript.
Javascript does not have Response.Redirect, so document.location.href = 'ProductDetails.aspx?ProductId='+i may work better.
You may want to rethink how you are outputting this - you can add a server side Html control dynamically instead of writing it out this way.
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
Is there a best practice when it comes to setting client side "onclick" events when using ASP.Net controls? Simply adding the onclick attribute results in a Visual Studio warning that onclick is not a valid attribute of that control. Adding it during the Page_Load event through codebehind works, but is less clear than I'd like.
Are these the only two choices? Is there a right way to do this that I'm missing?
Thanks!
Eric Sipple
**just a pre-note on the answer: HTML validation in VS is often BS. It complains about stuff that works IRL, even if that stuff is bad practice. But sometimes you gotta bend the rules to get stuff done.
Every ASP.NET page (2.0 and greater) comes with a ClientScriptManager. You use this to register javascript from server side code. You can pass in javascript that registers events on controls after the page has loaded, when the HTML controls on the page are all present in the DOM.
It presents a single, unified place on pages to dynamically add javascript, which isn't a bad thing. It is, however, awfully ugly.
In this time of the death of the ASP.NET server control model, you might want to set events the way they will be in the future of ASP.NET MVC. Grab a copy of jQuery and add it to your website. You can then easily register your events thusly:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("controlId").bind("click", function(e) { /* do your best here! */ });
});
</script>
</head>
<!-- etc -->
</html>
You can add the events through Javascript to the HTML elements that you want. This is the cleanest way, since it doesn't mix the server&client technologies. Furthermore, this way many handlers can be registered to the same event (in contrast to the onclick attribute).
Basically, the code would be
document.getElementById('myLovelyButtonId').attachEvent('onclick',doSomething)
for Internet Explorer and
document.getElementById('myLovelyButtonId').addEventListener('click',doSomething,false)
for other browsers. (doSomething is an event handler - JavaScript function). These calls should be made in the window load event handler
Consider reading the advanced event registration article on Quirksmode for further info.
Also, consider using a library like jQuery. This way, the statement will become
$('#myLovelyButtonId').click(
function doSomething () {
alert('my lovely code here');
});
Setting the value for WebControl.Attributes["onclick"] is okay. If ASP.NET needs a client-side click handler, it will concatenate the values, delimited by semi-colon.
Fix grammatical or spelling errors.
Clarify meaning without changing it.
Correct minor mistakes.
Add related resources or links.
Always respect the original author.