Quantcast
Channel: AjaxControlToolkit Wiki & Documentation Rss Feed
Viewing all 275 articles
Browse latest View live

Updated Wiki: Upgrade your project to AjaxControlToolkit v15.1

$
0
0

Upgrade your project to AjaxControlToolkit v15.1

Important note: The ASP.NET AJAX Control Toolkit v15.1 now requires that your project is using .NET framework v4.0 or higher. Projects targeting .NET framework v3.5 have to be migrated to a more recent .NET version before upgrading.

0 - Remove previous version

Make sure your have removed previous versions before installing ASP.NET AJAX Control Toolkit v15.1:
  1. If you have added the toolkit to Toolbox via the “Choose items...” dialog, remove an assembly reference and reset your toolbox.
  2. If you have added the toolkit via the NuGet package manager, simply uninstall the package from the solution.

1 - Install

To install the ASP.NET AJAX Control Toolkit v15.1 go to the Download page and get the new Installer (created by DevExpress).

If you use the fully-qualified name for the ASP.NET AJAX Control Toolkit assembly, then please ensure that all occurrences are updated (this includes references in web.config and @Register directives in the ASPX markup).

2 - Replace ToolkitScriptManager with ScriptManager

The ToolkitScriptManager has been deprecated for the v15.1 release. Please use the standard ScriptManager control. It should be sufficient to change the tag name in the markup from <yourTagPrefix>:ToolkitScriptManager -> asp:ScriptManager. If you find any issues, then please report them here.

Refer to the "ToolkitScriptManager Removed in v15.1, Use ScriptManager" article for details.

3 - Clean up Web.config

Remove the following outdated elements from your project’s web.config file:

// (in system.web/httpHandlers and system.webServer/handlers sections).
<addname="CombineScriptsHandler"verb="*"path="CombineScriptsHandler.axd"type="AjaxControlToolkit.CombineScriptsHandler, AjaxControlToolkit"/>


// (in system.web section)
<sectionname="sanitizer"requirePermission="false"type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/> 

// (in system.web section)
<sanitizerdefaultProvider="HtmlAgilityPackSanitizerProvider">
. . .
</sanitizer>

4 - Use Microsoft.Web.Optimization for bundling and minification

The AjaxControlToolkit.CombineScriptsHandler have been removed for v15.1 and resource bundling was delegated to the ASP.NET Web Optimization Framework.

Find the detailed description and instructions on enabling it in the following article: How to use bundling and CDN.

Note: if you use named Control Bundles (defined in the ~/AjaxControlToolkit.config file), then adjust the script bundle virtual path as shown below:

"~/Scripts/AjaxControlToolkit/<ControlBundleName>Bundle".

5 - Html Editor extender

The following namespaces have been renamed so please update your code accordingly:

Change AjaxControlToolkit.HTMLEditor to AjaxControlToolkit.HtmlEditor.
Change AjaxControlToolkit.HTMLEditor.ToolbarButton to AjaxControlToolkit.HtmlEditor.ToolbarButtons.

To reduce the number of dependencies, we have moved Html Sanitizer out to an external NuGet package: AjaxControlToolkit.HtmlEditor.Sanitizer

For security concerns, we recommend that you always use Html Editor together with Html Sanitizer.

Reporting Issues

If you have any questions regarding upgrading your projects then open a ticket in the Issue Tracker.



Updated Wiki: How to use bundling and CDN

$
0
0

How to use Bundling and CDN

Bundling

The ASP.NET AJAX Control Toolkit has many script and style files that it relies on. This can become a problem because each request takes time to be processed. And most browsers limit the number of simultaneous connections per hostname.

Bundling allows you solve this problem by combing multiple scripts or stylesheets into a single one and thus reduces the number of requests and improves the overall loading time.

With v15.1 release of the ASP.NET AJAX Control Toolkit, we have leveraged the ASP.NET approach to bundling by using the ASP.NET Web Optimization Framework. This framework builds bundles of web application content files located within the project.

How to enable bundling

Install the AjaxControlToolkit.StaticResources NuGet package. You can install this by right-clicking the project in Solution Explorer and choosing “Manage NuGet packages…” and searching for and installing “AjaxControlToolkit.StaticResources”.
Installation of this nuget package makes the following changes to your application:
  1. All required scripts, styles, and images are added to the project (~/Scripts/AjaxControlToolkit and ~/Content/AjaxControlToolkit folders)
  2. AjaxControlToolkit config section is added to Web.config
  3. Script and style bundles are registered in the BundleTable.

Manual changes required:
After installation, please make the following manual changes to your project (these changes are usually made on the master page):

Add a ScriptReference to ScriptManager to register the script bundle:

<asp:ScriptManagerrunat="server"><Scripts>
        ...
        <asp:ScriptReferencePath="~/Scripts/AjaxControlToolkit/Bundle"/></Scripts></asp:ScriptManager>

Add the Styles.Render expression to the <head> element.

<asp:PlaceHolderrunat="server"><%:System.Web.Optimization.Styles.Render("~/Content/AjaxControlToolkit/Styles/Bundle") %></asp:PlaceHolder>

Switch compilation to the release mode in Web.config
<configuration><system.web><compilationdebug="false".../></system.web></configuration>

Once bundling is configured then you can verify that it works using the following step:
Open the browser and view the page source code: two links to ASP.NET AJAX Control Toolkit bundles should be rendered instead of links to individual files:

<linkhref="/Content/AjaxControlToolkit/Styles/Bundle?v=hash"rel="stylesheet"/><scriptsrc="/Scripts/AjaxControlToolkit/Bundle?v=hash"type="text/javascript"></script>

To disable bundling:

  • remove ScriptReference from ScriptManager
  • remove the Style.Render expression from the <head> element
  • in the “ajaxControlToolkit” config section (Web.config), set the “renderStyleLinks” attribute to “true”, and the “useStaticResources” attribute to “false”

CDN

ASP.NET AJAX Control Toolkit resource files (scripts, styles and images) are also available via Microsoft Ajax Content Delivery Network. The CDN provides better request handling and caching.

Please note that using CDN is not recommended on an Intranet and during development, since servers are closer to you than CDN servers in these cases.

Enabling CDN depends on whether bundling is used or not.

When bundling is turned on, set the System.Web.Optimization.BundleTable.Bundles.UseCdn property to True. This is commonly done in the Application_Start() method in the Global.asax file.

When bundling is turned off, set the ScriptManager EnableCdn attribute to “true”:

<asp:ScriptManagerrunat="server"EnableCdn="true"><Scripts>
            ...
        </Scripts></asp:ScriptManager>

Updated Wiki: Creating a сustom сontrol

$
0
0
In this tutorial, you will learn how to create an AJAX Control Toolkit custom control/extender.
To learn how to install the AJAX Control Toolkit, see the Step-by-Step Installation Guide page.

Create a new project

Make sure that .NET Framework version is 4.0 or higher.

Add assembly references

Add the AJAX Control Toolkit reference by installing the AjaxControlToolkit NuGet Package.
Make sure you have the System.System.Web.Extensions reference added.

Add a class that inherits ExtenderControlBase or ScriptControlBase

The difference between these base classes is that ExtenderControlBase requires a target control to extend its behavior, while ScriptControlBase is a self-contained control that operates independently.

Add the TargetControlType attribute (extenders only)

If your custom class is derived from the ExtenderControlBase class, you need to add the TargetControlType attribute with the type of the control which the extender will be attached to.
For example, if the extender targets the asp:TextBox, the attribute should be used as follows:
[TargetControlType(typeof(TextBox))]

Add JavaScript files with client behavior

JavaScript files come into two variants: a debug and release version. A debug version ends with .js, while a release version ends with .min.js
To make a minified version of a JavaScript file, use the Web Essentials (Visual Studio 2013 or earlier) or Bundler & Minifier extension (Visual Studio 2015).

Set these files Build Action to EmbeddedResource.

Add CSS files with custom styles (optional)

СSS files come into two variants: a debug and release version. A debug version ends with .css, while a release version ends with .min.css
To make a minified version of a CSS file, use the Web Essentials (Visual Studio 2013 or earlier) or Bundler & Minifier extension (Visual Studio 2015).

Set these files Build Action to EmbeddedResource.

Add the ClientScriptResource attribute

The ClientScriptResource attribute is used to determine what files are needed to load during control/extender initialization. This attribute is applied to a class.

The attribute constructor requires two parameters:
componentType uniquely identifies your script and can be set to an arbitrary string.
resourcePath is used to reference javascript files embedded into your custom assembly.

For example, if the default namespace in your project is CustomAjaxControl and javascript is named MyCustomExtenderBehavior.js, then the attribute will look like this:
[ClientScriptResource("MyCustomExtenderBehavior", "CustomAjaxControl.MyCustomExtenderBehavior")]

Take a note that CustomAjaxControl.MyCustomExtenderBehavior is written without any .js or .min.js suffix. This is because AJAX Control Toolkit internals will add an appropriate suffix automatically.

Add the ClientCssResource attribute (optional)

ClientCssResource is used to indicate that the control/extender has custom CSS styles.

The attribute constructor requires one parameter:
resourcePath is used to reference CSS files embedded into your custom assembly.

For example, if the default namespace in your project is CustomAjaxControl and javascript is named MyCustomExtenderStyle.css, then the attribute will look like this:
[ClientCssResource("CustomAjaxControl.MyCustomExtenderStyle")]

Take a note that CustomAjaxControl.MyCustomExtenderStyle is written without any .css or .min.css suffix. This is because AJAX Control Toolkit internals will add an appropriate suffix automatically.

Add the WebResource attribute

The WebResource attribute is used to resolve web links for resources embedded into an assembly. This attribute is applied to an assembly scope.

The attribute constructor requires two parameters:
webResource is the name of Web resource embedded into an assembly.
contentType is the type of a resource, such as "image/gif" or "text/javascript".

For example, if you have embedded resources into an assembly named CustomAjaxControl.MyCustomExtenderBehavior.js and CustomAjaxControl.MyCustomExtenderBehavior.min.js, then the attributes will look like this:
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderBehavior.js", "text/javascript")]
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderBehavior.min.js", "text/javascript")]

Each embedded CSS style file requires a separate WebResource attribute with contentType="text/css":
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderStyle.css", "text/css")]
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderStyle.min.css", "text/css")]

Add the RequiredScript attribute (optional)

The RequiredScript attribute is used when your custom control/extender needs scripts defined in another extender to operate.

The attribute constructor requires one parameter:
extenderType is the type of another control/extender which scripts will be loaded.

For example, if you need a Common.js file, add the following attribute to the class:
[RequiredScript(typeof(CommonToolkitScripts))]

Register a custom tag prefix

A custom class is not defined in the AjaxControlToolkit assembly, so a custom control/extender cannot use the ajaxToolkit: tag prefix by default.

For example, if an assembly name and default namespace of your project is CustomAjaxControl then tag prefix registration will look like this:

<%@RegisterAssembly="CustomAjaxControl"Namespace="CustomAjaxControl"TagPrefix="myTag"%>

As a result markup for the custom extender will look like this:
<asp:TextBoxID="textBox1"runat="server"/><myTag:MyCustomExtenderrunat="server"TargetControlID="textBox1"/>

Updated Wiki: Documentation

$
0
0
Check out these other helpful articles:

Visual Studio support

VS Extension (run the the installer) NuGet package
Versions 2010 and higher 2010 and higher
Editions Community, Professional, Premium, Ultimate (Enterprise) Express, Community, Professional, Premium, Ultimate (Enterprise)
Toolbox integration Yes No

Browser support

  • Internet Explorer 8+
  • Google Chrome - most recent stable version
  • Opera - most recent stable version
  • Mozilla Firefox - most recent stable version
  • Apple Safari - most recent stable version
Google Chrome, Opera, FireFox, and Safari apply updates automatically, thus there are no configuration recommendations for these browsers

AJAX Control Toolkit Documentation

The AJAX Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled ASP.NET Web Forms applications.
Note: This content was moved from http://www.asp.net/ajaxlibrary/act.ashx to this Documentation wiki. This is now the authoritative location of the AJAX Control Toolkit documentation.

Updated Wiki: Creating a custom localization

$
0
0
In this tutorial, you will learn how to add custom localization to AJAX Control Toolkit.
To learn how to install the toolkit, see the Step-by-Step Installation Guide page.

Add JavaScript files with localization resources

A localization file contains a JavaScript hash object named
Sys.Extended.UI.Localization["<localeKey>"]
<localeKey> is the name of a locale for which you are providing resources.

For the Russian locale, this object is named
Sys.Extended.UI.Localization["ru"]

The hash object structure matches the structure in built-in localization files and contains a subset of the Sys.Extended.UI.Resources hash object (defined in AjaxControlToolkit.Scripts.Localization.Resources.js) with key-value pairs that should be overridden for a particular culture.

For example, if you want to localize only the Calendar_Today entry, your hash object will contain a single entry with the Calendar_Today key and a value with a translation for your locale.

JavaScript files can be have two variants: a debug and release version. A debug version ends with .js, while a release version ends with .min.js
To make a minified version of a JavaScript file, use the Web Essentials (Visual Studio 2013 or earlier) or Bundler & Minifier extension (Visual Studio 2015).

Mark localization files as Embedded Resource

Localization files will be stored in your assembly, so you don’t need to write any custom HTTP-handlers to retrieve them.
Set these files’ Build Action to EmbeddedResource.

Add WebResource attribute for every localization file

Storing resources in an assembly does not mean that they will be available outside this assembly by default. To expose any embedded resource to web clients, you need to add the WebResource attribute for every localization file. This attribute is applied to an assembly scope.

The attribute constructor requires two parameters:
webResource is the name of a Web resource embedded into an assembly.
contentType is the type of a resource, such as "image/gif" or "text/javascript".

For example, if you have embedded resources into an assembly named MyAssembly.MyLocalization.js and MyAssembly.MyLocalization.min.js, the attributes will be as follows:
[assembly: WebResource("MyAssembly.MyLocalization.js", "text/javascript")]
[assembly: WebResource("MyAssembly.MyLocalization.min.js", "text/javascript")]

Register custom localization

Custom localizations are registered with the Localization.AddLocale() static method, which requires three attributes:
localeKey is a locale name, like “en”, “de”, “fr”, etc.
scriptName is a JavaScript localization file name without an extension.
scriptAssembly is an assembly that contains a localization file.

For example, registering MyAssembly.MyLocalization.js for the Italian locale will be as follows:
Localization.AddLocale("it", "MyAssembly.MyLocalization", Assembly.GetExecutingAssembly());

This method can be called anytime, but the most convenient place is the Application_Start() method in the Global.asax file.

Overriding built-in localizations

You can override any localization that is built into AJAX Control Toolkit with your custom localization by providing the same localeKey when calling the Localization.AddLocale() method.

For example, if you want to override the Korean localization, pass “ko” as the first parameter:
Localization.AddLocale("ko", "MyAssembly.MyLocalization", Assembly.GetExecutingAssembly());

Updated Wiki: Documentation

$
0
0
Check out these other helpful articles:

Visual Studio support

VS Extension (run the the installer) NuGet package
Versions 2010 and higher 2010 and higher
Editions Community, Professional, Premium, Ultimate (Enterprise) Express, Community, Professional, Premium, Ultimate (Enterprise)
Toolbox integration Yes No

Browser support

  • Internet Explorer 8+
  • Google Chrome - most recent stable version
  • Opera - most recent stable version
  • Mozilla Firefox - most recent stable version
  • Apple Safari - most recent stable version
Google Chrome, Opera, FireFox, and Safari apply updates automatically, thus there are no configuration recommendations for these browsers

AJAX Control Toolkit Documentation

The AJAX Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled ASP.NET Web Forms applications.
Note: This content was moved from http://www.asp.net/ajaxlibrary/act.ashx to this Documentation wiki. This is now the authoritative location of the AJAX Control Toolkit documentation.

Updated Wiki: Troubleshooting Installer Issues

$
0
0
Note: The AJAX Control Toolkit is installed as a standard Visual Studio extension and appears in the Tools -> Extensions and Updates -> Installed list.

Specify
  • OS (version/edition/bitness/service packs);
  • All installed .NET Framework versions;
  • All installed VS IDE instances (version/edition/bitness/service packs).
Clarify
  • Whether you have changed the default Visual Studio and Documents Environment Variables.
Make a screencast
Make a detailed screencast that illustrates the steps below and related results. For example, use the Jing tool for this purpose.
  • Install the AjaxControlToolkit;
  • Once the installation process is complete, save the installer's log files that have been just created:
%TEMP%\ACTInstaller_[GUID_HERE]
%TEMP%\VSIXInstaller_[GUID_HERE]
  • Run VS IDE via the "/log" flag (devenv.exe /log);
  • Check if the "ASP.NET AJAX Control Toolkit" extension appears in the "Tools -> Extensions and Updates -> Installed" list;
  • Create an ASP.NET WebForms project (TargetFramework = 4+), open an *.aspx WebForm/Page file, and check if the AjaxControlToolkit controls appear to the Toolbox. Save the ActivityLog.xml log file:
%APPDATA%\Microsoft\VisualStudio\[VISUAL_STUDIO_VERSION]\ActivityLog.xml
for example
%APPDATA%\Microsoft\VisualStudio\12.0\ActivityLog.xml (for VS2013)
  • Unistall the AjaxControlToolkit and save the mentioned above installer's log files (with the other names):
%TEMP%\ACTInstaller_[GUID_HERE]
%TEMP%\VSIXInstaller_[GUID_HERE]
Then, provide us with the captured screencast along with the requested details and listed log files.

Updated Wiki: ValidatorCallout

$
0
0

ValidatorCallout Extender (demo)

ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators.
Note that starting with .NET Framework 4.5, ASP.NET uses unobtrusive validation, which is incompatible with ValidatorCalloutExtender.
To make ValidatorCalloutExtender work, please disable the unobtrusive validation as described here: http://jupaol.blogspot.ru/2012/09/enabling-unobtrusive-validation-from.html

Properties

Name Description
CloseImageUrl The path to a custom close image
CssClass Name of the CSS class used to style ValidatorCallout Remarks: See the ValidatorCallout Theming section for more information
HighlightCssClass A CSS class to apply to an invalid field
OnHide Generic OnHide animation for the ValidatorCallout extender Remarks: The OnHide animation will be played each time the validation popup is hidden
OnShow Generic OnShow animation for the ValidatorCallout extender Remarks: The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly, but hidden. The animation can be used to display the popup along with any other visual effects. See Animation Reference for more details
PopupPosition Indicates where the ValidatorCallout popup should appear relatively to the control to validate Remarks: Possible values: * BottomLeft * BottomRight * TopLeft * TopRight * Left * Right
WarningIconImageUrl The path to a custom warning icon image
Width The width of the callout

Client properties

closeImageUrl
The path to a custom close image
Getter name: get_closeImageUrl()
Setter name: set_closeImageUrl(value)

cssClass
Name of the CSS class used to style the ValidatorCallout
Getter name: get_cssClass()
Setter name: set_cssClass(value)

highlightCssClass
A CSS class to apply to an invalid field
Getter name: get_highlightCssClass()
Setter name: set_highlightCssClass(value)

onHide
Generic OnHide animation for the ValidatorCallout extender
Getter name: get_onHide()
Setter name: set_onHide(value)

onHideBehavior
Generic OnHide Animation's behavior
Getter name: get_onHideBehavior()

onShow
Generic OnShow animation for the ValidatorCallout extender
Getter name: get_onShow()
Setter name: set_onShow(value)

onShowBehavior
Generic OnShow Animation's behavior
Getter name: get_onShowBehavior()

popupPosition
Indicates where the ValidatorCallout popup should appear relatively to the control to validate
Getter name: get_popupPosition()
Setter name: set_popupPosition(value)

warningIconImageUrl
The path to a custom warning icon image
Getter name: get_warningIconImageUrl()
Setter name: set_warningIconImageUrl(value)

width
The width of the callout
Getter name: get_width()
Setter name: set_width(value)

Client methods

hide()
Hides the ValidatorCallout popup

isOpen()
Determines whether the ValidatorCallout popup is opened

show()
Shows the ValidatorCallout popup


Updated Wiki: Reference

$
0
0

Updated Wiki: ValidatorCallout

$
0
0

ValidatorCallout Extender (demo)

ValidatorCallout is an ASP.NET AJAX extender that enhances the functionality of existing ASP.NET validators.

Properties

Name Description
CloseImageUrl The path to a custom close image
CssClass Name of the CSS class used to style ValidatorCallout Remarks: See the ValidatorCallout Theming section for more information
HighlightCssClass A CSS class to apply to an invalid field
OnHide Generic OnHide animation for the ValidatorCallout extender Remarks: The OnHide animation will be played each time the validation popup is hidden
OnShow Generic OnShow animation for the ValidatorCallout extender Remarks: The OnShow animation will be played each time the validation popup is displayed. The popup will be positioned correctly, but hidden. The animation can be used to display the popup along with any other visual effects. See Animation Reference for more details
PopupPosition Indicates where the ValidatorCallout popup should appear relatively to the control to validate Remarks: Possible values: * BottomLeft * BottomRight * TopLeft * TopRight * Left * Right
WarningIconImageUrl The path to a custom warning icon image
Width The width of the callout

Client properties

closeImageUrl
The path to a custom close image
Getter name: get_closeImageUrl()
Setter name: set_closeImageUrl(value)

cssClass
Name of the CSS class used to style the ValidatorCallout
Getter name: get_cssClass()
Setter name: set_cssClass(value)

highlightCssClass
A CSS class to apply to an invalid field
Getter name: get_highlightCssClass()
Setter name: set_highlightCssClass(value)

onHide
Generic OnHide animation for the ValidatorCallout extender
Getter name: get_onHide()
Setter name: set_onHide(value)

onHideBehavior
Generic OnHide Animation's behavior
Getter name: get_onHideBehavior()

onShow
Generic OnShow animation for the ValidatorCallout extender
Getter name: get_onShow()
Setter name: set_onShow(value)

onShowBehavior
Generic OnShow Animation's behavior
Getter name: get_onShowBehavior()

popupPosition
Indicates where the ValidatorCallout popup should appear relatively to the control to validate
Getter name: get_popupPosition()
Setter name: set_popupPosition(value)

warningIconImageUrl
The path to a custom warning icon image
Getter name: get_warningIconImageUrl()
Setter name: set_warningIconImageUrl(value)

width
The width of the callout
Getter name: get_width()
Setter name: set_width(value)

Client methods

hide()
Hides the ValidatorCallout popup

isOpen()
Determines whether the ValidatorCallout popup is opened

show()
Shows the ValidatorCallout popup

Updated Wiki: Creating a сustom сontrol

$
0
0
In this tutorial, you will learn how to create an AJAX Control Toolkit custom control/extender.
To learn how to install the AJAX Control Toolkit, see the Step-by-Step Installation Guide page.

Create a new project

Make sure that .NET Framework version is 4.0 or higher.

Add assembly references

Add the AJAX Control Toolkit reference by installing the AjaxControlToolkit NuGet Package.
Make sure you have the System.System.Web.Extensions reference added.

Add a class that inherits ExtenderControlBase or ScriptControlBase

The difference between these base classes is that ExtenderControlBase requires a target control to extend its behavior, while ScriptControlBase is a self-contained control that operates independently.

Add the TargetControlType attribute (extenders only)

If your custom class is derived from the ExtenderControlBase class, you need to add the TargetControlType attribute with the type of the control which the extender will be attached to.
For example, if the extender targets the asp:TextBox, the attribute should be used as follows:
[TargetControlType(typeof(TextBox))]

Add JavaScript files with client behavior

JavaScript files come into two variants: a debug and release version. A debug version ends with .js, while a release version ends with .min.js
To make a minified version of a JavaScript file, use the Web Essentials (Visual Studio 2013 or earlier) or Bundler & Minifier extension (Visual Studio 2015).

Set these files Build Action to EmbeddedResource.

Add CSS files with custom styles (optional)

СSS files come into two variants: a debug and release version. A debug version ends with .css, while a release version ends with .min.css
To make a minified version of a CSS file, use the Web Essentials (Visual Studio 2013 or earlier) or Bundler & Minifier extension (Visual Studio 2015).

Set these files Build Action to EmbeddedResource.

Add the ClientScriptResource attribute

The ClientScriptResource attribute is used to determine what files are needed to load during control/extender initialization. This attribute is applied to a class.

The attribute constructor requires two parameters:
componentType uniquely identifies your script and can be set to an arbitrary string.
resourcePath is used to reference javascript files embedded into your custom assembly.

For example, if the default namespace in your project is CustomAjaxControl and javascript is named MyCustomExtenderBehavior.js, then the attribute will look like this:
[ClientScriptResource("MyCustomExtenderBehavior", "CustomAjaxControl.MyCustomExtenderBehavior")]

Take a note that CustomAjaxControl.MyCustomExtenderBehavior is written without any .js or .min.js suffix. This is because AJAX Control Toolkit internals will add an appropriate suffix automatically.

Add the ClientCssResource attribute (optional)

ClientCssResource is used to indicate that the control/extender has custom CSS styles.

The attribute constructor requires one parameter:
resourcePath is used to reference CSS files embedded into your custom assembly.

For example, if the default namespace in your project is CustomAjaxControl and javascript is named MyCustomExtenderStyle.css, then the attribute will look like this:
[ClientCssResource("CustomAjaxControl.MyCustomExtenderStyle")]

Take a note that CustomAjaxControl.MyCustomExtenderStyle is written without any .css or .min.css suffix. This is because AJAX Control Toolkit internals will add an appropriate suffix automatically.

Add the WebResource attribute

The WebResource attribute is used to resolve web links for resources embedded into an assembly. This attribute is applied to an assembly scope.

The attribute constructor requires two parameters:
webResource is the name of Web resource embedded into an assembly.
contentType is the type of a resource, such as "image/gif" or "text/javascript".

For example, if you have embedded resources into an assembly named CustomAjaxControl.MyCustomExtenderBehavior.js and CustomAjaxControl.MyCustomExtenderBehavior.min.js, then the attributes will look like this:
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderBehavior.js", "text/javascript")]
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderBehavior.min.js", "text/javascript")]

Each embedded CSS style file requires a separate WebResource attribute with contentType="text/css":
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderStyle.css", "text/css")]
[assembly: WebResource("CustomAjaxControl.MyCustomExtenderStyle.min.css", "text/css")]

Add the RequiredScript attribute (optional)

The RequiredScript attribute is used when your custom control/extender needs scripts defined in another extender to operate.

The attribute constructor requires one parameter:
extenderType is the type of another control/extender which scripts will be loaded.

For example, if you need a Common.js file, add the following attribute to the class:
[RequiredScript(typeof(CommonToolkitScripts))]

Register a custom tag prefix

A custom class is not defined in the AjaxControlToolkit assembly, so a custom control/extender cannot use the ajaxToolkit: tag prefix by default.

For example, if an assembly name and default namespace of your project is CustomAjaxControl then tag prefix registration will look like this:

<%@RegisterAssembly="CustomAjaxControl"Namespace="CustomAjaxControl"TagPrefix="myTag"%>

As a result markup for the custom extender will look like this:
<asp:TextBoxID="textBox1"runat="server"/><myTag:MyCustomExtenderrunat="server"TargetControlID="textBox1"/>

Updated Wiki: Creating a custom localization

$
0
0
In this tutorial, you will learn how to add custom localization to AJAX Control Toolkit.
To learn how to install the toolkit, see the Step-by-Step Installation Guide page.

Add JavaScript files with localization resources

A localization file contains a JavaScript hash object named
Sys.Extended.UI.Localization["<localeKey>"]
<localeKey> is the name of a locale for which you are providing resources.

For the Russian locale, this object is named
Sys.Extended.UI.Localization["ru"]

The hash object structure matches the structure in built-in localization files and contains a subset of the Sys.Extended.UI.Resources hash object (defined in AjaxControlToolkit.Scripts.Localization.Resources.js) with key-value pairs that should be overridden for a particular culture.

For example, if you want to localize only the Calendar_Today entry, your hash object will contain a single entry with the Calendar_Today key and a value with a translation for your locale.

JavaScript files can be have two variants: a debug and release version. A debug version ends with .js, while a release version ends with .min.js
To make a minified version of a JavaScript file, use the Web Essentials (Visual Studio 2013 or earlier) or Bundler & Minifier extension (Visual Studio 2015).

Mark localization files as Embedded Resource

Localization files will be stored in your assembly, so you don’t need to write any custom HTTP-handlers to retrieve them.
Set these files’ Build Action to EmbeddedResource.

Add WebResource attribute for every localization file

Storing resources in an assembly does not mean that they will be available outside this assembly by default. To expose any embedded resource to web clients, you need to add the WebResource attribute for every localization file. This attribute is applied to an assembly scope.

The attribute constructor requires two parameters:
webResource is the name of a Web resource embedded into an assembly.
contentType is the type of a resource, such as "image/gif" or "text/javascript".

For example, if you have embedded resources into an assembly named MyAssembly.MyLocalization.js and MyAssembly.MyLocalization.min.js, the attributes will be as follows:
[assembly: WebResource("MyAssembly.MyLocalization.js", "text/javascript")]
[assembly: WebResource("MyAssembly.MyLocalization.min.js", "text/javascript")]

Register custom localization

Custom localizations are registered with the Localization.AddLocale() static method, which requires three attributes:
localeKey is a locale name, like “en”, “de”, “fr”, etc.
scriptName is a JavaScript localization file name without an extension.
scriptAssembly is an assembly that contains a localization file.

For example, registering MyAssembly.MyLocalization.js for the Italian locale will be as follows:
Localization.AddLocale("it", "MyAssembly.MyLocalization", Assembly.GetExecutingAssembly());

This method can be called anytime, but the most convenient place is the Application_Start() method in the Global.asax file.

Overriding built-in localizations

You can override any localization that is built into AJAX Control Toolkit with your custom localization by providing the same localeKey when calling the Localization.AddLocale() method.

For example, if you want to override the Korean localization, pass “ko” as the first parameter:
Localization.AddLocale("ko", "MyAssembly.MyLocalization", Assembly.GetExecutingAssembly());

Updated Wiki: Upgrade your project to AjaxControlToolkit v15.1

$
0
0

Upgrade your project to AjaxControlToolkit v15.1

Important note: The ASP.NET AJAX Control Toolkit v15.1 now requires that your project is using .NET framework v4.0 or higher. Projects targeting .NET framework v3.5 have to be migrated to a more recent .NET version before upgrading.

0 - Remove previous version

Make sure your have removed previous versions before installing ASP.NET AJAX Control Toolkit v15.1:
  1. If you have added the toolkit to Toolbox via the “Choose items...” dialog, remove an assembly reference and reset your toolbox.
  2. If you have added the toolkit via the NuGet package manager, simply uninstall the package from the solution.

1 - Install

To install the ASP.NET AJAX Control Toolkit v15.1 go to the Download page and get the new Installer (created by DevExpress).

If you use the fully-qualified name for the ASP.NET AJAX Control Toolkit assembly, then please ensure that all occurrences are updated (this includes references in web.config and @Register directives in the ASPX markup).

2 - Replace ToolkitScriptManager with ScriptManager

The ToolkitScriptManager has been deprecated for the v15.1 release. Please use the standard ScriptManager control. It should be sufficient to change the tag name in the markup from <yourTagPrefix>:ToolkitScriptManager -> asp:ScriptManager. If you find any issues, then please report them here.

Refer to the "ToolkitScriptManager Removed in v15.1, Use ScriptManager" article for details.

3 - Clean up Web.config

Remove the following outdated elements from your project’s web.config file:

// (in system.web/httpHandlers and system.webServer/handlers sections).
<addname="CombineScriptsHandler"verb="*"path="CombineScriptsHandler.axd"type="AjaxControlToolkit.CombineScriptsHandler, AjaxControlToolkit"/>


// (in system.web section)
<sectionname="sanitizer"requirePermission="false"type="AjaxControlToolkit.Sanitizer.ProviderSanitizerSection, AjaxControlToolkit"/> 

// (in system.web section)
<sanitizerdefaultProvider="HtmlAgilityPackSanitizerProvider">
. . .
</sanitizer>

4 - Use Microsoft.Web.Optimization for bundling and minification

The AjaxControlToolkit.CombineScriptsHandler have been removed for v15.1 and resource bundling was delegated to the ASP.NET Web Optimization Framework.

Find the detailed description and instructions on enabling it in the following article: How to use bundling and CDN.

Note: if you use named Control Bundles (defined in the ~/AjaxControlToolkit.config file), then adjust the script bundle virtual path as shown below:

"~/Scripts/AjaxControlToolkit/<ControlBundleName>Bundle".

5 - Html Editor

The following namespaces have been renamed so please update your code accordingly:

Change AjaxControlToolkit.HTMLEditor to AjaxControlToolkit.HtmlEditor.
Change AjaxControlToolkit.HTMLEditor.ToolbarButton to AjaxControlToolkit.HtmlEditor.ToolbarButtons.

To reduce the number of dependencies, we have moved Html Sanitizer out to an external NuGet package: AjaxControlToolkit.HtmlEditor.Sanitizer

For security concerns, we recommend that you always use Html Editor together with Html Sanitizer.

Reporting Issues

If you have any questions regarding upgrading your projects then open a ticket in the Issue Tracker.


Updated Wiki: Home

Updated Wiki: Documentation

$
0
0

The documentation was moved to GitHub wiki: https://github.com/DevExpress/AjaxControlToolkit/wiki


Check out these other helpful articles:

Visual Studio support

VS Extension (run the the installer) NuGet package
Versions 2010 and higher 2010 and higher
Editions Community, Professional, Premium, Ultimate (Enterprise) Express, Community, Professional, Premium, Ultimate (Enterprise)
Toolbox integration Yes No

Browser support

  • Internet Explorer 8+
  • Google Chrome - most recent stable version
  • Opera - most recent stable version
  • Mozilla Firefox - most recent stable version
  • Apple Safari - most recent stable version
Google Chrome, Opera, FireFox, and Safari apply updates automatically, thus there are no configuration recommendations for these browsers

AJAX Control Toolkit Documentation

The AJAX Control Toolkit contains a rich set of controls that you can use to build highly responsive and interactive Ajax-enabled ASP.NET Web Forms applications.
Note: This content was moved from http://www.asp.net/ajaxlibrary/act.ashx to this Documentation wiki. This is now the authoritative location of the AJAX Control Toolkit documentation.


Viewing all 275 articles
Browse latest View live


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>