Develop Reference

Using ASP.NET to Hide an HTML Div

I am using ASP.NET for a web page in order to make some server calls that involve looking up user organization information. Based on that information, we need to either hide or display a div. In the header I have a C# function that definitely runs. I have tried the following lines to hide the div.
divID.Style.Add("display","none");
and
divID.Visible = false;
In the body, I am currently using an asp:Panel that runs at server and contains the id "divID". No matter what I do, I can't get the div to hide (without manually putting the styling in). I tried putting the scripts before and after the body, and it didn't make a difference. Any suggestions on the best way to do this would be appreciated.
EDIT:
Here is the C# initiating code.
<script runat="server" language="C#">
void getUserInfo(Object sender, EventArgs ev){
The rest of the C# code is irrelevant, but the relevant line shown above is definitely being run.
The HTML portion looks something like this.
<asp:Panel runat="server" id="divID" style="width:200px; height:130px; ">
<div style="text-align:center">Test Data</div>
</asp:Panel>

C# code is always compiled and run from the server-side, and so cannot impact the state of a page once rendered unless you use postbacks or callbacks. If you want to change the visible state of a control on the client-side, you will need to use Javascript on the client side (possibly triggered by a button click) to show and hide the control.
As an example, check out the solution at the link below.
https://forums.asp.net/t/1603211.aspx?Show+hide+div+on+button+click+without+postback
<script type="text/javascript">
function ToggleDiv(Flag) {
if (Flag == "first") {
document.getElementById('dvFirstDiv').style.display = 'block';
document.getElementById('dvSecondDiv').style.display = 'none';
}
else {
document.getElementById('dvFirstDiv').style.display = 'none';
document.getElementById('dvSecondDiv').style.display = 'block';
}
}
</script>
<asp:Button ID="btn" runat="server" Text="Show First Div"
OnClientClick="ToggleDiv('first');return false;" />
<asp:Button ID="Button1" runat="server" Text="Show Second Div"
OnClientClick="ToggleDiv('second');return false;" />
<br />
<div id="dvFirstDiv" style="display: none;">
First Div
</div>
<div id="dvSecondDiv" style="display: none;">
Second Div
</div>

In the header I have a C# function that definitely runs.
If you're talking about the HTML page header - no, it definitely not running. C# code is executed only server side.
Based on your post, I'm assuming we're talking WebForms here and yo have a script block in your aspx file. While this is fine, I recommend placing the server-side code into a code behind file.
So all you need to do is to add a handler for the PreRender phase of the page life cycle and place your logic for showing/hiding the div in there.
public void Page_Prerender(object sender, EventArgs e)
{
divID.Visible = false;
' OR
'divID.Style.Add("display","none");
}
Note that setting the Visible property of a WebForms control excludes the control from rendering to the page, whilst setting display: none renders it as HTML but it isn't displayed on the page.

Try in backcode: divID.Controls.clear();
This worked for me.

Cannot close Ajax ModalPopupExtender Modal window which is created from a master page

I have a Website project with a master page with the standard default Microsoft theme that is created when starting a new project.
I created a Search page that I want to call from this menu and put the new anchor tag within this standard menu. The click of the search link will pull up a modal and bring in my search.aspx page within it.
<li>Search</li>
function Search() {
document.getElementById('<%= hdnButtonSearch.ClientID%>').click();
}
This is the modal the source is a webform Search.aspx
<asp:ModalPopupExtender ID="ModalSearch" runat="server" PopupControlID="Panl1" TargetControlID="hdnButtonSearch"
CancelControlID="Button2" BackgroundCssClass="modalBackground" ></asp:ModalPopupExtender>
<asp:Panel ID="Panl1" runat="server" CssClass="Popup" align="center" style = "display:none">
<iframe style=" width: 800px; height: 600px;" id="irm1" src="Search.aspx" runat="server"></iframe>
<br/>
<asp:Button ID="Button2" runat="server" Text="Close" />
</asp:Panel>
I could call this modal window from being on any of the webforms just by clicking the Seach link within the menu.
Now the Problem.
I Call and open up the modal extender and it opens the search.aspx webform.
On this webform I want to put a button to close the modal.
I don't want to use the standard button in this case Button2 within the ModalPopupExtender I want to use a button that is actually on the Search.aspx page.**
What will really happen is the user searches for a client the client goes inside a grid and then the client wants to view that client so they click a link button within the gird which loads the client and then I want the modal to close.
How could I close this modal within the search.aspx page?
The search page does not have a MasterPageFile its just a webform that pops up within the modal.
In the search page I have a button. That calls the Javascript function to close the modal but it does not work I get an error.
Microsoft JScript runtime error: Object expected
function HideModalPopup() {
$find("ModalSearch").hide();
return false;
} </script>

Your search.aspx page is being rendered into the modal but is effectively part of the same page. This isn't an iframe, so you can assume it has full access to the DOM and all the available scripts.
Whatever JavaScript function you already have in place to close the modal, call that from the relevant client-side control from your search.aspx page.

How to change image without refreshing the page

I have a website where the user can select different cards. I need a way where when a new card is selected then the page does not refresh. When I click the back button now it just goes back to previous selections. I need it to go back to the previous page. Here is the code for the image change
<div class="imgCard" style="padding-right: 50px">
<asp:ScriptManager ID="ScriptManager" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="conditional">
<ContentTemplate>
<fieldset style="border-width: 150px; border-style: none">
<asp:Image ID="imgCardChoice1" runat="server" />
<br />
<br />
<a id="openChange1" href="#" style="color: Red">Change Card</a>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>
</div>
When the user clicks on "Change Card" then a jquery modal box opens and allows them to change the card. Thank you for any help/advice. If needed the code behind to select a new card is in C#.

Without knowing more, it sounds like you need to use AJAX to do that. If you are already using jQuery, check out jQuery.load(). You can make an AJAX request to a url on your site that will only return the image information and load that into the element you specify.
Here is a link to the docs:
http://api.jquery.com/load/

Try to use some javascript function.
create a div where you want to put your image.
then give him an ID, on javascript function call the div id and change the src to the image that you want to put.
on your link or wathever you have to change the image, call the onclick function and use the javascript function.
On my website i have 2 images, that onmouseover change an image in other div completely different.
see it on:http://roundhillevents.com
and pass the cursor on the facebook and on the youtube logo's.
If nothing appears, let stay the cursor over that a little while.
PS: Only works with forefox and don't know why.

PostingBack from ModalPopup, but keeping it visible?

I have a ModalPopup that will contain a gridview and 4 fields to enter items into the gridview itself.
Is it possible to postback to the server and update the gridview while keeping the modal open?
When you submit the fields and the postback occurs the modal closes has anyone done this before? Someone mentioned a solution using jQuery, but this was long ago.

Wrapping the popup's content (i.e. not the popup itself!) in an UpdatePanel worked for me.
My popup content is a search panel with sortable/pageable grid of results. The UpdatePanel gave me the exact behaviour I require with no additional code.
Thanks to Patel Shailesh for the idea.
<asp:Panel runat="server" ID="PopupPanel" Height="650" Width="900" Style="display: none">
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<!-- popup content -->
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajax:ModalPopupExtender runat="server" ID="PopupExtender" PopupControlID="PopupPanel"
TargetControlID="PopupButton" />
<asp:Button runat="server" ID="PopupButton" Text="Popup" />

The key to doing this is going to be using AJAX of some flavor -- Microsoft.Ajax or jQuery Ajax. If the UpdatePanel is not working, then I'd suggest using jQuery to submit back to the server using AJAX. This would involve creating a WebMethod to accept the AJAX post on the server side and instrumenting the client-side with jQuery to send the request/receive the response. Without seeing your HTML it's a little hard to be very specific.
Basic idea:
$(function() {
$('#modalSubmitButton').click( function() {
$.ajax({
url: 'path-to-your-web-method',
dataType: 'json', // or html, xml, ...
data: function() {
var values = {};
values['field1'] = $('#field1ID').val();
...
values['field4'] = $('#field4ID').val();
return values;
},
success: function(data,status) {
... update page based on returned information...
}
... error handling, etc. ...
});
return false; // stop any default action from the button clicked
});
});

I am not sure if this would work, but try to put whatever inside the modalpopup in a UpdatePanel
Please if this works don't hate me after you release, I hate updatepanels too

A kind of ugly option is to force a postback when showing the modal popup in the first place and setting a ViewState["ModelPopupOn"] = true; and then check that on page load and finally postback again and set it to false/remove it from viewstate when closing the popup.
(these kind of issues are why I hate the ajax toolkit)

I was experimenting with the modalpopupextender, and find a ugly solution.
If the modal panel has a button that makes the postback to happen
<asp:Panel runat="server" ID="PopupPanel" Height="650" Width="900" Style="display: none">
<asp:Button ID="OkButton" runat="server" Text="OK" OnClick="OkBtn_Click" />
</asp:Panel>
If the OkBtn_Click in the code-behind has a call to:
System.Web.HttpContext.Current.Response.Write("<script></script>");
Then the modalpopupextender is not closed.
This happened too to this guy:
http://forums.asp.net/t/1591860.aspx

ASP.net Page Loading popup

I was wondering if it is possible to have a modalpopup show up on page load, saying that the page is loading. I have a page that gets a lot of data from an external source which means it takes a bit before any of the controls are actually filled.
I would like to have a popup or something similar that tells the user the page is loading.
I tried this:
<ajax:ModalPopupExtender ID="mpeLoader" runat="server" TargetControlID="btnLoader"
PopupControlID="pnlLoading" BackgroundCssClass="modalBackground" />
<asp:Panel ID="pnlLoading" runat="server" Width="100px" Style="display: none;">
<div class="detailspopup">
<table>
<tr>
<td><asp:Image ID="imgLoader" runat="server" ImageUrl="~/App_Themes/Main/img/loading.gif" /></td>
</tr>
<tr>
<td>Loading...</td>
</tr>
</table>
</div>
</asp:Panel>
with a dummy button btnLoader to allow me to access the show and hide from code behind. I've been toying with the .show method in the page lifecycle but I can't seem to find a way to have the poopup show when the page is loading (and disappear when loading is done). This would also be needed upon filtering the data, thus getting new data based on filter data.

Hard to say what the best solution is without more information, but one possible way to go is to make the first page just act as a "loader" containing the dialog and some javascript that will load the actual page with ajax.
Like I wrote before it depends very much on what you are trying to accomplish :-) !
But one way to do it with jQuery, if the page you are trying to load is very simple like a list without any state / postback controls is to create a "Loader"-page like the code belov and use the UrlToLoad query param for what page to load dynamically.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$("form").load("<%= this.Request["UrlToLoad"] %> form");
});
</script>
</head>
<body>
<form runat="server">
Loading...
</form>
</body>

Have you considered using jQuery? There are some excellent modal dialog plugins available. I've used Eric Martin's SimpleModal extensively in the past, and have been very happy with it. It has hooks for callbacks both before and after displaying the dialog, so you could perform any checks you need to using functions.
Using the jQuery route - you could have a div that surrounds all the content that is still loading, and have is dimmed out/disabled with a modal dialog showing your 'page loading' message. Then you could make use of the $document.ready() functionality in jQuery to determine when the page is done loading. At this point, you could remove the dialog and fade the page in.

What I did is make a PreLoader.aspx page that will "hold" untill the page we want is loaded:
<script type="text/javascript" language="javascript">
window.onload=function()
{
$get("ctl00_ContentPlaceHolder1_btnNav",document).click();
setTimeout('document.images["Loader"].src="App_Themes/Main/img/loading.gif"', 200);
}
</script>
the button actually makes the transfer
<asp:Label ID="lblLoading" runat="server" Text="Loading the requested page. Please wait ..." />
<asp:Button ID="btnNav" Style="display: none;" runat="server" OnClick="NavTo" />
protected void NavTo(object sender, EventArgs e)
{
Response.Redirect(Request.QueryString["url"].ToString());
}
I like this as it can be reused for every heavy data page ...