Hannes Preishuber : Ajax

IE 8 simultaneous connections changed

preishuber — Mon, 21 Jul 2008 12:22:13 GMT

Small note. The Internet Explorer 8 have increased the amount of connections to the same domain to 6. ( was before 2)

Can have some effects in AJAX callbacks, like Web Service calls.

http://msdn.microsoft.com/en-us/library/cc304135(VS.85).aspx

AJAX drag& drop challenge: science fiction with web.preview

preishuber — Wed, 30 Jan 2008 19:56:37 GMT

Drag and drop is one of the missing features from the final ASP.NET 2.0 AJAX Extensions 1.0 (what a name). On my research work I figured out several ways to implement drag and drop and add profile support.

My next sample uses the ASP.NET 3.5 Extensions Preview. Earlier builds were named ASP.NET AJAX Futures. Both includes a microsoft.web.preview.dll (version in this sample 1.2.61025). That sample works without additional jscript code.

The idea comes from my visual studio which shows an extender which should be removed from toolkit some time ago. But it is here.

It comes from installed 3.5 extensions.

After coping the microsoft.web.preview.dll into the local BIN directory of your website you have to add the tagPrefix in controls section of web.config.

Then you can add the DragPanelExtender Control which points to a panel control using attribut targetControlID. The position of the dragged panel will be stored in profile information as a single string. The name must be set by profileproperty attribut. Internal it must store x and y position. The attribut profileserviceID points to a new servercontrol profileservice.

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:Panel ID="Panel1" runat="server" BorderColor="#3333FF" BorderWidth="5px" Width="112px">

DragOverlay<br />

extender<br />

</asp:Panel>

<aspPreview:DragOverlayExtender ID="Panel1_DragOverlayExtender" runat="server" TargetControlID="Panel1"

ProfileServiceID="ProfileService1" ProfileProperty="dragoverlaystring" >

</aspPreview:DragOverlayExtender>

<asppreview:profileservice id="ProfileService1" runat="server" AutoSave="True">

</asppreview:profileservice>

Try it- The samples will store the new position of your panel also if you close the browser and reopen it. But- dont forget that is preview and can be changed by microsoft without any notice. Positive is that that function will be supported from microsoft. Documentation

AJAX Drag & Drop Challenge

preishuber — Sat, 22 Dec 2007 18:52:13 GMT

Drag and drop is typically feature from windows application. With Web application the user is loosing it. Missing Drag&Drop is one of the top ranked features for better usability.

The new Web 2.0 styled applications are bringing Drag&Drop back. But it is quite complicated for developer to implement it. Drag and Drop happens on client side and must be coded by Jscript. For real web applications there must be some connection point between client and server. For instance a web service can be used to transfer users selection data back to server.

Developers need a framework for faster development. Microsoft offers ( at least) three AJAX drag&drop frameworks.

Webparts - best used for Sharepoint

DragDropManager- dropped with AJAX RTW - but still possible with microsoft.web.preview.dll

DragDropManager from Toolkit

Ajax Control Toolkit Drag & Drop

I have blogged my opinion about the toolkit some time ago. This time i worked out the possibility for Drag& Drop based on the toolkit.

The Ajax control toolkit contains several control where two have drag and drop. The reorderd list is a nice sample to show what is possible in web.

The Dragpanel is a easy to use control to drag ASP.NET panels over the website. It follows the great Ajax extender pattern. In earlier editions of toolkit there was a very useful support for profile binding to store the location in userprofile.

But the guys from .... (toolkit is hosted on codeplex and made by "community") have forgotten to implement a DropPanelExtender.

So you have to go into code and do it by yourself.

Drag& Drop Prototype

In my following sample I have several DIV's as drop destination. A asp.net Panel control is extended with a dragpanelextender.

<asp:Panel ID="Panel1" class="dragIcon" runat="server" Height="10px"

Width="125px">hallo</asp:Panel>

cc1:DragPanelExtender ID="Panel1_DragPanelExtender"

runat="server" DragHandleID="Panel1" Enabled="True" TargetControlID="Panel1">

</cc1:DragPanelExtender>

The panel must extended by a drop event handler which must be done by Jscript. Take care that the script only can be executed when all elements from page are loaded.

$addHandler ($get(

'Panel1'), "drop", myDropFunction);

The dropfunction gets as parameter a object which have several necessary information in like the source element. But you dont know where user have dropped. The problem left is that you have to iterate through all possible drop destinations and find out if the position matches. The following code is a small but ugly sample which demonstrate the idea.

The node which contains the panel will be moved in the DOM to the dropDIV. You can iterate later through the childcollection of each dropDIV and store the list of dropped items on the server.

script language=jscript>

function

myDropFunction(a) {

for

(i = 1; i < 4; i++)

{

var

myDIV=$get("dropDIV"+i)

(isIn(a,topf))

{

var n1=document.getElementById(a.target.id);

n1.parentNode.removeChild(n1);

myDIV.appendChild(n1);

}

The function isIn uses the position of cursor and size of div to compare if "drop" was in. That can have own business rules, what was in an what not ( like soccer).

In one of my next postings I will show a more sexy completed example.

AJAX Control Toolkit from Codeplex is a Risk

preishuber — Thu, 22 Mar 2007 06:51:43 GMT

Perhaps you know the Dragpanelextender from the AJAX Control toolkit ( March). This have the feature to store the position of a drag panel personalized in profile settings. That's a general functionality in the base class.

<ajaxToolkit:DragPanelExtender

TargetControlID="Panel1"

DragHandleID="drgPanel"

BehaviorID="HannesDrag"

ID="DragPanelExtender1" runat="server">

<ajaxToolkit:ProfilePropertyBinding

ExtenderPropertyName="Location"

ProfilePropertyName="HannesPosition" />

</ProfileBindings>

</ajaxToolkit:DragPanelExtender>

I used that control in a sample for a while. In my last AJAX course the postion was not stored in aspnetdb. So sample breaks.

After a long search I figured out following facts:

in floatingbeavior.js code documented out

//        var p = this.get_profileProperty();
//        if(p) {
//            var b = new Sys.Preview.Binding();
//            b.beginUpdate();
//            b.set_target(this);
//            b.set_property("location");
//            var profile = this.get_profileComponent();
//            if(!profile) profile = Sys.Preview.Services.Components.Profile.instance;
//            b.set_dataContext(profile);
//            b.set_dataPath(p);
//            b.set_direction(Sys.Preview.BindingDirection.InOut);
//
//            // we must hook into the loaded event since the profile may be loaded and the location property
//            // will be different. But profile doesnt raise a change notificaiton for every property after a load
//            var a = new Sys.Preview.InvokeMethodAction();
//            a.beginUpdate();
//            a.set_eventSource(profile);
//            a.set_eventName("loadComplete");
//            a.set_target(b);
//            a.set_method("evaluateIn");

// a.endUpdate();
// b.endUpdate();

//            this._binding = b;
//            this._action = a;
//        }
    }

In extendercontrolebase.cs compiler directive

#if false
        /* TODO: Migrate */
        internal IScriptService EnsureProfileScriptService(ScriptManager sm, bool checkIfNeeded)
        {
...

and at the end in the Assembly with reflector

[PersistenceMode(PersistenceMode.InnerProperty), Obsolete("WARNING: ProfileBindings are disabled for this Toolkit release pending technical issues. We hope to re-enable this in an upcoming release"), DesignerSerializationVisibility(2), Browsable(false)]
public ProfilePropertyBindingCollection ProfileBindings
{

BAM!!!

Hey guys, some people are developing productive stuff with that and you drop a basic feature without any notice!

Microsoft: AJAX Toolkit must be under full control, support and development path of Microsoft. With that status I can not suggest to use Microsoft AJAX Control Extenders. It's to much risk!

call for papers: German ASP-konferenz june 18.-19.

preishuber — Fri, 02 Mar 2007 14:52:52 GMT

This is a public call for papers, send me (hannesp AT ppedv.de) your suggestions. ASP-konferenz is the oldest event in german speaking area for Microsoft Web developers. Great experts like Scott Guthrie, Alex Homer, Dave Sussman, Dino Esposito, Markus Egger or Charles Caroll have attended in the past.
Topic: build, design & host better websites

Location: Burghausen (near Munich)

Orcas: rounded Corners

preishuber — Thu, 01 Mar 2007 15:46:34 GMT

Just downloaded Visual Studio Orcas VPC and see wonderfull rounded corners everywhere. But where is AJAX?

VSone Munich is coming

preishuber — Fri, 09 Feb 2007 10:39:57 GMT

I am presenting three sessions on VSone (Feb 13.-14. Munich, Germany). There is also a exhibition which can be visited for free!

[Update]

i also make a full day AJAX workshop in the post conference at feb 15th. Seats available!

codefree popup Master Detail with AJAX

preishuber — Thu, 08 Feb 2007 07:27:11 GMT

The top most issue in web applications is to present a huge amount of data. For my sample I had to display the schedule of .net development courses. A classic master detail scenario. If you place that on a webform the complete place is not used. A popup will solve that. The goal is to solve that without JScript only using AJAX features. After investigating I figured out three possibility's

HoverExtender
HoverMenuExtender static
HoverMenuExtender with callback for each row

I have solved it in all three ways and the hovermenuextener static is the best. The solution is without code.

1.) create a repeater ( or whatever)

2.) the Table row must have a server attribute and a ID (reihe)

3.) place a panel in a cell of that row

4.) put a hidden field in it to use it as control source for the detail grid

5.) put a repeater and sqldatasource into the panel with a controlparamter pointing to the hidden field

6.) extend the table row with a hovermenuextender which is placed otside the row of the Master grid but inside the itemtemplate

<td>

<asp:Panel ID="pnlTermine" runat="server" Width="250px"

CssClass="popupPanel" GroupingText="Termine">

<asp:HiddenField ID="HiddenField1" runat="server" Value=<%#eval("seid") %> />

<asp:Repeater ID="rptDetails" EnableViewState=false runat=server DataSourceID="DSKursTermine">

<%#eval("termin","{0:dd}") %>.<%#eval("termin","{0:MMM}") %>

</ItemTemplate>

</asp:Repeater>

....

<ajaxToolkit:HoverMenuExtender runat=server ID="popup1"

PopupControlID="pnlTermine" TargetControlID="reihe"

PopupPosition=Right OffsetX=-100 HoverCssClass="popupHover"

PopDelay=25

</ajaxToolkit:HoverMenuExtender>

</ItemTemplate>

....

Nikhil's homework: 3 AJAX controls

preishuber — Tue, 06 Feb 2007 07:56:24 GMT

UpdateHistory

StyledUpdatePanel

AnimatedUpdatePanel

http://www.nikhilk.net/UpdateControls.aspx

Ajax Control Toolkit: yet another new build

preishuber — Mon, 05 Feb 2007 19:33:02 GMT

surprise, surprise new bits available. From buildnumber 10123 to 10201 in only 9 days. Thats a product live cycle! By the way Microsoft: buildnumbers are small integers and end with 65535. So you have left ~6400 days of development. The .net framework team have less possibilitys. They stopped at 50727.

Date serialization changed (AJAX v1.0)

preishuber — Mon, 05 Feb 2007 15:11:29 GMT

in the ASP.NET AJAX Extensions 1.0 (RTW) the JSON format have changed for serialization of date datatype.

\/Date(123)\/

prior it was

@1211212@

Both uses a count starting from Jan 1st 1970

If you have build your own method based on jscript eval your application will fail. The recommended way is to use Sys.Serialization.JavaScriptSerializer.deserialize

which encapsulate a regex replacement.

the missing AJAX Feature: documentation (now available!)

preishuber — Mon, 05 Feb 2007 15:00:09 GMT

AJAX is the first developer "product" or "technology" where no specs are in the MSDN documentation. Documentation is a essential software feature like security.

ASP.NET AJAX extensions

there is only partial documentation online available. The best you can do are the walkthorughs. Since today the download of the web site as package is available. ( I have looked for it on Friday). Microsoft released last week the source code which is no common way to learn. Also the webcasts are not a efficent way to solve a development problems. All that is still not enough!

ASP.NET Toolkit

Usercontrols have been the success factor for the VB story. Also the AJAX controls should be under full control of a vendor: reliable, documented and must have a roadmap. Microsoft please take over full control! The documentation are samples which can be downloaded. I would pay for it!

ASP.NET futures

Nice idea to have a view on the upcoming things. But e.g. Autocompleteextender, which is essential, have moved from futures to toolkit without the needed documentation or migration path. At the moment I can find NOTHING about XML Script. All my samples from dec ctp breaks. Only info that im found are 3 sample projects.

CTP (community drops) issue

Microsoft ships a lot of public builds of AJAX. This strategy ends up in a lot of public and free documents which are outdated (majority). If you use google and find a sample, you have no guarantee that this working or which build is used. This costs development time. Yes i know cheat sheets, but should be job of microsoft to hand out that info.

In my opinion for professional productivity of ASP.NET AJAX development we need at least following:

better documentation
intellisense
less CTP's
roadmap (18 month)

Call Page WebMethod from a Winforms Client using AJAX

preishuber — Fri, 19 Jan 2007 20:03:11 GMT

My primary idea for this post was how to use the small and beauty JSON format for data transfer in a windows mobile application. For that I use the infrastructure of AJAX. I implement a Webmethod in a classic ASPX page.

<WebMethod()> _

<ScriptMethod()> _

Public Shared Function Nachladen1(ByVal contextKey As String) As String

Return "Hannes Preishuber"

End Function

</script>

For calling the Method form the page (or from a webservice) i use a Winforms application and the httpwebrequest class. Then i call the URL following the method name. The second part is to use a specific content type in header "application/json". To transfer complex data you have to build a json type. For my sample i used a simple string containing "test". The contextKey is a reserved word.

The result is in my sample also a string and can be passed to a textbox.

Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

Dim wRequest As HttpWebRequest = HttpWebRequest.Create("http://url/Default4.aspx/Nachladen1")

wRequest.Method = "POST"

wRequest.ContentType = "application/json; charset=utf-8"

wRequest.Headers.Add(HttpRequestHeader.Pragma.ToString, "no-cache")

Using writer As Stream = wRequest.GetRequestStream

Dim send As String

send = "{""contextKey"":""test""}"

Dim data As [Byte]() = Encoding.ASCII.GetBytes(send)

writer.Write(data, 0, data.Length)

End Using

Dim WResponse As HttpWebResponse = CType(wRequest.GetResponse, HttpWebResponse)

Dim recieve As StreamReader = New StreamReader(WResponse.GetResponseStream())

Dim result As String = recieve.ReadToEnd.ToString

TextBox1.Text = result

End Sub

Small nice and sexy!

AJAX

Ajax Toolkit: HoverMenuextender is calling webservice

preishuber — Thu, 18 Jan 2007 15:14:15 GMT

the samples from the AJAX toolkit have nothing about hoverextender and only one sample about hovermenuextender control. And this sample don't use a webservice.

So here my experience after hard debugging: The important part is the Webmethod signature which needs exactly the parameter name contextKey. I searched hours in google and didn't find an hint about that.

If you use a webservice you need the attribute starting "dynamic..". The result is shown in the control [dynamiccontrolid] which can be the same as [popupcontrol].

<%@ Page Language="VB" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<WebMethod()> _

<ScriptMethod()> _

Public Shared Function Nachladen1(ByVal contextKey As String) As String

Return "Hannes Preishuber"

End Function

</script>

<body>

<asp:ScriptManager ID="ScriptManager1" runat="server">

</asp:ScriptManager>

<asp:Button ID="Button1" runat="server" Text="Button" />

<cc1:HoverMenuExtender ID="HoverMenuExtender1" runat="server"

PopupControlID="Panel1"

TargetControlID="Button1"

PopupPosition="Left" BehaviorID="hmb1"

DynamicControlID=Label1

DynamicServiceMethod="Nachladen1"

DynamicContextKey="test">

</cc1:HoverMenuExtender>

<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

<asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px">

show me .....

</asp:Panel>

</body>

</html>

ajax

Ajax Hands On Lab from Sascha Corti

preishuber — Wed, 17 Jan 2007 21:22:53 GMT

Sascha from Microsoft Switzerland have published a Hands on Lab including, samples and slides.

http://www.corti.com/WebLogSascha/PermaLink.aspx/3089ce74-0e62-430d-8611-ad9a4871aa95