Can any one tell me how can I make divs visible in ASP.NET. I tried to use a panel but it was interfering with other divs. Well, to explain my situation why I am asking is I want to show a form with submit button on a same page and thank you message after submitting it.
Any better suggestions on how can I do it? :)
Well here is code,
<%# 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">
<script type="text/javascript">
function Show(moreInfo) {
document.getElementById(btnInfo).style.visibility='hidden';
document.getElementById(moreInfo).style.visible = 'visible';
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.heading
{
text-align: center;
border-style: double;
background-color:#F2A988;
font-family:Sans-Serif;
font-weight:bold;
}
#wrapper {
margin: 0 auto;
width: 400px;
text-align:left;
}
.style1
{
text-align: center;
font-family:Sans-Serif;
}
</style>
</head>
<body style="height: 642px; width: 911px; " id="wrapper">
<form id="form1" runat="server">
<div class="heading">
Sheridan Computer Club - Inquiry Form</div>
<br />
<asp:Calendar ID="Calendar1" runat="server" Font-Names="Arial"></asp:Calendar>
<br />
<asp:Button ID="btnInfo" runat="server" Font-Names="Arial"
style="font-weight: 700"
Text="I'd like to receive more information!" Width="261px" />
<div style="position:relative; top: 0px; left: 0px; width: 463px; height: 188px;">
Show the div</div>
<div id="meeting"
style="position:relative; top: -285px; left: 320px; width: 232px; height: 64px; text-align: center; margin-top: 0px; font-family: Arial; font-weight:bold;">
<br />
<asp:Label ID="lblDate" runat="server"></asp:Label>
<br />
</div>
<div style="width: 308px; position:relative; top: -479px; left: 283px; margin-top: 0px;"
class="style1">
Click Below to find out when
<br />
the club meets next</div>
<div style="position:relative; top: -515px; left: 624px; width: 274px; height: 289px; font-family:Sans-Serif;">
<b>View Members by Program:<br />
<asp:ListBox ID="ListBox1" runat="server" Height="175px" Width="263px">
</asp:ListBox>
</b></div>
<div style="position:relative; top: -739px; left: 346px; width: 192px; height: 32px; text-align: center; margin-top: 0px;">
<asp:Button ID="Button1" runat="server" Text="Next Meeting"
onclick="Button1_Click" />
</div>
</form>
</body>
</html>
You can use runat="server" attribute on that div and set its Visible property on the server side.
<div runat="server" ID="someDiv" >
</div>
You can decide if page should render it in PageLoad or other events.
someDiv.Visible = someCondition;
To make it visible to asp.net server side
<div runat="server" id="mydiv">
</div>
As an alternative to the Panel which generates a div, instead you can use the PlaceHolder control which does not generate div tags
Check this question:
Using Panel or PlaceHolder
You can use asp:Literal like this;
<div>
<asp:Literal runat="server" ID="litHide" Visible="false" />
</div>
And then when a form is submitted change the visbility of this literal like this;
if(litHide.visible==false)
{
litHide.visible = true;
}
this is the simples way and the benefit is that you dont get anything inside the div tag, infact you get just text.
Related
I have two update panel which I triggered in javascript. After I run the code, only the second Panel's content is updated. Here is MyCode.
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="PaperContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadPaperData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox1Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox1Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox1TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'hidden';">
<div id="uiBox1Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox1TargetLabel" runat="server" />:
<asp:Image ID="uiBox1TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox1TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="WaterContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadWaterData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox2Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox2Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox2TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'hidden';">
<div id="uiBox2Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox2TargetLabel" runat="server" />:
<asp:Image ID="uiBox2TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox2TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
I triggered code behind using javascript, however, after run the code, only the second is updated.
<script>
$(document).ready(function () {
$("#ContentPlaceHolder1_PaperContent_Button1").click();
$("#ContentPlaceHolder1_WaterContent_Button1").click();
});
</script>
But I want both UpdatePanel be updated. What can I do to enable both updatepanel be updated?
If you can, change the UpdateMode of the 2nd panel:
UpdateMode="Always"
then remove the 2nd .click() in the javascript. The 2nd panel should update when the first panel updates (when a postback happens).
If you can't use Always, you can add an OnLoad event to the 2nd panel and move any code you have to that event. When a postback happens the 2nd panel will always reload and the code will fire.
Hth.
I have here a simple web form
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server" >
<div class="row">
<asp:Label ID="Label1" runat="server" Text="Name: "/>
<asp:TextBox ID="NameTextBox" runat="server"/>
</div>
<div class="row">
<asp:Label ID="Label2" runat="server" Text="Address: "/>
<asp:TextBox ID="AddressTextBox" runat="server"/>
</div>
<div class="row">
<asp:Label ID="Label3" runat="server" Text="Mobile No.: "/>
<asp:TextBox ID="MobileTextBox" runat="server"/>
</div>
</form>
</body>
</html>
I was watching EJMedia tutorial regarding css, and he created this css and converted the form into a table.
#form1
{
color: white;
display: table;
background-color: teal;
border: solid 2px black;
}
.row {
display: table-row;
}
.row label {
display: table-cell;
padding: 2px;
color: white;
}
.row textarea {
display: table-cell;
padding: 2px;
}
EDITED:
.row input{
display: table-cell;
padding: 2px;
}
but the problem is, the form did not aligned itself just like what it did in the demo. EJMedia was using plain html while I use asp controls. Is there a way to align my simple form using css or do I have to go back to table tr td tags which make it a little unreadable?
I created a simple postage calculator in Visual Studio with Web Forms (I know, I know, we had to use Web Forms in Class) using C#. I used some Bootstrap while styling , and at some point, my RadioButtonList stopped working. None of the radio buttons can be selected. Not really sure what caused it.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="PostageCalculator._default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="scripts/bootstrap.min.js"></script>
<link href="Content/bootstrap-theme.min.css" rel="stylesheet" />
<title></title>
<style type="text/css">
.auto-style1 {
width: 249px;
height: 250px;
}
#boxiediv {
text-align: center;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
.outer-div
{
padding: 30px;
text-align: center;
}
.inner-div
{
display: inline-block;
padding: 50px;
}
</style>
</head>
<body>
<form id="form1" runat="server" autocomplete="off">
<div class="page-header">
<div class="container-fluid">
<div id="boxiediv" > <img id="boxielogo" alt="Boxie. Easier than it should be." class="auto-style1" src="boxielogo2.png" align="middle"/></div>
<br /><br /><br /> <br /><br /><br /><br /><br /><br /> <br /><br /><br />
<div style="background-color: #4d6684 !important; " class="jumbotron outer-div" id="jbotron1" >
<div id="textboxes" class="row" >
<div class="col-md-4">
<asp:TextBox ID="widthTextBox" value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
<em> width</em></div>
<div class="col-md-4">
<asp:TextBox ID="heightTextBox" value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
<em> height</em>
</div>
<div class="col-md-4">
<asp:TextBox ID="lengthTextBox" value="0" type="number" AutoPostBack="true" runat="server" OnTextChanged="Calculate"></asp:TextBox>
<em> length (optional)</em></div>
<br />
</div><!--Closing tag for #textboxes-->
<div id="radiolist" class="inner-div" >
<asp:RadioButtonList AutoPostBack="true" ID="deliveryRadioList" runat="server" OnSelectedIndexChanged="Calculate"
RepeatDirection="Horizontal" >
<asp:ListItem Value="0.15" style="margin-right: 20px">Ground</asp:ListItem>
<asp:ListItem Value="0.25" style="margin-right: 20px">Air</asp:ListItem>
<asp:ListItem Value="0.45" >Next Day</asp:ListItem>
</asp:RadioButtonList>
</div><!-- closing tag for #radios-->
<asp:HiddenField ID="cost" runat="server" Value="0" />
<asp:Label ID="resultLabel" runat="server"></asp:Label>
</div>
</div>
</div>
</form>
</body>
</html>
The div with the ID boxiediv is covering your whole page by the looks of it, which is blocking the rest of your components. I bet your radio button will work if you comment out that div.
I'm not sure how you want it to look, you may need to use a z-index to move it behind or potentially play around with the height.
#boxiediv {
z-index: -1
}
I'm creating tab using multiview and what I want to do is to close one of the menu tabs when I right click on it.
These are part of the aspx and code behind:
ASPX Page:
<asp:Menu
id="Menu1"
Orientation="Horizontal"
StaticMenuItemStyle-CssClass="tab"
StaticSelectedStyle-CssClass="selectedTab"
CssClass="tabs" width = "100%"
OnMenuItemClick="Menu1_MenuItemClick"
Runat="server" style=" text-align:center;">
</asp:Menu>
<div id="divcont" runat="server" class="tabContents" style="height:100%; width:100%;" visible="false">
<asp:MultiView
id="MultiView1"
ActiveViewIndex="0"
Runat="server">
<asp:View ID="v1" runat="server" >
<iframe id="f1" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v2" runat="server" >
<iframe id="f2" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v3" runat="server" >
<iframe id="f3" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v4" runat="server" >
<iframe id="f4" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v5" runat="server" >
<iframe id="f5" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v6" runat="server" >
<iframe id="f6" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v7" runat="server" >
<iframe id="f7" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v8" runat="server" >
<iframe id="f8" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v9" runat="server" >
<iframe id="f9" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
<asp:View ID="v10" runat="server" >
<iframe id="f10" runat="server" style="border: None; height: 100%; width: 100%;"></iframe>
</asp:View>
</asp:MultiView>
</div>
Code Behind:
(This is part of the NodeChanged event)
...
...
...
int TabCount = Convert.ToInt32(lblTabCounter.Text.ToString());
int TabIndex = Convert.ToInt32(lblTabCounterIndex.Text.ToString());
if(TabCount <= 10)
{
divcont.Visible = true;
string tabName = getURLName(uRL);
MenuItem myItem = new MenuItem(tabName, TabIndex.ToString());
Menu1.Items.AddAt(TabIndex, myItem);
f1.Attributes.Add("src", lblURL.Text.ToString());
MultiView1.ActiveViewIndex = TabIndex;
TabCount++;
TabIndex++;
lblTabCounter.Text = TabCount.ToString();
lblTabCounterIndex.Text = TabIndex.ToString();
tvPermissions.ExpandAll();
int i = ctr;
}
(This is for the MenuItemClick Event)
protected void Menu1_MenuItemClick(object sender, MenuEventArgs e)
{
int index = Int32.Parse(e.Item.Value);
MultiView1.ActiveViewIndex = index;
}
This is the sample output:
The treeview is located in the orange part(left). While the blue one that is the target url that is located in the project. Based from the codes that I provided it will only point out to one frame named "f1" as an example though there are 10 of them. How can I remove a particular tab (say tab "Expenses") when I right click on it?
I want this to be done in the code behind. For javascript/jquery solutions please provide its code behind implementation or how to call/use it from code behind.
Please help me with this. For clarifications please leave a comment.
Thank you!
I tried a different approach. Instead of right click I use double click with confirmation to remove the tab.
I also adapted the user defined JS libraries to catch the double click and add more effects.
I mentioned as well that I already have my JavaScript function to work on this I'm just looking for alternatives other than JavaScript or JQuery. However I'm surprised that I didn't get any response or comments.
Thank you for reading this post.
when i click on the button which is inside the item template of gridview then onclientclick event should fire and then call the javascript function but my problem is that there no onclientclick event is fire in item template button.
<%# Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!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 runat="server">
<title>Untitled Page</title>
<style type="text/css">
.dvBroker
{
display: none;
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-image: url(image/broker_bg.png);
background-repeat: repeat;
}
.collection_heading2
{
font-family: verdana;
font-size: 12px;
font-weight: bold;
color: #000000;
background-image: url(image/gray_bg.gif);
background-repeat: repeat-x;
height: 20px;
width: 386px;
margin-left: 30%;
margin-top: 50px;
padding: 7px 7px 0px 7px;
border: 3px solid #000000;
border-bottom: none;
text-align: center;
}
.broker_window
{
border: 3px solid #000000;
height: 250px;
overflow: auto;
width: 400px;
background-color:White;
margin-left: 30%;
border-top: none;
padding-top: 10px;
text-align: left;
}
</style>
</head>
<body>
<script type="text/javascript" language="javascript">
function Show()
{
document.getElementById("dvStage").style.display='block';
return false;
}
function Close()
{
document.getElementById("dvStage").style.display='none';
return false;
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="sc1" runat="server" EnablePartialRendering="true">
</asp:ScriptManager>
<div>
<asp:Label ID="lblmsg" runat="server" ForeColor="#FF3300"></asp:Label>
<asp:LinkButton ID="lbnaddnewcharge" runat="server" OnClientClick="return Show();"
Text="Show"></asp:LinkButton>
</div>
<div>
ROLL NO:
<asp:TextBox ID="txtrollno" runat="server"></asp:TextBox>
<div>
STUDENT NAME:
<asp:TextBox ID="txtname" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="ADD" BorderStyle="Ridge" OnClick="btnadd_Click" /></div>
<asp:GridView ID="gvstudent" runat="server" AutoGenerateColumns="False" Width="857px"
OnRowDataBound="gvstudent_RowDataBound" OnSelectedIndexChanged="gvstudent_SelectedIndexChanged1">
<Columns>
<asp:BoundField HeaderText="ROLL NO" DataField="roll_no" />
<asp:BoundField HeaderText="NAME" DataField="name" />
<asp:BoundField HeaderText="TOTAL" DataField="total" />
<asp:BoundField HeaderText="STATUS" DataField="status" />
<asp:TemplateField>
<ItemTemplate>
<asp:Button CommandName="Click" ID="btnclick" OnCommand="btnclick_Click" CommandArgument='<%#Eval("roll_no") %>'
OnClientClick="return Show('aspnetForm','[gvstudent]');" runat="server" Text="Click" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
<div id="dvstage" class="dvBroker">
<div class="collection_heading2">
<div style="float: left">
SUBJECT
</div>
<div style="float: right">
<asp:ImageButton ID="btnclose" runat="server" ImageUrl="~/image/delete.png" OnClientClick="return Close();" />
</div>
</div>
<div class="broker_window">
<asp:UpdatePanel ID="up1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<asp:PopupControlExtender ID="PopupControlExtender1" runat="server" TargetControlID="gvchild"
PopupControlID="btnclick" Position="Center">
</asp:PopupControlExtender>
<asp:GridView ID="gvchild" OnRowDataBound="gvChild_RowDataBound" runat="server" AutoGenerateColumns="false"
EmptyDataText="NO Row in grid view">
<Columns>
<asp:BoundField HeaderText="Subject" DataField="subject_name" />
<asp:TemplateField>
<ItemTemplate>
<asp:TextBox ID="txtsubject" runat="server" Text='<%#Bind("marks") %>'></asp:TextBox></ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:Button ID="btnaddchild" runat="server" Text="ADD" OnClick="btnaddchild_Click" />
<asp:Button ID="btncancle" runat="server" Text="CANCLE" OnClick="btncancle_Click1" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</form>
</body>
</html>
Use a client-side framework like jQuery. Don't put all the onclick client-side events inline. It bloats your markup and it's harder to maintain. Bind the events instead, e.g. http://api.jquery.com/bind and/or http://api.jquery.com/live.
Since its ASP.NET WebForms, your HTML elements id attributes are rendered as the ClientID property of the server controls, so if that causes problems for you getting a reference to the elements to bind events to via id using a jQuery selector, use jQuery's selectors, http://api.jquery.com/category/selectors .
e.g.
$("input[id$='btnClose'").live("click", function(event) {
$("#dvStage").hide();
event.stopPropagation();
});
$("a[id$='lbnaddnewcharge']").live("click", function(event) {
$("#dvStage").show();
event.stopPropagation();
});