show html table on button click of asp.net server control - html

I am trying to display a table on the button click,right below the button,but it is getting display on the top of the page(Above the navbar).
This is what I did:
Response.Write("<table border='1' cellpadding='2' WIDTH='20%' height='10px' style=\"margin-bottom:10px\">");
what should be done to align the table below the button?please help

you should place a control and that add it into that control.
You can also take the help of html generic controls to add html control in the controls.
<asp:panel id="panel1" runat="server">
</panle>
and in code behind
panel1.InnerHtml="";

You should not be using Response.write. Either:
1) Use some JavaScript and HTML to show/hide the table.
2) Use server side control for example
ASPX page
<asp:panel runat="server" id="foo" visible="false">
<table border='1' cellpadding='2' WIDTH='20%' height='10px' style=\"margin-bottom:10px\>
....
<asp:panel>
Code
foo.Visible = true;
See Show/Hide panels in ASP.net C# after submitting form

Related

how to override a user control in asp web forms?

i have a .aspx page, where i have some user controls, nested inside <table> tags, some of them are link this:
<td runat="server" id="LoadContext" class="tb_RightTD">
<cc1:RMWDropDownMenu ID="ddLoadContext" CssClass="ddLoadContext" CaptionCssClass="lbContext" CaptionExpandedCSSClass="lbContextExpanded" ImageCssClass="lbContextImage" ImageExpandedCSSClass="lbContextImageExpanded" runat="server" DropDownContentsBoxWidth="0px" DropDownMenuCellCssClass="DropDownMenuCell" DropDownMenuItemCssClass="DropDownMenuItemCssClass" DropDownMenuItemHoverCssClass="DropDownMenuItemHoverCssClass" DropDownMenuTableCssClass="DropDownMenuTable" meta:resourcekey="ddLoadContextResource1" TableCssClass="dropDownTable" Value="" DropDownContentsPanelId="" ExpandImagePath="" TableExpandedCssClass=""></cc1:RMWDropDownMenu>
</td>
i can't understand how this works, because, i'm just changing the "frontend", and... this code generates a table soup with some links inside. i want change the structure of this "dropdown" and in his place, use bootstrap structure, to make it look better, i need some help to override this thing, i know php, but asp is not my beach.
folder structure image
here the page i'm editing: http://pastebin.com/kgsMk2mH

css not applying for asp.net hyperlink

In my asp.net application, there is a hyperlink. I want to change it's color to white when I hover over it using css, but it is not working.
<asp:HyperLink ID="hlViewItem" class="hplClass" runat="server" NavigateUrl='<%#Eval("Pro_Id","ProductDetails.aspx?ProID={0}") %>' ForeColor="#33ccff">View Item</asp:HyperLink>
My css:
.hplClass:hover
{
color:white;
}
For ASP.NET controls use attribute CssClass instead of 'class'.
Try this (After removing ForeColor="#33ccff") :
<asp:HyperLink ID="hlViewItem" CssClass="hplClass" runat="server" NavigateUrl='<%#Eval("Pro_Id","ProductDetails.aspx?ProID={0}") %>'>View Item</asp:HyperLink>
Also make sure that you have added the reference of css file in your aspx page.

Css class name getting changed in html of aspx page

I'm working on aspx pages and i have asp.net Menu and CSS assigned to it.
But when I run the application the CSS class names get changed and its dynamically created as we see in controls inside "ContentPlaceHolder".
The code is
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu"
EnableViewState="False" IncludeStyleBlock="False" Orientation="Horizontal">
<DynamicItemTemplate>
<%# Eval("Text") %>
</DynamicItemTemplate>
<Items>
.
.
.
</Items>
</asp:Menu>
please check this Image what i get when i run this..
I checked my application to know whether the Menu control is placed inside content placeholder or anything. But its not.
Do anyone know how to solve this issue.
class="menu ct100..." means that this element has two classes 1:menu and 2:ct100...
and nothing is wrong with it!the ct100... is generated by asp.net and if it is different any time you run the page it's up to asp.net component and if you dont like that try not to use this built in component, that i think you should do it.
by the way the only thing is changing when using master pages is client side id, that you can avoid this from happening by code below
<asp:TextBox ID="myId" runat="server" ClientIDMode="Static"></asp:TextBox>
set ClientIDMode to Static

Is is possible to resize(length) the slider extender control? And show rail track on the or below control?

I used the ajax's slider extender control in my web page. I want to reduce the length of the control.
How should i show the rail track on the control or below the control depending on the steps of the control?
How should i set length of the control?
If it is possible then provide some document related on this topic.
I used the control in following way...
<asp:TextBox ID="txtPercentageCompleted" runat="server" Text="0" Width="100%" style="display:none;"
ontextchanged="txtPercentageCompleted_TextChanged" AutoPostBack="true"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="txtPercentageCompleted"
TargetControlID="txtPercentageCompleted"
Minimum="0"
Maximum="100"
BoundControlID="lblPercentage"
Steps="5" EnableHandleAnimation="true">
</ajaxToolkit:SliderExtender>
<asp:Label ID="lblPercentage" runat="server" Text="Label" Width="100%"></asp:Label>
I've solved one of above issue that is Setting size of the rail track of slider extender contrl-
<asp:TextBox ID="txtPercentageCompleted" runat="server" Text="0" Width="100%" style="display:none;"
ontextchanged="txtPercentageCompleted_TextChanged" AutoPostBack="true"></asp:TextBox>
<ajaxToolkit:SliderExtender ID="SliderExtender1" runat="server" BehaviorID="txtPercentageCompleted"
TargetControlID="txtPercentageCompleted"
Minimum="0"
Maximum="100"
BoundControlID="lblPercentage"
Steps="5" EnableHandleAnimation="true"
RailCssClass="sliderrail"
Orientation = "Horizontal">
</ajaxToolkit:SliderExtender>
<span style="float:left;width:8%;text-align:right;"> <asp:Label ID="lblPercentage" runat="server" Text="Label" Width="100%"></asp:Label></span>
Css of the sliderrail is-
.sliderrail
{
position:relative;
background-image:url('../images/slider_h_rail.gif');
height:22px;
width:100px;
}
Also there is Length property present to the slider control. By using we can set width/height of control and is depend on the orientation property that is horizontal or vertical.
You could try to contain the control within a div with a width.
Or
You could view the output html that is produced and attempt to create css to limit the length. That is if you can create a selector based on any client Ids or similar.

Uploadify control in a div INSIDE a table cell

I've got the following control working called Uploadify. So I've placed the control inside a table. Here's a rough example:
<tr>
<td>
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
</td>
<td> OTHER STUFF </td>
</tr>
<tr>
The control is placed in a div called "holdcontrol". It is not possible to use hide or attr to disable the uploadify control because of its flash content. The simple solution is to simply set the height of the div to zero.
So I used $(#holdcontrol).css("height", 0); - so this "disables" the control which really 'hides' the button.
The problem is that it only partially closes down on the Uploadify control - Half of it - Which means that I can see "half of the control button". When I want to use the control again, I issue the command:
$(#holdcontrol).css("height", null); - that rebounds and it works fine. It's the setting of the div height inside the table cell to "hide" or to "disable" the Uploadify control that is bugging me.
Any thoughts or tips to truly setting that div height value to 0?
thanks and Happy Holidays!
After uploadify is loaded it changes your HTML code using JavaScript. In one of my Projects it adds an object outside of #holdcontrol so hiding #holdcontrol won't do anything.
<div id="holdcontrol">
<input id="file_upload" name="file_upload" type="file" />
</div>
<object
width="226" height="24" type="application/x-shockwave-flash"
data="http://www.example.com/ext/flash/uploadify.swf"
id="flashfileUploader"
>
<!-- even more code-->
</object>
As you can see the object gets the id #flashfileUploader - so if you just try to change #flashfileUploader instead of #holdcontrol you should be fine.
You can find this kind of undocumented stuff using FireBug (https://addons.mozilla.org/de/firefox/addon/1843/).
so long,
Tim