Cấp bậc tác giả:

DOTNET

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

Được viết bởi QuangIT ngày 21/09/2012 lúc 10:11 PM
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
  • 0
  • 2638

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


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, 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.


2 trường hợp và cách Xử 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" />

<br />


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


<br />


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

</ContentTemplate>

</asp:UpdatePanel>


Trường hợp này thì xử lý như sau:

Thêm một Triggers chú ý chỗ mình đánh dấu đỏ

vào phía sau thẻ


</ContentTemplate>


<Triggers>

<asp:PostBackTrigger ControlID="Button2" />

</Triggers>


Trường hợp thứ 2, cách xử 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" />


<br />


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


<br />


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


<br />

</asp:View>

</asp:MultiView>



</ContentTemplate>


<Triggers>

<asp:PostBackTrigger ControlID="Button2" />

</Triggers>


</asp:UpdatePanel>

</div>

</form>

</body>

</html>

Code trang upload.aspx.cs


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("~/../Upload/news/img_cat/" + FileUpload1.FileName);

FileUpload1.SaveAs(duongdan);

string tam = "Bạn đã upload file: ";

tam += "<br>Tên File: " + FileUpload1.FileName;

tam += "<br>Loại file: " + file.ContentType;

tam += "<br>File size: " + file.ContentLength;

tam += "<br> Đườ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.

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML