Quick Example

Create a new WebProject in Visual Studio 2008 and add reference to nxAjax binary.

Add to Web.Config file:
<system.web>
...
   <pages>
      <controls>
         ...
         <add tagPrefix="ajax" namespace="Framework.Ajax.UI.Controls" assembly="nxAjax"/>
      </controls>
   </pages>
   <httpHandlers>
       ....
      <add verb="GET,HEAD" path="AjaxScriptResource.axd" type="Framework.Ajax.HttpHandlers.ScriptResourceHandler, nxAjax" validate="false"/>
      <add verb="*" path="AjaxUploadFile.axd" type="Framework.Ajax.HttpHandlers.FileUploadHandler, nxAjax" validate="false"/>
   </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 ;)

Last edited Feb 5, 2010 at 2:27 PM by fescolar, version 4

Comments

fescolar Feb 19, 2010 at 7:31 AM 
I will look at adding it to the next version. Meanwhile you can create your custom ajax-loading image here: http://www.ajaxload.info/
Thank you!

jfrank Feb 16, 2010 at 9:14 AM 
this line in btnFile_ServerComplete function
"DocumentAlert(value + " uploaded, you can click on 'send' button...");"
output a alert with this message: "image.jpg.<pre></pre> uploaded, you can click on 'send' button..."
ajax-loader.gif is missing in this example or you don't have that resource.