NEURONASOFT: ASP.NET - FileUpload desde ModalPopupExtender y UpdatePanel

Muchos piensan que esto no es posible: subir archivos al servidor desde un ModalPopup , el cual está dentro de un UpdatePanel, pues sí es posible.
Resumiendo, el código debe tener esta forma:
<UpdatePanel ChildrenAsTriggers="true">
<ContentTemplate>
<Panel>
FileUpload…+ El botón que subirá tu archivo y guardará tu información, mi botón se llama btnSave
Otros controles…
<Panel>
<ModalPopupExtender />
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
</UpdatePanel>
Y ese es el resumen. Como pueden observar, la novedad del updatepanel es que tiene la propiedad ChildrenAsTriggers=”true” y la otra novedad es que antes de que cierre el updatepanel, se ha añadido el tag triggers, como ven en la imagen muy claramente.
Vamos a ver el ejemplo mediante código, copien esto en una nueva página aspx:

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Subir archivos desde el modalpopup dentro un Updatepanel</title>
<style type="text/css">
*
{
font-family: Tahoma;
}
.modalPopup 
{
background-color:orange;
border-width:5px;
border-style:solid;
padding:3px;
}  

.modalBackground 
{
filter:alpha(opacity=50);
opacity:0.7;
}      
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<asp:HyperLink ID="hplOpenModal" NavigateUrl="javascript:;" 
runat="server">Mostrar ModalPopup</asp:HyperLink>
<asp:Panel ID="pnlFileAdd" runat="server" Style="display: none" 
CssClass="modalPopup" Height="100px" Width="300px">
<asp:FileUpload ID="FileUpload1" runat="server" />
<p>
<asp:Button ID="btnSave" runat="server" Text="Subir archivo" />
<asp:Button ID="btnCancel" runat="server" Text="Cancelar" />
</p>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" 
TargetControlID="hplOpenModal" PopupControlID="pnlFileAdd" 
BackgroundCssClass="modalBackground" CancelControlID="btnCancel" Y="100" />

</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnSave" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
</html>

Esto va en el código VB.NET:

Protected Sub btnSave_Click(sender As Object, e As EventArgs) Handles btnSave.Click

If FileUpload1.HasFile Then
FileUpload1.SaveAs(Server.MapPath("~/uploads/") & FileUpload1.FileName)
End If

End Sub

Se supone que en la raiz de la applicación hay una carpeta llamada Uploads, donde se guardará el archivo. Eso sería todo.
Espero que les sea de utilidad ;)

NEURONASOFT

Páginas

lunes, 8 de agosto de 2011

ASP.NET - FileUpload desde ModalPopupExtender y UpdatePanel

No hay comentarios.: