问题
I have a GridView inside an update panel, and a AsyncFileUpload (outside the Update Panel) that I am using to upload Images. All these are in a ASPX page called using the SHOWMODALDIALOG.
What I'm tying to achieve:
1. As soon as the file upload completes, the Update Panel updates, and the gridview displays the image the user just added.
The problems I'm facing:
1. The Gridview is not refreshing, even though I have a Databind event after the file is uploaded to the database. The Update Panel is getting refreshed through the __doPostBack('UpdatePanelID',' ') in a JS called by OnClientUploadComplete (I'm checking this through a Label showing current time in the Update Panel)
2. The ModalDialog is opening a new page whenever I click on 'Save Changes' or 'Cancel' button after adding an Image. If I just open the window and click these buttons, they work fine. I did try including <base target="_self" /> in the <head>, and finally settled with window.name="xxx" onload body.
Any help is appreciated. My code:
ASPX
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="RCMT0032.aspx.vb" Inherits="RCWKSHEET.RCMT0032" EnableEventValidation="false"%>
<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%>
<html>
<head>
<base target="RCMT0032" />
<title>RCMT0032</title>
<script type="text/javascript">
function readpasseddata() {
window.name = 'RCMT0032';
var rpt = window.dialogArguments;
document.getElementById("HiddenReport").value = rpt;
}
function UploadComplete(sender, args) {
__doPostBack('gvupd', '');
}
</script>
</head>
<body onload="readpasseddata()" >
<form id="Form1" method="post" runat="server" target="RCMT0032" >
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
<asp:AsyncFileUpload id="BrowserHidden" Width="1" runat="server" OnClientUploadComplete="UploadComplete" OnUploadedComplete="BrowserHidden_UploadedComplete"/>
<button class="ActionButton" id="btnSave" runat="server">Save & Exit</button>
<button class="ActionButton" id="btnClose" runat="serverCancel</button>
<asp:UpdatePanel id="gvupd" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:Label runat="server" ID="Label1" />
<asp:GridView id="GridView1" Runat="server" AutoGenerateColumns="False"
AllowPaging="false" EnableViewState="true" datakeynames="Seq">
<Columns>
<asp:TemplateField HeaderText="Comments">
<ItemTemplate><asp:TextBox ID="comments" Enabled="true" MaxLength="249" TextMode="MultiLine" Text='<%# Eval("Comments") %>'/>
</asp:TemplateField>
<asp:TemplateField HeaderText="Picture">
<ItemTemplate><asp:HyperLink id="PictHyper" runat="server" Target="_blank" ImageUrl='<%# String.Format("RCMT0033.aspx?report={0}&seq={1}", Eval("ReportNumber"), Eval("Seq"))%>' NavigateUrl='<%# String.Format("RCMT0034.aspx?report={0}&seq={1}", Eval("ReportNumber"), Eval("Seq"))%>' /></ItemTemplate></asp:TemplateField>
<asp:TemplateField HeaderText="Delete">
<ItemTemplate><asp:CheckBox runat="server" ID="DeleteCB" /></ItemTemplate>
</asp:TemplateField></Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
THE CODE BEHIND
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.LoaD
If Not IsPostBack Then
LoadData()
DataBind()
Else
With ViewState
_intReportNumber = CInt(.Item("Report"))
_strVendorNumber = CStr(.Item("VendorNumber"))
_strStatus = CStr(.Item("Status"))
End With
End If
End Sub
Public Sub LoadData()
//GET DATA INTO DATATABLE DT
GridView1.DataSource = dt
GridView1.DataBind()
Catch err As Exception
Throw err
End Try
End Sub
Protected Sub UploadData()
If BrowserHidden.PostedFile IsNot Nothing AndAlso BrowserHidden.PostedFile.FileName <> "" Then
Try
//UPLOAD STUFF
GridView1.DataBind()
Catch ex As Exception
End Try
End If
End Sub
Protected Sub btnClose_ServerClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnClose.ServerClick
canceladd()
ScriptManager.RegisterStartupScript(Page, Me.GetType(), "onclick", "window.open('','_self',''); window.close();", True)
End Sub
Protected Sub BrowserHidden_UploadedComplete(ByVal sender As System.Object, ByVal e As AjaxControlToolkit.AsyncFileUploadEventArgs)
UploadData()
End Sub
Protected Sub gvupd_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles gvupd.Load
Label1.Text = DateTime.Now.ToString()
End Sub
Protected Sub btnSave_ServerClick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles btnSave.ServerClick
FinalizeAdd()
Page.ClientScript.RegisterStartupScript(Me.GetType(), "onclick", "window.open('','_self',''); window.close();", True)
End Sub
回答1:
For your #2 issue, I don't think you can reload/refresh the modal window with either client side or server side script. To archive the same or similar result, you can have the upload control to close the modal window and return a value to indicate reopening is needed. then in the parent window, you can use a loop to open it as needed. if user clicks on close button on modal window or the X button on top right, the modal will not be reopened because it does not sent the "reopen" value back to parent.
ParentPage.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ParentPage.aspx.cs" Inherits="WebApplication1.ParentPage" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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>
<script type="text/javascript">
function popModal(){
var val = window.showModalDialog('ModalChild.aspx', '', '');
while (val == "reopen") {
val = window.showModalDialog('ModalChild.aspx', '', '');
}
}
</script>
</head>
<body>
<input type='button' value='Pop Modal' onclick='popModal();' />
</body>
</html>
ModalChild.aspx
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function closeAndReOpen(){
window.returlValue = "reopen";
window.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<div>
<asp:AsyncFileUpload ID="AsyncFileUpload1" runat="server" OnClientUploadComplete="closeAndReOpen();"
OnUploadedComplete="AsyncFileUpload1_UploadedComplete" />
<input type='button' value='Close' onclick='window.close();' />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" OnRowDataBound="GridView1_RowDataBound">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img runat="server" id="img" /></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="AsyncFileUpload1" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
ModalChild.aspx.cs
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;
using System.Web.UI.HtmlControls;
namespace WebApplication1
{
public partial class ModalChild: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
LoadGrid();
}
}
protected void LoadGrid()
{
var files = new DirectoryInfo(Server.MapPath("Data")).GetFiles("*.png");
GridView1.DataSource = files;
GridView1.DataBind();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
var fi = e.Row.DataItem as FileInfo;
var img = e.Row.FindControl("img") as HtmlImage;
img.Src = @"Data\" + fi.Name;
}
}
protected void AsyncFileUpload1_UploadedComplete(object sender, AjaxControlToolkit.AsyncFileUploadEventArgs e)
{
if (AsyncFileUpload1.PostedFile != null)
{
var savePath = Server.MapPath(@"Data\" + Guid.NewGuid().ToString() + ".png");
AsyncFileUpload1.SaveAs(savePath);
}
}
}
}
来源：https://stackoverflow.com/questions/11367732/gridview-inside-updatepanel-on-modaldialog-not-updating-after-asyncfileupload