AppDev: Something You Should Know by Irena Kennedy : Web

SYSK 373: How to Impersonate the Original Caller When Calling the WCF Service in ASP.NET by Configuration Only

irenak — Wed, 02 Dec 2009 14:27:00 GMT

If your WCF services use role based authorization, and you need to pass the identity of the end user (original caller), you have a few options: 1. Use <identity impersonate=”true” /> in web.config This is not my preference since there is quite a...(read more)

SYSK 364: AJAX Extensions 1.0 Source Code and Debug Symbols

irenak — Tue, 16 Oct 2007 19:28:00 GMT

Did you know that AJAX Extensions source code and debugging symbols are available to everybody at http://www.microsoft.com/downloads/details.aspx?FamilyID=ef2c1acc-051a-4fe6-ad72-f3bed8623b43&DisplayLang=en ?...(read more)

SYSK 354: How To Determine If The Page_Load Event Is Triggered by a Standard Page Postback or by the UpdatePanel?

irenak — Thu, 12 Jul 2007 19:53:00 GMT

Ok, so you’re in a Page_Load code block, and the this.Page.IsPostBack returns true . How do you know if the request is due to a “standard” page postback or as a result of an UpdatePanel triggered postback resulting in a partial page update? The answer...(read more)

SYSK 339: Menus and Other Popups Without Any JavaScript

irenak — Mon, 30 Apr 2007 15:02:00 GMT

The other day I came across the following article by Eric Meyer -- http://meyerweb.com/eric/css/edge/popups/demo.html.

Basically, instead of using JavaScript, you use CSS to change an element style that results in some other element(s) appearing (e.g. submenu when user hovers over the top menu item).

Below is a simple example that demonstrates this concept:

Use a <span> within another element such as <ul> or <a href>

<a href="Default.aspx">Some link...

<span>Additional information</span>

</a>

<a href="Default.aspx">Another link...

</a>

Style it such that the <span> is invisible until user hovers over the parent <a href>

<!--

a { display: block; }

a span {display: none; }

a:hover > span {display: block; position: absolute; top: 100px; left: 10px; text-decoration: none; color: black; }

-->

</style>

Note: make sure to give absolute positionning to the span during the hover event to position it as desired rather than right after the link.

Also, in the real application, you would, of course, give the parent <div> a name and apply the styling for that div rather than all spans; e.g.

div#secondaryNav a span { display: none; }

Excellent idea, Eric!

SYSK 337: JavaScript – Should You Define Functions Inside a Prototype or Outside?

irenak — Thu, 26 Apr 2007 15:02:00 GMT

Yesterday’s post described three ways to extend an existing type. It occurred to me that there is one more, slightly different mechanism, for defining a prototype function… you can think of it as Method 2-b.

Consider the following:

function TestClass(param1)

{

this._param1 = param1;

TestClass.prototype.get_param1 = function()

{

return this._param1;

}

If you were to break (while debugging the code) and look at the CallStack window, the get_param1 function would be seen as ‘JScript anonymous function’. While it may not be important if you break in the get_param1 function, it would certainly be a valuable piece of information if you’re debugging some code downstream called from get_param1.

To get the actual function name and not the ‘anonymous’, you can define it as follows:

function TestClass(param1)

{

this._param1 = param1;

}

function TestClass$get_param1()

{

return this._param1;

}

TestClass.prototype =

{

get_param1: TestClass$get_param1

}

In this case, you should see ‘TestClass$get_param1’ in the CallStack window…

It’s my understanding that Microsoft AJAX team defines functions inside a prototype for release versions of scripts to minimize script size, and outside a prototype to maximize debuggability in debug versions.

SYSK 336: Three Ways to Extend a Existing JavaScript Type

irenak — Wed, 25 Apr 2007 15:04:00 GMT

Since I haven’t seen a clear and a relatively concise explanation on this topic, I decided to create this blog post…

If you want to add a function (i.e. extend) to an existing type, there are three ways that I know of to accomplish this. For example, take the existing String object which comes with 28 functions (btw, the following applies to any object, not just ones defined in the language itself). However, the frequently desired ltrim and rtrim functions that remove a specified character are not in that list…

Method 1: You could add the ltrim function to the String type itself:

String.ltrim = function(text, removeChar)

{

var result = text;

for (i = 0; i < text.length; i++)

{

if (text.substr(i, 1) != removeChar)

{

result = text.substring(i, text.length);

break;

}

return (result);

}

Note that if you were to use this keyword, it would represent the String object, not the text you’re working with – that’s why you have to pass in the actual text. If you’re a C# developer, this probably reminds you of static functions (shared in VB.NET).

Here is an example of invoking the newly defined ltrim function:

var s1 = " Hello, World!";

alert('\'' + String.ltrim(s1, ' ') + '\'');

Method 2: You could add the ltrim function to the template used to create an instance of the String object, a.k.a. prototype:

String.prototype.ltrim = function(removeChar)

{

var result = this;

for (i = 0; i < this.length; i++)

{

if (this.substr(i, 1) != removeChar)

{

result = this.substring(i, this.length);

break;

}

return (result);

}

Note that this time, the ltrim function behaves just like any instance method in C# or VB.NET.

Here is an example of calling it:

var s1 = " Hello, World!";

alert('\'' + s1.ltrim(' ') + '\'');

Method 3: This method is not very useful for functions like ltrim but is very useful for instance properties:

var s1 = new String("Hello, World!");

s1.createdOn = new Date();

alert(s1.createdOn);

As expected, trying to execute the following code:

var s2 = new String("Another string");

alert(s2.createdOn);

will result in alert box showing ‘Undefined’.

Interestingly, constructing the string object implicitly will also result in an ‘Undefined’ alert:

var s1 = "Hello, World!";

s1.createdOn = new Date();

alert(s1.createdOn);

SYSK 332: How To Register Custom Controls Once For All Web Pages

irenak — Thu, 19 Apr 2007 15:04:00 GMT

Did you know that since .NET 2.0 you can define register directives in the <pages> element in your configuration instead of using @Register directive on every page? It’s especially useful if you’re using a custom control(s) in multiple web pages. Here is an example of registering controls from MyControlLibrary assembly and controls from the web project itself:

<pages>

</controls>

</pages>

SYSK 331: How To Expose A Client-Side Event From Your ASP.NET Control

irenak — Wed, 18 Apr 2007 15:02:00 GMT

Consider the following scenario – you create your own calendar control and you’d like to raise an event when a date is selected (e.g. OnDateClicked)… and you’d like for the users of your calendar control to process the event using JavaScript on the client (or think of any other scenario of when a custom client-side event would be useful).

There are plenty samples on how to fire a server-side event, but none that I can find on how to raise one on the client. The code below shows how to make it happen…

1. Implement System.Web.UI.IScriptControl interface

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;

[assembly: System.Web.UI.WebResource("MyTableCtrl.Scripts.MyTable.js", "text/javascript")]

namespace MyControls

{

public class MyTable : System.Web.UI.HtmlControls.HtmlTable, System.Web.UI.IScriptControl

{

private string _cellClickedDelegate;

public MyTable()

{

base.Border = 1;

for (int i = 0; i < 5; i++)

{

HtmlTableRow tr = new HtmlTableRow();

for (int j = 0; j < 3; j++)

{

HtmlTableCell td = new HtmlTableCell();

td.InnerHtml = string.Format(" {0}.{1} ", i + 1, j + 1);

td.Style["cursor"] = "hand";

tr.Cells.Add(td);

}

base.Rows.Add(tr);

}

protected override void OnPreRender(EventArgs e)

{

if (this.DesignMode == false)

{

ScriptManager sm = ScriptManager.GetCurrent(this.Page);

if (sm != null)

sm.RegisterScriptControl(this);

}

base.OnPreRender(e);

}

protected override void Render(HtmlTextWriter writer)

{

if (this.DesignMode == false)

{

ScriptManager sm = ScriptManager.GetCurrent(this.Page);

if (sm != null)

sm.RegisterScriptDescriptors(this);

}

base.Render(writer);

}

#region IScriptControl Members

// Expose client side property for the cellClicked event

public string cellClicked

{

get { return _cellClickedDelegate; }

set { _cellClickedDelegate = value; }

}

public System.Collections.Generic.IEnumerable<ScriptDescriptor> GetScriptDescriptors()

{

System.Collections.Generic.IEnumerable<ScriptDescriptor> result = null;

if (string.IsNullOrEmpty(_cellClickedDelegate))

{

result = new ScriptDescriptor[] { };

}

else

{

ScriptControlDescriptor descriptor = new ScriptControlDescriptor(this.GetType().FullName, this.ClientID);

descriptor.AddEvent("cellClicked", _cellClickedDelegate);

result = new ScriptDescriptor[] { descriptor };

}

return result;

}

public System.Collections.Generic.IEnumerable<ScriptReference> GetScriptReferences()

{

return new ScriptReference[] { new ScriptReference("MyTableCtrl.Scripts.MyTable.js", System.Reflection.Assembly.GetAssembly(this.GetType()).FullName) };

}

#endregion

}

2. Implement event subscription and firing in a JavaScript file (e.g. Scripts\MyTable.js)

Type.registerNamespace("MyControls");

MyControls.MyTable = function(element)

{

MyControls.MyTable.initializeBase(this, [element]);

}

MyControls.MyTable.prototype =

{

initialize: function()

{

MyControls.MyTable.callBaseMethod(this, 'initialize');

$addHandlers(this.get_element(), { 'click':this._onCellClicked }, this);

add_cellClicked : function(handler)

{

this.get_events().addHandler("cellClicked", handler);

remove_cellClicked : function(handler)

{

this.get_events().removeHandler("cellClicked", handler);

_onCellClicked: function(source, e)

{

if (!this._events) return;

var handler = this._events.getHandler("cellClicked");

if (handler)

handler(source.rawEvent.srcElement);

dispose: function()

{

$clearHandlers(this.get_element());

MyControls.MyTable.callBaseMethod(this, 'dispose');

}

MyControls.MyTable.registerClass("MyControls.MyTable", Sys.UI.Control);

3. Subscribe for the event

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="MyTableCtrl" Namespace="MyControls" TagPrefix="cc" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Untitled Page</title>

</head>

<body>

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

</asp:ScriptManager>

<cc:MyTable runat="server" id="table1" cellClicked="OnCellClicked"></cc:MyTable>

</form>

<script type="text/javascript">

function OnCellClicked(cell)

{

alert("OnCellClicked: " + cell.innerText);

}

</script>

</body>

</html>

SYSK 330: How To Use An Embedded Resource From A Sub-Folder

irenak — Tue, 17 Apr 2007 14:32:00 GMT

If you’re creating a custom client-side control by deriving from System.Web.UI.IScriptControl, you may want to embed the .js files into your assembly instead of having to deploy them to every web site that uses those controls (this is especially valuable if you’re developing a control library). All you need to do is to:

Click on the .js file in the Solution Explore to select it, and then set Build Action (in the properties window) to Embedded Resource.

Add the following attribute to your control code-behind file (e.g. MyControl.cs):

[assembly: System.Web.UI.WebResource("ControlLibrary.MyControl.js", "text/javascript")]

In GetScriptReferences, instead of setting the Path property, use the parameterized constructor as follows:

public IEnumerable<ScriptReference> GetScriptReferences()
{
return new ScriptReference[] { new ScriptReference("ControlLibrary.MyControl.js", "ControlLibrary") };
}

However, if you place your JavaScript files in a subfolder (e.g. \ControlLibrary\Scripts\MyControl.js), then you will have to add the folder name to the dotted resource name above, e.g. ControlLibrary.Scripts.MyControl.js.

If you don’t add the folder name, you’ll probably see a run-time error message like this:

System.InvalidOperationException: Assembly ControlLibrary, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null' contains a Web resource with name 'ControlLibrary.MyControl.js', but does not contain an embedded resource with name 'ControlLibrary.MyControl.js'.

SYSK 327: The Cost of RoundedCornersExtender From AjaxControlToolkit

irenak — Thu, 12 Apr 2007 15:03:00 GMT

More and more web sites are using rounded corners on spans (labels) and panels. And since AjaxControlToolkit makes it sinfully easy to do, before I start using it extensively, I decided to do some profiling to see the cost of that extender.

Here is what I found:

1. HMTL (download) size in bytes:

# of RoundedCornersExtender Page Size

Controls

----------------------------------------------------

0 2731

1 3581 (+850)

2 3770 (+189)

3 3959 (+189)

4 4122 (+163)

5 4299 (+177)

2. Server-side page request execution time (localhost, Toshiba M5, dual 2 Ghz, 2 Mb):

# of RoundedCornersExtender Time in ms

Controls

----------------------------------------------------

0 4.311721182

1 5.398800686 (+25%)

2 7.032737401 (+30%)

3 7.399823162 (+5%)

4 8.478870918 (+15%)

5 9.263607526 (+9%)

3. Client-side AJAX controls initialization time (yesterday’s post explained how I timed the added initialization time on the client due to using the extender controls. Click here to navigate to SYSK 326):

# of RoundedCornersExtender Client init time in ms

Controls

----------------------------------------------------

0 0

1 10 (+25%)

2 16 (+30%)

3 31 (+5%)

4 31 (+15%)

5 47 (+9%)

4. Page load time (time to last byte)

One can use download speed to calculate the additional page load time, or you can run tests and measure it. My testing was done using localhost, so I’m not providing any data here as it’s irrelevant.

Summary: The first instance of the control adds 850 bytes, and additional instances add approximately 180 bytes. On my laptop, the additional rendering time per instance is 9.25 ms on the client and 1 ms on the server.

SYSK 326: How to Measure AJAX Control Initialization Time on the Client Side

irenak — Wed, 11 Apr 2007 15:04:00 GMT

Say, you’ve added a few extender controls to make your AJAX-enabled web site look very ecstatically appealing to the end users. And now you’d like to evaluate the cost of beautifying your site in such manner. Measuring the additional page size bytes is pretty straight forward, so is the page load time… But how would you measure the time it takes for the browser to initialize these extra controls?

Here is the best way I know how:

var t1;

var prm = Sys.WebForms.PageRequestManager.getInstance();

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);

function pageLoadedHandler(sender, args)

{

t1 = new Date();

}

window.pageLoad = function()

{

alert("AJAX control initialization took " + ((new Date()).getTime() - t1.getTime()) + " ms");

}

</script>

Important: The logic above depends on the AJAX client side initialization implementation; i.e. the code above may or may not work in future AJAX releases.

SYSK 325: How To Tell Which UpdatePanel Issued a Page PostBack

irenak — Tue, 10 Apr 2007 14:52:00 GMT

If you have multiple UpdatePanel controls on a page, and your Page_Load has a lot of data retrieval and rendering logic, you may want to know exactly which UpdatePanel is being updated, and execute only relevant code segments to optimize performance.

Here is a code snippet that should give you the UpdatePanel control id and the trigger control id that caused the postback.

Important: I’m relying on AJAX code (see below) that’s loaded at runtime as a resource (.axd) and it changes, this code might break.

if (Page.IsPostBack)

{

// Is it an AJAX postback?

foreach (string key in Request.Form.AllKeys)

{

if (key == ScriptManager.GetCurrent(this).ID)

{

string[] parameters = Request.Form[key].Split('|');

string updatePanel = parameters[0];

string ctrl = parameters[1];

break;

}

Here is the AJAX code I was referring to:

function Sys$WebForms$PageRequestManager$_getPostBackSettings(element, elementUniqueID) {

var originalElement = element;

var proposedSettings = null;

while (element) {

if (element.id) {

if (!proposedSettings && Array.contains(this._asyncPostBackControlClientIDs, element.id)) {

proposedSettings = this._createPostBackSettings(true, this._scriptManagerID + '|' + elementUniqueID, originalElement);

}

else {

if (!proposedSettings && Array.contains(this._postBackControlClientIDs, element.id)) {

return this._createPostBackSettings(false, null, null);

}

else {

var indexOfPanel = Array.indexOf(this._updatePanelClientIDs, element.id);

if (indexOfPanel !== -1) {

if (this._updatePanelHasChildrenAsTriggers[indexOfPanel]) {

return this._createPostBackSettings(true, this._updatePanelIDs[indexOfPanel] + '|' + elementUniqueID, originalElement);

}

else {

return this._createPostBackSettings(true, this._scriptManagerID + '|' + elementUniqueID, originalElement);

}

if (!proposedSettings && this._matchesParentIDInList(element.id, this._asyncPostBackControlClientIDs)) {

proposedSettings = this._createPostBackSettings(true, this._scriptManagerID + '|' + elementUniqueID, originalElement);

}

else {

if (!proposedSettings && this._matchesParentIDInList(element.id, this._postBackControlClientIDs)) {

return this._createPostBackSettings(false, null, null);

}

element = element.parentNode;

}

if (!proposedSettings) {

return this._createPostBackSettings(false, null, null);

}

else {

return proposedSettings;

}

SYSK 313: Search Engine Ranking Rules

irenak — Fri, 23 Mar 2007 16:50:00 GMT

If you’re interested in how search engines rank web pages, read these four articles:

· “SSW Rules to Better Google Rankings” --http://www.ssw.com.au/SSW/Standards/Rules/RulesToBetterGoogleRankings.aspx

· “How URLs Can Affect Top Search Engine Rankings” by John Heard, Technical Analyst at Planet Ocean Communications -- http://www.marketposition.com/blog/archives/2006/04/how_urls_can_af.html

· "How Search Engines Rank Web Pages" by Danny Sullivan --

http://searchenginewatch.com/showPage.html?page=2167961

· "Search Engine Placement Tips" by Danny Sullivan --

http://searchenginewatch.com/showPage.html?page=2168021

Source: Excellent blog post by Scott Guthrie -- http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx

SYSK 310: The Difference Between setInterval and setTimeout

irenak — Tue, 20 Mar 2007 15:02:00 GMT

In JavaScript, you have two options to execute a specific function in the future, i.e. after a specified time interval:

window.setInterval and window.setTimeout

Both functions have similar signatures, e.g.:

var timeout = window.setTimeout("javascript statement", milliseconds)

var intervalId = window.setInterval("code", milliseconds[, "lang"])

As you can see, the first difference is that the setInterval function supports running client-side script in languages other than JavaScript. However, there is a bigger difference between the two, not discernable by syntax: the setTimeout method is completed after the function is invoked, whereas the setInterval will continue calling the specified function until clearInterval() is called or the window is closed.

In other words, the following two code snippets result in same outcome:

var t = setTimeout("refresh()", 5000);

function refresh()

{

. . .

var t = setTimeout("refresh()", 5000);

}

vs.

var i = setInterval("refresh()", 5000);

function refresh()

{

. . .

}

Note: to cancel the setTimeout method, call clearTimeout.

Summary:

So, it appears clear – use setTimeout when you need to trigger a delayed function invocation once, use setInterval for multiple (timer-like) calls…

There is one exception: if you need to change the parameter values passed into the function, and the data values are set (changed) during the current execution cycle, reconsider the use of setTimeout – it may remove the need for global variables, and, perhaps, be a better choice…

SYSK 309: How To Cancel a Web Service Request

irenak — Mon, 19 Mar 2007 16:31:00 GMT

AJAX makes asynchronous invocation of web service methods very easy. For example, the line below instantiates a web service proxy (MyService) and calls a method (MethodX):

var request = new MyService().MethodX(param1, param2, OnRequestComplete, OnError);

The question is: if you needed to cancel this request (e.g. it’s a resource intensive request and the user is navigating to another page, or a user made a request with different parameters but the previously submitted request has not been completed, etc.), how can you accomplish it?

As it turns out, it’s quite simple as well:

// Abort previously submitted request

request.get_executor().abort();

Special thanks to Steve Marx for the information.