关闭子页面后父页面中的Gridview不刷新 - ASP.NET WEB APP

Posted

技术标签:

【中文标题】关闭子页面后父页面中的Gridview不刷新 - ASP.NET WEB APP【英文标题】:Gridview in parent page is not refreshing after closing child page - ASP.NET WEB APP 【发布时间】:2021-10-19 00:31:57 【问题描述】:

我有一个父页面,它包含一个gridview 和一个aspx 按钮。当用户单击此按钮时,将弹出一个子页面作为模式。从子页面插入数据后,它应该关闭并刷新父页面。因此,父页面上的 gridview 应该显示插入的数据。但是使用下面的代码gridview并不刷新。

Parent.aspx 页面:

if (!IsPostBack)

    string sqlquery=""//query here
    SqlDataAdapter da = null;
    da = new SqlDataAdapter(sqlquery);
    DataTable dt = new DataTable();
    da.Fill(dt);
    dt.AcceptChanges();
    gv_dept.DataSource = null;
    gv_dept.DataSource = dt;
    gv_dept.DataBind();  
    update_gv.Update();

  

<a href="#" id="toolbar_day2" onclick="create();">
                 Add New</a>
 <div align="center">
           <asp:UpdatePanel ID="update_gv" runat="server" UpdateMode="Conditional">
      <ContentTemplate>
              <asp:GridView ID="gv_dept" runat="server" AutoGenerateColumns="False"   
                GridLines="Both"  DataKeyNames="dept_id">                     
    <Columns>
      <asp:BoundField DataField="dept_name" HeaderText="Name" /> 
    </Columns>
    </asp:GridView>
    </ContentTemplate>
    </asp:UpdatePanel>
    </div>

JS:

function create(start, end, resource) 
    createModal().showUrl('Child.aspx');

function createModal() 
    var modal = new DayPilot.Modal();
    modal.closed = function () 
        if (this.result && this.result.refresh) 
            dp_day.commandCallBack("refresh",  message: this.result.message );
            dp_week.commandCallBack("refresh",  message: this.result.message );
            dp_month.commandCallBack("refresh",  message: this.result.message );
        
        dp_day.clearSelection();
        dp_week.clearSelection();
        dp_month.clearSelection();
    ;

    return modal;

DayPilot.Modal = function() 

        // default values
        this.autoStretch = true;  // height will be increased automatically to avoid scrollbar, until this.maxHeight is reached
        this.autoStretchFirstLoadOnly = false;
        this.border = "10px solid #008080";
        this.corners = 'Rounded';
        this.className = null;
        this.dragDrop = true;
        this.height = 650;  // see also autoStretch
        this.maxHeight = null; // if not set, it will stretch until the bottom space is equal to this.top
        this.opacity = 30;
        this.scrollWithPage = true;  // modal window will scroll with the page
        this.top = 3;
        this.useIframe = true; // only for showhtml()
        this.width = 880;
        this.zIndex = null;
   
     

Child.aspx 页面:

protected async void ButtonOK_Click(object sender, EventArgs e)
    
//Inserting data here.
  Hashtable ht = new Hashtable();
            ht["refresh"] = "yes";
            ht["message"] = "Created.";
            Modal.Close(this, ht);
     Page.ClientScript.RegisterStartupScript(this.GetType(), "RefreshParentPage", "<script language='javascript'>RefreshParentPage();</script>");

function RefreshParentPage() 
        window.location.href="Parent.aspx";

在 gridview 绑定上放置断点时,数据表会反映新插入的行。但是gridview并没有刷新它。

【问题讨论】:

嗯,我没有看到标记,也没有看到当您单击添加按钮时运行的按钮代码,以及该弹出窗口的工作原理。假设在该弹出窗口中单击按钮 ok 按钮会添加到表中,然后相同的代码绑定 gv 以显示新行。但是,我只是将您的页面加载移动到页面加载(是 postback = false)然后可以调用的例程,然后在将行添加到数据库表后可以调用相同的例程。但是,是的,作为一般规则,您必须重新加载/重新绑定网格才能显示新行。 @AlbertD.Kallal 抱歉没听懂你说的内容 我的意思是你没有显示你的按钮代码,以及你如何弹出那个对话框——所以我们只能猜测这里发生了什么。 【参考方案1】:

好的,我们如何做到这一点。 最大的问题是我们真的不知道你在弹出什么样的对话。

我数了一下,我们可以去抓取 150 种不同的对话实用程序?

但是,让我们使用更流行的一种。 (jQuery.UI)。由于我们都经常使用 jQuery,不妨将 jQuery.UI 添加到您的应用程序中。

但是,任何类型的对话系统都可以工作。

所以,假设我们有一个网格,这样说:

      <asp:GridView ID="MyGrid" runat="server" CssClass="table table-hover" 
          DataKeyNames="ID" AutoGenerateColumns="false" >

        <Columns>
           <asp:BoundField DataField="FirstName" HeaderText="FirstName"  />
           <asp:BoundField DataField="LastName" HeaderText="Last Name" />
           <asp:BoundField DataField="HotelName" HeaderText="Hotel Name" />
           <asp:BoundField DataField="City" HeaderText="City" />
           <asp:BoundField DataField="Province" HeaderText="Province" />
           <asp:CheckBoxField DataField="Active" HeaderText="Active" />

        </Columns>
    
      </asp:GridView>
    <br />
    <asp:Button ID="cmdAdd" runat="server" Text="Add Hotel" OnClientClick="popadd();return false;"/>

以及我们加载此网格的代码:

   protected void Page_Load(object sender, EventArgs e)
    
        if (IsPostBack == false)
        
            LoadGrid();
        
    

    public void LoadGrid()
    
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * From tblHotels ORDER by HotelName",
            new SqlConnection(Properties.Settings.Default.TEST3)))
        
            // now load grid
            cmdSQL.Connection.Open();
            MyGrid.DataSource = cmdSQL.ExecuteReader();
            MyGrid.DataBind();
        
    

好的,以上,我们现在有了这个:

并注意上面简单的简按钮 - 添加酒店。

我们喜欢大多数对话系统,现在必须添加我们的“添加酒店”标记。 一个简单的 div,带有一些文本框,当然还有一个添加或取消按钮。

所以,我有这个简单的标记:

    <div id="mypop" style="display:none">
        <br />
        <div style="text-align:right">
        <p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
        <p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
        <p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
        <p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
        <p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
        <p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>

        <p>
            <asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
            <asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
                OnClientClick="MyClose();return false"/>

        </p>
        </div>
    </div>

(注意 display = none - 对话框 (jQuery.UI) 将为我们打开此对话框的显示。

现在是弹出按钮的 JS 代码。

     <script>

            function popadd() 
                var mydiv = $('#mypop')
                mydiv.dialog(
                    autoOpen: false, modal: true, title: 'Add Hotel', width: '400px',
                    position:  my: 'top', at: 'top+150' ,
                    closeText: ''
                    
                );
                // Open the dialog
                mydiv.parent().appendTo($("form:first"))
                mydiv.dialog('open')
            

            function MyClose() 

                var mydiv = $('#mypop')
                mydiv.dialog('close')

            
        </script>

现在我们简单地编写一些代码来向数据表中添加一行。有无数种方法可以做到这一点,但实际上我经常使用数据行,因为它为我节省了大量的 SQL 和参数 - 这种方法可以节省大量时间。

感觉就像 MS Access 或旧 FoxPro 时代 - 易于编写代码!!!

所以,在对话框中,我们有两个按钮。取消按钮只是关闭对话框。 但是 cmdAdd,也就是后面的平面简代码,看起来像这样:

   protected void cmdAddOk_Click(object sender, EventArgs e)
    
        using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
                        new SqlConnection(Properties.Settings.Default.TEST3)))
        
            cmdSQL.Connection.Open();
            DataTable rst = new DataTable();
            rst.Load(cmdSQL.ExecuteReader());
            SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
            SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
            DataRow OneRow = rst.NewRow();

            OneRow["FirstName"] = txtFirst.Text;
            OneRow["LastName"] = txtLast.Text;
            OneRow["HotelName"] = txtHotel.Text;
            OneRow["City"] = txtCity.Text;
            OneRow["Province"] = txtProvince.Text;
            OneRow["Active"] = chkActive.Checked;
            rst.Rows.Add(OneRow);
            dUpdate.Update(rst);

            // now refresh grid to show new row
            LoadGrid();
        
    

所以最终的结果是这样的:

如果我可以添加,那么我们得到这个:

这里有一些建议:

您不需要发布大量 HTML,但您确实需要分享您是如何弹出该对话框的 - 只是简单的愚蠢让这里的读者不得不猜测。

你需要显示你的按钮添加代码和后面的代码来添加行。

同样,不需要大量代码,但至少在这里做半生不熟的努力。

但是,以上是 10,000 种方法之一,我选择为此使用 jQuery.UI,并且如前所述,我不知道您正在或曾经使用的 10,000 种可能的选择和选项中的哪一种会弹出您的提示对话框,因为您未能与我们分享。

现在,我在这里零烦恼 - 但我肯定会大力推动如何在这里提出更好的问题。

以上内容至少应该为您提供一个有效的设计模式,可用于弹出对话框,然后提示用户,添加行,然后非常重要的是重新加载网格以显示刚刚添加的行.

上面有一些很棒的想法 - 您可以在未来几年使用它们。祝你好运!

编辑:


好的,新的例子是弹出页面是一个不同的页面。

所以我们有一个名为 AddHotelPop.aspx 的页面。

看起来像这样:

<form id="form1" runat="server">
    <div>
        <br />
        <div style="text-align:right">
        <p>Hotel Name:<asp:TextBox ID="txtHotel" runat="server"></asp:TextBox></p>
        <p>First Name:<asp:TextBox ID="txtFirst" runat="server"></asp:TextBox></p>
        <p>Last Name:<asp:TextBox ID="txtLast" runat="server"></asp:TextBox></p>
        <p>City:<asp:TextBox ID="txtCity" runat="server"></asp:TextBox></p>
        <p>Province:<asp:TextBox ID="txtProvince" runat="server"></asp:TextBox></p>
        <p>Is Active:<asp:CheckBox ID="chkActive" runat="server"></asp:CheckBox></p>

        <p>
            <asp:Button ID="cmdAddOk" runat="server" Text="Ok-add" OnClick="cmdAddOk_Click" />
            <asp:Button ID="cmdCancel" runat="server" Text="Cancel" Style="margin-left:25px"
                OnClientClick="MyClose();return false"/>
        </p>
        </div>
    </div>
</form>

请注意,当我们点击取消按钮时,实际上会调用 js 代码来关闭对话框 - 但要关闭的 js 代码仍保留在调用页面上。 现在可以了,因为第二页中的添加代码会跳回到我们的原始页面。所以第二页上的添加按钮看起来像这样:

   protected void cmdAddOk_Click(object sender, EventArgs e)
    

        using (SqlCommand cmdSQL = new SqlCommand("SELECT * FROM tblHotels WHERE ID = 0",
                        new SqlConnection(Properties.Settings.Default.TEST3)))
        
            cmdSQL.Connection.Open();
            DataTable rst = new DataTable();
            rst.Load(cmdSQL.ExecuteReader());
            SqlDataAdapter dUpdate = new SqlDataAdapter(cmdSQL);
            SqlCommandBuilder sUpdate = new SqlCommandBuilder(dUpdate);
            DataRow OneRow = rst.NewRow();

            OneRow["FirstName"] = txtFirst.Text;
            OneRow["LastName"] = txtLast.Text;
            OneRow["HotelName"] = txtHotel.Text;
            OneRow["City"] = txtCity.Text;
            OneRow["Province"] = txtProvince.Text;
            OneRow["Active"] = chkActive.Checked;
            rst.Rows.Add(OneRow);
            dUpdate.Update(rst);

            Response.Redirect("GridViewFun.aspx");
        
    

所以现在我们的第一页?它只是加载网格 - 代码与以前相同。

但是,现在我们的弹出代码和标记是这样的:

    <asp:Button ID="cmdAdd" runat="server" Text="Add Hotel" OnClientClick="popadd();return false;"/>

    </div>


    <div id="mypop" style="display:none">
    </div>

        <script>

            function popadd() 
                var mydiv = $('#mypop')
                mydiv.dialog(
                    autoOpen: false, modal: true, title: 'Add Hotel', width: '400px',
                    position:  my: 'top', at: 'top+150' ,
                    closeText: ''
                    
                );
                // Open the dialog
                // mydiv.parent().appendTo($("form:first"))
                mydiv.load("AddHotelPop.aspx")
                mydiv.dialog('open')
            

            function MyClose() 

                var mydiv = $('#mypop')
                mydiv.dialog('close')

            
        </script>

现在请注意 div 弹出是如何为空白的。我们将加载并弹出第二个其他页面到该 div 中进行显示。

结果现在看起来一样了。唯一真正的区别是第二页中的添加按钮会重定向回第一页。

因此我们的页面现在将首次加载 - 而不是回发,我们的网格将再次重新加载。

如前所述,我们在上面使用 jQuery.UI,并且 .Load() 功能允许人们将整个其他页面拉 + 加载到该 div 中。

UI 和屏幕截图的外观和工作方式与上述屏幕截图相同,但对话框弹出页面现在是一个单独的 aspx 页面。

【讨论】:

很抱歉没有包含弹出模式的代码。在您的代码中,从同一页面弹出一个 div。我以前做过。它将正确刷新gridview。但我的问题是弹出新的 aspx 页面(child.aspx)。在 ButtonOk click 结束时,我将关闭子窗口并重定向到 ParentPage。但是gridview并不令人耳目一新。现在我使用计时器来管理它来刷新gridview。但我知道这不是正确的解决方案。 好的,你可以从另一个页面弹出弹出窗口(但是,正如你所看到的,我们需要那个细节——它是一个巨大的!!!)。现在我们必须处理取消(关闭对话框,或保存 ok 按钮 - 所以关闭页面现在成为一个挑战。但是,jQuery.UI 将弹出另一个页面。我将编辑我的当我有时间时编写代码 - 并添加一个像上面一样工作的示例 - 但弹出窗口是另一个页面 - 但这是一个全新的、完全不同的蜡球 - 以及一个稍微不同的解决方案。 要弹出不同的网页?那么除非你在 iframe 中弹出该页面,否则你不能有回发。在 iframe 里面?您弹出的那个页面无法关闭对话框。无法在不同的网页之间进行对话。如果你能做到这一点,那么当你来访问我的网站时,我会打开你的其他网页——比如你的银行业务。现在,如果其他页面只是标记,那么您可能可以让该页面正常工作 - 但如果该其他页面需要回发,那么您将返回 iframe,并且您对对话页面的方式有一个真正的挑战关闭。 好的,如前所述,请参阅我的编辑 - 它现在可以通过加载第二页来工作,并且如果用户点击添加,它会重新刷新就好了。如果他们点击取消 - 对话框也会被关闭,很好。

以上是关于关闭子页面后父页面中的Gridview不刷新 - ASP.NET WEB APP的主要内容,如果未能解决你的问题,请参考以下文章

QT5怎样设置父窗口刷新时,不刷新子窗口?

子页面提交后刷新父页面问题

单击后关闭悬停子菜单而不刷新页面

mui关闭子页面刷新父页面

子窗口关闭,父窗口如何刷新

JS子页面自动关闭后刷新父页面