Jan 17, 2014, 9:37 AM
2nd Page within a window / tab
Hi,
I need to run another Page within a window or a browser tab. That ext-net-window or browser-tab will be used to edit a visual document within the browser.
Prior to showing up that second page there are some things that have to be prepared on the server side. A gridpanel delivers the selected document id that will be used for editing on the second page.
My question is how to connect those two pages to work like that:
1) First Page: User selects a document (-id) within the gridpanel. User clicks on an "edit"-button.
2) Server-side: The server notices the document-id and does a lot of checks (is the user allowed to edit and so on), the server then prepares the (visual) document within the users session.
3) Second Page: Is shown up within an ext-net-window or a new browser-tab and shows up the visual document for editing.
When the user finishes editing the extra ext-net-window or browser-tab shall be closed and the user "returns" the first page still showing up the gridpanel as seen before (incl. page-navigation, filtering and so on). That means the first page shall not change at all when the user clicks the "edit"-button.
I don't care about the pages itself but about the showing up another page in a window/tab and closing that page afterwards.
---
I have 2 possibilities in mind:
1. When clicking the "edit"-button a new ext-net-window is generated and shown on page. That ext-net-window navigates to the seconds page and show it up.
My Problem: how can the second page (that is running within the ext-net-window) close that ext-net-window?
2. When clicking the "edit"-button a new browser-tab is generated that shows up the second page. The second page is then able to close that extra browser window.
My Problem: How to manage to prepare some stuff on the server-side after the button click and afterwards open up a new browser-tab.
---
Code-sample for possibility 1:
Code-sample for possibility 2:
I'm thankful for any suggestions.
I need to run another Page within a window or a browser tab. That ext-net-window or browser-tab will be used to edit a visual document within the browser.
Prior to showing up that second page there are some things that have to be prepared on the server side. A gridpanel delivers the selected document id that will be used for editing on the second page.
My question is how to connect those two pages to work like that:
1) First Page: User selects a document (-id) within the gridpanel. User clicks on an "edit"-button.
2) Server-side: The server notices the document-id and does a lot of checks (is the user allowed to edit and so on), the server then prepares the (visual) document within the users session.
3) Second Page: Is shown up within an ext-net-window or a new browser-tab and shows up the visual document for editing.
When the user finishes editing the extra ext-net-window or browser-tab shall be closed and the user "returns" the first page still showing up the gridpanel as seen before (incl. page-navigation, filtering and so on). That means the first page shall not change at all when the user clicks the "edit"-button.
I don't care about the pages itself but about the showing up another page in a window/tab and closing that page afterwards.
---
I have 2 possibilities in mind:
1. When clicking the "edit"-button a new ext-net-window is generated and shown on page. That ext-net-window navigates to the seconds page and show it up.
My Problem: how can the second page (that is running within the ext-net-window) close that ext-net-window?
2. When clicking the "edit"-button a new browser-tab is generated that shows up the second page. The second page is then able to close that extra browser window.
My Problem: How to manage to prepare some stuff on the server-side after the button click and afterwards open up a new browser-tab.
---
Code-sample for possibility 1:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page1.aspx.cs" Inherits="WebApplication2extnet.EditDocumentInNewWindow.Page1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Page 1</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Hidden runat="server" ID="gridpanelreplacementDocumentId" Text="77" />
<ext:Button runat="server" ID="btnEdit" OnDirectClick="btnEdit_Click" Text="Edit selected document" />
</form>
</body>
</html>
public partial class Page1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.AddWindow();
}
protected void btnEdit_Click(object sender, DirectEventArgs e)
{
// get selected document id from grid:
long documentid = long.Parse(gridpanelreplacementDocumentId.Text);
// prepare some stuff in session
Session.PrepareDocumentForEdit(documentid);
// show up new window or tab
win.Title += documentid.ToString();
win.Show(this.btnEdit.ID);
}
Window win;
private void AddWindow()
{
win = new Window()
{
ID = "WindowEdit",
Title = "Edit document ",
Modal = true,
AutoRender = false,
Maximized = true,
Hidden = true,
Loader = new ComponentLoader
{
Url = "./Page2.aspx",
Mode = LoadMode.Frame,
LoadMask =
{
ShowMask = true
}
}
};
this.Form.Controls.Add(win);
}
}
public static class SessionExtensions
{
public static void PrepareDocumentForEdit(this HttpSessionState session, long id)
{
// prepare some stuff and store it in the session
session["DocumentID"] = id;
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Page2.aspx.cs" Inherits="WebApplication2extnet.EditDocumentInNewWindow.Page2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Page 2 - Edit document</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Label runat="server" ID="lblDocumentID" />
<ext:Button runat="server" ID="btnSaveAndClose" OnDirectClick="btnSaveAndClose_Click" Text="Save document and close window" />
</form>
</body>
</html>
public partial class Page2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.lblDocumentID.Text = "Edit document " + Session["DocumentID"].ToString();
}
protected void btnSaveAndClose_Click(object sender, DirectEventArgs e)
{
// save edited document to database
// ...
// close edit window
var windowedit = X.GetCmp("WindowEdit");
if (windowedit != null && windowedit is Window) // windowedit is always null :(
{
(windowedit as Window).Close();
}
}
}
---Code-sample for possibility 2:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageN1.aspx.cs" Inherits="WebApplication2extnet.EditDocumentInNewBrowserTab.PageN1" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Page 1</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Hidden runat="server" ID="gridpanelreplacementDocumentId" Text="77" />
<ext:Button runat="server" ID="btnEdit" OnDirectClick="btnEdit_Click" Text="Edit selected document" />
</form>
</body>
</html>
public partial class PageN1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void btnEdit_Click(object sender, DirectEventArgs e)
{
// get selected document id from grid:
long documentid = long.Parse(gridpanelreplacementDocumentId.Text);
// prepare some stuff in session
Session.PrepareDocumentForEdit(documentid);
// show up new window or tab - how to do that ??
// a) window.open("http://ext.net", "mywindow");
// b) string queryString = "./Page2.aspx";
// string newWin = "window.open(\""+queryString+"\");";
// ClientScript.RegisterStartupScript(this.GetType(), "pop", newWin, true);
// c) Response.Write("<script>window.open('http://ext.net','_blank');</script>");
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="PageN2.aspx.cs" Inherits="WebApplication2extnet.EditDocumentInNewBrowserTab.PageN2" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
<title>Page 2 - Edit document</title>
</head>
<body>
<form id="Form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" />
<ext:Label runat="server" ID="lblDocumentID" />
<ext:Button runat="server" ID="btnSaveAndClose" OnDirectClick="btnSaveAndClose_Click" Text="Save document and close window" />
</form>
</body>
</html>
public partial class PageN2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
this.lblDocumentID.Text = "Edit document " + Session["DocumentID"] ?? "?";
}
protected void btnSaveAndClose_Click(object sender, DirectEventArgs e)
{
// save edited document to database
// ...
// close edit browser-tab/window <- how to do that?
// a) ClientScript.RegisterClientScriptBlock(Page.GetType(), "script", "window.close();", true);
// b) Response.Write("<script>window.close();</script>");
}
}
---I'm thankful for any suggestions.