A refresh is required to see the updated data.
If you want to get rid of the postback experience, you should wrap the whole thing in a update panel.
To trigger the postback the asp.net-friendly way, have a button on the page; hide it via css. And through js code you can trigger the click of this button.
Edit (code):
In short this is what I am accomplishing. I have put the Refresh button visible. It can be wrapped in a UpdatePanel if required.
WebForm1.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApp.PopupAdd.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>GridView Refresh Example</title>
<script>
function openPopup() {
open('popup.aspx','_blank', 'height=300,width=200')
}
function refreshPage() {
document.getElementById('btnRefresh').click();
}
</script>
</head>
<body>
<h2>GridView refresh example</h2>
<form id="form1" runat="server">
<div>
<asp:Button ID="btnRefresh" runat="server" Text="Refresh" OnClick="btnRefresh_Click" />
<asp:Button ID="Button1" runat="server" OnClientClick="javascript:openPopup()" Text="Add" UseSubmitBehavior="False" />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="Id" DataSourceID="SqlDataSource1">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" InsertVisible="False" ReadOnly="True" SortExpression="Id" />
<asp:BoundField DataField="StudentName" HeaderText="StudentName" SortExpression="StudentName" />
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:ConnectionString %>" SelectCommand="SELECT * FROM [Students]"></asp:SqlDataSource>
</div>
</form>
</body>
</html>
WebForm1.aspx.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp.PopupAdd
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnRefresh_Click(object sender, EventArgs e)
{
GridView1.DataBind();
}
}
}
popup.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="popup.aspx.cs" Inherits="WebApp.PopupAdd.popup" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script>
function update() {
window.opener.refreshPage();
window.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><asp:Button ID="Button1" runat="server" Text="Add" OnClick="Button1_Click" />
</div>
</form>
</body>
</html>
popup.aspx.cs:
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace WebApp.PopupAdd
{
public partial class popup : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object sender, EventArgs e)
{
var sql = "insert into students (studentname) values (@name)";
SqlConnection cxn = new SqlConnection();
cxn.ConnectionString = ConfigurationManager
.ConnectionStrings["ConnectionString"].ConnectionString;
var cmd = cxn.CreateCommand();
cmd.CommandText = sql;
cmd.Parameters.AddWithValue("@name", TextBox1.Text);
cxn.Open();
cmd.ExecuteNonQuery();
cxn.Close();
ClientScript.RegisterStartupScript(this.GetType(),"update", "update()", true);
}
}
}
The table I used is the a simple students table with fields id, studentname.
My earlier suggestion was to hide the refresh button with css. (style="visibility:hidden"
)