Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

RadAsyncUpload Dynamically-Created

7 Answers 440 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
JD
Top achievements
Rank 1
JD asked on 03 Feb 2014, 11:27 PM
Can someone provide code for using the AsyncUpload control in an ASP web page built entirely at runtime?  NO aspx/ashx.  All CS, except the master page, which is about 5 levels up from my user control.  I can't get past a bunch of Javascript errors - likely related to the httpHandlers section, but I can't find a definitive configuration doc for that, either.

The need is simple: drop a user control down that will allow uploads (and thus backend processing of uploaded files) without performing a full postback on the page.  

Thanks,
JD

7 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 2
answered on 04 Feb 2014, 11:06 AM
Hi,

Please have a look into the sample code snippet which works fine at my end.

ASPX:
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
</telerik:RadAjaxManager>
<telerik:RadButton ID="RadButton1" runat="server" Text="Upload">
</telerik:RadButton>
<telerik:RadButton ID="RadButton2" runat="server" Text="PostBack">
</telerik:RadButton>

C#:
RadAsyncUpload upload = new RadAsyncUpload();
protected void Page_Load(object sender, EventArgs e)
{
    upload.ID = "Upload1";
    upload.FileUploaded += new FileUploadedEventHandler(upload_FileUploaded);
    this.form1.Controls.Add(upload);
    RadAjaxManager1.AjaxSettings.AddAjaxSetting(RadButton1, upload, null);
}
void upload_FileUploaded(object sender, FileUploadedEventArgs e)
{
  //your code
}

Let me know if you have any concern.
Thanks,
Shinu.
0
JD
Top achievements
Rank 1
answered on 04 Feb 2014, 05:15 PM
Shinu,

Thanks for the quick response.  The sample code does include an aspx, which I don't have, but I modified it to create all the objects dynamically and I get the following error at the AddAjaxSetting(...) call:

Value cannot be null.
Parameter name: page

Ideas?
JD

0
JD
Top achievements
Rank 1
answered on 04 Feb 2014, 11:21 PM
Here is the code.
FileUpload.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fileUpload.aspx.cs" Inherits="TelerikApp.filter" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
    </div>
    </form>
</body>
</html>


FileUpload.aspx.cs:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using TelerikApp.Controls;
 
namespace TelerikApp
{
    public partial class fileUpload : System.Web.UI.Page
    {
        protected WebControl _DivPageContent = new WebControl(HtmlTextWriterTag.Div);
        protected void Page_Load(object sender, EventArgs e)
        {
            AddFrameWorkContent(new filterSimpleCtrl());
            AddFrameWorkContent(new UploadControl());
            this.Controls.Add(_DivPageContent);
        }
 
        public void AddFrameWorkContent(object obj)
        {
            this._DivPageContent.Controls.Add((Control)obj);
        }
    }
}

Now UploadControl.cs:
using System;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace TelerikApp.Controls
{
    public class UploadControl : WebControl
    {
        private Button _btUpload = new Button();
        private RadAsyncUpload _fiInput = new RadAsyncUpload();
        private DropDownList _DdDocumentTypes = null;
        private RadAjaxManager _ajaxManager = null;
 
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
 
            this._ajaxManager = new RadAjaxManager();
            this._ajaxManager.ID = "_ajaxManager";
            this.Controls.Add(this._ajaxManager);
 
            this._DdDocumentTypes = new DropDownList();
            this._DdDocumentTypes.ID = "DDLDocumentTypes";
            this._DdDocumentTypes.EnableViewState = false;
            this._DdDocumentTypes.AutoPostBack = false;
            this._DdDocumentTypes.Items.Add(new ListItem("type1"));
            this._DdDocumentTypes.Items.Add(new ListItem("type2"));
 
            this._fiInput.ID = "FileInput";
            this._fiInput.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;
            this._fiInput.FileUploaded += FileUploaded;
            _ajaxManager.AjaxSettings.AddAjaxSetting(_btUpload, _fiInput);
 
            this._btUpload.ID = "UploadButton";
            //this._btUpload.Command += new System.Web.UI.WebControls.CommandEventHandler(Upload_Command);
            this._btUpload.CausesValidation = false;
            this._btUpload.Text = "Upload";
 
            DataBind();
 
            this.Controls.Add(this._DdDocumentTypes);
            this.Controls.Add(this._fiInput);
            this.Controls.Add(this._btUpload);
        }
 
        private void FileUploaded(object sender, FileUploadedEventArgs e)
        {
 
        }
 
    }
 
}







0
Shinu
Top achievements
Rank 2
answered on 05 Feb 2014, 03:56 AM
Hi,

Please have a look into the sample code snippet to achieve your scenario.

C#(Fileupload.aspx) :
protected void Page_Init(object sender, EventArgs e)
{
    Control mynewcontrol = new Control();
    mynewcontrol = LoadControl("UploadControl.ascx");
    this.form1.Controls.Add(mynewcontrol);
    RadAjaxManager manager = new RadAjaxManager();
    manager.ID = "RadAjaxManager1";
    this.form1.Controls.Add(manager);
}

UploadControl.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="UploadControl.ascx.cs" Inherits="RadAsyncUpload_UploadControl" %>
 
<asp:ScriptManager ID="s1" runat="server">
</asp:ScriptManager>

C#(UploadControl .ascx):
RadAjaxManagerProxy managerproxy = new RadAjaxManagerProxy();
RadAsyncUpload upload = new RadAsyncUpload();
RadButton button = new RadButton();
protected void Page_Init(object sender, EventArgs e)
{
    managerproxy.ID = "RadAjaxManagerProxy1";
    this.Controls.Add(managerproxy);
}
protected void Page_Load(object sender, EventArgs e)
{
    button.ID = "Button1";
    button.Text = "Upload";
    upload.ID = "Upload1";
    upload.FileUploaded += new FileUploadedEventHandler(upload_FileUploaded);
    this.Controls.Add(button);
    this.Controls.Add(upload);
    managerproxy.AjaxSettings.AddAjaxSetting(button, upload);
}
void upload_FileUploaded(object sender, FileUploadedEventArgs e)
{
    //your code
}

Hope this will helps you.
Thanks,
Shinu.
0
JD
Top achievements
Rank 1
answered on 05 Feb 2014, 09:40 PM
Shinu,

I apologize for being unclear - I mentioned "ashx" in the original post and I meant "ascx".  Let me try to be a bit more clear in my dilemma:  I don't have ANY markup in the user control.  It's just a .cs file, no markup, all dynamic.  Furthermore, I don't have access to alter the consumer, which in my example is the FileUpload.aspx page; I only know that it does have a "master" form embedded in it, and I can get at the form's control set if needed, using Page.FindControl("form1").  So ALL the code for implementation of the Async upload functionality needs to be contained in the fileUpload.cs - thus the control and all its widgets are created "dynamically".  

Again, I did my best to try to implement your new example that way, but end up with the same null reference error when calling managerproxy.AjaxSettings.AddAjaxSetting(...).   

Thanks again and looking forward to your reply,
Justyn

Latest Version of UploadControl.cs:
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace TelerikApp.Controls
{
    public class UploadControl : WebControl
    {
        private Button _btUpload = new Button();
        private RadAsyncUpload _fiInput = new RadAsyncUpload();
        private DropDownList _DdDocumentTypes = null;
        private RadAjaxManager _ajaxManager = null;
        RadAjaxManagerProxy managerproxy = new RadAjaxManagerProxy();
 
 
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
            managerproxy.ID = "RadAjaxManagerProxy1";
            this.Controls.Add(managerproxy);
 
 
            ScriptManager scriptManager = new ScriptManager();
            scriptManager.ID = "scriptManager";
            this.Controls.Add(scriptManager);
        }
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);  
 
            this._ajaxManager = new RadAjaxManager();
            this._ajaxManager.ID = "_ajaxManager";
            //this.Controls.Add(this._ajaxManager);
            this.Page.FindControl("form1").Controls.Add(this._ajaxManager);
 
            this._DdDocumentTypes = new DropDownList();
            this._DdDocumentTypes.ID = "DDLDocumentTypes";
            this._DdDocumentTypes.EnableViewState = false;
            this._DdDocumentTypes.AutoPostBack = false;
            this._DdDocumentTypes.Items.Add(new ListItem("type1"));
            this._DdDocumentTypes.Items.Add(new ListItem("type2"));
 
            this._fiInput.ID = "FileInput";
            this._fiInput.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;
            this._fiInput.FileUploaded += FileUploaded;
            //_ajaxManager.AjaxSettings.AddAjaxSetting(_btUpload, _fiInput);
 
            this._btUpload.ID = "UploadButton";
            //this._btUpload.Command += new System.Web.UI.WebControls.CommandEventHandler(Upload_Command);
            this._btUpload.CausesValidation = false;
            this._btUpload.Text = "Upload";
 
            DataBind();
 
 
            this.Controls.Add(this._DdDocumentTypes);
            this.Controls.Add(this._fiInput);
            this.Controls.Add(this._btUpload);
            managerproxy.AjaxSettings.AddAjaxSetting(_btUpload, _fiInput);
        }
 
        private void FileUploaded(object sender, FileUploadedEventArgs e)
        {
 
        }
 
    }
 
}


0
JD
Top achievements
Rank 1
answered on 06 Feb 2014, 07:43 PM
Shinu, 
I've cleaned up the code and now am REALLY close.  You will see several lines commented with "switch" - when those are reversed to where the RadAjaxManager is in the .aspx file everything works (but this isn't an option for me).  If I do the same thing inside the .cs file (which is what I have to do since I don't have access to the .aspx), I get the null reference error.  Basically I need a way to attach the AjaxManager from the UserControl, not from the .aspx.

We are ALMOST in business!  Thanks for sticking with this issue.

fileUpload.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="fileUpload.aspx.cs" Inherits="TelerikApp.fileUpload" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
     
    </div>
    </form>
</body>
</html>


fileUpload.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
using TelerikApp.Controls;
 
namespace TelerikApp
{
    public partial class fileUpload : System.Web.UI.Page
    {
        protected WebControl _DivPageContent = new WebControl(HtmlTextWriterTag.Div);
 
        protected void Page_Init(object sender, EventArgs e)
        {
 
            AddFrameWorkContent(new UploadControl());
            _DivPageContent.ID = "_DivPageContent";
            this.form1.Controls.Add(_DivPageContent);
 
            //RadAjaxManager manager = new RadAjaxManager();  //switch
            //manager.ID = "RadAjaxManager1";                 //switch
            //this.form1.Controls.Add(manager);               //switch
        }
 
        public void AddFrameWorkContent(object obj)
        {
            this._DivPageContent.Controls.Add((Control)obj);
        }
    }
}

UploadControl.cs:
using System;
using System.Threading;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace TelerikApp.Controls
{
    public class UploadControl : WebControl
    {
        private RadButton _btUpload = new RadButton();
        private RadAsyncUpload _fiInput = new RadAsyncUpload();
        private DropDownList _DdDocumentTypes = null;
        private Label _lbl = new Label();
        private RadAjaxManagerProxy managerproxy = new RadAjaxManagerProxy();
        private RadAjaxManager _ajaxManager = new RadAjaxManager();
 
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
 
            this._ajaxManager.ID = "_ajaxManager";                              //switch
            this.Page.FindControl("form1").Controls.Add(this._ajaxManager);     //switch
 
            managerproxy.ID = "RadAjaxManagerProxy1";
            this.Controls.Add(managerproxy);
 
            ScriptManager scriptManager = new ScriptManager();
            scriptManager.ID = "scriptManager";
            this.Controls.Add(scriptManager);
        }
 
        protected override void OnLoad(EventArgs e)
        {
            base.OnLoad(e);  
 
            this._lbl.ID = "_lbl";
            this._lbl.Text = "Nothing";
 
            this._DdDocumentTypes = new DropDownList();
            this._DdDocumentTypes.ID = "DDLDocumentTypes";
            this._DdDocumentTypes.EnableViewState = false;
            this._DdDocumentTypes.AutoPostBack = false;
            this._DdDocumentTypes.Items.Add(new ListItem("type1"));
            this._DdDocumentTypes.Items.Add(new ListItem("type2"));
 
            this._fiInput.ID = "FileInput";
            this._fiInput.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;
            this._fiInput.FileUploaded += FileUploaded;
 
            this._btUpload.ID = "UploadButton";
            this._btUpload.CausesValidation = false;
            this._btUpload.Text = "Upload";
 
            DataBind();
 
            this.Controls.Add(this._DdDocumentTypes);
            this.Controls.Add(this._fiInput);
            this.Controls.Add(this._btUpload);
            this.Controls.Add(this._lbl);
            managerproxy.AjaxSettings.AddAjaxSetting(_btUpload, _fiInput);  //error!
            managerproxy.AjaxSettings.AddAjaxSetting(_btUpload, _lbl);
            //_ajaxManager.AjaxSettings.AddAjaxSetting(_btUpload, _fiInput); //error!
        }
 
        private void FileUploaded(object sender, FileUploadedEventArgs e)
        {
            Thread.Sleep(2000);
            _lbl.Text = "Uploaded " + e.File.FileName + " type: " + this._DdDocumentTypes.SelectedValue;
        }
 
    }
 
}
0
JD
Top achievements
Rank 1
answered on 06 Feb 2014, 11:55 PM
Mission Accomplished!  The issue boiled down to the ScriptManager not being declared BEFORE the RadAjaxManager.  Thanks for all your help, Shinu!  This is now a working example of Async uploading (partial postback only) in a dynamically-created user control.

Here is the final version of UploadControl.cs.  The other files have not changed.
using System;
using System.Threading;
using System.Web.UI;
using System.Web.UI.WebControls;
using Telerik.Web.UI;
 
namespace TelerikApp.Controls
{
    public class UploadControl : WebControl
    {
        private RadButton _btUpload = new RadButton();
        private RadAsyncUpload _fiInput = new RadAsyncUpload();
        private DropDownList _DdDocumentTypes = null;
        private Label _lbl = new Label();
        private RadAjaxManager _ajaxManager = new RadAjaxManager();
 
        protected override void OnInit(EventArgs e)
        {
            base.OnInit(e);
 
            ScriptManager scriptManager = new ScriptManager();
            scriptManager.ID = "scriptManager";
            this.Page.Form.Controls.Add(scriptManager);
 
            this._ajaxManager.ID = "_ajaxManager";          
            this.Page.Form.Controls.Add(this._ajaxManager);     
 
            this._lbl.ID = "_lbl";
            this._lbl.Text = "Nothing";
 
            this._DdDocumentTypes = new DropDownList();
            this._DdDocumentTypes.ID = "DDLDocumentTypes";
            this._DdDocumentTypes.EnableViewState = false;
            this._DdDocumentTypes.AutoPostBack = false;
            this._DdDocumentTypes.Items.Add(new ListItem("type1"));
            this._DdDocumentTypes.Items.Add(new ListItem("type2"));
 
            this._fiInput.ID = "FileInput";
            this._fiInput.MultipleFileSelection = Telerik.Web.UI.AsyncUpload.MultipleFileSelection.Disabled;
            this._fiInput.FileUploaded += FileUploaded;
 
            this._btUpload.ID = "UploadButton";
            this._btUpload.CausesValidation = false;
            this._btUpload.Text = "Upload";
 
            DataBind();
 
            this.Controls.Add(this._DdDocumentTypes);
            this.Controls.Add(this._fiInput);
            this.Controls.Add(this._btUpload);
            this.Controls.Add(this._lbl);
 
        }
 
        protected override void OnPreRender(EventArgs e)
        {
            base.OnPreRender(e);
 
            _ajaxManager.AjaxSettings.AddAjaxSetting(_btUpload, _fiInput);
            _ajaxManager.AjaxSettings.AddAjaxSetting(_btUpload, _lbl);
 
        }
 
        private void FileUploaded(object sender, FileUploadedEventArgs e)
        {
            Thread.Sleep(2000);
            _lbl.Text = "Uploaded " + e.File.FileName + " type: " + this._DdDocumentTypes.SelectedValue;
        }
 
    }
 
}
Tags
AsyncUpload
Asked by
JD
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 2
JD
Top achievements
Rank 1
Share this question
or