C# .NET - how to create Popup Window

Asked By Manikandamoorthi N on 19-Dec-11 08:39 AM
how to create Popup window
Jitendra Faye replied to Manikandamoorthi N on 19-Dec-11 08:41 AM
you can use jquery popup also-

If you want to show modal popup then use jquery popup.


after adding jqueryui plugin you can use it.

like this-


<


script>

function

funShow() {

$('#dialog).dialog({ resizable: false, height: 140, modal: true });

}

</

script>

<

div id="dialog" title="Basic dialog">hi

</

div>

<

asp:Button runat="server" Text="Button" onClientClick="return funShow()" />




Note- This will be closed when you will click on close button,

FOR EXAMPLE FOLLOW THIS

-http://jqueryui.com/demos/dialog/

Riley K replied to Manikandamoorthi N on 19-Dec-11 08:41 AM


Use Window.Open() for a PopUp

here is the sample

 
<script language="javascript" type="text/javascript">
<!--
function popitup(url) {
  newwindow=window.open(url,'name','height=200,width=150');
  if (window.focus) {newwindow.focus()}
  return false;
}
  
// -->
</script>
 
On link click the above popup will open
 
<a href="popupex.html" onclick="return popitup('popupex.html')"
  >Link to popup</a>
 



Regards
Suchit shah replied to Manikandamoorthi N on 19-Dec-11 08:41 AM

to create a popup window you need javascript

(javascript:window.open('myPopup.aspx",other properties here)

this site will make the js you need for a popup window : http://javascript.internet.com/generators/popup-window.html

you should not need to call it from codebehind you just call it from client side javascript.

this is what i use all the time :

function genericPopup(href, width, height, scrollbars){

var param = "width="+width+", height="+height+", scrollbars="+scrollbars+", resizable, status";

return window.open(href,"", param);

}

then i just pass it the href (url), width, height, and if we want scroll bars or not.

to call it from a link you would use

<a href="MyDestinationPage.aspx" onClick="genericPopup(this.href,300,300,no)">Click for popup</a>

if you NEED to call it from serverside you need to inject the javascript into codebehind and use RegisterClientScriptBlock method (which is complicated) if you can avoid doing it from code-behind i would.

Suchit shah replied to Manikandamoorthi N on 19-Dec-11 08:41 AM

Create a form call it WebForm2.aspx, on WebForm1.aspx add a button with id Button1. onpage_load event use the below code

Button1.Attributes.Add("onclick","window.open('WebForm2.aspx','','height=300,width=300');return false")

Suchit shah replied to Manikandamoorthi N on 19-Dec-11 08:42 AM

Passing values from a popup window back to the parent page is an often asked question. Especially when there is a GridView type control in the popup. In the following example we will be using two forms. The parent form will be parent.aspx and the popup will be popup.aspx. Also note that the parent.aspx form is derived from some MasterPage. Code is provided both in VB.Net and C#.Net.

--- .aspx of parent form ---

<script type="text/javascript">

function OpenPopup() {

window.open("popup.aspx","List","scrollbars=no,resizable=no,width=400,height=280");

return false;

}

</script>

.

.

.

<asp:TextBox ID="txtPopupValue" runat="server" Width="327px"></asp:TextBox>

<asp:Button ID="Button1" runat="server" Text="Show List" />

--- .vb of parent.aspx if vb.net is the language ---

If Not IsPostBack Then

Me.Button1.Attributes.Add("onclick", "javascript:return OpenPopup()")

End If

--- .cs of parent.aspx if C#.net is the language ---

if (!IsPostBack) {

this.Button1.Attributes.Add("onclick", "javascript:return OpenPopup()");

}

--- .aspx of popup form ---

<script language="javascript">

function GetRowValue(val)

{

// hardcoded value used to
minimize the code.

// ControlID can instead
be passed as query string to the popup window

window.opener.document.getElementById("ctl00_ContentPlaceHolder1_TextBox2").value = val;

window.close();

}

</script>

<asp:GridView ID="GridView1" runat="server" DataSourceID="SqlDataSource1">

<Columns>

<asp:TemplateField>

<AlternatingItemTemplate>

<asp:Button ID="btnSelect" runat="server" Text="Select" />

</AlternatingItemTemplate>

<ItemTemplate>

<asp:Button ID="btnSelect" runat="server" Text="Select" />

</ItemTemplate>

</asp:TemplateField>

</Columns>

</asp:GridView>

--- .vb file if vb.net is the language ---

Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound

If (e.Row.RowType = DataControlRowType.DataRow) Then

'assuming that the
required value column is the second column in gridview

DirectCast(e.Row.FindControl("btnSelect"), Button).Attributes.Add("onclick", "javascript:GetRowValue('" & e.Row.Cells(1).Text & "')")

End If

End Sub

--- .cs file if C#.net is the language ---

protected void GridView1_RowDataBound(object sender, System.Web.UI.WebControls.GridViewRowEventArgs e) {

if ((e.Row.RowType == DataControlRowType.DataRow)) {

//assuming that the
required value column is the second column in gridview

((Button)e.Row.FindControl("btnSelect")).Attributes.Add("onclick", "javascript:GetRowValue('" + e.Row.Cells[1].Text + "')");

}

}

I hope the code above is straight forward and easy to understand.

Happy Coding!!!

dipa ahuja replied to Manikandamoorthi N on 19-Dec-11 08:45 AM
Use ajax modalpopup or jquery

you can use the jquery popup:
<link href="css/ui-lightness/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//setup new person dialog
$('#newPerson').dialog({
  autoOpen: false,
  draggable: true,
  title: "Add New Person",
  open: function (type, data)
  {
  $(this).parent().appendTo("form");
  }
});
 
});
function showDialog(id) {
$('#' + id).dialog("open");
}
function closeDialog(id) {
$('#' + id).dialog("close");
}
 
</script>
</head>
 
 
<input id="btnAdd" type="button" onclick="showDialog('newPerson');" value="Add New Person" />
 
<div id='newPerson'>
<asp:Label ID="lblNewName" runat="server" AssociatedControlID="txtNewName" Text="Name"></asp:Label>
<asp:TextBox ID="txtNewName" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="reqName1" ControlToValidate="txtNewName" ValidationGroup="Add"
  runat="server" ErrorMessage="Name is required"></asp:RequiredFieldValidator>
<asp:Button ID="btnAddSave" OnClick="btnAddSave_Click" runat="server" Text="Save" />
</div>
 
OUTPUT:


kalpana aparnathi replied to Manikandamoorthi N on 19-Dec-11 01:40 PM

  • When you click the "create button" open a new browser window resized exactly to match the panel's size. This can be done with javascript easily as follows:

    < input onclick="javascript:window.open('/','title','status=0,toolbar=0,width=350,height=250');" type="button" value="Create" />

  • On the page that you popped up containing the panel (pagecontainingPanel.aspx - according to my example), you can have code to close the window once you perform some action. For example, if you have a button that's supposed to save some data to the database and comeback to the parent page, you could do something like:

{

  ///Perform server side process. If successfully executed close this window. 
  protected void btnSubmit_Click(object sender, EventArgs e)
  if(EverythingOK) 
        { 
           StringBuilder cstext2 = new StringBuilder();
  cstext2.Append("<script type=\"text/javascript\"> function CloseMe() {");
  cstext2.Append("window.close();} </");
  cstext2.Append("script>");
  cs.RegisterStartupScript(cstype, csname2, cstext2.ToString(), false);
        } 

    }