 |
Web Development »
Ajax and Atlas »
Libraries
Intermediate
License: The Mozilla Public License 1.1 (MPL 1.1)
nxAjax - An Ajax LibraryBy Fernando EscolarnxAjax is a .Net easy use Ajax Framework |
C++/CLI, C# (C#1.0, C#2.0, C#3.0), VB (VB7.x, VB8.0, VB9.0), Javascript, CSS, HTML, .NET (.NET1.0, .NET1.1, .NET2.0, .NET3.0, .NET3.5), ASP.NET, Ajax, jQuery, Architect, Dev, Design
|
||||||||||||
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
Check new versions in codeplex: http://nxajax.codeplex.com/.
An easy use asp.net jquery ajax library.
Add a reference to "nxAjax.dll" assembly.
For a more convenient use of controls within the Toolbox, you can click with the second mouse button and select "Choose Items…." In the new form browse "nxAjax.dll" assembly and mark all its components.
So we will have our Toolbar as follows:
Create a new WebProject in Visual Studio 2008 and add reference to nxAjax binary.
Add to Web.Config file:
<system.web />
...
<pages />
<controls />
...
<add assembly="nxAjax" namespace="Framework.Ajax.UI.Controls" tagprefix="ajax" />
</controls />
</pages />
<httphandlers />
....
<add validate="false" type="Framework.Ajax.HttpHandlers.ScriptResourceHandler, nxAjax" path="AjaxScriptResource.axd" verb="GET,HEAD" />
<add validate="false" type="Framework.Ajax.HttpHandlers.FileUploadHandler, nxAjax" path="AjaxUploadFile.axd" verb="*" />
</httphandlers />
...
</system.web />
Edit default.aspx like:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>My nxAjax Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<ajax:Container ID="container" runat="server"></ajax:Container>
</div>
</form>
</body>
</html>
Edit default.aspx.cs:
using System;
using System.Collections.Generic;
using Framework.Ajax.UI;
using Framework.Ajax.UI.Controls;
public partial class _Default : Framework.Ajax.UI.MainPage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
container.ContainedPage = "Contained1.aspx";
}
}
Create a new WebForm named "Contained1.aspx":
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server">
<div>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server"
OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</div>
</form>
Edit Contained1.aspx.cs:
using System;
using System.Collections.Generic;
using Framework.Ajax.UI;
using Framework.Ajax.UI.Controls;
public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
btnFile.AllowedExtensions.Add("jpg");
btnFile.AllowedExtensions.Add("gif");
btnFile.AllowedExtensions.Add("png");
btnFile.AllowedExtensions.Add("bmp");
btnSubmit.Disabled = true;
}
}
protected void btnSubmit_ServerClick(AjaxControl sender, string value)
{
System.Web.HttpPostedFile file = btnFile.File;
if (!chkTest.Checked)
return;
if (file == null)
DocumentAlert("not file uploaded");
else
{
DocumentAlert(file.FileName + " saved!");
}
}
protected void btnFile_ServerComplete(AjaxControl sender, string value)
{
DocumentAlert(value + " uploaded, you can click on 'send' button...");
btnSubmit.Disabled = false;
}
}
Launch and test it ;)
The client events stores a javascript that will be evaluated when they will be raised. Always on the client side. And the server events, are handled by the ASP.Net, running on the Web server and returned the amendments.
Container Control is a special control on management and operation. Its function is to be a container of ContainedPages. These are nxAjax Web pages (as MainPage) displayed as a piece of code and type of entity in a single form.
In this way we can navigate between different Web pages without having to return to reload all Ajax libraries, or re-create the Web format main container. It can resemble a UserControl, but that is loaded dynamically without being Instance within the main container.
For now MainPage is the requirement nxAjax library has to work as it does.
MainPage inherits from AjaxPage (How inherits from Microsoft framework System.Web.UI.Page). And it overwrites much of its functionality.
Clears all javascripts from Microsoft, transforms the format of the form, add the javascript library (jQuery, internals, ...) and processes requests in a way that the library can understand.
The viewstate is stored in session varibles so it is no longer on the served page. MainPage removes doPostBack functions and __VIEWSTATE hidden input.
And it also provides a new template and multilanguage systems.
A ContainedPage only be loaded into a container control (Framework.Ajax.UI.Controls.Container). And again in a MainPage.
It inherits from AjaxPage (How inherits from Microsoft framework System.Web.UI.Page). But unlike her older sister MainPage not load any scripts. So it is dependent.
ContainedPage is the tool we use to dynamically load content from Ajax on our website.
AjaxUserControl works like System.Web.UI.UserControl. But if you want load dynamically content, it is better to use ContainedPage.
AjaxControl server control is the base of the entire nxAjax library. Every control inherits from this.
To render an AjaxControl we use two methods: RenderHTML and RenderJS. The first writes the HTML code that we see on the Web. And the second renders the javascripts used for initialization and status changes.
To avoid overload, the HTML rendering uses an internal cache for each instance of the control. And only it is written once, when the page is loaded the first time.
Then rendering javascripts comes into play. It is launched the first time and then on each postback which change its status.
To force an status change or otherwise use the funcitons AjaxUpdate and AjaxNotUpdate.
Every AjaxControl postback has two methods, synchronous and asynchronous. The default is Sync.
In the synchronous call context is used an ajax queue. Here it is adding requests to be loaded sequentially. If you want during the server process, a loading screen is showed, add in MainPage a div object with id="loading".
Asynchronous calls are made for each of the controls at the time of requesting. PostBackMode property specifies it. And if you want to add a loading image while processing the request, you can set the properties: LoadingImg (Image source) or LoadingImgID (Image Control ID).
AjaxControl postback only posts the current control value. If you want to post all form content you should use ISubmit control (like Submit or LinkSubmit).
Finally, AjaxPage property gets the container page: ContainedPage or MainPage.
Using nxAjax Template System involves converting all the htmls code to xml files. So, in order to meet the standards, we have chosen the option to be W3C compliant in the XHTML 1.1 context.
Open the Quick Example project. Create a new file named: "english.language". You can add here all application strings
# # This is a coment, you can write what you want here... # # # English Language File # # Information section: [INFO] name=English id=ENG # #Dictionary section: [DICTIONARY] # Format: # [MyKey]=[Literal] Test.ErrorMessage01=not file uploaded Test.SavedMessage=%s saved! Test.UploadedMessage=%s uploaded, you can click on 'send' button...
Now go to Menu -> Website -> Add New File, and select "Global Application Class". Open the Global.asax file:
You can do this:
...
void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
Application["Language"] = new Framework.Ajax.Language(Server.MapPath("english.language"));
}
...
Or this:
...
void Session_Start(object sender, EventArgs e)
{
// Code that runs when a new session is started
Session["Language"] = new Framework.Ajax.Language(Server.MapPath("english.language"));
}
...
Edit Contained1.aspx.cs:
public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
...
protected void btnSubmit_ServerClick(AjaxControl sender, string value)
{
System.Web.HttpPostedFile file = btnFile.File;
if (!chkTest.Checked)
return;
if (file == null)
DocumentAlert(lang["Test.ErrorMessage01"]);
else
{
DocumentAlert(lang["Test.SavedMessage"].Replace("%s", file.FileName));
}
}
protected void btnFile_ServerComplete(AjaxControl sender, string value)
{
DocumentAlert(lang["Test.UploadedMessage"].Replace("%s", value));
btnSubmit.Disabled = false;
}
}
With the Quick Example project we are going to use nxAjax templates.
Open default.aspx and delete all html tags:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<form id="form1" runat="server"></form>
<ajax:Container ID="container" runat="server"></ajax:Container>
Asp.Net needs a form with the attribute runat="server" in order to works...
Create a new "main.template" empty text file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>My nxAjax Test</title>
</head>
<body>
<div>
<ajax:Container ID="container" runat="server"></ajax:Container>
</div>
</body>
</html>
Replace the ajax control aspx code with a tag like "<$ControlID$>". And you must add 2 special tags in the MainPage: <$PreScript$> and <$PostScript$>. The first in the header section, and the second at the end of the document body:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>My nxAjax Test</title>
<$PreScript$>
</head>
<body>
<div>
<$container$>
</div>
<$PostScript$>
</body>
</html>
Edit default.aspx.cs:
public partial class _Default : Framework.Ajax.UI.MainPage
{
protected void Page_Load(object sender, EventArgs e)
{
this.TemplateFile = "main.template";
if (!IsPostBack)
container.ContainedPage = "Contained1.aspx";
}
}
Inside a MainPage template you can use 2 optional special tags if you need it: <$InitForm$> and <$EndForm$>, in order to submit one main form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
<title>My nxAjax Test</title>
<$PreScript$>
</head>
<body>
<$InitForm$>
<div>
<$container$>
</div>
<$EndForm$>
<$PostScript$>
</body>
</html>
Open "Contained1.aspx" and delete all html tags (except server form):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server"
OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
Create a new "container1.template" empty text file, with <$ControlID$> tags where you want show each control:
<div>
<$btnFile$>
<$chkTest$>
<$btnSubmit$>
</div>
You can optionaly add <$PostBack$> tag if you want to put the postback controls in a specified postion into the document.
Add into Contained1.aspx.cs this line:
...
public partial class Contained1 : Framework.Ajax.UI.ContainedPage
{
protected void Page_Load(object sender, EventArgs e)
{
this.TemplateFile = "container1.template";
if (!IsPostBack)
{
...
Inside ContainedPage template you do not need declare a HTML form. It is beacuse of a ContainedPage is a form, and the render will ever write the begin and end form tags.
In oder hand you can create Xml aspx structures. It is not compatible with the previous way.
Open "container1.template" file and modify it to something like:
<div>
<$File$>
<$Submit$>
</div>
To fill this template we need modify "Contained1.aspx":
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<file>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
</file>
<submit>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</submit>
Note you can nest 2 or more AjaxControls inside a Xml element.
If you run the project the result is like the previous example.
When the tmplate system processes an aspx document, It checks document begin with "
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<?xml version="1.0" encoding="utf-8"?>
<page>
<form id="form1" runat="server"></form>
<file>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
</file>
<submit>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</submit>
</page>
And it works too.
Going into the modeling templates, we found a series of special commands to create template parts. These template parts are named "areas". Defining an area you must use 2 special tags: <!$Begin AreaName> and <!$End AreaName>.
<!$Begin divArea>
<div>
<$object$>
</div>
<!$End divArea>
<$divs$>
Or also:
<!$Begin divArea>
<div>
<$file$>
<$submit$>
</div>
<!$End divArea>
<$divs$>
Inside the aspx xml code, you must define an area tag with the attributes:
To fill this new template we need modify "Contained1.aspx":
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs" method="allocate">
<object>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</object>
</area>
Or also:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs">
<file>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
</file>
<submit>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</submit>
</area>
And if we want create 2 div blocks instead one (with the first example):
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Contained1.aspx.cs" Inherits="Contained1" %>
<form id="form1" runat="server"></form>
<area id="divArea" place="divs">
<object>
<ajax:FileUpload ID="btnFile" runat="server"
UploadingMessage="Uploading..."
ExtensionNotAllowedMessage="Only image files!"
Text="Upload image"
LoadingImg="ajax-loader.gif"
OnServerComplete="btnFile_ServerComplete"></ajax:FileUpload>
</object>
</area>
<area id="divArea" place="divs">
<object>
<ajax:CheckBox ID="chkTest" Checked="true" runat="server"></ajax:CheckBox>
<ajax:Submit ID="btnSubmit" Value="Send" runat="server" OnServerClick="btnSubmit_ServerClick"></ajax:Submit>
</object>
</area>
Another special command is "<!$Include TemplatePartFileName>". It will be replaced by the template file referenced. The template file name is the relative path from the current document to the document we want include.
Create a new empty text file named "divpart.template":
<!$Begin divArea>
<div>
<$object$>
</div>
<!$End divArea>
And modify "container1.template" file:
<!$Include divpart.template>
<$divs$>
And it works like the others.
The template based render system can auto replace strings using the language file. You have to write another special tag with the language key: <&LanguageKey&>
If you have create a language file you can try to add the page title to "english.language":
... [DICTIONARY] ... Title=My nxAjax Test
And replace in the "main.template" file, the page title by the language tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head runat="server">
--- <title><&Title&></title>
<$PreScript$>
</head>
<body>
<div>
<$container$>
</div>
<$PostScript$>
</body>
</html>
The nxAjax GridView control contains the attribute ContentTemplateFileName. It allows set a template file name and the grid will render based in this template file.
<ajax:GridView ID="gridImages" runat="server" ContentTemplateFileName="grid.template">
<ajax:GridImageColumn DataColumn="img" />
<ajax:GridLabelColumn DataColumn="name" />
</ajax:GridView>
The template file have to contain 3 areas: "header", "content", "footer".
<!$Begin header>
<div class="imageListDiv">
<!$End header>
<!$Begin content>
<div class="imageDiv">
<$Column{0}$><br />
<span><$Column{1}$></span>
</div>
<!$End content>
<!$Begin footer>
</div>
<!$End footer>
You can also read this in nxAjax codeplex page.
| You must Sign In to use this message board. | ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
General 
News 
Question 
Answer 
Joke 
Rant 
Admin
Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads.
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 9 Feb 2010 Editor: |
Copyright 2008 by Fernando Escolar Everything else Copyright © CodeProject, 1999-2010 Web19 | Advertise on the Code Project |
