Gridview inside UpdatePanel on ModalDialog not upd

2019-08-23 03:18发布

问题:

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);
            }
        }
    }
}