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

hec6srdp  于 12个月前  发布在  .NET
关注(0)|答案(1)|浏览(94)

我有一个父页面,它包含一个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绑定上放置断点时,datatable会反映新插入的行。但gridview不会用它刷新。

r7s23pms

r7s23pms1#

好了,我们该怎么做呢?最大的问题是我们真的不知道你弹出了什么样的对话框。
我数了一下,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();
        }
    }


好了,上面,我们现在有了这个:
x1c 0d1x的数据
并注意上面的普通简按钮-添加酒店。
我们喜欢大多数对话框系统,现在必须添加我们的“添加酒店”标记。一个简单的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>


(note how 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();
        }
    }


所以最后的结果看起来是这样的:



如果我再加一句,我们就得到:



然而,上面的方法只是10,000种方法中的一种,我选择使用jQuery.UI,正如前面提到的,我不知道你正在或曾经使用10,000种可能的选择和选项中的哪一种来弹出提示对话框,因为你没有与我们分享。
现在,我在这里是零不安-但我最肯定的是给你一个很大的推动,就如何在这里问更好的问题。
上面的内容至少为您提供了一个工作设计模式,您可以使用该模式弹出一个对话框,然后提示用户添加行,然后非常重要的是重新加载网格以显示刚刚添加的行。
上面有一些很棒的想法--你可以在未来的几年里使用它们。祝你好运!
编辑:
好的,新的例子是弹出页面是一个DIFFLENT页面。
因此,我们有一个名为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>


请注意,当点击cancel按钮时,它实际上会调用js代码来关闭对话框,但要关闭的js代码仍然保留在调用页面上。现在,这可以正常工作了,因为第二页中的add代码会跳转回原始页面。因此,第二页上的Add按钮看起来像这样:

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页。

相关问题