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.

Unable to check RadioButton inside DataList footer Template

I have kept two radio button inside a datalist footer template but I am not at all able to select it. Below is my footer template:
<FooterTemplate>
<tr>
<td align="right" colspan="7"><br />
</td>
</tr>
<tr>
<td align="left" valign="middle" colspan="7">
<div style="background-color:#FCEE21; height:47px ;">
<div style=" position:relative; top:15px; left:20px;">
<asp:CheckBox ID="cbAgree" Checked="true" Text="I agree on all terms & conditions" runat="server" />
</div>
<div style=" position:relative; top:-1px; left:410px;">
<asp:Label ID="Label2" runat="server" Text="Total: (INR)"></asp:Label>
</div>
<div style=" position:relative; top:-22px; left:550px;">
<asp:Label ID="lbltotal" runat="server" Text="000000" Font-Size="14pt"></asp:Label>
</div>
</div>
</td>
</tr>
<tr>
<td align="right" colspan="7">
<div style="background-image: url(images/footerBg.png); height:47px ;">
<div style=" position:relative; top:10px; left:-172px;">
<asp:Label ID="Label9" runat="server" Text="Select an option: "></asp:Label>
<asp:RadioButton ID="rb1" Text="Colect" AutoPostBack="true" runat="server" GroupName="rboption"/>
<asp:RadioButton ID="rb2" Text="Deliver" AutoPostBack="true" runat="server" GroupName="rboption"/>
</div>
<div style=" position:relative; top:-18px;">
<asp:Button ID="btnSubmit" runat="server" Text="Submit" BackColor="#F8CD20" CssClass="anchor"
BorderColor="#F8CD20" BorderStyle="None" OnClick=" Submit_Clicked" Font-Bold="True" Font-Size="14pt"
Height="38px" Width="105px" />
</div>
</div>
</td>
</tr>
</FooterTemplate>
I have not done any databinding also. Please help me out, if I missed out something.

Your problem is about your css styling. If you remove inline css styles from your divs you can click them.
Those divs are displaying on top of each other without proper styles and radiobuttons stay under another div, prevents you clicking on them.
Or if you want to keep the styles and still click them you can use "z-index" attribute with adding z-index:1;, so you bring the div with radiobuttons, above the other div, making them clickable.
....
<div style=" position:relative; top:10px; left:-172px; z-index:1;">
<asp:Label ID="Label9" runat="server" Text="Select an option: "></asp:Label>
<asp:RadioButton ID="rb1" Text="Colect" AutoPostBack="true" runat="server" GroupName="rboption"/>
<asp:RadioButton ID="rb2" Text="Deliver" AutoPostBack="true" runat="server" GroupName="rboption"/>
</div>
....

Website starts working after a few seconds

I am quite new in websites and web applications. I have created a website which works correctly on localhost IIS but when I put it on server it is not working properly. I have to wait for a while until it starts working. I also get the following error when I select items in dropdown: (it's on the bottom-left corner of the window)
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET4.0C; .NET4.0E; InfoPath.3; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 1.1.4322; MS-RTC LM 8)
Timestamp: Tue, 26 Mar 2013 13:07:37 UTC
Message: Sys.WebForms.PageRequestManagerParserErrorException: The message received from the server could not be parsed.
Line: 869
Char: 13
Code: 0
I set the trace to true and it works now. But it doesn't seem to be a good solution as I still see that error when I select items in dropbox. Do you have any good suggestion for this? should I add or remove something from configuration file or somewhere else? Following is my web.cinfig
<?xml version="1.0"?>
<configuration>
<system.web>
<customErrors mode="Off"/>
<compilation targetFramework="4.0" debug="true"/>
<pages controlRenderingCompatibilityVersion="3.5" clientIDMode="AutoID"
viewStateEncryptionMode="Always"/>
<trace
enabled="true"/>
</system.web>
</configuration>

Sys.WebForms.PageRequestManagerParserErrorException - what it is and how to avoid it,
If you've used the Microsoft ASP.NET AJAX UpdatePanel control, there's a good chance you've hit the "Sys.WebForms.PageRequestManagerParserErrorException" error.

I actually no sure what is throwing this error. in my webform im using updatepanel. rhis is part of my web form.
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="Default" %>
<!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">
<title>DTC</title>
</head>
<body bgcolor="#333333">
<h1 align="center" style="font-family: Arial; color: #FFFF99; height: 40px; font-
weight: bold;
font-size: 50px; min-width: 900px;" title="Header">
DTC Viewer</h1>
<form id="form1" runat="server" style="margin: 50px 100px 50px 100px; min-width: 700px;
background-color: #C0C0C0; font-family: Arial, Helvetica, sans-serif;">
<div align="center" style="width: 100%">
<asp:UpdatePanel ID="CheckboxUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table id="MainTable" runat="server" style="margin-left: 100px;">
<tr>
<td>
<asp:UpdatePanel ID="BrandUpdatePanel" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<td style="padding-bottom: 5px;">
<asp:Label ID="BrandLabel" runat="server" Text="Brand :" Font-Names="Arial" Font-Size="Medium"
ForeColor="#333333" CssClass="MyLabel" Width="8em"
style="margin-right: 1em;text-align: right;"></asp:Label>
</td>
<td style="padding-bottom: 5px;">
<asp:TextBox ID="Brand" runat="server" Height="15px" Width="176px" Text="VTC" BackColor="#FFFFCC"
CssClass="MyDropBox" AutoPostBack="True" ForeColor="#666666" ReadOnly="True"></asp:TextBox>
<asp:Label ID="StarLabel1" runat="server" Font-Names="Arial" Font-Size="Medium"
ForeColor="#333333" Width="1em"
style="text-align: left;" Text="*"></asp:Label>
</td>
<td style="padding-bottom: 5px;">
<asp:RequiredFieldValidator ID="BrandValidator" runat="server" ErrorMessage="Basic Search: Brand is required"
ControlToValidate="Brand" InitialValue="" ForeColor="Red" Width="15em" CssClass="ErrorMessage"
Font-Size="Small"></asp:RequiredFieldValidator>
</td>
</tr>
<tr>
<td>
<asp:Label ID="ModelLabel" runat="server" Text="Model :" Font-Names="Arial" Font-Size="Medium"
ForeColor="#333333" CssClass="MyLabel" Width="8em"
style="margin-right: 1em;text-align: right;"></asp:Label>
</td>
<td>
<asp:TextBox ID="Model" runat="server" Height="15px" Width="176px" Text="FH(4)" BackColor="#FFFFCC"
CssClass="MyDropBox" AutoPostBack="True" ForeColor="#666666" ReadOnly="True"></asp:TextBox>
<asp:Label ID="StarLabel2" runat="server" Font-Names="Arial" Font-Size="Medium"
ForeColor="#333333" Width="1em"
style="text-align: left;" Text="*"></asp:Label>
</td>
<td>
<asp:RequiredFieldValidator ID="ModelValidator" runat="server" ErrorMessage="Basic Search: Model is required"
ControlToValidate="Model" InitialValue="" ForeColor="Red" Width="15em" CssClass="ErrorMessage"
Font-Size="Small"></asp:RequiredFieldValidator>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Label ID="KTXLabel" runat="server" Text=" Emission level :"
Font-Names="Arial" Font-Size="Medium"
ForeColor="#333333" CssClass="MyLabel" Width="8em"
style="margin-right: 1em;text-align: right; margin-left: 0px;"></asp:Label>
</td>
<td>
<asp:DropDownList ID="KTX" runat="server" BackColor="#FFFFCC" ForeColor="#666666"
Height="21px" Style="margin-left: 0px" Width="182px" OnSelectedIndexChanged="KTX_SelectedIndexChanged"
CssClass="MyDropBox" DataTextField="text" DataValueField="value" AutoPostBack="True">
</asp:DropDownList>
<asp:Label ID="Label1" runat="server" Font-Names="Arial" Font-Size="Medium"
ForeColor="#333333" Width="1em"
style="text-align: left;" Text="*"></asp:Label>
</td>
<td>
.........
..........
</ContentTemplate>
</asp:UpdatePanel>
<div style="width: 123px; margin-left: 7px; z-index: inherit;">
<asp:Button ID="getURLButton" runat="server" Height="32px" OnClick="getURLButton_Click"
Text="Submit" Width="134px" BackColor="#DD5800" BorderColor="Gray" Font-Bold="True"
Class="MyButton" Font-Size="Large" ForeColor="#4E4E4E" />
</div>
<br />
</div>
</form>

Checkbox for images in an ASP.NET repeater control

I am working with ASP.NET. I am using a repeater to display images, and I also am using a check box for each image.
How can I select individual images and update their values as per image id?
My code is:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>

You could use javascript to implement this, something like this should do the trick:
Without jQuery
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
onclick="imageClickHandler(this,event);"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
function imageClickHandler(s,e){
//do something with the current image that is being clicked on.
//The parameter 's' is a reference to the caller of this method and the 'e' contains
//event data
}
With jQuery
If your using jQuery, you could also try something like this:
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<img ID="ImageZoom" runat="server"
class="handled"
src='<%# DataBinder.Eval(Container.DataItem, "ImageUrl") %> '
style="display: inline; height:auto; left: 0pt; top: 0pt;
width:auto;" />
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:Repeater>
<script type="text/javascript" src="jquery-1.7.3"></script>
$(function(){
$("img.handled").click(function(){
//alerts the id of the image thats being clicked on.
alert($(this).attr("id"));
});
});

How to put a label over an image

I was trying to look out for a possible solution and am yet to find one. Could you help me out how to add a text over an image.
Below is my code and I want lblWelcome and lblUsername to come over the image.
<img alt="Logo" src="../Resources/Images/Header.gif" style="height: 70px; width: 1000px;"/>
<asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>
<asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
Would be glad if someone can help me with this.
TIA,
Su

Another way can be by setting your image as the background image of an element and have your text as the child element
e.g.
<div style="background-image: url(../Resources/Images/Header.gif);height:70px;width:1000px;" >
<asp:Label ID="lblWelcome" runat="server" Text="Welcome " CssClass="HeaderMenuText"></asp:Label>
<asp:Label ID="lblUsername" runat="server" CssClass="HeaderMenuText" Text=""></asp:Label>
</div>

Use Css like Given Below:
<style type="text/css">
.lblposition {
position:absolute;
left:789px;
top:30px;
height: 21px;
width: 65px;
}
</style>
Use this css in label like below:
<asp:Label ID ="lbl" runat="server" Text="Search" BackColor="Red" ForeColor="Blue" CssClass ="lblposition"></asp:Label>

<table>
<tr>
<td style="background-image:url("Images/image1.jpg"); height:20px; width:20px;">
<asp:label ID="Lbl1" runat="server" Text="" Fore-color="Red" />
</td>
</tr>
</table>