I want to know what is difference between Panel control in asp.net and div with runat="server"? Since both render as a div.
Which one is best (conditions)?
The code
<asp:Panel id="abc" runat="server">
is exactly the same as if you do:
<div id="abc" runat="server">
They render the same, but it's the functionality with other WebControls that the Panel is most used, and the Panel web control gives you more control under code-behind as it exposes more properties.
The difference is that Panel is a webcontrol which will give you more properties over div in the code behind file, since it's a webcontrol it will require more processing to generate HTML.
The panel control has the viewstate property while div does not.
It really depends on your usage. If you prefer to have control over more properties, then use the panel control, otherwise use the div control.
The most useful distinction I have found is this; A div, even with runat=server will not persist changes to its style between page serves. This was driving me nuts, I had a div holding an iframe for a pop-up aspx screen. I wanted this pop-up to close when user was finished with it by setting the visibility to none via javascript. I found it kept re-appearing even when I tried to assert visibility in code behind on each page serve for the holding page.
I then switched to using asp:panel and because of its viewstate, you set it's visibility and it STAYS THAT WAY through multiple page serves until you change it again. Much cleaner. You can still apply css style to that panel, same as a div, but its better 'behaved'
Related
So far, I've seen (and I'm using the following) scripts to show/hide a div or other controls depending on another control in ASP.NET
$('[id$=myRadio_0]').click(function() { $('[id$=myDiv]').show(); });
$('[id$=myRadio_1]').click(function() { $('[id$=myDiv]').hide(); });
and of course, my div in html like
<div id="myDiv" runat="server" visible="false">
and that works fine when the user selects either option of the radiobuttonlist.
However, when I assign that radiobuttonlist a value of 1 or yes on my Page_Load on code behind, that isn't (and probably can't be) caught by jQuery, and my div remains invisible even though the control has a value of Yes/1.
So, do I need to set the visibility of that div from code behind, or is there a way in jQuery to force a scan of these dependencies after i've set the values for the main controls in code behind?
Couple of things you can do.
1) Change your div to a Panel server control (<asp:Panel id="myDiv" runat="server">), with the ID of "myDiv". Then in the code behind, when you set the radiobutton to 1, you can also set your panel control's visibility. Your current jQuery code will still work.
2) Write another line of jquery to test for div visibility when the page loads. Something like,
if ($('[id$=myRadio_0]').val() == 1 && $('[id$=myDiv]:hidden')
{
$('[id$=myDiv]').show();
}
Personally I'd go for option 1, since you're already dealing with setting up the state of your form in the codebehind, I wouldn't split the "setup" code into both the client and the server code.
I want to control does an element exist in document with its ID in Asp.Net project when page's first or postback loading.
Thansk for your helps already now.
It sounds like your hiding a section of your page on postback, i'm assuming via the controls Visible property. The problem with this approach is that the control is never rendered when Visible="False", this is probably why your javascript code throws an error.
You can use the css property Display and set its value to None, this will allow the element to render but not display. I'm not sure what your using for a container, so i'm using a panel in my example (which renders as a div).
<asp:Panel ID="pnlContainer" runat="server">
</asp:Panel>
Then instead of toggling the Visible property, you can hide the panel using the CSS display property.
pnlContainer.Style.Add("display", "none");
I have a control that on 1 page is initially shown, but on another page is initially hidden.
For the page that initially shows the control, the javascript in the control works fine, but for the page that initially hides the control, the javascript doesn't work.
I've ended up registering the javascript in the code behind using:
this.Page.ClientScript.RegisterClientScriptBlock(...);
It works fine, but it gets ugly with large javascript blocks. Plus it I want to change it, I have to rebuild the solution, which I'd rather not have to do.
Is there another way to register javascript using markup if it isn't sent to the browser when the page is loaded? I'm trying to keep network traffic slim by only sending what I need to the browser when the page loads.
thanks,
Mark
The issue is not making the button invisible, but having an invisible button that one can click on from javascript, and having the button call it's event handler.
ex:
<asp:button id="button1" runat="server" style="display:none">
is something you should use or you can setting up a css class with display:none in it instead and then assign that to your control.
I assume you're getting the control by using document.getElementById, if that is the case, you can check if it is null before using it:
var ctrl = document.getElementById("someID");
if (ctrl) {
do something here...
}
If your control is hidden by setting its server side property 'Visible' to false, then the browser can't attach the js to anything because ASP.NET doesn't render the control. You could try setting the CSS property 'display' to 'none'.
I'll try to explain my problem the best I can, here goes: I have an update panel on an ASP.NET page and a Panel server control inside it. I have an rounded corners extender attached to the Panel server control and the extender has a solid background with a solid border.
ok....I haven't found an easy easy to position the update panel itself, so, what I end up doing is trying to position the Panel server control with CSS. Once I do and I run the project to see the finished product, there is a big gap from where the update panel control starts and where the Panel is positioned.
What I'm wanting to know is: What's the best way to position an UpdatePanel or regular panel so that gap that I'm talking about doesn't show up??
If anyone needs me to clarify, let me know in the comments and I'll try my best.
I try to keep my UpdatePanels tightly wrapped around the actual content that is needs to have the dynamic effect.
If you only have content within that panel being updated in this fashion, I'd suggest "inverting" things so that your layout is something like:
<Panel>
<UpdatePanel>
Pertinent Conent
</UpdatePanel>
</Panel>
<RoundedCorderExtender />
See if that helps resolve your spacing issues.
Not saying that this is the best answer, but I was playing the same game with gaps displaying after asynchronous postbacks in an UpdatePanel earlier this week. I had some ajax extender controls inside the UpdatePanel and I found that by moving the markup for those controls so that they were before the controls they extended in the aspx file, my gap problems went away.
Try changing the RenderMode of the update panel from Block to Inline.
I'm writing my own Modal Popup as a template control in ASP.NET. I got two template containers - one for the heading of the window and one for the actual control i want to display in the modal window (let's call it the form control). The form controls can contain server controls like buttons, textbox'es etc.
It works well, except when i want to access the form control in my web page. My codebehind won't recognize the content in the template control - just like it won't in, say a Repeater. So i figured a Panel control works just like what i need, except the Panel control only has "one container" and i'd really like to be able to set both a header and the content (form control).
I figured i could overwrite the Panel control to add my own html but that would limit my header to be something encodeable in an attribute. So is my best bet really to expose the Heading as just a property, instead of a template and thus being limited in what i can write for heading?
Just as you can with a repeater, try using the ParentControl.FindControl(...) method to get the control you desire.
I ended up overriding the Panel control, accepting that i can only "pass" one set of controls as its children. Also i had to make the heading a property i set as an attribute on the modalpopup control.
Even though i couldn't solve it the way i wanted to, i think the solution is good enough.