Is there a way to have the AJAX tabs line up on the left hand side, instead of on the top?
There isn't a simple property to change arrangement, but you should be able to accomplish that through overriding all of the related CSS.Wednesday, March 28, 2012
Vertical tabs
I posted on in the toolkit forum but thought I would widen the audience a bit.
What's the best method these days for creating vertical tabs? I currently use the toolkit's tab control for my horizontal tabs but I want to put it in another tabcontainer that has vertical tabs (kinda like an old style TV set with channels as buttons). How are people doing this these days? Doesn't look like the AJAX tab control can be made into vertical tabs and after googling around I didn't see anything that jumped out at me.
Thoughts?
Thanks!
Craig
Hello craigcl,I didn't see the implementation of this, but consider reading this article
http://www.codeproject.com/aspnet/WebTabControl.asp?df=100&forumid=304531&exp=0&select=1758008
and downloading the AJAX Toolkit sources helps your to create your own vertical
tabs
c> I posted on in the toolkit forum but thought I would widen the
c> audience a bit.
c>
c> What's the best method these days for creating vertical tabs? I
c> currently use the toolkit's tab control for my horizontal tabs but I
c> want to put it in another tabcontainer that has vertical tabs (kinda
c> like an old style TV set with channels as buttons). How are people
c> doing this these days? Doesn't look like the AJAX tab control can be
c> made into vertical tabs and after googling around I didn't see
c> anything that jumped out at me.
c>
c> Thoughts?
c>
c> Thanks!
c>
c> Craig
c>
It doesn't do this out of the box, but you can customize the AJAX Control Toolkit's tab control to do this. If you look at the tab's source, you'll see it renders just simple SPANs and DIVs. You can get a bit more insight on what is happening if you look atmy blog post on styling the tabs.
Hope this helps.
-Damien
Vertical tabs
What's the best method these days for creating vertical tabs? I currently use the toolkit's tab control for my horizontal tabs but I want to put it in another tabcontainer that has vertical tabs (kinda like an old style TV set with channels as buttons). How are people doing this these days? Doesn't look like the AJAX tab control can be made into vertical tabs and after googling around I didn't see anything that jumped out at me.
Thoughts?
Thanks!
Craig
Hi Craig,
Currently, there isn't a easy way to customize the tab control to show tabs vertically. But I don't think is quite difficult to implement your own one.
1. You may place several buttons vertically on the page.
2. Add some panels with corresponding content in them
3. Add javascript to control the visibility of these panels within the client side click handler of buttons
very basic question about the atlas samples
I went thru the instructions exactly (well almost...the create new item for the webservice in VS2005 is incorrect in the tutorial, it should be Create new website)
http://atlas.asp.net/docs/Walkthroughs/GetStarted/Basic.aspx
But i keep getting aError: Samples is undefined
I tried this in an attempt to fix it..but it failed too (this URL i put in the Start URL in the webservice)..I wasnt sure
<atlas:servicereferencepath="http://localhost:1169/AtlasWebService/HelloWorldService.asmx"/>
What dumb thing am i missing?
Thanks!
What do you get when you go tohttp://localhost:1169/AtlasWebService/HelloWorldService.asmx/js
Executing:
http://localhost:1169/AtlasWebService/HelloWorldService.asmx/js
Gives:
Server Error in '/AtlasWebService' Application.
Request format is unrecognized for URL unexpectedly ending in '/js'.
That is why you are getting the 'undefined Samples' javascript error. Atlas will generate the javascript objects for your webservice if you have it configured correctly. Using /js after your webservice is a good way to test if this is working.
I would recommend taking the following steps to debug this issue:
1) Double check that you are using the April CTP of Atlas. You may want to uninstall your current version and re-install the version found by going to http://atlas.asp.net/ and clicking the 'Download' button.
2) When you create your website, make sure the template you select is called _"Atlas" Web Site_. This template will give you a web.config to start from that has the appropriate configuration settings to enable generation of javascript for your web service.
3) Follow the steps in the walkthrough to create the web service. Note that the instructions are correct. Make sure you right-click on the web project (not the solution) and select 'Add New Item'. Web Service will be one of the options.
4) Test your web service by setting it as the start page and pressing F5. You should get the standard web service test page - click on the web service and make sure it works. If it does, then add '/js' to the path and see if Atlas generates javascript.
5) Follow the steps in the walkthrough to create the test page.
My guess is that your problem is caused by a configuration error. By following the steps above, you should discover what was causing the problem.
Regards,
Kyle
I'm going to assume you are using one of the wallkthroughs like this one,"Walkthrough: Creating a Basic ASP.NET 'Atlas' Web Application"
I ran into this same problem you did and the fix went like this:
When i created the new "Atlas Website", i right clicked on the root and chose "Add New", then "WebService", and put "HelloWorldService.asmx"
This did two things:
- Created "HelloWorldService.asmx" in the root of the directory
- Created "HelloWorldServer.vb" in the App_Code directory
I had then copied and pasted the code right from the sample walkthrough into the VB file....
But here was the catch, and the cause of the problem:
- The sample has "Namespace Samples.Atlas" or something the like wrapped around its classes
- Well, back on the asmx, it had put:
<%@. WebService Language="VB" CodeBehind="~/App_Code/HelloWorldService.vb" Class="HelloWorldService" %>
- And since we had just changed the classes namespace since we copied and pasted from the code on the walkthrough, we broke the link between the two, hence the "Samples in undefined" error
So my fix was to change the asmx file to say
<%@. WebService Language="VB" CodeBehind="~/App_Code/HelloWorldService.vb" Class="Samples.Atlas.HelloWorldService" %>
Problem = solved
Thanks Kyle, it was my error that i didnt read the docs closely enough...i had passed by the right click on the atlas website, and created a asp.net webservice thru the right click new webservice on the solution.
I assume that i can do the latter, later, by manually copying the relevant config entries for Atlas into the non-Atlas asp.net web.config...
thanks again
Very Basic Static Method Question - SlideShowExtender
I'm working with the SlideShowExtender to show slides from a database. I have everything working as planned, except for a major oversight which I can't figure out how to get around properly. Internally I am housing a static SlideList object which contains all the slides returned from my DAL. Inside my
static AjaxControlTookit.Slide[] GetSlides() method I am copying the SlideList interal objects into the Slide[] object and then returning it. Now for my problem, naturally because my SlideList is static, there is only one copy across each page. When more than one user is on the website at the same time, obviously they are touching the same slideshow data which is causing a lot of problems. What is the correct way to handle this solution? Was I supposed to place the GetSlides() method in a WebService.asmx webservice, or is it ok to keep them as PageMethods and then correctly keep track of the Slides on a per page basis?
I would rather keep the GetSlides() method as a static PageMethod so I don't have to completely refactor the entire project, however I am not sure how I would correctly go about having Slides and then accessing them within my static methods. I realize this is a very elementary problem, and I feel awfully silly for not knowing the answer!
THanks!
Hi,
Your question is how to return different slides upon different requests, isn't it?
Well, you may pass a parameter (contextKey) into the GetSlides method, and use it to filter some slides.
For example, let's say you plan to filter the slides according to the userName of the one is browsing the page, you assign current user name in Page_Load.
protected void Page_Load(object sender, EventArgs e)
{
this.slideshowextend1.ContextKey = currentUserName;
}
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static AjaxControlToolkit.Slide[] GetSlides(string contextKey)
{ // return a slide array according to contextKey
}
Hope this helps.
Very confused about state in my behavior-derived class
I am writing a very simple custom control extender as a first step towards building something slightly more complex. The intention of the extender at this point is just to make a panel visible in the onmouseover event of the target control. The code below is the javascript file that is registered with the control. What I'm finding is that the property I create called _panelId is set properly when the class is initialized (I can tell by the alert box I put in set method), but the property shows up as undefined when the handler for the onmouseover event fires (once again I tested this with an alert box). It's as though the class doesn't know its own properties when it gets to the _onMouseOver function.
My appologies if I'm missing something stupid, but I've been looking at this code all afternoon and can't figure it out...
Type.registerNamespace('Ballito');Ballito.HoverPanelBehavior = function(element) { Ballito.HoverPanelBehavior.initializeBase(this, [element]);// Propertiesthis._panelId =null;// Eventsthis._onmouseoverHandler =null;this._onmouseoutHandler =null;}Ballito.HoverPanelBehavior.prototype = { initialize : function() { Ballito.HoverPanelBehavior.callBaseMethod(this,'initialize');this._onmouseoverHandler = Function.createDelegate(this,this._onMouseOver);this._onmouseoutHandler = Function.createDelegate(this,this._onMouseOut); $addHandler(this.get_element(),'mouseover',this._onMouseOver); $addHandler(this.get_element(),'mouseout',this._onMouseOut);this.get_element().className =this._nohighlightCssClass; }, dispose : function() {if (this._onmouseoverHandler) { $removeHandler(this.get_element(),'mouseover',this._onmouseoverHandler);this._onmouseoverHandler =null; }if (this._onmouseoutHandler) { $removeHandler(this.get_element(),'mouseout',this._onmouseoutHandler);this._onmouseoutHandler =null; } Ballito.HoverPanelBehavior.callBaseMethod(this,'dispose'); }, _onMouseOver : function(e) { alert('_panelId = ' +this._panelId); var panel = Sys.UI.DomElement.getElementById(this._panelId);if (panel) { panel.Visible ="true"; } }, _onMouseOut : function(e) { var panel = Sys.UI.DomElement.getElementById(this._panelId);if (panel) { panel.Visible ="false"; } }, get_panelId : function() {return this._panelId; }, set_panelId : function(value) {if (this._panelId !=value) {this._panelId =value;this.raisePropertyChanged('panelId'); } alert(this._panelId); }}Ballito.HoverPanelBehavior.descriptor = { properties: [ {name:'panelId', type: String} ]}Ballito.HoverPanelBehavior.registerClass('Ballito.HoverPanelBehavior', Sys.UI.Behavior);Sys.Application.notifyScriptLoaded();Hi,
the problem is that you are defining delegates but you're not attaching them as event handlers:
$addHandler(this.get_element(),'mouseover',this._onMouseOver);$addHandler(this.get_element(),'mouseout',this._onMouseOut);becomes:
$addHandler(this.get_element(),'mouseover',this._onmouseoverHandler);$addHandler(this.get_element(),'mouseout',this._onmouseoutHandler);
Hi Garbin,
Thanks very much! That did take care of my state problem. Unfortunately (for me at least), it only got me one step further. Now I get the ID of the panel just fine in the mouse over event, but the call to getElementById() returns null. The documentation on this method is somewhat limited, but it seems to say that if I use the syntax I have in my code (not specifying the parent of the element), document is assumed. My assumption has been that this refers to the document that is referencing the script, i.e. the current page. Is this a valid assumption and regardless of that is this a valid way to grab an element off the page that uses my extender control? If not, is there a way to do that?
Just to make sure I'm clear, I want to set the _panelId property to the ID of a panel control on the page housing the extender control and then to get a reference to that panel using the ID in my mouse over script so I can change properties on it. Is this possible, and if so am I trying to do it the best way?
Thanks for your help,
Lee
Hi,
are you sure that the client id of the panel matches the id that you're passing to getElementById()?
Regarding the extender, I suppose that you want to get a reference to the corresponding behavior, right? If so, you should set the BehaviorID property on the extender and then use its value to get a reference to the behavior, together with the $find method:
var behavior = $find('behaviorID');
Hi Garbin,
Thanks for your response. To answer your question, yes, I am very certain the ID of the panel matches the ID being passed to the getElementById() method. I check the value passed with the alert box immediately preceding the call to getElementById() and it definitely does match the ID of the desired panel on the page where the extender control is defined.
Regarding the second part of your post, I'm not sure exactly where your going. Do I need a reference to the behavior in the script? I was thinking that once I got the reference to the panel from getElementById(), I'd be able to directly set its properties and that that's pretty much all it would take at this point. Is this wrong? Sorry if I'm missing something obvious, just trying to get started here.
Thanks,
Lee
Hi,
sorry, I didn't want to confuse you. If you need a reference to the DOM element (the panel) then getElementById (or $get, a shortcut to access the same method) is the way to go. At this point, since you're getting an error, could you post a simple example that reproduces the problem?
Hi Garbin,
Here's the source for a simple page that duplicates the problem:
First, the C# class that derives from ExtenderControl and defines my little "HoverPanel" control:
using System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using Microsoft.Web.UI;using System.Collections.Generic;namespace Ballito.CS{ [TargetControlType(typeof(Control))]public class HoverPanel : ExtenderControl {private string _panelId;public string PanelId {get {return _panelId; }set { _panelId =value; } }protected override void OnPreRender(EventArgs e) {base.OnPreRender(e);// Test for ScriptManager and register if it exists ScriptManager sm = Microsoft.Web.UI.ScriptManager.GetCurrent(Page);if (sm ==null)throw new HttpException("A ScriptManager control must exist on the current page."); sm.RegisterExtenderControl(this, FindControl(this.TargetControlID)); }protected override IEnumerable GetScriptReferences() { ScriptReference reference =new ScriptReference(); reference.Path = ResolveClientUrl("HoverPanel.js");return new ScriptReference[] { reference }; }protected override IEnumerable GetScriptDescriptors(Control targetControl) { ScriptBehaviorDescriptor descriptor =new ScriptBehaviorDescriptor("Ballito.HoverPanelBehavior", targetControl.ClientID); descriptor.AddProperty("panelId",this.PanelId);return new ScriptDescriptor[] { descriptor }; } }}Next, the script file used by the control (largely the same one as in my original post):
// JScript FileType.registerNamespace('Ballito');Ballito.HoverPanelBehavior = function(element) { Ballito.HoverPanelBehavior.initializeBase(this, [element]);// Propertiesthis._panelId =null;// Eventsthis._onmouseoverHandler =null;this._onmouseoutHandler =null;}Ballito.HoverPanelBehavior.prototype = { initialize : function() { Ballito.HoverPanelBehavior.callBaseMethod(this,'initialize');this._onmouseoverHandler = Function.createDelegate(this,this._onMouseOver);this._onmouseoutHandler = Function.createDelegate(this,this._onMouseOut); $addHandler(this.get_element(),'mouseover',this._onmouseoverHandler); $addHandler(this.get_element(),'mouseout',this._onmouseoutHandler); }, dispose : function() {if (this._onmouseoverHandler) { $removeHandler(this.get_element(),'mouseover',this._onmouseoverHandler);this._onmouseoverHandler =null; }if (this._onmouseoutHandler) { $removeHandler(this.get_element(),'mouseout',this._onmouseoutHandler);this._onmouseoutHandler =null; } Ballito.HoverPanelBehavior.callBaseMethod(this,'dispose'); }, _onMouseOver : function(e) { alert(this._panelId); var panel = Sys.UI.DomElement.getElementById(this._panelId); alert(panel);if (panel) { panel.Visible ="true"; } }, _onMouseOut : function(e) { var panel = Sys.UI.DomElement.getElementById(this._panelId);if (panel) { panel.Visible ="false"; } }, get_panelId : function() {return this._panelId; }, set_panelId : function(value) {if (this._panelId !=value) {this._panelId =value;this.raisePropertyChanged('panelId'); } }}Ballito.HoverPanelBehavior.descriptor = { properties: [ {name:'panelId', type: String} ]}Ballito.HoverPanelBehavior.registerClass('Ballito.HoverPanelBehavior', Sys.UI.Behavior);Sys.Application.notifyScriptLoaded();Finally, the markup for a simple page that uses the control:
<%@. Page Language="C#" %><%@. Register Namespace="Ballito.CS" TagPrefix="ballito" %><!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>ASP.NET AJAX Behavior Sample</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <asp:Panel ID="Panel1" runat="server" BackColor="Cyan" Height="50px" Width="125px" Visible="False"> </asp:Panel> <asp:Button runat="server" ID="SampleButton" Text="Submit Form" /> <ballito:HoverPanel ID="hoverPanel1" runat="server" TargetControlID="SampleButton" PanelId="Panel1" /> </div> </form></body></html>
The behavior I find is that when I run the page and mouse over the button, I can tell the onmouseover event in my control does fire since the alert box in it is displayed. This is the alert box right before the call to getElementById(). As I said in the last post, the alert box shows the value of the _panelId property properly ("Panel1" in this case). The problem is that the alert box that fires right after the getElementById() call shows that the value returned by getElementById() is null instead of [object].
Thanks for the help,
Lee
Hi,
you are setting the Visible attribute of the Panel to false. This means that the Panel won't be rendered on the page and this is the reason why you are getting a null reference.
If you want to hide the panel, you could style the Panel using display:none or visibility:hidden
Hi Garbin,
Well this finally got me going down the road. I'm finding there is still a lot for me to figure out, but I'm starting to get things to work in some sort of expected manner and that's usually what it takes for me to get movement when learning something new. Thanks for all your help.
Lee
Very long loading times on II7 free hosting sites
I've deployed a recently started project on 2 IIS 7 free hosting companies, hostmysite.com and maximumasp.com.
I have encountered big loading times on the whole site, but mostly at AJAX parts. For example I have a few cascade drop down lists and it takes 2-3 seconds to populate 1 dropdown with 3-4 listitems when the user selects something in the first dropdown. On my localhost it happends faster than you blink (E6660, 2 GB RAM).
Have anyone tried out this services ? Its their fault for the big loading times or maybe it's something from my code ? I'm really worried about this and I have no other testing option except this free hosts.?
Well, how does it run for you in development?
You really need to look at what's slow. Is it your app or is the Internet Connection? Is it latency (ie. startup of the app) or is it request times that are slow.
Hosting sites often have issues with very short Application Pool timeouts that cause the entire app to shut down and are then slow to restart. However, this should not be an issue if you use the site for a number of hits in a row.
+++ Rick --
I'd recommend you first use something like FireBug (or the IE equivalent) to monitor the network traffic your partial postbacks cause. It sounds like the network traffic is your bottleneck. Especially watch out for huge ViewStates that get uploaded with every partial postback.
On developing machine it's instant.
I used firebug to do some texts on a page. I have 2 dropdown lists in an update panel and below (outside the update panel) I have a huge gridview. The problem seems to be that gridview's huge viewstate that gets uploaded/downloaded with every partial postback asgt1329asaid.
Now I know the problem. But whats the solution ? Why does the gridview's view state gets uploaded/downloaded everytime even if the gridview is not inside the update panel ?
Unfortunately, the full page's ViewState is sent back and forth on any partial postback. There's no way around that. Though, most of the time there are controls that you can disable ViewState on to minimize it. Or, if you're doing a lot of postbacks, you might consider rebinding controls on the server side, instead of using ViewState to persist them (viability of this really depends on how your page works).
The other option is that you can use web methods/services to replace some of your heavily used UpdatePanels with JSON communication:
http://ajax.asp.net/docs/tutorials/ASPNETAJAXWebServicesTutorials.aspx
Thanks for all the possibilities you recommended me.
Knowing almost nothing about them all I would also like a suggestion about what method to use. I'm trying to make minimize partial postbacks times because 3 seconds for populating a dropdown list with 5 items it not an acceptable time at all.
Using Web Services seems to most suitable method, but as I said, I know almost nothing about them all so I would like to hear an opinion from someone who knows more than me.
You should attempt to do both. Optimize your ViewState and replace partial postbacks with leaner alternatives when it's possible.
Most controls that are based on form elements can have ViewState eliminated. This is beneficial, even in non-AJAX scenarios, but will especially help cut down on the network footprint of your partial postbacks.
Web Method/Services are great. However, you can't (realistically) use them for anything that needs to modify ViewState. I'd say they're especially well suited to read-only operations that display changing data. A stock ticker, for example. On the other hand, manipulating a GridView with Web Methods would be tough. For more info on web methods vs. UpdatePanels, take a look at this:http://encosia.com/index.php/2007/07/11/why-aspnet-ajax-updatepanels-are-dangerous/
Also, don't forget the AjaxToolkit. For your dropdown, you could use the cascading dropdown extender in the toolkit to do half the work for you (just need to make the web service for it and you're done).
Allright I've used cascadeDropDown extender for my 2 dropdowns and wrote a WS to handle them. The problem is now that depending of the selection I make in the first dropdown I also want to display or hide a label or change it's Text value. This cannot be done within the WS so I'm back to where I started.
I believe those dropdown extenders fire the normal client side events. So, you could handle EndRequest() to change cosmetics like a text label or div visibility on the client side (or do it on BeginRequest, if you wanted).
Basically, if it's a read-only, cosmetic change, try to do it in client script if you can.
If you are looking for super lightweight grid which support binding data from a web service call try thishttp://dotnetslackers.com/articles/ajax/ASPNETAjaxGridAndPager.aspx
Could you please detail this gt1329a ?
VERY new to asp.net AJAX: Enabling controls based on slection from AutoComplete control
I've been reading all day and I'm not finding the solution to my requirement.
I'm developing a form to enter "lead" information, part of the lead data is the name of their Dr. We maintain a MySql DB with leads and Drs information.
When a user is entering a new lead and they type the last name of the Dr I have a AutoCompleteExtension fetching Dr.s that match the last name. When/if the user selects a Dr. from the list I want to DISABLE the other Dr. related fields (FName, address, etc) and insert the data from the selected Dr. If there is no match found, the user will enter the details for the Dr. (new record).
The main issue I'm struggling with is how to respond (client or server) to the user making a selection from the AutoComplete list and enable/disable and populate the related fields. For example, the user picks a Dr. from the list, I then want to disable all the Dr. detail related fields and set the values with the record from the database.
I'm not sure how I will accomplish this yet, I imagine I would need to set those values from the server side and it would in turn use AJAX to push the values down to the client?
If anyone could give me a little guidance I would really appreciate it, I just need a jump start to get this thing going.
Thanks for reading,
Steve
If you're Textbox that has the AutoComplete extention on it loses focus, why not use the onBlur event to check to see if they used your AutoComplete (which would have text in that textbox). If they did use the AutoComplete, then use JavaScript to disable the other textboxes.
You could use the ItemSelected event of the AutoComplete extender in the client and as RTernier says use JavaScript to disable the other textboxes, you could call a webservice to obtain the remaining information of the doctor, check: http://www.asp.net/ajax/documentation/live/tutorials/ExposingWebServicesToAJAXTutorial.aspx
http://www.asp.net/ajax/documentation/live/tutorials/EmbedScriptFile.aspx For information on using WebServices. You could also use an UpdatePanel, I guess you could call a partial post back from the ItemSelected event, although I'm not an expert in UpdatePanel, but I think it would work (personally I like the webservice way better, but it's a matter of choice).
Very new to AJAX. Want to insert a record into a database...
Hello everyone,
I am very new to ASP.NET AJAX. I just simply want to insert a new record into a database...
I have a calender, which is using DayRender to highlight days that have meetings on them (pulled from "Meeting" table in database).
When a user selects a date that DOESN'T have a meeting, i want an "Add" button to show that will simply add the calendar's selected date to the Meeting table (the table only has two fields, ID and Date)
I'd like for this to all be AJAXified, so when a user selects a date...it does a partial page render to show the add button (or delete button if there IS a meeting for the selected date already), then when they click the "add" button, it inserts the selected date with a partial page render (or however it works).
Can anyone point me in the right direction? Do I have to create a web service? can i do this just using UpdatePanels? Can someone possibly provide some starter code?
Thanks in advance!
hello.
well, since you're starting, i'd say that this can be done by rather easily with UpdatePanels. Even though i still think they shouldn't be used in most scenarios, the truth is that ~using them makes building ASP.NET AJAX pages easy since you can do most of things on the server side...
Very rich data to be presented in pushpin popup - how to?
Hello,
suppose we have a list of objects retrieved from a webservice which we want to present in Virtual Earth Map as a set of pushpins. And one of fields of the object (presented in one pushpin) is another list. For example consider object of the following class:
1public class Point2{3string city;4string lat;5string lon;6 List<Person> list;7}wherePerson is another class like:
1public class Person2{3string firstname;4string lastname;5string about;6} Now, I need to make a pushpin from every Point object of the list retrieved from the webservice. That's the easy part. :)
My problem is how to present the list of - let say - lastnames from List<Person> list in pushpin popup. Any ideas how to do it in a declarative way?
I'm still using the Atlas, not ASP.NET AJAX.
Please! Any help! I'm so confused :)
Hi,
check the mashup in my signature, it performs something similar, but with a list of images. You can download the source code.
Wow. This is a very nice application. :)I'm studying it hard.
Maybe you know some good sources of information about xml-script?
Just wondering, is your demo updated for the Beta release?
Hi,
no, at the moment it works only with the July CTP.
So, any clues where to find information about programming Atlas in a declarative way (by XML-script)?
Your demo is excellent example, but still example and I would love to learn all of it :) The old Atlas documentation is not available. Maybe someone has it?
Very simple example... with masterpage!
I create a really simple example using atlas on a masterpage.
Ihave this code:
<
cc1:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"></cc1:ScriptManager><cc1:UpdatePanelID="up2"runat="server"><ContentTemplate><asp:Labelid="lbl1"runat="server"Text="Label"></asp:Label><BR/><asp:LinkButtonid="LinkButton1"runat="server"OnClick="LinkButton1_Click">LinkButton</asp:LinkButton></ContentTemplate></cc1:UpdatePanel>
and this:
protectedvoid LinkButton1_Click(object sender,EventArgs e){
lbl1.Text =
"egege";}
the problem is that the event is raised, lbl1.Text became "egege", but the text of the label on the page it is still the same...
what can be wrong?
Can you supply a bit more code and perhaps explain how the cc1 namespace prefix got placed in front of your atlas controls?
<cc1:ScriptManager......
Instead of
<atlas:ScriptManager....
Etc.
I'm not saying that's the problem, but I'm unfamiliar with how that prefix got there.
hello.
btw, you should also start by using fiddler to see the msg that the client is receiving from the server...is there any forbidden xml chars on the head section?
Eureka!
The problem was that there was a<script language="Javascript"> block on the head of my masterpage.
I canceled it and everythigs works!
Can anybody tell me why?
hello.
well, currently, atlas packages the content of the head element in the msg that is sent from the server in response to a partial postback. since it doesn't escape those elements (say, by using a cdata section), you can't have any forbidden xml chars there (and it's really easy to get one of those inside a javascript script - for instance, this would make your document not well formed: for( ; i < 10; i++ ))
in the current version of atlas, when the returned xml document isn't well formed, the client platform discards it without giving any feedback.
Very slow and unresponsive AJAX (Calendar + Tabs)
i just installed the toolkit into Visual Studio 2005, and managed to create some sample projects
I've implemented the Tabs and Calendar onto an existing project, in the believe that Ajax would provide faster (or as fast) access then the existing solution.
in order to make the Ajax work in the project, I've copied nearly all needed elements into the web.config ( http://codebetter.com/blogs/jay.kimble/archive/2006/10/26/How-To_3A00_-Enable-Microsoft-Ajax-Beta-over-on-an-existing-site.aspx )
now - the Ajax Calendar and Tabs works, the old server side asp.net have been fitted to the new controls...
but very very slow !?!? - the calendar takes 3-4 seconds to show and a single action in it takes 1-2 seconds ?
code:
1<%@dotnet.itags.org. Control Language='vb' AutoEventWireup='false' Codebehind='ctlQuizEdit.ascx.vb'2 Inherits='SurveyFactory.ctlQuizEdit' TargetSchema='http://schemas.microsoft.com/intellisense/ie3-2nav3-0' %>3<%@dotnet.itags.org. Register TagPrefix='fcke' TagName='FckHeader' src='ctlImportDefLangHeader.ascx' %>4<%@dotnet.itags.org. Register TagPrefix='fcke' TagName='FckFooter' src='ctlImportDefLangFooter.ascx' %>5<%@dotnet.itags.org. Register TagPrefix='cc1' TagName='HeaderFooter' src='ctlHeaderFooter.ascx' %>6<%@dotnet.itags.org. Register TagPrefix="cc1" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>789<cc1:TabContainer Height="250px" Width="600px" ID="TabContainer1" runat="server">10 <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Survey">11 <ContentTemplate>12 <table id="editQuizData" runat="server" width="100%" cellspacing="1" cellpadding="2" border="0" height="10">13 <tr>14 <td align="left" colspan="2">15 <asp:Label ID="lblQuizAction" Text="Edit" Font-Bold="True" runat="server" /><br>16 <asp:Label ID="lblError" runat="server" />17 </td>18 </tr>19 <tr>20 <td align="left">Title</td>21 <td align="left"><asp:TextBox ID="txtQuizTitle" Columns="80" runat="server"></asp:TextBox></td>22 </tr>23 <tr>24 <td align="left">Description</td>25 <td align="left"><asp:TextBox ID="txtQuizDescription" Columns="80" Rows="2" TextMode="MultiLine" runat="server"></asp:TextBox>26 </td>27 </tr>28 <tr>29 <td align="left">Created by</td>30 <td align="left"><asp:Label ID="lblCreatedBy" runat="server" />31 </td>32 </tr>33 <tr>34 <td align="left" valign="top">Interval</td>35 <td align="left">36 <table id="Table1" runat="server" width="100%" cellpadding="0" cellspacing="0" border="0">37 <tr>38 <td align="left" valign="top">From</td>39 <td align="left" valign="top">To</td>40 </tr>41 <tr>42 <td align="left">43 <asp:TextBox ID="CalendarQuizFrom" runat="server"></asp:TextBox>44 <cc1:CalendarExtender ID="CalendarExtender1" runat="server"45 TargetControlID="CalendarQuizFrom" Format="dd-MM-yyyy" />46 </td>47 <td align="left">48 <asp:TextBox ID="CalendarQuizTo" runat="server"></asp:TextBox>49 <cc1:CalendarExtender ID="CalendarExtender2" runat="server"50 TargetControlID="CalendarQuizTo" Format="dd-MM-yyyy" />51 </td>52 </tr>53 </table>54 </td>55 </tr>56 </table>57 </ContentTemplate>58 </cc1:TabPanel>59 <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Header">60 <ContentTemplate>61 <fcke:FckHeader runat="server" ID="FckHeader" />62 </ContentTemplate>63 </cc1:TabPanel>64 <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Footer">65 <ContentTemplate>66 <fcke:FckFooter runat="server" ID="FckFooter" />67 </ContentTemplate>68 </cc1:TabPanel>69</cc1:TabContainer>7071<center>72 <asp:Button ID="btnSave" runat="server" Text="Save"></asp:Button> 73 <asp:Button ID="btnCancel" runat="server" Text="Cancel"></asp:Button>74</center>7576<input id="hiddenLangHeaderTxt" type="hidden" name="hiddenLangHeaderTxt">77<input id="hiddenLangFooterTxt" type="hidden" name="hiddenLangFooterTxt">78<input id="hiddenFooter" type="hidden" name="hiddenFooter" runat="server">79<input id="hiddenHeader" type="hidden" name="hiddenHeader" runat="server">80
Hi Montago,
Your program works pretty well after I removed all the UserControls. So we suggest that you should use an exclusive method that remove the controls one by one until find out the exact root cause. Also, Some helpful debugging tools will make your work easy. For example,IE WebDevelopment Helper,HttpWatch,Firebug etc.
If your problem cannot be resolved , please let me know with more information.
Best regards,
Joanthan
Very slow dragndrop in IE using DragDropManager
There are 2 realizations of DragDropManager in Ajax Controls:IEDragDropManager &GenericDragDropManager.
GenericDragDropManager works fine. But IEDragDropManager works slow, very slow. If I forcedly use the GenericDragDropManager for IE browser every works fast. It's clear that IEDragDropManager has some realization issues.
What's the problem and when it will be fixed?
Could be because you're running in debug mode... if so one of these:
1) Set<configuration><system.web><compilationdebug="false">in your web.config
2) Set theScriptMode="Release"property on the ScriptManager component
<asp:ScriptManagerID="ScriptManager1"runat="server"ScriptMode="Release"></asp:ScriptManager>
Either way, you should end up with the release version of the javascript coming down to you which is A LOT faster!!
Yeah, it's helped a little. But the draggins is still too slow and not acceptable for real world.
The problem isn't solved.
very very simple question about $get
in javascript how can I transform this :
var texte=document.getElementById("Text1").value;with a $get ? I've tried var texte=$get("Text1","value"); but it doesn't work ?
I'm on Vista with VS 2008 RTM
Thanks
Try var texte=$get("Text1").value, basically $get() is a shortcut to document.getElementById()
Hope this helps,
Elias.
thanks it works, I was waiting for intellisense, but $get(tytu). there is no intellisense.
Keep in mind that $get is exactly the same as getElementById. They both return a reference to the supplied DOM element. $get is just a shortcut, to save typing and improve readability.
If you have existing code using getElementById, you don't have to convert it to $get unless you want to.
very weird problem
I have installed lastest ajax and also toolkit too. I created master page and default aspx page, then I put my scriptmanager inside the master page and update panel inside the default page, I didn't choose ajax enable website because I have a hard time to place my existing web.config files, assemblies, connection strings to right place of the enable ajax's web.config file. Maybe I should though, with this error.
I get errors sometimes with all the controls in update panel, is not recognized my html tag, even though my controls are declared, it says it is not, But it builds application suscessfully. I made sure I put this<%@dotnet.itags.org.RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"Namespace="System.Web.UI"TagPrefix="asp" %>
to my page and also in web.config file under config section also assemblies too. Thing is I think every time I backup my website to my documents, for some reason a while later this happens. I even reset my iis to clear my temp folder of asp.net too. Still. Why this is happening ?
You'll also need an reference to the following assemblies:
- AjaxToolKit.dll
- System.Web.Extensions.dll
You can do this using right click on your project, "Add Reference" and point to this DLL's
On bin folder, I have got these ar, cs, de, es, fr,he,hi,it,ja,ko,nl,pt, ru,tr-TR,zh-CHS, zh_CHT all
thas AjaxControlToolkit.resources.dll in it.
Then AJaxCotrolKit.dll under neat AjaxControlKit.dll.refresh and AjaxControlKit.pdb
Microsoft.Web.UI.WebControls.dll with Microsoft.Web.UI.WebControls.dll.refresh
I have these dll on my bin now, and still problem
I had these dll on program file but not pointing to my project. I am right clicking my project and add references, choosing these dll and adding but it is not showing under my bin folder for some reason, can someone tell me steps to how to add these dlls to my projects.
Is anybody didn't have this problem? I go crazy here with this..
this was nothing to do with ajax, it was copy paste problem..
Very weird error. Ajax controls call default.aspx
I have a few pages in my site... and for some reason, if there's any ajax controls on the page, it calls default.aspx and runs the code every time any aspx page with an ajax control exists on it. Problem is, default.aspx resets my session variables.
Why does Ajax call the default.aspx page code? It only runs the CS file... it doesn't actually show the default.aspx page.
I doubt it calls it. Do you have a component in your site somewhere that's got a url of "/" attached to it somewhere, and that's invoking the default page?
it only seemed to only happen when I have Certain Ajax controls on the page. Note, it only does it with Internet Explorer 6 and 7. Firefox seems to be fine.
For example, I have a collapsible PAnel in each row of a Gridview. That is in an UpdatePanel. When the Gridview is populated (and I have a breakpoint on the default.aspx.cs file), it goes through that code. Well, I set my session variables on that page, so in essence it resets them.
It seems like it does this AFTER the page is loaded, because the labels that show content based on those session variables aren't updated until I go to a new page.
It only does this when I have a collapsible panel in IE. The panel is set to collapsed.
Actually, it appears that AJAX is clearing the Session Variables. I don't know where it's doing this, though.
Very Weird Problem with Cascading DropDown
After some version updates both in AJAX.NET and Control Toolkit, I found the Cascading DropDown does not work in my project. The appearance is: the DropDown is simply blank. Even the PromptText is not shown up in the page. DropDown is not populated while the web service is working fine. No error reports to me.
But at mean time, the Sample project of Cascading DropDown page works fine on the same machine.
If I copy my code into the Sample Project, it works. This means the code is correct. And web service is always OK if open asmx page and test it.
My project was created by selecting template of AJAX Enabled website, and then copy the AjaxControlToolkit.dll from Toolkit Sample project Bin folder to my project Bin folder. And then add reference to it. Very standard way.
I compared the difference of the sample project and my project, basically the reference. The only difference is that, the AjaxControlToolkit.dll in my project is versioned as "Auto Update", while in sample project it's versioned as 1.0.61121.0. BUT I DON"T KNOW HOW TO CREATE A PROJECT WITH REFERENCE OF THIS FILE TO BE VERSIONED AS 1.0.61121.0.
For your info, my code is mainly posted as following:
<!-- for aspx code: -->
<asp:DropDownList ID="DropDownList1" runat="server" Width="200px"></asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1" Category="Carrier" PromptText="Please select a carrier" LoadingText="[Loading carriers...]" ServicePath="uscarrier.asmx" ServiceMethod="ReturnUSCarriers"></ajaxToolkit:CascadingDropDown>
// webservice code
[WebMethod]
[Microsoft.Web.Script.Services.ScriptMethod()]
public CascadingDropDownNameValue[] ReturnUSCarriers(string knownCategoryValues, string category)
{
SqlConnection cnn = new SqlConnection(ConfigurationManager.ConnectionStrings["CMSConnectionString_Prod"].ConnectionString);
SqlCommand cmd = cnn.CreateCommand();
cmd.CommandType = CommandType.Text;
cmd.CommandText = "select distinct Name, OperatorID from [CMS_Carriers] where OperatorID like '3%' and IsActive = 1";
SqlDataAdapter da = new SqlDataAdapter();
da.SelectCommand = cmd;
DataSet ds = new DataSet();
da.Fill(ds, "Carriers");
List<CascadingDropDownNameValue> carriervalues = new List<CascadingDropDownNameValue>();
for (int i = 0; i < ds.Tables["Carriers"].Rows.Count; i++)
{
DataRow dr = ds.Tables["Carriers"].Rows[i];
carriervalues.Add(new CascadingDropDownNameValue((string)dr["Name"], dr["MBloxOperatorID"].ToString()));
}
return carriervalues.ToArray();
}
The ReturnUSCarriers method needs to be static. (This is covered in the ASP.NET AJAX migration docs as well ashttp://blogs.msdn.com/sburke/archive/2006/10/21/hint-components-that-use-web-services-with-asp-net-ajax-v1-0-beta.aspx.)
David:
Thanks for your reply. I set the method to be static, and it still does not work.
If this is a page method (looks like it is), then you may want to try removing the ServicePath property entirely.
my cascading dropdowns are no longer working as well. I am calling an external web service with the same method signiture as above.
also, this was after I upgraded to the RC and updated control kit.
figured it out, for some reason I was missing this in my web.config:
<addverb="GET,HEAD"path="ScriptResource.axd"type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"validate="false"/>
Shoot, I just realized those were needed for the Ajax to work in IE. And by me removing those lines from the web.config it just does a normal postback and not an asynchronous call. That is why it worked for me. So really nothing has changed. I am back to nothing on why the response.redirect() doesn't work. You guys mentioned that you took the code and were able to get the response.redirect() to work. I'm not sure what in my environment could be any different. I'm running this off of localhost and I do not have IIS running.
video in asp.net ajax like youtube
how to play videos in asp.net ajax like youtube.
You should check the Silverlight controls in the futures:
http://www.asp.net/downloads/futures/
Hope this helps,
Elias.
view images through xml
I am trying to create a slideshow that has some text and an image. I am able to scroll through the xml file and display the text elements. My problem is with the images. Can anyone help? Thanks
XML:
<?xml version="1.0" encoding="iso-8859-1" ?>
<dogs>
<info>
<name>Archer</name>
<handler>P.O. 1</handler>
<skills>Drugs</skills>
<birthday>4</birthday>
<imagesrc>Images/K9/Dogs/Archer.jpg</imagesrc>
</info>
code:
<xml src="http://pics.10026.com/?src=XML/dogs.xml" id="xmldso" async="false"></xml>
<table width="100%">
<tr>
<td style="width:50%;" align="right">
<span datasrc="#xmldso" datafld="imagesrc"></span>
</td>
<td style="width:50%;" align="left">
<table style="border: activeborder 1px solid">
<tr><td class="TableBottom" width="70">Name:</td><td class="TableBottom" width="100"><span datasrc="#xmldso" datafld="name"></span></td></tr>
<tr><td class="TableBottom" width="70">Handler:</td><td class="TableBottom" width="100"><span datasrc="#xmldso" datafld="handler"></span></td></tr>
<tr><td class="TableBottom" width="70">Skills:</td><td class="TableBottom" width="100"><span datasrc="#xmldso" datafld="skills"></span></td></tr>
<tr><td class="TableBottom" width="70">Birthday:</td><td class="TableBottom" width="100"><span datasrc="#xmldso" datafld="birthday"></span></td></tr>
<tr><td width="70"></td><td width="100"></td></tr>
</table>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<A href="http://links.10026.com/?link=JavaScript:moveprevious()"> Back</A>
|
<A href="http://links.10026.com/?link=JavaScript:movenext()"> Next</A>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<INPUT TYPE="text" WIDTH="100" NAME="Number" style="border:0; text-align:center;">
</td>
</tr>
</table>
<SCRIPT LANGUAGE="JavaScript">
function Start()
{
x=xmldso.recordset;
document.Canine.Number.value=x.absoluteposition+" of "+x.recordcount;
// document.getElementById("mypic").src =x.recordset("imagesrc") ;
}
function movenext()
{
x=xmldso.recordset;
if (x.absoluteposition < x.recordcount)
{x.movenext();}
else if (x.absoluteposition = x.recordcount)
{x.movefirst();}
document.Canine.Number.value=eval(x.absoluteposition);
document.Canine.Number.value=x.absoluteposition+" of "+x.recordcount;
}
function moveprevious()
{
x=xmldso.recordset;
if (x.absoluteposition > 1)
{x.moveprevious();}
else if (x.absoluteposition = 1)
{x.movelast();}
document.Canine.Number.value=eval(x.absoluteposition);
document.Canine.Number.value=x.absoluteposition+" of "+x.recordcount;
}
</SCRIPT>
Change this line <span datasrc="#xmldso" datafld="imagesrc"></span>
to <img datasrc="#xmldso" datafld="imagesrc" />
use the img html control instead of the span control. I tested this in my local machine and works fine
let us know
I tired that and did not work. When I scroll through the images, all I get the the missing image with the red x where the image should be.
Well, it should work. do you have the following image?
Images/K9/Dogs/Archer.jpg
right click the red icon and see the image path.
Yes, I have the image. I even moved it to the same folder as the xml file in case the path was not accurate.
Chris,
I am using IE 7 and it works fine. Which browser and what version are you using?
Forget my last comment. It did work. I did not properly refresh the xml file. Thanks for your help. It is appreciated.
View PDF in ATLAS?
In my existing 1.1 app, I have a datagrid with a column that, when clicked, displays a pdf file. In trying to convert it to 2.0 with Atlas, the pdf will not display, no error, but no display either. The data for the pdf is stored in SQL as binary data. I have listed the code below. If anyone could shed some light onto the issue, I'd greatly appreciate it.
If dr.Read Then
Dim byData(dr.GetBytes(0, 0, Nothing, 0, Integer.MaxValue) - 1) As Byte
dr.GetBytes(0, 0, byData, 0, byData.Length)
Response.ClearContent()
Response.ClearHeaders()
Response.Buffer = True
Response.AddHeader("Content-Disposition", "inline;filename=" & strFileName)
Response.AddHeader("Accept-Header", byData.Length)
Response.ContentType = strContentType
Response.BinaryWrite(byData)
Response.Flush()
Response.Close()
End If
Again, any feedback would be appreciated.
Thanks.
I ended up diong the postback in a different page.
What you will need to do is have a link in your datagrid to another page (ie viewattachment.aspx?filename=filename) and then create a non ajax windows form page called viewattachment.aspx
In the viewattachment.aspx page_load method you can then place your response code as you mentioned above
I have written an example of thishere.
Clinton
Subscribe to:
Posts (Atom)