Xử lý Upload File với UpdatePanel (AJAX Enabled) và MultiView

**machao112** · 17-01-2011, 11:40 AM

Việc upload một file khá là đơn giản với UploadFile của sẳn của VS2008 nhưng nếu bạn để nó trong UpdatePanel (có nghĩa là sử dụng ScriptManager và UpdatePanel) sự việc trở nên khá là phức tạm và rắc rối (có thể nói là chuối ^^) tìm kiếm trên google thì cũng có khá nhiều trường hợp và các phương pháp đơn giản nhất được nói đến là dùng iframe nhưng mình thì không thích dùng iframe vì phải tốn 1 trang nữa.

Sau nhiều ngày ngâm cứu và thử nghiệm thì mình rút ra được 2 trường hợp và cách sử lý như sau:

Trường hợp số 1: FileUpload được đặt trong UpdatePanel và AJAX được bật

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click" Text="Upload" Width="128px" />

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
</asp:UpdatePanel>

Trường hợp này thì sử lý như sau:
Thêm một Triggers chú ý chỗ mình đánh dấu đỏ
vào phía sau thẻ

</ContentTemplate>

Trường hợp thứ 2 là khá đau đầu nhưng mình cũng đã tìm ra cách sử lý sau nhiều cách thử đó là: FileUpload được đặt trong UpdatePanel và AJAX được bật và sử dụng MultiView, View 1 được hiển thị mặc định, tạo một nút để mở View 2 lên, View 2 thì chứa UploadFile.

*** Có nghĩa là FileUpload không được hiển thị đầu tiên

Code trang upload.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="test_ajax_upload.aspx.cs" Inherits="admin_test_ajax_upload" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>
<asp:MultiView ID="MultiView1" runat="server" ActiveViewIndex="0">
<asp:View ID="View1" runat="server">
<asp:Button ID="Button1" runat="server" Text="Button" onclick="Button1_Click" />
</asp:View>

<asp:View ID="View2" runat="server">
<asp:FileUpload ID="FileUpload1" runat="server" />

<asp:Button ID="Button2" runat="server" Height="25px" onclick="Button2_Click" Text="Upload" Width="128px" />

<asp:Label ID="Label2" runat="server" Text="Label"></asp:Label>

</asp:View>
</asp:MultiView>

</ContentTemplate>

<Triggers>
<asp:PostBackTrigger ControlID="Button2" />
</Triggers>

</asp:UpdatePanel>
</div>
</form>
</body>
</html>

Code trang upload.aspx.cs

Mã:

using System;using System.Collections.Generic;using System.Linq;using System.Web;using System.Web.UI;using System.Web.UI.WebControls; public partial class admin_test_ajax_upload : System.Web.UI.Page{    protected void Page_Load(object sender, EventArgs e)    {        if (!IsPostBack)            MultiView1.ActiveViewIndex = 0;            this.Page.Form.Enctype = "multipart/form-data";    }        protected void Button2_Click(object sender, EventArgs e)    {                    HttpPostedFile file = FileUpload1.PostedFile;             string duongdan = Server.MapPath("~/Uploadews/img_cat/" + FileUpload1.FileName);            FileUpload1.SaveAs(duongdan);            string tam = "Bạn đã upload file: ";            tam += "Tên File: " + FileUpload1.FileName;            tam += "Loại file: " + file.ContentType;            tam += "File size: " + file.ContentLength;            tam += " Đường dẫn: " + duongdan;             Label2.Text = tam;            }    protected void Button1_Click(object sender, EventArgs e)    {        MultiView1.ActiveViewIndex = 1;    }}

Hy vọng giúp được ích nhiều cho những ai thiết kế website và nghiên cứu công nghệ AJAX.

View more random threads:

**hongphuc** · 22-01-2011, 04:46 PM

Code này liệu đã được gọi là ajax upload chưa? Nếu là ajax phải thể hiện được tiến trình upload file chứ ? Cái này mình thấy đơn giản chỉ là tải file vào thư mục thôi.

**tintin** · 23-01-2011, 09:06 AM

Gửi bởi tuantep

Code này liệu đã được gọi là ajax upload chưa? Nếu là ajax phải thể hiện được tiến trình upload file chứ ? Cái này mình thấy đơn giản chỉ là tải file vào thư mục thôi.

Mình cũng thấy như bạn. Cái này có vẻ chưa phải là ajax upload.

**caohoangnam114** · 24-01-2011, 04:13 PM

Rất hay đấy chứ. Nếu bạn upload ảnh mà để fileupload control trông updatePanel thì nếu không thực hiện như bạn trên trình bày thì khi bạn upload ành lên server thì muốn ảnh hiện trỏ lại ngay thì là vấn đề đau đầu đó

**datnguyen0312** · 27-01-2011, 09:53 AM

Ở đây mình không nói là code AJAX Upload, mình chỉ nói xử lý việc đưa UploadFile vào trong UpdatePanel và MultiView. Sau khi được được vào được thì việc phát triển thêm là việc của các bạn lập trình.

Chủ đề: Xử lý Upload File với UpdatePanel (AJAX Enabled) và MultiView

Công cụ Chủ đề

Tìm Chủ đề

Hiển thị

Xử lý Upload File với UpdatePanel (AJAX Enabled) và MultiView

View more random threads:

Quyền viết bài

"Chim" của chàng trai Việt thuộc...

Khám Phá Đa Dạng Sản Phẩm Xe Ô Tô...

Chất Lượng và Sáng Tạo: Kiến Trúc...

Tạo Dựng Không Gian Sống Hoàn Hảo:...

Giảm giá khi mua pallet nhựa Trà...