In my .cs page i want to check some condition and depending on that i will show/hide a div in my .aspx page. Is that possible?
like
if(j==0)
{
div id="hi".visible=false; //something like that
}
I hope u guys understood the problem.
Thank you
.aspx.cs
if (j == 0)
{
hi.visible = false;
}
.aspx
<div id="hi" runat="server"></div>
Please note, the "runat" sttribute is the important part. This allows it to be accessed in the .cs file.
You need to add runat="server" to the <div> in the .aspx page and then you can access it directly in your code behind. Like so:
Page.aspx:
<!-- ... -->
<div id="hi" runat="server">
Content Here
</div>
<!-- ... -->
Page.aspx.cs:
// ...
if (j == 0)
{
hi.Visible = false;
}
//...
Related
I have a aspx page and i want to hide the button from cs file based on my some condition
My .aspx looks like :
<asp: Content Id="contentid" >
<% if (!IsRedeemCardFlowOptin)
{ %>
<ul id="ulid" class="abc">
</ul>
<div class="bcd" id ="div1">
<div id="div2"></div>
<div id="div3"></div>
<div id="div4" runat="server">
<h4><%= m_AutoRenewInfo.NewPageContent.ArCsidOffHeader%></h4>
<button class="abc bcd cde" title="Button" id="buttondiv"><span>Button</span></button> //Want to hide this button
</div>
</div>
<% } %>
</asp:Content>
Now in the cs file i want to hide the button with id "buttondiv", how can i do that
In my cs file, i try this 2 things but it doesnt work
Control myDiv = (Control)FindControl("buttondiv");
myDiv.Visible = false;
Or
foreach (Control c in contentid.Controls)
{
if (c.ID == "buttondiv")
{
c.Visible = false;
}
}
Can anyone let me know
In order to be used as a server-side control, the button would need to be a server-side control. Add runat="server":
<button class="abc bcd cde" title="Button" id="buttondiv" runat="server">
Then (unless you've broken the designer somehow, it's been a while since I've used Web Forms) you should have an HtmlControl object in your class that you can set without the need to "find" the control:
this.buttondiv.Visible = false;
Kindly keep this in css file.
#buttondiv{
display:none;
}
Or apply style inline like below:
<button class="abc bcd cde" title="Button" id="buttondiv" style="display:none"><span>Button</span></button>
I have a blank page with two buttons.
the first button's click code is this:
Session["permissionUser"] = "1";
and here's the second button code:
Session["permissionUser"] = "2";
and then i have a hyperlink which redirects to the "main" website.
my objective is to adapt the menu bar which is on the masterpage based on the permission saved in the session. here's part of my code in the masterpage:
<body>
<div id="menuBar">
Home
<% if (Session["permissionUser"] == "1"){ %>
PERMISSION 1 LINK
<% } %>
<% if (Session["permissionUser"] == "2"){ %>
PERMISSION 2 LINK
<% } %>
</div>
<div id="content">
<asp:ContentPlaceHolder ID="websiteContent" runat="server"></asp:ContentPlaceHolder>
</div>
</body>
the problem is when i run the application, even if i click any of the buttons the menu doesnt adapt at all. it just shows the hyperlink "Home" and not any of the others which were supposed to be shown since the session is either 1 or 2 (depending on which button i clicked)
i cant really see what im doing wrong so if you guys have any suggestions i'd be really grateful
Your code is very PHPish. That is to say, it's ugly. And unwieldy. Let's put the logic in the code behind. We also need a form so we can have controls that run on the server.
public void Page_Load(object sender, EventArgs e)
{
//you should probably also check to make sure the session has "permissionUser" in it
if (Session["permissionUser"] == "1")
{
Permission1HL.Visible=true;
}
else if(Session["permissionUser"] == "2")
{
Permission2HL.Visible=true;
}
}
And change your ASPX page to this.
<body>
<form runat="server">
<div id="menuBar">
Home
<asp:HyperLink runat="server" id="Permission1HL" Text="Permission 1 Link" Visible="false" />
<asp:HyperLink runat="server" id="Permission2HL" Text="Permission 2 Link" Visible="false" />
</div>
<div id="content">
<asp:ContentPlaceHolder ID="websiteContent" runat="server"></asp:ContentPlaceHolder>
</div>
</form>
</body>
I suggest that you make a serverside hyperlink control instead, and set the text and navigateurl from codebehind
<asp:HyperLink id="hyperlink1"
NavigateUrl="http://mydefaulturl.com"
Text="DefaultText"
runat="server"/>
from code behind:
if (Session["permissionUser"] == 1)
{
hyperlink1.NavigateUrl = "#"
hyperlink1.Text = "Permission 1 link"
}...
This will allow you to better control and debug your values.
I would actually be more specific in the if statement
<% if (Session["permissionUser"].toString() == "1"){ %>
with null checks
<% if (Session["permissionUser"] != null && Session["permissionUser"].toString() == "1"){ %>
I'm creating multiple DIVs according to database records at my C# behind code. How could I make them runat server ?
Thanks in advance ..
Create and add ASP.NET Panels.
The code
<asp:Panel id="abc" runat="server">
is exactly the same as if you do:
<div id="abc" runat="server">
They render the same, but it's the functionality with other WebControls that the Panel is most used, and the Panel web control gives you more control under code-behind as it exposes more properties.
If you want to access a DIV on serverside, you could also add runat="server". It will be created as HtmlGenericControl.
That's not necessary, just create a HtmlGenericControl and add it to the controls collection:
HtmlGenericControl div = HtmlGenericControl("div")
div.Id = "myid";
this.Controls.Add(div);
Use a custom control that pulls the data and renders it how you would like. Kind of like this:
public class MyDivControl : System.Web.UI.Control
{
private System.Data.DataTable tblMyResults;
protected override void Render(System.Web.UI.HtmlTextWriter writer)
{
// Get your Data (or do it on Page_Load if you'll need it more than once
if (tblMyResults != null && tblMyResults.Rows.Count > 0)
{
int iIndex = 0;
foreach (System.Data.DataRow rItem in tblMyResults.Rows)
{
writer.WriteLine("<div id=\"{0}_{1}\">", this.ClientID, iIndex++);
//Whatever content you want here using your rows.
writer.WriteLine("</div>");
}
}
}
}
Then just drop the control on the page where you want it to render.
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="default.aspx.cs" Inherits="Solution.Web.Presentation.pub._default" MasterPageFile="~/ui/master/main.master" %>
<%# Register TagPrefix="custom" Namespace="MyNameSpace" Assembly="MyProjectAssembly" %>
<asp:Content runat="server" ContentPlaceHolderID="cntMain">
<custom:MyDivControl runat="server" />
</asp:Content>
You can use Repeater Control
<asp:Repeater ID="Repeater1" runat="server">
<ItemTemplate>
<div id="box<%# Eval("ID")%>" runat="server"></div>
</ItemTemplate>
</asp:Repeater>
and bind data from codebehind
On .aspx I have this :
<%# Register src="box/MyBox.ascx" tagname="MyBox" tagprefix="uc2" %>
<uc2:MyBoxID="MyBox1" runat="server" />
<asp:Panel ID="panelLeft" runat="server">
</asp:Panel>
<asp:Panel ID="panelRight" runat="server">
</asp:Panel>
and I'd like, on the aspx.cs, doing somethings like this :
if (condition)
{
panelLeft.Controls.Add(MyBox1);
}
else
{
panelRight.Controls.Add(MyBox1);
}
but seems I can't do it! Why? And how can I do it?
You'll have to use LoadControl to create the control server-side.
Control myBox1 = LoadControl("~/box/MyBox.ascx");
if (condition)
{
panelLeft.Controls.Add(myBox1);
}
else
{
panelRight.Controls.Add(myBox1);
}
If for some reason adding the control using LoadControl doesn't fit with the approach you want to take, you can achieve something similar by adding two copies of the user control into the markup in the two positions where you would like them. You can then toggle visibility in the code behind in your conditional logic.
For example, an ASPX like this:
<%# Register src="box/MyBox.ascx" tagname="MyBox" tagprefix="uc2" %>
<asp:Panel ID="panelLeft" runat="server">
<uc2:MyBoxID="MyBox1" runat="server" />
</asp:Panel>
<asp:Panel ID="panelRight" runat="server">
<uc2:MyBoxID="MyBox2" runat="server" />
</asp:Panel>
And then in the code behind you can toggle visibility:
MyBox1.Visible = condition;
MyBox2.Visible = !MyBox1.Visible;
However, you are then loading two different copies of the user control onto the page and your code would then have to know which user control to access, instead of always accessing 'MyBox1'. You might need a property in your code behind that hides that check for you, something like :
private MyBox MyBox{
get { return condition ? MyBox1 : MyBox2; }
}
if (condition)
{
this.panelLeft.Controls.Add(mybox1);
}
else
{
this.panelRight.Controls.Add(myBox1);
}
Simply, I have an anchor inside a repeater that triggers on click a javascript function, which sets the innerHTML of a Div to some content.
trying this outside a repeater did work!
but if I tried to implement the same code in the repeater's item template, it won't work!
NOTE: I think I need to access the repeater first then access the Anchor inside it! but I don't know how to do it
For further illustration:
JavaScript Function:
function show(ele, content) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
srcElement.innerHTML = content;
}
}
The repeater's code:
<asp:Repeater ID="Repeater1" runat="server" >
<ItemTemplate>
Name : <%# Eval("name")%>
<DIV ID= "PersonalInfo1" runat="server"></DIV>
<A id="A1" href="#" runat="server" onclick="show('PersonalInfo1','Address : ')">More...</A>
</ItemTemplate>
</asp:Repeater>
PS: THE POSTED CODE ISN'T WORKING IN THE REPEATER!
That is because id's are unique. Select elements using getElementsByName or by their class name with for example jQuery.
OK... let's start over.
Have such repeater code:
<asp:Repeater ID="Repeater1" runat="server" >
<ItemTemplate>
<div>
Name : <%# Eval("name")%>
<div id="Address" runat="server" style="display: none;"><%# Eval("address")%></div>
<div id="Interests" runat="server" style="display: none;"><%# Eval("interests")%></div>
<a id="A1" href="#" runat="server" onclick="return show(this, 'Address');">Show address</a>
<a id="A2" href="#" runat="server" onclick="return show(this, 'Interests');">Show interests</a>
</div>
</ItemTemplate>
</asp:Repeater>
Then such JavaScript code:
function show(oLink, targetDivID) {
var arrDIVs = oLink.parentNode.getElementsByTagName("div");
for (var i = 0; i < arrDIVs.length; i++) {
var oCurDiv = arrDIVs[i];
if (oCurDiv.id.indexOf(targetDivID) >= 0) {
var blnHidden = (oCurDiv.style.display == "none");
oCurDiv.style.display = (blnHidden) ? "block" : "none";
//oLink.innerHTML = (blnHidden) ? "Less..." : "More...";
}
}
return false;
}
This will search for "brother" DIV element of the clicked link, and show or hide it.
The code is as simple as possible using pure JavaScript, you should be able to understand what each line is doing - feel free to ask if you don't. :)
Note, you have to put the personal info in the PersonalInfo div in advance instead of passing it to the function - the function will get pointer to the clicked link.
Yes you need to iterate all the relevant links. Solution that involve minimal change of code is adding class to the links then check for this class:
<A id="A1" href="#" runat="server" class="RepeaterLink" ...>
And then in JavaScript:
var arrLinks = document.getElementsByTagName("a");
for (var i = 0; i < arrLinks.length; i++) {
var oLink = arrLinks[i];
if (oLink.className == "RepeaterLink") {
//found link inside repeater..
oLink.click();
}
}
This will "auto click" all the links, you can check ID or something else to imitate click of specific link in the repeater as well.