We Keep Coding

Ajax Modal Popup Extender Mark Up on Child Page

I've been researching for hours a demo of the AJAX Modal Popup Extender markup in a child page.
I'm trying to implement an ASP.NET LinkButton on the parent page in a Gridview column to fire the modal (the child page) and keep the UI markup separate.
Can someone please provide a code demo of this?

Put iframe inside panel and set src to your file:
<cc1:ModalPopupExtender ID="mp1" runat="server" PopupControlID="PanelX" TargetControlID="YourButtonID"
CancelControlID="btnClose" BackgroundCssClass="Background">
</cc1:ModalPopupExtender>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" align="center" style = "display:none">
<iframe style=" width: 410px; height: 190px;" src="YourChildPage.aspx" runat="server"></iframe>
<br/>
<asp:Button ID="btnClose" runat="server" ClientIDMode="Static" style="display:none"/>
</asp:Panel>

Show and hide div in C# don't work

I'm working on a web application in C# .net, using twitter bootstrap in frontoffice.
In onClick button I need to show a div that contains a progressBar div and when the process finish, hide the div. I'm using this code:
web.aspx:
<asp:Button ID="btnProcess" runat="server" Text="Process" OnClick="btnProcess_Click" />
// on load web, this div is invisible
<div class="progress progress-striped active invisible" id="progressBar" runat="server">
<div class="bar" style="width: 90%;" id="percentProgresBar"></div>
</div>
And my web.aspx.cs:
protected void btnProcess_Click(object sender, EventArgs e){
// here change class to "visible"
progressBar.Attributes["class"] = "progress progress-striped active visible";
//--- all my process ----
//--- all my process ----
//when my process finish, hide the div again, change the css class to "invisible"
progressBar.Attributes["class"] = "progress progress-striped active invisible";
}
My problem is the div is visible when my process ends, not at the beginning. How can I resolve this? tTo make visible the div before --- all my process ---- and when finish that part of my code, to make the div invisible again.
Thanks for your help!!

You can try changing/converting your div to a server-side control by giving it an ID and add runat="server" , then use it in your code.

instead of using those classes, give the attribute Style="display:none" to hide and Style="display:" to make it visible but that wont serve your purpose. But for displaying the progress bar you can simply use Update Progress
<form id="form1" runat="server">
<asp:ScriptManager ID="sm" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading...
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="upd" onclick="updButton_Click"
text="click to update" />
</ContentTemplate>
</asp:UpdatePanel>
</form>
In code behind updButton_Click takes a long time to update, during the period you will see Loading... on the page, you can change the text to a to make it more like a ProgressBar(such as a GIF moving-bar image)

Show User Control through Static Method

I have been researching this, but haven't been able to find anything so far.
Currently, I am using a Javascript alert box on my ASP page:
public static class Alert
{
public static void Show(string message)
{
string script = "<script type=\"text/javascript\">alert('" + message + "');</script>";
Page page = HttpContext.Current.CurrentHandler as Page;
if (!page.ClientScript.IsStartupScriptRegistered("alert"))
{
page.ClientScript.RegisterStartupScript(typeof(Alert), "alert", script);
}
}
}
I am able to call this from code behind by: Alert.Show("Text");
My plan is to replace the Javascript alert by utilizing the AjaxControlToolkit's ModalPopupExtender. I am creating a user control that looks something like this:
<ajax:ModalPopupExtender ID="mpAlert" runat="server" PopupControlID=""
TargetControlID="btnExport" OkControlID="btnOK">
</ajax:ModalPopupExtender>
<asp:Panel ID="pnlSteps" runat="server" BackColor="#C5D9FC" Width="10%"
BorderColor="#093E9A" BorderStyle="Double" BorderWidth="5px"
style="border-radius: 10px; padding: 5px;">
<div>
<asp:Literal ID="lSteps" runat="server" />
</div>
<div>
<input id="btnOK" type="button" value="OK" />
</div>
</asp:Panel>
I am wondering if there is a way I can create a static method to show this from codebehind, similar to how I used the Javascript alert. I'd like to be able to wrap this in a class so I could just call AjaxAlert.Show(), without having to call anything in the aspx file.
This is still a rough idea, so if any more details are needed, just let me know.

You can show the ModalPopupExtender from codebehind. Therefore you need an invisible trigger button.
mpAlert.Show();
So set the TargetControlID of the ModalPopupExtender to a hidden button:
<asp:Button ID="Hid_ShowDialog" Style="display: none" runat="server" />

UpdatePanel does not appear on default load, but it does when specific page is given

I got my hands on a this web application few days back and I am already stuck with a problem.
When I load the page with, say, HL1 = http://localhost:8001/, UpdatePanel does not appear at all.
Though when I load the page with HL2 = http://localhost:8001/Default.aspx, it displays in its full glory.
[EDIT: Added HL1, HL2 tags]
FYI, UpdatePanel is part of a Master page.
Any suggestions?
Thanks,
Abhinav
[EDIT: Code for update panel]
<asp:UpdatePanel ID="upan" runat="server" >
<ContentTemplate>
<fieldset style="width:320px; padding:2px;margin-top:20px;margin-bottom:5px;" onmouseover="showHelp('quickAccess')" onmouseout="g_Popup.hide()">
<legend>Quick Access</legend>
<span style="vertical-align: middle">Dummy #
<asp:TextBox ID="txtSearchDummy" clientidmode="Static" runat="server" MaxLength="9" Width="70px" Height="15px" style="margin-top: 5px"></asp:TextBox>
<asp:Button ID = "btnSearchDummy" clientidmode="Static" runat="server" OnClick="btnSearchDummy_Click" style="display:none"/>
<button onclick="return quickAccess()" lang="javascript" type="submit" class="button_enabled" style="margin-left: 5px;">
<img alt="" src="images/lightning.gif"></img><span>Find Dummy</span></button></span>
</fieldset>
</ContentTemplate>
</asp:UpdatePanel>

Thanks for all the help guys. Issue is resolved now and, as expected, it had nothing to do with ASP.NET. In master page code behind file that search box was being made invisible.
:)

how do I show a webpage in a modal popup?

I'm having surprisingly bad luck finding a decent resource for this. But What I'm doing is creating a list of tickets using a ListView. One of the controls in the item template is a link button that shows the header of the ticket. When the user clicks the link button, I want to open a modal window that shows the ticket in readable format. To get the ticket, I'll be passing that page a variable and it'll do the rest; nothing complicated. The page will have 3 buttons and the windows needs to close when you click one of them.
Now, I figured out how to use the ModalPopupExtender from the Ajax tookit more or less. You create the panel in it's own div which stays hidden. I created a click event that basically uses a webclient to download the html from the page and insert it into that div's innerHtml. This seems to work the first time. But as soon as you click a different link, the page pukes and says something about it being in an illegal state.
I'm not sure if I'm going about this wrong, and I can't find any decent examples of how to do this. Well there's one, but the english is hard to understand and it's in VB instead of C#. Any help?

<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:ModalPopupExtender
DropShadow="true"
OkControlID="btnOk"
CancelControlID="btnClose"
runat="server"
PopupControlID="Panel1"
id="ModalPopupExtender1"
TargetControlID="Button1" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none;">
This is basic modal popup.
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnClose" runat="server" Text="Close Me" />
<iframe src="http://www.google.com"></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
</div>
</form>
Try this it should work.