Subscribe
Please visit my new Web Site https://coderstechzone.com
For data driven web application most of the times we did this job. There are lot of way to handle this issue. Here i am trying to show you few process that how we can handle it. To describe this problem here i am using datatable instead of database since anyone can replace my code easily by his own data reader block. Let we have a requirement that a page contains list of suppliers. Below the supplier list client wants to add a link to add more suppliers like:
If user click on add more supplier link then the link open a popup to enter supplier details. After entering the supplier details when user click on the save button then system automatically save the data & close the popup as well as reflect the currently added row to the opener like:
So now we can start step by step. At first add a page named parentrefresh.aspx. Then add a gridview to display the existing suppliers. After the gridview we need to add a link button/html button to popup the window. So parentrefresh.aspx looks like:
<b>List of suppliers:</b>
<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" ">
<Columns>
<asp:BoundField DataField="Code" HeaderText="Code"></asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Name"></asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address"></asp:BoundField>
<asp:BoundField DataField="Contact" HeaderText="Contact no"></asp:BoundField>
</Columns>
</asp:GridView>
<asp:LinkButton runat="server" OnClientClick="window.open('childrefresh.aspx');return false;"
ID="lnkNew">Add more supplier
</asp:LinkButton>
<asp:GridView runat="server" ID="gvEdit" DataKeyNames="ID" AutoGenerateColumns="false" ">
<Columns>
<asp:BoundField DataField="Code" HeaderText="Code"></asp:BoundField>
<asp:BoundField DataField="Name" HeaderText="Name"></asp:BoundField>
<asp:BoundField DataField="Address" HeaderText="Address"></asp:BoundField>
<asp:BoundField DataField="Contact" HeaderText="Contact no"></asp:BoundField>
</Columns>
</asp:GridView>
<asp:LinkButton runat="server" OnClientClick="window.open('childrefresh.aspx');return false;"
ID="lnkNew">Add more supplier
</asp:LinkButton>
To read existing supplier data from database(here i use datatable for simplicity) we need to write few server side code in page load event. Codes:
if (!IsPostBack)
{
DataTable dtSupplier;
if (Session["dtSupplier"]==null)
{
//If not populated previously then we need to populate data. Otherwise we read from session.
dtSupplier = new DataTable("Supplier");
dtSupplier.Columns.Add(new DataColumn("ID", System.Type.GetType("System.UInt64")));
dtSupplier.Columns.Add(new DataColumn("Code"));
dtSupplier.Columns.Add(new DataColumn("Name"));
dtSupplier.Columns.Add(new DataColumn("Address"));
dtSupplier.Columns.Add(new DataColumn("Contact"));
dtSupplier.Rows.Add(1, "st0001", "S.R. Steel", "Uttara, Dhaka", "01711xxxxxx");
dtSupplier.Rows.Add(2, "ir0039", "Shadesh builders", "Rampura, Dhaka", "01711yyyyyy");
dtSupplier.Rows.Add(3, "cr0042", "Orchard confec.", "Shahabag, Dhaka", "01711zzzzzz");
dtSupplier.Rows.Add(4, "er0078", "Windblow", "Mirpur, Dhaka", "01711qqqqqq");
dtSupplier.Rows.Add(5, "bd0301", "Rahimkarim", "Badda, Dhaka", "01711oooooo");
Session["dtSupplier"] = dtSupplier;
}
else
dtSupplier = (DataTable)Session["dtSupplier"];
gvEdit.DataSource = dtSupplier;
gvEdit.DataBind();
}
{
DataTable dtSupplier;
if (Session["dtSupplier"]==null)
{
//If not populated previously then we need to populate data. Otherwise we read from session.
dtSupplier = new DataTable("Supplier");
dtSupplier.Columns.Add(new DataColumn("ID", System.Type.GetType("System.UInt64")));
dtSupplier.Columns.Add(new DataColumn("Code"));
dtSupplier.Columns.Add(new DataColumn("Name"));
dtSupplier.Columns.Add(new DataColumn("Address"));
dtSupplier.Columns.Add(new DataColumn("Contact"));
dtSupplier.Rows.Add(1, "st0001", "S.R. Steel", "Uttara, Dhaka", "01711xxxxxx");
dtSupplier.Rows.Add(2, "ir0039", "Shadesh builders", "Rampura, Dhaka", "01711yyyyyy");
dtSupplier.Rows.Add(3, "cr0042", "Orchard confec.", "Shahabag, Dhaka", "01711zzzzzz");
dtSupplier.Rows.Add(4, "er0078", "Windblow", "Mirpur, Dhaka", "01711qqqqqq");
dtSupplier.Rows.Add(5, "bd0301", "Rahimkarim", "Badda, Dhaka", "01711oooooo");
Session["dtSupplier"] = dtSupplier;
}
else
dtSupplier = (DataTable)Session["dtSupplier"];
gvEdit.DataSource = dtSupplier;
gvEdit.DataBind();
}
Now we need to add another page named childrefresh.aspx which will be our popup window. If you look at the first page link button click event then you found this page url as a popup. Find the child page html contents from below:
The onunload event basically refresh the parent page. Here you can refresh parent page by location or reload by using onunload="window.opener.location.reload();"
Or you can call a javascript function within onunload handler. Initially start with below code. After than practice above ways.
<body onunload="window.opener.location=window.opener.location;">
<form id="form1" runat="server">
<div>
<table border="0">
<tr><td>Code:</td><td>
<asp:TextBox runat="server" ID="txtCode"></asp:TextBox></td></tr>
<tr><td>Name:</td><td>
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
</td></tr>
<tr><td>Address:</td><td>
<asp:TextBox runat="server" ID="txtAddress"></asp:TextBox></td></tr><tr><td>Contact no:</td><td>
<asp:TextBox runat="server" ID="txtContact"></asp:TextBox></td>
</tr>
</table>
</div>
<asp:LinkButton runat="server" ID="lnkSave" OnClick="lnkSave_Click">Save & close</asp:LinkButton>
<form id="form1" runat="server">
<div>
<table border="0">
<tr><td>Code:</td><td>
<asp:TextBox runat="server" ID="txtCode"></asp:TextBox></td></tr>
<tr><td>Name:</td><td>
<asp:TextBox runat="server" ID="txtName"></asp:TextBox>
</td></tr>
<tr><td>Address:</td><td>
<asp:TextBox runat="server" ID="txtAddress"></asp:TextBox></td></tr><tr><td>Contact no:</td><td>
<asp:TextBox runat="server" ID="txtContact"></asp:TextBox></td>
</tr>
</table>
</div>
<asp:LinkButton runat="server" ID="lnkSave" OnClick="lnkSave_Click">Save & close</asp:LinkButton>
Now we need to write few code under save button to add supplier data in session datatable so parent page can read the currently saved data:
protected void Page_Load(object sender, EventArgs e)
{
//session time may be expired/user may open the popup directly other wise page gives error.
if (Session["dtSupplier"] == null)
return;
}
protected void lnkSave_Click(object sender, EventArgs e)
{
DataTable dtSupplier = (DataTable)Session["dtSupplier"];
dtSupplier.Rows.Add(1, txtCode.Text, txtName.Text, txtAddress.Text, txtContact.Text);
Session["dtSupplier"] = dtSupplier;
//below line register the close block in the page which will run imediately & close the popup.
ClientScript.RegisterStartupScript(GetType(),"tst", "<script>window.close();</script>");
}
{
//session time may be expired/user may open the popup directly other wise page gives error.
if (Session["dtSupplier"] == null)
return;
}
protected void lnkSave_Click(object sender, EventArgs e)
{
DataTable dtSupplier = (DataTable)Session["dtSupplier"];
dtSupplier.Rows.Add(1, txtCode.Text, txtName.Text, txtAddress.Text, txtContact.Text);
Session["dtSupplier"] = dtSupplier;
//below line register the close block in the page which will run imediately & close the popup.
ClientScript.RegisterStartupScript(GetType(),"tst", "<script>window.close();</script>");
}
Now our example is ready. Just run...........
Few considerations:
If you open the popup by window.open() then you also can use:
window.opener.location.reload(true); // Make a new request to the server.
window.opener.location.reload(false); // Attempt from the cache.
If you use window.showModalDialog and self as the second parameter then use:
window.dialogArguments.location.reload(true); // Put before close
OR
window.dialogArguments.location = window.dialogArguments.location;
Using this way you can change the query parameter of parent window/provide a completely a new url. Interesting.........
One another thing sometime you would like To know the parent address due to security issue or To handle multiple opener for a popup, that time you can use window.opener.location.href To validate the parent window.
16 comments:
here is one problem pop-up gets blocked mostly so how we can open new window.
here is one problem pop-up gets blocked by mostly users so how can be open new window.
Hi Amit,
First of all have you tried to open the popup without user interaction. If so then window.open is not the solution for you.
Better you can try with ModalPopup Extender that comes with AJAX Control Toolkit. It renders as a DIV within this page so that its not blockable.
If you don't want to use AJAX then floating DIV also another solution for you.
your article is looking good....but i have something different
Please share with us.
Works! Is there any way to refresh the parent window as a postback event?
THANK YOU!!!!!!! I've been trying to get this to work all night and just stumbled upon your site.
thank you very much... me looked for this code for half day..at last i found your code.. got it..exactly what i need..!!
ok it is workable solution
your article is so nice, here am getting problem..
using the window.open('some.aspx');return false;
here a new window is opening but it's not look like a pop-up it looking like a page.... but i want to resizes that one please any one help me....
where i can body if i am using master page
main window-parent.aspx using master page
popup window-child windows using master page
where i can find body?
Hello,great post. Information are pretty exciting and saved me huge amount of time which I have spend on something else instead of searching posts like this. I am waiting for more.
It's good..
What about if I don't want to refresh other controls like textbox etc.
nice blog.
thanks
Pest Control
I have a hard time describing my thoughts on content, but I really felt I should here. Your article is really great. I like the way you wrote this information.SEO Manchester
I WOULD BE DELIGHTED TO HEAR FROM YOU