Showing posts with label client. Show all posts
Showing posts with label client. Show all posts

Wednesday, March 28, 2012

Programmatic client side initialization of HoverMenuPopup

I am trying to link a HoverMenuPopup to anchor tags on a page programmatically and I would like to implement something similar to the FAQ #13:
http://forums.asp.net/t/992919.aspx

This code is outdated now, and does not work.

How would it be written for the released version of the AJAX Control Toolkit?

Thank you,

Jeff

Hi Jeff,

Here is a sample made according to your requirements, please try it.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> <div> <input type="button" onclick="addHoverMenu();" value="Add Hovermenu to HyperLink" /><br /> <asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.msdn.com">HyperLink</asp:HyperLink> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> Item1<br /> Item2<br /> Item3<br /> Item4<br /> </asp:Panel> <script type="text/javascript"> function addHoverMenu() { $create(AjaxControlToolkit.HoverMenuBehavior, {"id":"Repeater1_ctl10_HoverMenuExtender1","popupElement":$get("<%= Panel1.ClientID%>")}, null, null, $get("<%= HyperLink1.ClientID%>")); } </script><div style="display:none;" >Controls in this div are used to import necessary javascripts. <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> <asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px"> </asp:Panel> <ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" PopupControlID="Panel2" runat="server" TargetControlID="LinkButton1"> </ajaxToolkit:HoverMenuExtender> </div> </div> </form></body></html>

That is what I was looking for Raymond. Now I will need to look into setting the popup location, timeout, etc.

Thank you,

Jeff


Raymond,

I've run into a bit of a snag with the popup. What I want to do is link a number of anchor tags to a single popup instance. When I use the logic of attaching behaviors to multiple anchors, certain events attached to the single popup cause the popup to jump between the anchor tags when I mouse over the popup (after hovering over a second anchor associated with the same popup).

What would you suggest I change in the below code to address this:

<%@. Page Language="C#" %>

<%@. Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Hover Sample</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>

<script type="text/javascript">
function hover(element)
{
var behaviorName = "HoverMenuExtender_" + element.uniqueID;
var behavior = $find(behaviorName);
var popupElement = $get("<%= pnlHoverPopup.ClientID%>");

if (behavior == null)
{
behavior = $create(AjaxControlToolkit.HoverMenuBehavior, {"id":behaviorName, "popupElement":popupElement, PopDelay:750, OffsetX:-200, OffsetY:16}, null, null, element);
behavior.set_PopupPosition(AjaxControlToolkit.HoverMenuPopupPosition.Bottom);
}
}
</script>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean nisl justo, sagittis
id, tincidunt nec, euismod ac, turpis. Proin ante. Sed venenatis libero ac nisi.
Nunc varius ultrices velit. Donec vestibulum interdum ligula. Class aptent taciti
sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla facilisi.
Nunc vel ligula. In <a href="http://links.10026.com/?link=http://forums.asp.net/p/1167961/1956419.aspx#1956419#" onmouseover="return hover(this);">Internet</a> nisi
eget turpis. Nunc diam. Etiam congue ipsum. Proin vitae mauris et risus ultrices
vestibulum. Phasellus laoreet lectus quis augue. Vestibulum accumsan. Curabitur
sit amet eros eu justo rhoncus eleifend. Donec semper pharetra nibh. Pellentesque
habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Pellentesque habitant morbi tristique senectus et netus et <a href="http://links.10026.com/?link=http://forums.asp.net/p/1167961/1956419.aspx#1956419#" onmouseover="return hover(this);">
Internet</a> fames ac turpis.
</div>
<asp:Panel ID="pnlHoverPopup" runat="server" Style="visibility:hidden;background-color:#ccccff;width:300px; padding:10px;color:#000000;">
<h3>
Internet</h3>
A series of interconnected local, regional, national and international networks,
linked using the Internet Protocol. The Internet is accessible via telephony wires,
HFC networks and by satellite.
</asp:Panel>
<div style="display: none;">
Controls in this div are used to import necessary javascripts.
<asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="125px">
</asp:Panel>
<ajaxToolkit:HoverMenuExtender ID="HoverMenuExtender1" PopupControlID="Panel2" runat="server"
TargetControlID="LinkButton1">
</ajaxToolkit:HoverMenuExtender>
</div>
</form>
</body>
</html>

Thank you,

Jeff

Monday, March 26, 2012

Protecting AJAX Javascript - how?!?

Hi, I'm using AJAX so I've got into this question - as AJAX uses Javascript "powers", it means that the client is able to get more information about services or other stuff of that site correct?

Is there any way to encrypt, protect or reduce the probability of getting that data to make damage or access denied places or funcions? AJAX is really nice and powerful, but security on the web is still a big issue!Thanks a lot!

I personally like this articles about Ajax security, look at the development section:

http://www.cgisecurity.com/ajax/

Saturday, March 24, 2012

pulling data from the server vs from the client

Hi,

I have a general issue which I don't think is addressed by the current ASP.NET Ajax framework. If it is I'd like to know; if not, will it be in the future? Or is it not worth considering?

The issue is this Suppose that we have the page functionality demonstrated in the CascadingDropDown toolkit sample. It seems to me that due to the small amount of the data, and the fact that the data are fairly static, the right thing to do here would be to push up all the data to the client and read them from there, rather than via an Ajax call. I say the 'right thing' because the aim here is to make the application as responsive as possible, and the bottleneck here is the roundtrip to the server (which might become an issue, for instance where the Internet connection is slow or where there is a very heavy viewstate as a result of other stuff on the page).

On the other hand, were the CascadingDropDown sample to be hooked up to a major set of data, then the right thing to do would be the Ajax call. The bottleneck would be pushing up all of the data to the client.

Approaching this in an object oriented frame of mind, it seems to me that the DropDown object doesn't care how it gets updated. So there's room for an Updater object which will do the 'right thing', dependent upon the prevailing circumstances. Such an Updater could have a default behaviour which gets switched by the developer, or it could work off some more fancy intelligence about the amount of data involved.

Now, I guess that I could implement something like this for the CascadingDropDown sample. Javascript updating has been around since forever (I used to do it with hidden frames). But is there any future in having this kind of functionality built into the AJAX framework? The core control in the ASP.NET Ajax framework is the UpdatePanel, which always requires a postback, and always passes back a heap of HTML. It can't work with a different source of data (the client) nor a different method of updating a control than overwriting a section of page HTML. In Dino Esposito's article 'Perspectives on ASP.NET AJAX' he says that alternative approaches are 'far too intrusive for a Web framework such as ASP.NET'. But I'm not sure what would be 'intrusive' about allowing AJAX to make smarter choices about manipulating data.

Working out the details of how this would work wouldn't be simple, of course. But, since it's been annoying me for a while now I'd really appreciate any feedback on the general idea.

You seem to have an underlying assumption that the server controls are the framework. Free your mind. lol. The framework is the server controls + the clientside controls. What you're describing is definitely a good idea, so build it and send it to the *open source project* that's building the toolkit

After doing a bit of reading I've realised that what I'm describing is (at least partly) a browser-side cache, which could be prepopulated. I might have a play with writing such a thing.

I am confused about the relationship between the different bits of ASP.NET Ajax, though. As I see it there's the core Microsoft stuff, which centers round the UpdatePanel. Then there's a bunch of 'control extenders', many of which aren't in the slightest bit AJAX (no asynchronous traffic), and some of which just seem to be inefficient ways of applying styles. In between there are some useful client-side libraries. But when it comes to further improving and extending the actual *AJAX* side of things I'm not sure whether it's supposed to be coming from the Microsoft side or the community side. So I'm not sure I'd want to spend my own time trying to come up with stuff that the MS developers are going to cover (in doubtless far more elegant ways).


I agree that the extenders are often just simple ways to add DHTML type stuff to your ASP.Net controls. I think that the MS focus on the UpdatePanel is incorrect, though. The focus I've seen on the update panel si from *developers* on the MS forums that are entranced with it as an 'easy out' to building their own client layer. It's got its own issues, though, so my path has taken me to try and better understand the other tools available. Among my favorite of those is the way Web Services are made to be more easily accessed w/o the developer explicitly making XmlHttpRequest calls or parsing the reuqest and response to and from objects in the respective client or server code.

If you read through the documentation on the clientside stuff, you'll find that there's some pretty robust support for javascript stuff that allows you to leverage the power of the client script w/o digging into most of the browser inconsistencies that you'd have to if you were rolling your own. I see the whole spectrum of these things (server controls, handlers, extenders, client libraries, etc) as "the Framework". Which is why I think looking at just the Update panel, or even just the server controls (to include the extender toolkit) is selling the overall framework short.

Just my opinion.

Pure Ajax alternative for this atlas code

I want's to find out what will be the pure ajax that is client side script to get autocomplete functionality

that is for this atlas code
<form id="form1" runat="server">
<atlas:ScriptManager ID="ScriptManager1" runat="server" />
<div>
Enter a Name:
<asp:TextBox ID="txtName" runat="server" />
<atlas:AutoCompleteExtender ID="au" runat="server">
<atlas:AutoCompleteProperties Enabled="true" MinimumPrefixLength="1"
ServiceMethod="GetNames" ServicePath="MyNameService.asmx" TargetControlID="txtName" />
</atlas:AutoCompleteExtender>
</div>
</form>
where web service is

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class MyNameService : System.Web.Services.WebService {

public MyNameService () {

//Uncomment the following line if using designed components
//InitializeComponent();
}

[WebMethod]
public string[] GetNames(string prefixText, int count)
{
ArrayList filterList = new ArrayList();
string[] names = { "AzamSharp", "Scott", "Simon", "Alan", "Michael", "Jane", "Janice" };

foreach (string str in names)
{
if (str.ToLower().StartsWith(prefixText.ToLower()))
{
filterList.Add(str);
}
}

return (string[]) filterList.ToArray(typeof(string));

}

[WebMethod]
public string HelloWorld() {
return "Hello World";
}

}

Hi,

can you tell us why you don't want to use Atlas? Is it because you're developing with ASP.NET 1.x? If so you can take a look at Ajax.NET.

Grz, Kris.


the example here does something along along the lines of what your looking for

http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=12


Mr X!!!
My Only Problem is lack of browsers support by atlas Like opera other it is the best and easiest of all ajax based technologies.
Mr X!!!
My Only Problem is lack of browsers support by atlas Like operaotherwise it is the best and easiest of all ajax based technologies.

hello.

though i haven't done it, i beleiver that you can try to adapt atlas to opera by writting a compat layer for it...i also don't know if one is needed...


Opera support is possible but it is currently a problem because of browser detection. A big issue is the lack of defineGetter and defineSetter mechanism. There would simply be no way to define custom DOM properties, in other words Atlas cannot have a compatability layer based on IE but would have to have use W3C DOM and create a compatability layer for IE.

There is really a lot of merit to this. Has the team considered this at all? I realize the IE dom was chosen as the base for reason of convenience (and I have read why) but there seems to be a few very good reasons to base it on W3C.

Not only would a W3C based Atlas that provides compatability layers for all browsers be The Right Thing but I think it can greatly help Atlas adoption throughout the whole web development community, not only the ASP/.NET/Windows/... community. I have already seen flame wars start because of this. There are tons more reasons I can think of why the W3C model for Atlas would be great.

The only reason I can think of for supporting the IE DOM model is to attract those more familiar with the model (ME!!!!).

Opera is an interesting browser with many oddities and a tiny market share (last I checked less than 2 percent) and I am sure before a full version of Atlas is released Atlas will support Opera. I personally do not worry about Opera too much, I am more interested in full Safari support.

REQEST: The Safari compatability layer can really use a unified solution for loading dynamic scripts. I currently have to use callbacks within the dynamically loaded script to know it is available... no onload or readystatechange... not cool. An iframe solution seems possible but I have not tried this yet. Another solution is to use a webrequest and eval but also have not tried this yet.


hum...man, i really love opera! btw, have you noticed that it has passed the acid test (version 9 beta)?

Luis - yeah I think Opera has the right idea make all their browsers (mobile, device and pc) run the same way. I've been playing with Opera 9 beta and its looking pretty good so far. I really think they need to rethink Opera and make it less complex for the novice users. I can see why a developer has an option to identify as Mozilla but a regular user? I personally wouldn't recommend Opera to my mom/dad...


hello again.

well, sorry, this is a biased opinion :) i recommend opera to everyone!

push data to client/ keep checking the server side for any update to load

hi..

Im developing a web application to be used over the internet (not entranet) that means I have unknown of users accessing my web site.

I need to keep checking the server side every 30sec by creating hidden iframe to keep submiting to the server and check for specific updates( such database table). I think this way will reduce the performance of the server and not accepted!

is it true as I think? there is any other technique to this? is there some AJAX control to use instead?

note: Im fetching a small amount of text from the server

It really depends on your system and the expected number of users. Of course, every time you poll the server it takes some performance but in many cases the rewards outweight the performance hit.There are a lot of sites that do this and its not a huge performance hit if you are just retrieving a small amount of text. I would say go for it if you have the capacity.


Take a look at this: http://encosia.com/index.php/2007/07/25/display-data-updates-in-real-time-with-ajax/

The page method call for polling keeps the traffic level very low, compared to other techniques.

Question about AJAX and WCF duplex services

OK, I have some existing WCF services that are working with a thick client download, but now we are trying to add a web front end option. I was able to get the one way services working easily by adding a web service page as a simple wrapper around the WCF calls. Now I need to look at our services that are duplex though. Is there a way to do this with the AJAX libraries that are out now? If not, is there a timeframe for when Microsoft might release the next preview that has WCF functionality added back in? And how stable was the older release that still had WCF functionality? Would it work with the release version of WCF?No unfortunately, ASP.NET AJAX has no support for WCF yet. It will be available in future versions. You can use POX to call WCF services but that will be one way and in that case you also should not have a service contract in your WCF service.
Well, if anyone else is caught in a situation like this in the interim, I found a pretty good workaround, at least for my situation. I actually wrote a second WCF service that acts as an aggregator of the first one. The new service only exposes plain http web services, so I can call it no problem from the AJAX code. The aggregator gets the duplex messages from the main server, so it updates in its memory in real time, and then the web page just polls it every few seconds for updates. It's not perfect, but it does what I need for now.

Wednesday, March 21, 2012

Question with "Sample ASP.NET AJAX Client Application" and "Samples not defined" again!

Yes, I'm getting a "Samples not defined" in the "Sample ASP.NET AJAX Client Application"


If you search on this error message, there are lots of people witht the same question and I've gone through their responses and verified that everything is correct.

I've verified that (what I can think of):

The namespace and the class name match the javascript callThe web service file "HelloWorldService.asmx" exists and is in the same directory location as AjaxScript.aspx
Microsoft.Web.Script.Services; is included in "HelloWorldService.asmx"Microsoft.Web.Extension is registered in AjaxScript.aspx

I looked at the source of the .aspx page and there is one line in particular that caught my attention:

<script src="HelloWorldService.asmx/jsdebug"type="text/javascript"></script>
The question is, where is this jsdebug file live? I suspect that this is the problem that the sample can't find it. I've assumed
it was in the \winnnt\microsoft.net\... folder but I couldn't find it.
 Anyone have any ideas for fun?
Thanks, Tim
OS: Windows 2000 (5.0.2195: SP4)
Browser: Firefox 2.0/IE 6.0.2800.1106 (SP1)
 
Source Code for fun:
AjaxScript.aspx
 
1<%@dotnet.itags.org. Page Language="C#" Title="ASP.NET AJAX Script Walkthrough" %>2<%@dotnet.itags.org. Register Assembly="Microsoft.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" Namespace="Microsoft.Web.UI" TagPrefix="asp" %>3456<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">78<html xmlns="http://www.w3.org/1999/xhtml">910 <head id="Head1" runat="server">11 <title />12 <style type="text/css">13 body { font: 11pt Trebuchet MS;14 font-color: #000000;15 padding-top: 72px;16 text-align: center }1718 .text { font: 8pt Trebuchet MS }19 </style>2021 </head>22 <body>23 <form id="Form1" runat="server">24 <asp:ScriptManager ID="ScriptManager" runat="server">25 <Services>26 <asp:ServiceReference path="~/HelloWorldService.asmx" />27 </Services>28 </asp:ScriptManager>29  30 <div>31 Search for32 <input id="SearchKey" type="text" />33 <input id="SearchButton" type="button" value="Search" onclick="DoSearch()" />34 </div>35 </form>36 <hr style="width: 300px" />37 <div>38 <span id="Results"></span>39 </div>40 <script type="text/javascript">4142 function DoSearch()43 {44debugger;45 var SrchElem = document.getElementById("SearchKey");46 Samples.AspNet.HelloWorldService.HelloWorld(SrchElem.value, OnRequestComplete);47 }4849 function OnRequestComplete(result)50 {51 var RsltElem = document.getElementById("Results");52 RsltElem.innerHTML = result;53 }5455 </script>56 </body>57</html>58

HelloWorldService.asmx

1<%@dotnet.itags.org. WebService Language="C#" Class="Samples.AspNet.HelloWorldService" %>23using System;4using System.Web;5using System.Web.Services;6using System.Web.Services.Protocols;7using Microsoft.Web.Script.Services;89namespace Samples.AspNet10{1112 [WebService(Namespace="http://tempuri.org/")]13 [WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]14 [Microsoft.Web.Script.Services.ScriptService]15 public class HelloWorldService : System.Web.Services.WebService16 {17 public HelloWorldService()18 {1920//Uncomment the following line if using designed components21 //InitializeComponent();22 }2324 [WebMethod]25 public string HelloWorld(String query)26 {27 string inputString = Server.HtmlEncode(query);28 if (!String.IsNullOrEmpty(inputString))29 {30 return(String.Format("Hello, you queriedfor {0}. The" +31 "current timeis {1}", inputString, DateTime.Now));32 }33 else34 {35 return("The querystring wasnull or empty");36 }37 }38 }39}40

Hi Tim,

Just to clarify, the line<script src="HelloWorldService.asmx/jsdebug"type="text/javascript"></script> is added because of the <asp:ServiceReference> tag in your aspx code.
Make sure that you added your HelloWorldService.asmx where your tag is pointing to:"~/HelloWorldService.asmx". It should be right under your web app root.

You can check the proxy object typing /js or /jsdebug after your web service address (e.g. http://your_web_app_address/web_service_name.asmx/js).

Hope this helps,

MaĆ­ra