Solved

where to place "panel"

Posted on 2014-01-09
29
358 Views
Last Modified: 2014-01-29
Hi,
where should I place such part

asp:panel

within the markup page?
0
Comment
Question by:HuaMinChen
  • 14
  • 11
  • 2
  • +1
29 Comments
 
LVL 11

Expert Comment

by:MajorBigDeal
ID: 39770132
Anywhere in the body that you want it to appear, for example:

<asp:Panel ID="Panel1" runat="server">      
</asp:Panel>    

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39770139
I mean where I should place it within the form.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39770194
Any help?
0
 
LVL 7

Expert Comment

by:Kishan Zunjare
ID: 39770282
The Panel Control is so easy to use. Panel control works as a container for other controls on the page, just like a div control in HTML. It also allows generating controls programmatically.

The Panel control is derived from the WebControl class. So it inherits all the properties, methods and events of the same.

Please refer to bellow links;
http://www.tutorialspoint.com/asp.net/asp.net_panel_controls.htm
http://www.w3schools.com/aspnet/control_panel.asp      

Hope this will help.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39770368
Many thanks. Is there an example to display the panel shown below, within code-behind?
...
<body bgcolor="#1BA8E0">
    <form id="main_form" runat="server">
    <div >
    <table width="100%" align="right">
    <tr>
     <td align="right" style="background-color:#0A2757;height:1px;font-size:1px;">&nbsp;</td>
    </tr>
        <tr>
        <td align="right">
            <asp:LinkButton ID="lb_bck" 
               Text = "Back"
               CssClass="lbstandard1"
               Font-Names="Times New Roman" 
               Forecolor="#0A2757"
               Font-Size="8pt" 
               OnClick="lb_bck_Click"
               runat="server"/>
               &nbsp;|&nbsp; 
            <asp:LinkButton ID="lb_edt" 
               Text = "Edit"
               CssClass="lbstandard1"
               Font-Names="Times New Roman" 
               Forecolor="#0A2757"
               Font-Size="8pt" 
               OnClick="lb_edt_Click"
               runat="server"/>
               &nbsp;|&nbsp; 
            <asp:LinkButton ID="lb_exit" 
               Text = "Exit"
               CssClass="lbstandard2"
               Forecolor="#0A2757"
               Font-Names="Times New Roman" 
               Font-Size="8pt" 
               OnClientClick="window.close()" 
               runat="server"/>
        </td>
        </tr>
    </table>
    </div>
    <br />
    <br />
<div class="left up">
       <asp:Image ID="aspImagePreview" runat="server" AlternateText="Preview" Height="360px" Width="290px" ImageUrl="~/output.jpg" />
</div>
<div class="right up">
<asp:panel class="popupConfirmation" id="DivDeleteConfirmation" 
	style="display: none" runat="server">
    <div class="popup_Container">
        <div class="popup_Titlebar" id="PopupHeader">
            <div class="TitlebarLeft">
                Delete Expense</div>
            <div class="TitlebarRight" onclick="$get('ButtonDeleteNo').click();">
            </div>
        </div>
        <div class="popup_Body">
            <p>
                Are you sure, you want to delete the expense?
            </p>
        </div>
        <div class="popup_Buttons">
            <input id="ButtonDeleleYes" type="button" value="Yes" />
            <input id="ButtonDeleteNo" type="button" value="No" />
        </div>
    </div>
</asp:panel>
...

Open in new window

0
 
LVL 7

Expert Comment

by:Kishan Zunjare
ID: 39770710
0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39770945
Here is as simple of a panel example that I can create.

<html>
<title>Simple Panel</title>
<body>
<script language="VB" runat="server">

sub page_load(sender as object,e as eventargs)
	if not page.ispostback then
		myPanel.visible=false
	end if
end sub

sub clickMe(sender as object,e as eventargs)
	myPanel.visible = not myPanel.visible
	if myPanel.visible then
		submitbutton.text="Hide Panel"
	else
		submitbutton.text="Show Panel"
	end if
end sub
</script>

<form id="myForm" runat="server">

	<asp:Button id="SubmitButton" OnClick="clickMe" runat="server" Text="Show Panel"/>
	<br/>

	<asp:panel id="myPanel" runat="server">
		Hello.  I am a panel. You can place anything in here
	</asp:panel>

</form>

</body>
</html>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39775670
with this panel

...
<div class="right up">
<asp:panel class="popupConfirmation" id="RecDeleteConfirmation" 
	style="display: none" runat="server">
    <div class="popup_Container">
        <div class="popup_Titlebar" id="PopupHeader">
            <div class="TitlebarLeft">
                Delete Expense</div>
            <div class="TitlebarRight" onclick="$get('ButtonDeleteNo').click();">
            </div>
        </div>
        <div class="popup_Body">
            <p>
                Are you sure, you want to delete the record?
            </p>
        </div>
        <div class="popup_Buttons">
            <input id="ButtonDeleleYes" type="button" value="Yes" />
            <input id="ButtonDeleteNo" type="button" value="No" />
        </div>
    </div>
</asp:panel>
...

Open in new window

inside the Default.aspx file

I cannot show the panel by running this

        protected void remove_click(object sender, EventArgs e)
        {
            RecDeleteConfirmation.Visible = true;
        }

Open in new window

0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39776475
Check the inline CSS:  style="display: none"

Try removing that.

Also check the CSS for popupConfirmation to make sure it isn't doing anything weird.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39778382
Is it true that I have to show the panel within another .aspx page instead of putting it on the current Default.aspx page?
If yes, how to ensure that the panel is showing the message in the middle of the screen? thanks.
0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39779074
>>If yes, how to ensure that the panel is showing the message in the middle of the screen?

This is technically a different question.

Specifically what are you wanting to do here?

Typically when I see something about wanting something to magically appear in the middle of the screen I think of a modal popup.

Once we figure out exactly what you are wanting to do we can provide better help.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39790228
My question is, if the panel is just shown in the beginning of the page, then how I can properly show it?
0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39791365
I do not understand that last question.

"shown in the beginning of the page" and "properly show it?" are confusing.

When visible is set to "true" on a postback, it appears in the HTML wherever it is placed in the aspx page.  If you look at the generated html it is rendered as a <div>.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39793192
Which object is "visible" feature for?

I mean the panel is just shown in the beginning of the page like

https://dl.dropboxusercontent.com/u/40211031/t645.png
0
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39794967
>>Which object is "visible" feature for?

Most .Net objects.  Did you not take a look at the working example I posted back in http:#a39770945

Every time you click the button, I toggle the visible property of the panel:  myPanel.visible = not myPanel.visible

That said, based on your image upload I don't think you are looking for a panel at all.  Looks like all you want to do is 'Confirm' a button click.  If so, no need for a panel.

You can add an attribute "onclick" to the button that will add a javascript confirm dialog to the onclick of the button.

I'm not at work today but I have a TON of examples of this.  If you say this is what you are after, I'll post an example when I get back to my desk tomorrow.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39796160
But I only want to use Panel for this thread.
0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39798094
A panel cannot 'pop up' unless you use JQueryUI.  Google: JQUERYUI dialog popup.

If you don't want the use JQuery, then what is it exactly that you want to do?

I've posted a working example of a panel that will appear and disappear with the click of a button.
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39798919
Are you sure that there is no way to popup one Panel? why can't I hide the panel with these codes?

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                mp1.Hide();
                ...

Open in new window

0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39799877
>>Are you sure that there is no way to popup one Panel?

Pop-up, not with native .Net.  With something like JQuery UI you should be able to.

>>why can't I hide the panel with these codes?

I don't see where a panel has a "hide" method.

Is the example I posted not working for you?  You should be able to start with that and we'll work from there to get what you are wanting.

I'm just not sure what that is.

If you want a pop-up, use what the browser's provide you:  JavaScript Confirm dialog.

Why are you stuck on using a panel?
0
 
LVL 11

Expert Comment

by:MajorBigDeal
ID: 39801054
I think we might be having a language problem here.  Forgive me if this is already obvious to everyone but "pop-up" means to display something in a new window.   Hiding it would affect the entire window, not just a panel.

A panel on a page can also be made visible or not but the page itself (the window) would not be hidden, just the panel on the page.

HuaMinChen, it is not clear to me which of these you are trying to accomplish.  It might help if we take a step back and you try to describe why you are trying to display a panel.

Under what circumstances in your application will the panel be displayed or hidden?  Is this a warning message to the user?  Are you putting controls in the panel or displaying data?  From a design perspective, what is this panel going to accomplish in your application?
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39801918
MajorBigDeal,
I want to show a message with Yes/No buttons there, using a Panel.

Slightwv,
Can you show one example using JQuery UI, to popup one Panel?
0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39805831
Any help?
0
 
LVL 76

Accepted Solution

by:
slightwv (䄆 Netminder) earned 145 total points
ID: 39806686
Here is an example.

If you move forward with this you will want to physically download the JQuery Javascript to your local machine and not rely on the direct links to their site.

<!DOCTYPE html>
<html>
<title>Simple Panel</title>


<head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	<script type="text/javascript">

			$(function() {
				$("#myPanel").dialog({
					autoOpen: false,
					autoResize:true,
					resizable: false,
					title: "I'm a popup panel",
					open: function(event, ui) {
						$(this).parent().appendTo("form");		//allow .Net buttons to post back
					}
				});

			});


			function closePopup() {
				$( "#myPanel" ).dialog( "close" );
			}

			function openPopup() {
				$( "#myPanel" ).dialog( "open" );
			}


	</script>



	<script language="VB" runat="server">

		sub clickMe(sender as object,e as eventargs)
			response.write("You clicked Yes!")
		end sub

	</script>
</head>

<body>

<form id="myForm" runat="server">

	<button onclick="openPopup(); return false;">Show Panel</button>
	<br/>


	<asp:panel id="myPanel" runat="server">
		Hello.  I am a panel. You can place anything in here
		<br />
		<asp:Button id="YesButton" OnClick="clickMe" runat="server" Text="Yes"/>
		&nbsp;&nbsp;
		<button onclick="closePopup()">No</button>
	</asp:panel>

</form>

</body>
</html>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39808225
As my current project is using C#, so I have this event like

	<script language="C#" runat="server">
		private void ClickMe(object sender, EventArgs e)
        {
			console.write("You clicked Yes!");
        }
	</script>
	...

Open in new window

instead of using yours. But I get this error, when running the deployed project. why?

Server Error in '/App12' Application.

Compilation Error 
  Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

 Compiler Error Message: CS0103: The name 'console' does not exist in the current context

Source Error:


 

Line 92: 		private void ClickMe(object sender, EventArgs e)
Line 93:         {
Line 94: 			console.write("You clicked Yes!");
Line 95:         }
Line 96: 	</script>
  

Source File: c:\inetpub\VS2012\App12\Default.aspx    Line: 94 



Show Detailed Compiler Output:




 
 


Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18408 

Open in new window

0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39809402
>>The name 'console' does not exist

'console' is typically only around for console apps.  response.write should work in C# just as it does in VB.

If you ran my code through a VB to C# translator, I would pick a different one.

You really shouldn't need to 'translate' my code.  As far as .Net goes, it isn't real complex.  It is a single subroutine.  If you cannot port it manually I would rethink using .Net as a development platform.

I used a free online conversion tool and got this:
public void clickMe(object sender, EventArgs e)
{
	response.write("You clicked Yes!");
}

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39810924
Sorry, I still get this error
Server Error in '/App12' Application.

Compilation Error 
  Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately. 

 Compiler Error Message: CS1061: 'ASP.default_aspx' does not contain a definition for 'clickMe' and no extension method 'clickMe' accepting a first argument of type 'ASP.default_aspx' could be found (are you missing a using directive or an assembly reference?)

Source Error:


 

Line 149:		Hello.  I am a panel. You can place anything in here
Line 150:		<br />
Line 151:		<asp:Button id="YesButton" OnClick="clickMe" runat="server" Text="Yes"/>
Line 152:		&nbsp;&nbsp;
Line 153:		<button onclick="closePopup()">No</button>
  

Source File: c:\inetpub\VS2012\App12\Default.aspx    Line: 151 



Show Detailed Compiler Output:




 
 


Version Information: Microsoft .NET Framework Version:4.0.30319; ASP.NET Version:4.0.30319.18408  

Open in new window

0
 
LVL 76

Assisted Solution

by:slightwv (䄆 Netminder)
slightwv (䄆 Netminder) earned 145 total points
ID: 39812030
I would need to see all your code.

Can you run what I posted as I posted it?

Small case issue with the VB to C# port above.

Here is a C# version of what I posted above.  See if you can run this as-is.

<!DOCTYPE html>
<html>
<title>Simple Panel</title>


<head>
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

	<script type="text/javascript">

			$(function() {
				$("#myPanel").dialog({
					autoOpen: false,
					autoResize:true,
					resizable: false,
					title: "I'm a popup panel",
					open: function(event, ui) {
						$(this).parent().appendTo("form");		//allow .Net buttons to post back
					}
				});

			});


			function closePopup() {
				$( "#myPanel" ).dialog( "close" );
			}

			function openPopup() {
				$( "#myPanel" ).dialog( "open" );
			}


	</script>



	<script language="C#" runat="server">

		public void clickMe(object sender, EventArgs e)
		{
			Response.Write("You clicked Yes!");
		}
	</script>

</head>

<body>

<form id="myForm" runat="server">

	<button onclick="openPopup(); return false;">Show Panel</button>
	<br/>


	<asp:panel id="myPanel" runat="server">
		Hello.  I am a panel. You can place anything in here
		<br />
		<asp:Button id="YesButton" OnClick="clickMe" runat="server" Text="Yes"/>
		&nbsp;&nbsp;
		<button onclick="closePopup()">No</button>
	</asp:panel>

</form>

</body>
</html>

Open in new window

0
 
LVL 10

Author Comment

by:HuaMinChen
ID: 39813997
Many thanks.
With these codes
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="App12._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!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 id="Head1" runat="server">
...
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#myPanel").dialog({
                autoOpen: false,
                autoResize: true,
                resizable: false,
                title: "I'm a popup panel",
                open: function (event, ui) {
                    $(this).parent().appendTo("form");		//allow .Net buttons to post back
                }
            });

        });

        function closePopup() {
            $("#myPanel").dialog("close");
        }

        function openPopup() {
            $("#myPanel").dialog("open");
        }
        function buttonClientClick() {
            alert('Button Clicked');
        }
    </script>
	<script language="C#" runat="server">
		private void clickMe(object sender, EventArgs e)
        {
			//Response.Write("You clicked Yes!");
            lb_msg.Text = "event is called";
        }
	</script>
	...
<cc1:ToolkitScriptManager runat="server"></cc1:ToolkitScriptManager>
	<asp:panel id="myPanel" runat="server">
		Hello.  I am a panel. You can place anything in here
		<br />
		<asp:Button id="YesButton" OnClientClick="buttonClientClick();" OnClick="clickMe" runat="server" Text="Yes"/>
		&nbsp;&nbsp;
		<button onclick="closePopup()">No</button>
	</asp:panel>
	...
                <asp:Button runat="server" id="bt_remove" Text="Remove my Record" BackColor="Red" ForeColor="White" Font-Bold="true"
                    width="180px" OnClick="remove_click" OnClientClick="openPopup();" />
                    ...

Open in new window

the Panel only appears when I click Remove button using the mouse. Once I release the mouse, it disappears immediately. why?
0
 
LVL 76

Expert Comment

by:slightwv (䄆 Netminder)
ID: 39814860
>>Once I release the mouse, it disappears immediately. why?

Don't know.  Try a different browser.

What I posted above worked for me using Internet Explorer 8 (Yes, I know that is old but my play machine is still XP).

The JQuery code I pointed to is the latest and greatest.  There might be a bug in it.  You might try an older version.

You can find older versions on their website.
0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

IntroductionWhile developing web applications, a single page might contain many regions and each region might contain many number of controls with the capability to perform  postback. Many times you might need to perform some action on an ASP.NET po…
Today I had a very interesting conundrum that had to get solved quickly. Needless to say, it wasn't resolved quickly because when we needed it we were very rushed, but as soon as the conference call was over and I took a step back I saw the correct …
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…
This video gives you a great overview about bandwidth monitoring with SNMP and WMI with our network monitoring solution PRTG Network Monitor (https://www.paessler.com/prtg). If you're looking for how to monitor bandwidth using netflow or packet s…

747 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now