Develop Reference

Show asp.net Wizard Control SideBar on top instead of on side

I currently create a wizard and its steps programmatically and I am trying to show the default side bar with its links to each step on the top instead of the side. Is this possible?
Wizard wiz = new Wizard();
//Do stuff with wizard steps

It's possible with CSS
ASP.NET declarative code
<asp:Wizard ID="ApplicationWizard" runat="server" DisplaySideBar="True">
<%-- LAYOUT --%>
<LayoutTemplate>
<div>
<asp:PlaceHolder ID="headerPlaceHolder" runat="server" />
</div>
<div id="stepIndicator">
<asp:PlaceHolder ID="sideBarPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="WizardStepPlaceHolder" runat="server" />
</div>
<div>
<asp:PlaceHolder ID="navigationPlaceHolder" runat="server" />
</div>
</LayoutTemplate>
<%-- HEADER --%>
<HeaderTemplate>
<h1 class="text-center">My Form</h1>
<%-- TODO: Add your header elements here --%>
</HeaderTemplate>
<%-- SIDEBAR --%>
<SideBarTemplate>
<ul id="header">
<asp:ListView ID="SideBarList" runat="server">
<ItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" /></li>
</ItemTemplate>
<SelectedItemTemplate>
<li><asp:LinkButton ID="sideBarButton" runat="server" CssClass="active-step" /></li>
</SelectedItemTemplate>
</asp:ListView>
</ul>
</SideBarTemplate>
<%-- Wizard Steps --%>
<WizardSteps>
<asp:TemplatedWizardStep ID="AppStep1" runat="server" Title="Step 1">
<ContentTemplate>
<%-- TODO: Add your wizard step elements here --%>
</ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep2" runat="server" Title="Step 2">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep3" runat="server" Title="Step 3">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep4" runat="server" Title="Step 4">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
<asp:TemplatedWizardStep ID="AppStep5" runat="server" Title="Step 5">
<ContentTemplate></ContentTemplate>
</asp:TemplatedWizardStep>
</WizardSteps>
</asp:Wizard>
CSS Stylesheet
#stepIndicator {
list-style: none;
margin: 0px;
padding: 0px;
text-align: center;
}
#stepIndicator li {
display: inline-block;
}
#stepIndicator li a {
text-decoration: none;
padding: 10px;
display: block;
}
But how???:
On the SideBar template, create a list element
Inside the nested lis, insert the link button you want
The output will be the default format (sidebar on the side)
Add text-align: center for #stepIndicator to center the sidebar
Add display: inline-block for #stepIndicator li to align the the elements of #stepIndicator inline.

C# ASP.NET Update Progress not showing

I have this code in my control it is basically a control where the user enters a postcode and then clicks the check availability button - this then in turn calls an API and displays the address details in the update panel below.
<asp:UpdatePanel runat="server" UpdateMode="Conditional" ID="UpdatePanel_PostCode">
<ContentTemplate>
<asp:Panel runat="server" ID="Panel_PostCode" CssClass="form-row group" >
<div class="textbox-group">
<div class="textbox-group-row">
<div class="label-textbox">
<asp:Label runat="server" ID="Label_PostCodeToCheck" AssociatedControlID="TextBox_PostCodeToCheck"
Text="Postcode"></asp:Label>
</div>
<div class="input-text">
<asp:TextBox runat="server" ID="TextBox_PostCodeToCheck"></asp:TextBox>
</div>
</div>
<div class="textbox-group-row">
<div class="find-address">
<span class="extra">
<asp:Button runat="server" ID="Button_AddressCheck" CssClass="button dis small"
Text="Find Address" OnClick="Button_AddressCheck_OnClick" ClientIDMode="AutoID"/>
</span>
</div>
<div class="input-text">
<asp:UpdateProgress ID="progressPanel" runat="server" AssociatedUpdatePanelID="UpdatePanel_PostCode">
<ProgressTemplate>
<div id="CheckAvailMsg" runat="server" style="height: 24px; margin-top: 0.5em;">
<img id="ImageLoading" width="24px" height="24px" src="../images/loading.gif" alt="" style="float: left; padding-right: 0.5em;" />
<p id="domainCheckerText" style="float: left; padding-top: 0.3em; color: #000;">Checking Availability..</p>
</div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</div>
<asp:Panel ID="Panel_Error" runat="server" CssClass="error" Visible="False">
<asp:Literal runat="server" ID="Literal_Error"></asp:Literal>
</asp:Panel>
</div>
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
However when I click the Find address button the Update progress does not show - i've exhausted a number of resources but still cannot find a solution.

popup control linkbutton prevent postback

I am using a popup control with a link button inside that is used to close the popup. The problem is that the link button (or image button in the code below) is causing a full postback which is not intended. Can anyone help? below is the code.
<asp:PopupControlExtender ID="PopupControlLogin" BehaviorID="logpop" Position="Bottom"
TargetControlID="myLogin" PopupControlID="PanelLogin" runat="server">
</asp:PopupControlExtender>
<asp:Panel ID="PanelLogin" Style="position: absolute; display: none;" runat="server">
<div style="border: solid 1px #808080; border-width: 1px 0px;">
<div style="background: url(images/sprite.png) repeat-x 0px -200px;">
<asp:Label ID="Label2" runat="server" Style="font-weight: bold;" Text="Login" />
<asp:ImageButton ID="ImageButton1" Style="background: url(images/sprite.png) no-repeat 0px -300px;"
OnClientClick="$find('logpop').hide(); return false;" runat="server" />
</div>
<div style="background-color: #f2f2f2; width: 300px; height: 150px;">
My Content
</div>
</div>
</asp:Panel>

You are using it correctly, but I think there's an error in your jquery $find. Should be
$('#logpop').hide();
or
OnClientClick="$('#logpop').hide(); return false;"

I would change the button to a straight HTML link:
<img src="images/sprite.png" />
You can adjust the display as needed, but this should be what you need.

DropShadowExtender and RoundedCornersExtender not playing nicely with ModalPopupExtender

I have the following panel
<asp:Panel ID="pnlSessionController" runat="server" style="position: relative; display: block; padding:15px; height: 150px; width: 300px; background-color: white;">
<div style="position:absolute; top:0; right: 0;">
<asp:ImageButton ID="btnActiveSessionCancel" runat="server" ImageUrl="~/images/controls/exit.png" />
</div>
<div style="margin-left: auto; margin-right: auto; width: 270px; text-align: center;">
<asp:Image ID="imgStatus" runat="server" ImageUrl="~/images/status/current.png" /><br />
<asp:Label ID="lblInmateStationName" runat="server"></asp:Label><span><--></span><asp:Label ID="lblVisitorStationName" runat="server"></asp:Label><br />
<span>Time Remaining: </span><asp:Label ID="lblTimeRemaining" runat="server" ForeColor="Red"></asp:Label>
</div>
<div style="padding-left: 20px; padding-top: 15px;">
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRestart" runat="server" ImageUrl="~/images/controls/play.png" OnClick="btnRestart_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionPause" runat="server" ImageUrl="~/images/controls/pause.png" OnClick="btnPause_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionRecord" runat="server" ImageUrl="~/images/controls/record_off.png" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:ImageButton ID="imgBtnSessionStop" runat="server" ImageUrl="~/images/controls/stop.png" OnClick="btnEnd_click" />
</div>
<div style="float: left; padding-right: 10px;">
<asp:Image ID="imgBtnSessionMonitor" runat="server" Height="27px" Width="27px" ImageUrl="images/controls/monitor.png" onclick="monitorSesion()"/>
</div>
<div style="float: left;">
<asp:ImageButton ID="imgBtnMessage" runat="server" ImageUrl="~/images/controls/message.png" OnClick="btnMessage_click"/>
</div>
</div>
</asp:Panel>
Because this information is going to be bound server side depending on which control in a datalist is selected I have:
<cc1:ModalPopupExtender ID="mpeActiveSession" runat="server" TargetControlID="hackForPopup" DropShadow="false" PopupControlID="pnlSessionController"
CancelControlID="btnActiveSessionCancel" OnCancelScript="ActiveSessionPopupCanceled()"></cc1:ModalPopupExtender>
I then call mpeActiveSession.Show() in the code-behind after I bind the data.
OK, I had a drop shadow specified in the control but that is where the story begins. I finish this guy up and it is working beautifully, and the damn customer complains that the pop-ups don't look suave enough. What they really meant was that the pop-ups don't look enough like Mac Windows. Anyways, they requested rounded corners and for the drop shadow to be less opaque and rounded. So, I say ok, hopefully I can just add the following.
<cc1:RoundedCornersExtender ID="rceSessionController" TargetControlID="pnlSessionController" Radius="10" runat="server" Corners="All" BorderColor="Gray"></cc1:RoundedCornersExtender>
<cc1:DropShadowExtender ID="dsSessionController" runat="server" Opacity=".7" TrackPosition="true" TargetControlID="pnlSessionController"></cc1:DropShadowExtender>
Now it doesn't render correctly. One of the divs gets the rounded corner, the position on the page is wrong, and all of the controls and text are missing. Any ideas? I am also open to a better approach to styling the popup.

Ok the RoundedCornersExtender and the DropShadowExtender are obsolesced by CSS3. All you need is border-radius and box-shadow.
Anyhow, the problem with the extenders was that my parent div used relative positioning. It doesn't matter now however, because the CSS3 stuff looks much better and is easier to implement anyways.

Master page image doesn't display on content page

I have an image on my master page like this:
<img src="../Images/logo.jpg" />
The master page lies in Root/MasterPages/masterpage.master
Now this image is displayed in a content page which is in Root/SomeDir/ContentPage.aspx,
but it doesn't work in a content page which is in Root/SomeDir1/SomeDir2/ContentPage.aspx. Why?
Master Page HTML
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
<style type="text/css">
#div_Main
{
height: 825px;
width: 1022px;
top: 16px;
left: 77px;
position: absolute;
margin-left: 14px;
}
#div_LeftPanel
{
width: 299px;
top: 179px;
left: 2px;
position: absolute;
height: 641px;
background-color: #7E8387;
}
#div_Content
{
width: 716px;
top: 180px;
left: 303px;
position: absolute;
height: 638px;
}
#div_Header
{
top: 0px;
left: 0px;
position: absolute;
height: 176px;
width: 1022px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div id="div_Main">
<div id="div_Header">
<img src="../Images/logo.jpg" />
</div>
<div id="div_Content">
<asp:ContentPlaceHolder ID="cph_WorkingArea" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="div_LeftPanel">
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton
ID="lnkbtn_JObAspirantsList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_JObAspirantsList_Click">Job Aspirants List</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_ERFList" runat="server"
style="color: #CFCFF3; font-size: xx-large" onclick="lnkbtn_ERFList_Click">ERF List</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_InterviewFeedbackList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_InterviewFeedbackList_Click">Interview FeedbackList</asp:LinkButton>
<br />
<br />
<br />
<br />
<br />
<br />
<asp:LinkButton ID="lnkbtn_NewEmployeeList" runat="server"
style="color: #CFCFF3; font-size: xx-large"
onclick="lnkbtn_NewEmployeeList_Click">New Employees List</asp:LinkButton>
<br />
<br />
<br />
<asp:LinkButton ID="LinkButton1" runat="server" style="color: #CFCFF3; font-size: xx-large" onclick="LinkButton1_Click">LogOut</asp:LinkButton>
<br />
<br />
</div>
</div>
</form>
</body>
</html>
Content Page HTML
<%# Page Language="C#" MasterPageFile="~/MasterPages/HRMaster.Master" AutoEventWireup="true" CodeBehind="ERF.aspx.cs" Inherits="StarTechnologies.ERF" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="cph_WorkingArea" runat="server">
<p>
<br />
<asp:GridView ID="GridView1" runat="server" Height="212px"
onselectedindexchanged="GridView1_SelectedIndexChanged" Width="434px">
</asp:GridView>
</p>
<br />
</asp:Content>

RPM1984 is almost right. You should use ~ to indicate a path relative to the root of your application. You should however translate that to a path the browser understands. If you are using ASP.NET controls like Image that is done automatically. If you're using HTML tags (without runat="server") you have to translate the path manually using Page.ResolveClientUrl().
For example:
<img src="<%= ResolveClientUrl( "~/Images/logo.jpg" ) %>"/>
In this case however, you're probably better off using the Image control:
<asp:Image runat="server" ImageUrl="~/Images/logo.jpg"/>

Try not to use relative paths.
Use absolute:
<img src="~/Images/logo.jpg" />
That is assuming "Images" is a folder underneath the root of your web application.
The thing to remember about Master Pages is that they really are syntactic sugar in a way (similar to partial classes) That is, when you put an image inside a MasterPage, the .NET CLR will create the content page with the Master info - so the image reference will be unchanged.
It's not ../Images from the Master, its ../Images from the Content it's placed upon.
In other words, to the client, there is only ONE page (ASPX - content page), it's not like a magical parent page has been created which holds onto URL references.
HTH

I had the same problem.
My master page's content didn't display but the Web Form content did.
What happens is that the content page is overwritting the master page's content.
I solved it creating a new ContentPlaceHolder in the MasterPage with ID="Example".
Then in the Web Form, I changed ContentPlaceholderID="OlderID" to ContentPlacerHolderID="Example".