DevExpress ASPxUploadControl 使用示例 demo

全面使用DevExpress做文章管理，涉及附件上传。思路：使用ASPxUploadControl上传（因为它有progresspanel，而且可以多文件上传），点击上传时用session存储附件结构（AttachmentInfo）信息，同时更新上传附件列表（AspxListBox），直至整体文章提交才真正根据AttachmentInfo中存储的各种附件状态（exist/delete/add)上传或者删除附件。

界面如下图所示：

其中涉及技术问题：

1、ASPxUploadControl基础使用。ASPxUploadControl采用异步提交，帮助中说两种提交方式：自动（无论当前页中任何控件激活PostBack事件，而且在所有控件属性还原之前提交事件就会被执行，因此获取不到其他控件属性值）手动 （通过客户端在ASPxButton的ClientSideEvents中调用UploadControl.UploadFile();）。无论使用何种提交方式，最终都将激活服务器端FileUploadComplete事件，所以可以在该事件中处理事情。

2、点击上传同时将新添加的附件信息加入AspxListBox和session中。

    （1）点击【上传】无法获取文件说明。

    （2）点击【上传】后无法更新已传文件列表。

    （3）点击【完成】或【删除已有】（AutoPostBack=true）会触发FileUploadComplete事件

解决方法：

 1、DevExpress提供的例子比较详细，额外的Client端涉及的Properties和Method可以到官网帮助：http://documentation.devexpress.com/#AspNet/DevExpressWebASPxUploadControlScriptsASPxClientUploadControlMembersTopicAll   查看，这里面分成客户端（client）和服务器端两类，很详细。

2、（1）在问题1中提到FileUploadComplete事件是callback，所以无法获取任何控件的属性都为null或者空，参考了一下国外的一种解决方式（原文地址）。思路：使用AspxCallback。点击【上传】按钮调用callback，在服务器端Callback事件中获取各种控件属性值，然后用结构存储多个信息放在Session中。然后在 AspxCallback的客户端CallbackComplete事件中调用UploadControl.UploadFile(); 。之后FileUploadComplete事件中调用刚才的Session就可以了。具体示例代码如下：

This is my ASP.net webform:

<%@ Control Language="C#"AutoEventWireup="true"CodeBehind="AddPortfolioEvidenceControl.ascx.cs"Inherits="MyApplication.Web.RegisteredUsers.Portfolios.AddPortfolioEvidenceControl"%>

<%@ Register Assembly="DevExpress.Web.v8.2,Version=8.2.3.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1"

   Namespace="DevExpress.Web.ASPxCallback"TagPrefix="dxcb" %>

<%@ RegisterAssembly="DevExpress.Web.ASPxEditors.v8.2, Version=8.2.3.0, Culture=neutral,PublicKeyToken=9b171c9fd64da1d1"

   Namespace="DevExpress.Web.ASPxEditors"TagPrefix="dxe" %>

<%@ Register Assembly="DevExpress.Web.v8.2,Version=8.2.3.0, Culture=neutral, PublicKeyToken=9b171c9fd64da1d1"

   Namespace="DevExpress.Web.ASPxUploadControl"TagPrefix="dxuc" %>

<%@ Reference VirtualPath="~/Default.master"%>

   

<dxcb:ASPxCallback ID="CallbackComplete" ClientInstanceName="Callback1"runat="server" OnCallback="CallbackComplete_Callback">

    <ClientSideEventsCallbackComplete="function(s, e) {uplImage.UploadFile();}" />

</dxcb:ASPxCallback>

<table>

<tr>

<td>Description:</td>

<td>

    <dxe:ASPxTextBoxID="txtEvidenceName2" runat="server" Width="400px">

    </dxe:ASPxTextBox>

</td>

</tr>

<tr>

<td>Valid From:</td>

<td>

<dxe:ASPxDateEdit ID="dtpValidFrom" runat="server"ClientInstanceName="dtpValidFrom" />   

</td>

</tr>

<tr>

<td>Valid To:</td>

   

<td>

<dxe:ASPxDateEdit ID="dtpValidTo" runat="server"ClientInstanceName="dtpValidTo" />

</td>

</tr>

<tr>

<td>File:</td>

<td>

<dxuc:ASPxUploadControl ID="uplImage" runat="server"ClientInstanceName="uplImage"

    Size="35"OnFileUploadComplete="uplImage_FileUploadComplete">

    <ClientSideEventsFileUploadComplete="function(s, e) {refreshTabControl(); }"  />

</dxuc:ASPxUploadControl>

</td>

</tr>

<tr>

<td colspan="2">

<dxe:ASPxButton ID="btnUpload" runat="server"AutoPostBack="False" Text="Upload"

        ClientInstanceName="btnUpload"Width="100px">

    <ClientSideEventsClick="function(s, e) { Callback1.PerformCallback(); }" />

</dxe:ASPxButton>

</td>

</tr>

</table>

 

This is my code behind: 

using System;

using System.Drawing;

using DevExpress.Web.ASPxUploadControl;

using System.Web.UI;

using MyApplication.DAL.EntityClasses;

namespace MyApplication.Web.RegisteredUsers.Portfolios

{

    public partial classAddPortfolioEvidenceControl : MyAppUserControlBase

    {

        protected voidCallbackComplete_Callback(object source,DevExpress.Web.ASPxCallback.CallbackEventArgs e)

        {

            PortfolioEvidenceBaseEntity evidence =new PortfolioEvidenceBaseEntity();

           evidence.Name = txtEvidenceName2.Text;

           evidence.ValidFrom = dtpValidFrom.Date;

           evidence.ValidTo = dtpValidTo.Date;           

            Session["newUploadedEvidence"] =evidence;           

        }

        protected voiduplImage_FileUploadComplete(object sender, FileUploadCompleteEventArgs e)

        {

           e.CallbackData = SavePostedFile();

        }

        protected stringSavePostedFile()

        {

            if(uplImage.IsValid && uplImage.HasFile)

            {

               PortfolioEvidenceBaseEntity evidence =(PortfolioEvidenceBaseEntity)Session["newUploadedEvidence"];               

                try

                {

                   stringresFileName = MapPath(UploadDirectory) + uplImage.fileName;

                  evidence.FileName =  resFileName;

                  evidence.FileType = uplImage.PostedFile.ContentType;

                  uplImage.SaveAs(evidence.FileType);

                }

                catch

                {

                   Session.Remove("newUploadedEvidence");

                   return "There was an error uploading file";

                }

               Session.Remove("newUploadedEvidence");

               evidence.Save();

               SelectedPortfolioItem.PorfolioEvedenceId = evidence.Id;

               SelectedPortfolioItem.Save();

                return"Completed";               

            }

            return "No valid file found";

        }

    }

}

 

2、（2）在ASPxUploadControl中设置

<ClientSideEvents FileUploadComplete="function(s, e) {listAttachment.PerformCallback('0');}" />

当上传文件结束后通过callback方式调用服务器protected void listAttachment_Callback(object sender, DevExpress.Web.ASPxClasses.CallbackEventArgsBase e)，在该事件中对AspxListbox（ listAttachment）数据绑定。但要注意这个事件在任何PostBack发生的时候都会被触发。

2、（3）ASPxUploadControl的Editor里只要有文件地址，在PostBack的时候就会触发FileUploadComplete事件，由于这个事件是callback的，又没办法用变量控制是否执行。因此不如从客户端角度出发，只要在PostBack的时候ASPxUploadControl的Editor里没有文件地址就行了，所以只需在那些当前页中AutoPostback=true的控件中调用清空文本Method就可以了，示例代码如下：

<dx:ASPxButton ID="btnOk_Upload" runat="server" Text=" 完 成 " OnClick="btnOk_Upload_Click">

           <ClientSideEvents Click="function(s, e) { UploadControl.ClearText(); }" />
</dx:ASPxButton>

总结：用了一天的事件做这个事情，好多问题国内网站查不到，都是抄的DevExpress示例，都实现了还是比较高兴。现在csdn怎么拷过来的文字回车符都不认呢，还必须放到word中重新编辑，怎么想的。