Ad:

ASP.NET Discussion Thread
Unsolved
Views: 81470

Page 1
2
Next

You are currently viewing page 1 of this multi-page discussion thread

Feb 16th, 2007

Popup window on button click

Expand Post »

Hi

In my application, i would like to use the popup window concept.
When the user clciks a button, a popup window should appear, with a textbox to enter a value.
on closing the popup window, the user entered value should get saved into a table

I am using asp.net 2.0

Can anyone please tel, what all are the things to be noted for this?

thanks

Similar Threads

Make An Asp Popup Window--help Me About This... in JavaScript / DHTML / AJAX

Sarah Lee

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

45 posts
since Sep 2006

Permalink

Feb 16th, 2007

Re: Popup window on button click

Since you are capturing user action via popup, you will most likely use client side scripting to get the user input. Once you get the user input, you can set it to some control in your form which will get sent to your server when the form is submitted.

Here’s an expmple…

html Syntax (Toggle Plain Text)
<form id="form1" runat="server">
<div>
  <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="HiddenField1.value = prompt('Enter your feedback','');" />
  <asp:HiddenField ID="HiddenField1" runat="server" />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>
<form id="form1" runat="server">
<div>
  <asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="HiddenField1.value = prompt('Enter your feedback','');" />
  <asp:HiddenField ID="HiddenField1" runat="server" />
  <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</div>
</form>

This code handles the user input on the server side. (In this case, it simply displays it in a label, but at this point you get to decide what to do with it.)

c# Syntax (Toggle Plain Text)
protected void Page_Load(object sender, EventArgs e) {
  if(IsPostBack) {
    Label1.Text = HiddenField1.Value;
  }
}
protected void Page_Load(object sender, EventArgs e) {
  if(IsPostBack) {
    Label1.Text = HiddenField1.Value;
  }
}

The button has a client script calling the prompt function. The value returned by the prompt function is set to the value of the hidden field, which gets submitted to the server. NOTE: In production code, you have to validate the user input.

M_K_Higa

Reputation Points: 12

Solved Threads: 2

Junior Poster

Offline

102 posts
since Sep 2006

Permalink

Feb 22nd, 2007

Re: Popup window on button click

Thanks for the reply.
Actually i am trying in following way , but struck with this

Suppose if i want to do like this.

parent.aspx
<asp:button id="button1" onclick="openwindow()" ruant="server/>
<script>
function openwindow()
{
window.open("popup.aspx", "mywindow",""...)
}
</script>

popup.aspx
<asp:textbox...>
<asp:button onclcik="adduser"...>
<asp:button onclick="close"..>

The user enters value in textbox of popup.aspx
How can i catch that value in parent.aspx method,( i want to get the value through server side) where i set
dim name as string=" " ----------------> text entered in popup window textbox

Thanks

Sarah Lee

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

45 posts
since Sep 2006

Permalink

Feb 22nd, 2007

Re: Popup window on button click

narkhedeuday

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Feb 2007

Permalink

Feb 22nd, 2007

Re: Popup window on button click

I think session concept works for ur problem

aravindkishore

Reputation Points: 10

Solved Threads: 1

Light Poster

Offline

29 posts
since Feb 2007

Permalink

Feb 22nd, 2007

Re: Popup window on button click

Ok. Instead of using window.open, you can use the window.showModalDialog method.

The info gathering is still done on the client side, so there's not much asp.net stuff going on here. Just set the returned value to a field that can be returned to the server and you should be able to do your asp.net stuff as usual.

On a related note, you may run into problems with popup blockers so make sure you test very well.

Anyway, here some sample code...

parent.aspx

html Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parent Page</title>
<script type="text/javascript">
  function DoOnclick() {
    var RetVal="Test: The child.html page will change this value...";
    alert(RetVal); 
    RetVal = window.showModalDialog("child.html","","dialogHeight: 150px; dialogWidth: 300px;");
    alert(RetVal); 
  }
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <input id="Button1" type="button" value="Open Child..." onclick="DoOnclick();" />
    </div>
  </form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Parent Page</title>
<script type="text/javascript">
  function DoOnclick() {
    var RetVal="Test: The child.html page will change this value...";
    alert(RetVal); 
    RetVal = window.showModalDialog("child.html","","dialogHeight: 150px; dialogWidth: 300px;");
    alert(RetVal); 
  }
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <input id="Button1" type="button" value="Open Child..." onclick="DoOnclick();" />
    </div>
  </form>
</body>
</html>

child.aspx

html Syntax (Toggle Plain Text)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Child Page</title>
<script type="text/javascript">
  function DoOnclick(arg) {
    if(arg.value == "Enter a value...") {
      alert("Do some kind of validation...");
      return false; // Make sure the user changes the value
    } else {
      window.returnValue = arg.value;
    }
    window.close();
  }
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <strong>This is the modal box...</strong><br />
      <input id="Text1" type="text" value="Enter a value..." /><br />
      <input id="Button1" type="button" value="Return a value..." onclick="DoOnclick(Text1);" />
    </div>
  </form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Child Page</title>
<script type="text/javascript">
  function DoOnclick(arg) {
    if(arg.value == "Enter a value...") {
      alert("Do some kind of validation...");
      return false; // Make sure the user changes the value
    } else {
      window.returnValue = arg.value;
    }
    window.close();
  }
</script>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <strong>This is the modal box...</strong><br />
      <input id="Text1" type="text" value="Enter a value..." /><br />
      <input id="Button1" type="button" value="Return a value..." onclick="DoOnclick(Text1);" />
    </div>
  </form>
</body>
</html>

M_K_Higa

Reputation Points: 12

Solved Threads: 2

Junior Poster

Offline

102 posts
since Sep 2006

Permalink

Feb 22nd, 2007

Re: Popup window on button click

Thanks. just gonna try

Sarah Lee

Reputation Points: 10

Solved Threads: 0

Light Poster

Offline

45 posts
since Sep 2006

Permalink

Mar 1st, 2007

Re: Popup window on button click

Hi

This is a nice example and as a beginner has helped my nicely with a project im working on. However im am having a little problem. When i change the dialog box height and width it has no effect on the size of the box!!!

Can anyone suggest what could be going wrong, heres some of my code;

<code>
<scripttype="text/javascript">
function DoOnclick()
{
var RetVal="";
RetVal = window.showModalDialog("email_prompt.aspx?name=SS_Server_Detail_Report&param1=1026","","dialogHeight: 150x; dialogWidth: 400px; dialogTop: 250px; dialogLeft: 500px; edge: Sunken; resizable: Yes; status: No;");
alert(RetVal);
}
</script>
</head>
<body>
<formid="form1"runat="server">
<div>
<inputid="Button1"type="button"value="Print Report"onclick="DoOnclick();"/>



</form>
</body>
</html>
</code>

bazpaul

Reputation Points: 10

Solved Threads: 0

Newbie Poster

Offline

1 posts
since Mar 2007

Permalink

Mar 1st, 2007

Re: Popup window on button click

Looks like a typo -- you have dialogHeiht: 150x;

it should be dialogHeiht: 150px;

M_K_Higa

Reputation Points: 12

Solved Threads: 2

Junior Poster

Offline

102 posts
since Sep 2006

Permalink

Nov 13th, 2008