asp.net ajax custom controls
TRANSCRIPT
![Page 1: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/1.jpg)
ASP.NET Ajax Custom Controls
Creating your own JavaScript-based, Ajax-enabled,
client-side controls
![Page 2: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/2.jpg)
Overview
Custom ASP.NET Ajax controls
Components
Controls
Control extenders
Building server controls and components
Sys.UI.Control
Sys.UI.Behavior
IScriptControl
Embedding scripts as resources
Building extender controls
System.Web.UI.ExtenderControl
TargetControlID, TargetControlType attribute
![Page 3: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/3.jpg)
Custom ASP.NET Ajax Controls
There are three distinct types of Ajax custom controls you
might build
Non-visible components
Visible components (controls)
Control extenders
All three are similar to build
Incorporate JavaScript into control rendering
Integrate with page ScriptManager
Use ScriptDescriptors to describe client properties/events
![Page 4: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/4.jpg)
IScriptControl
Core interface for integrating with ASP.NET Ajax
Include script references with GetScriptReferences
Add property/event descriptors to automatically wire up to client controls
namespace System.Web.UI{
public interface IScriptControl{
IEnumerable<ScriptDescriptor> GetScriptDescriptors();IEnumerable<ScriptReference> GetScriptReferences();
}}
![Page 5: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/5.jpg)
Sample: Custom TextBox
Consider a custom TextBox derivative that highlights on focus:
<head runat="server"><style type="text/css">.LowLight {background-color:#EEEEEE;}.HighLight {background-color:Ivory; }
</style></head><body><form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server" />
<ps:SampleTextBox ID="TextBox1" runat="server" NoHighlightCssClass="LowLight" HighlightCssClass="HighLight" />
...
![Page 6: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/6.jpg)
1) Create client Sys.Web.UI derivative
Type.registerNamespace('PS');
PS.SampleTextBox = function(element) { PS.SampleTextBox.initializeBase(this, [element]);
this._highlightCssClass = null;this._nohighlightCssClass = null;
}PS.SampleTextBox.prototype = {
initialize : function() {PS.SampleTextBox.callBaseMethod(this, 'initialize');
...}, ...}
PS.SampleTextBox.registerClass('PS.SampleTextBox', Sys.UI.Control);
client-side
![Page 7: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/7.jpg)
2) Define server-side Control derivative
namespace PS{public class SampleTextBox : TextBox, IScriptControl{private string _highlightCssClass;private string _noHighlightCssClass;private ScriptManager sm;
public string HighlightCssClass{get { return _highlightCssClass; }set { _highlightCssClass = value; }
}
public string NoHighlightCssClass{get { return _noHighlightCssClass; }set { _noHighlightCssClass = value; }
}// continued…
server-side
![Page 8: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/8.jpg)
3) Implement IScriptControl
public IEnumerable<ScriptReference> GetScriptReferences(){ScriptReference reference = new ScriptReference();reference.Path = ResolveClientUrl("CustomTextBox.js");
yield return reference;}
public IEnumerable<ScriptDescriptor> GetScriptDescriptors(){ScriptControlDescriptor descriptor =
new ScriptControlDescriptor("PS.SampleTextBox", this.ClientID);descriptor.AddProperty("highlightCssClass", this.HighlightCssClass);descriptor.AddProperty("nohighlightCssClass", this.NoHighlightCssClass);
yield return descriptor;}
Sys.Application.initialize();
Sys.Application.add_init(
function() { $create(PS.SampleTextBox,
{"highlightCssClass":"HighLight","nohighlightCssClass":"LowLight"},
null, null, $get("TextBox1")); });
<script src="/TestClient/CustomTextBox.js" type="text/javascript"></script>
![Page 9: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/9.jpg)
4) Integrate with ScriptManager
protected override void OnPreRender(EventArgs e){if (!this.DesignMode){
sm = ScriptManager.GetCurrent(Page);if (sm == null)
throw new HttpException("Missing ScriptManager ");sm.RegisterScriptControl(this);
}
base.OnPreRender(e);}
protected override void Render(HtmlTextWriter writer){if (!this.DesignMode)
sm.RegisterScriptDescriptors(this);
base.Render(writer);}
![Page 10: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/10.jpg)
5) Build control with client integration
Standard techniques for building controls apply
All script interaction can leverage ASP.NET Ajax
get_element() inherited from Sys.UI.Control gives you access to the
rendered HTML element in the client
Use pageLoad( ) to hook initialization
Leverage remaining Sys.* classes as needed
![Page 11: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/11.jpg)
Bundling compiled resources
ASP.NET 2.0 introduces a new handler, new attributes access,
& bundle resources in assemblies
WebResource.axd — serves objects from an assembly's resources
[assembly:WebResource(...)] — annotates an assembly for proper
WebResource.axd retrieval
Page.ClientScript.GetWebResourceUrl returns WebResource.axd url
with query string to return a specific resource
Ideal for custom controls that need to embed images /
JavaScript to simplify deployment
![Page 12: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/12.jpg)
Example — resource bundling
[assembly: WebResource("StopLightControl.YellowOn.jpg", "image/jpg")][assembly: WebResource("StopLightControl.YellowDim.jpg", "image/jpg")]
Page.ClientScript.GetWebResourceUrl(GetType(), "StopLightControl.YellowOn.jpg");
WebResource.axd?d=lZ...kSq0&t=632579866277167200
Compile action set to
Embedded Resource
![Page 13: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/13.jpg)
ScriptReference
To reference resource-embedded script files:
Include WebResource assembly-level attribute to expose
Implement GetScriptReferences with alternate ctor of ScriptReference
class
[assembly: WebResource("AjaxCustomControls.CustomTextBox.js", "text/javascript")]
public IEnumerable<ScriptReference> GetScriptReferences(){ScriptReference reference =
new ScriptReference("AjaxCustomControls.CustomTextBox.js",GetType().Assembly.FullName);
return new ScriptReference[] { reference };}
![Page 14: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/14.jpg)
ScriptResource
ASP.NET Ajax supports string resources as embedded
resources
Useful for localizing strings in your client script files
Steps for using ScriptResource
1. Create a .resx file in your project, with Build Action set to Embedded
Resource
2. Add strings to .resx you want to reference in your client script
3. Add an assembly-level attribute declaration of ScriptResource
4. Reference strings with typename string passed in a last parameter to
ScriptResource attribute
![Page 15: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/15.jpg)
Using ScriptResource
[assembly: ScriptResource("HoverImageControl.HoverImageControl.js","HoverImageControl.HoverImageControl", "HoverImageControl.Resource")]
_onMouseDown : function(e) {if (this.get_element() && !this.get_element().disabled) {
this.get_element().src = this._clickImageUrl;alert(HoverImageControl.Resource.hi);
}},
HoverImageControl.js
Name of embedded script that will use resource
Name of embedded resource
Script typename you will use to extract strings
Reference resource
strings with typename
![Page 16: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/16.jpg)
ScriptResource Implementation
The effect of using ScriptResource is to modify the referenced
embedded script to include a class that provides all string .resx
values
No server communication to retrieve values
Simple integration with existing script files
Resource file loading is culture-dependent
Set UICulture="auto" and Culture="auto" on your .aspx page to have
culture set based on user language preference
Create additional copies of .resx file with locale name (like
mystrings.fr.resx)
Type.registerNamespace('HoverImageControl');HoverImageControl.Resource={"hi":"Hello there!","bye":"Good bye!"};
Appended to script file
![Page 17: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/17.jpg)
Building components
Differences when building components instead of controls
Return ScriptComponentDescriptor from GetScriptDescriptors
Inherit client-side class from Sys.UI.Component
![Page 18: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/18.jpg)
Extender controls
Extender controls are designed to extend other controls
Control does not render separately
Inherit server-control from System.Web.UI.ExtenderControl
Implement IScriptControl, exposing as virtual methods
Define TargetControlID property
Inherit client behavior from Sys.UI.Behavior
<asp:TextBox ID="TextBox1" runat="server" />
<ps:FocusBehavior ID="FocusExtender1" runat="server"NoHighlightCssClass="LowLight"HighlightCssClass="HighLight"TargetControlID="TextBox1" />
![Page 19: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/19.jpg)
Summary
Custom controls are the building blocks for extending ASP.NET
Ajax
Components
Controls
Control Extenders
All provide tight integration with ScriptManager and client-side
script support
![Page 20: ASP.NET Ajax Custom Controls](https://reader034.vdocument.in/reader034/viewer/2022052311/5587bbbdd8b42a8f398b46e9/html5/thumbnails/20.jpg)
© 2008 Pluralsight, LLC
References
Online documentation:
http://asp.net/ajax/documentation/live/
Books:
“ASP.NET Ajax in Action”, by A Gallo, D. Barkol and R. Vavilala (Manning
Pub)