I am working on setting up a Asp.Net Master page that uses Bootstrap. We have a three column layout with third column as optional
<div class="row " >
<div id="leftCol" class="col-sm-3 no-left-gutter leftmenu" />
<div class="col-sm-7" id="centercol' />
<div class="col-sm-2" id = "rightcol"> <asp:ContentPlaceHolder .../> </div><div>
Now If any of the pages inheriting this master page doesn't use the rightCol div to place any content then the right column should be hidden and the center column should take size of both center and right column.
Is there any way to achieve this easily using bootstrap (or with out it)? Thank you.
The class for the centercol and rightcol divs can be set dynamically based on right column's visibility
visible: class set to col-sm-7(center) and col-sm-2 (right)
hidden : class set to col-sma-9(center) and display:none (right)
You can check the ContentPlaceHolder for any content and set the CssClass in code behind:
ASPX:
<div class="row " >
<div id="leftCol" class="col-sm-3 no-left-gutter leftmenu" />
<asp:Panel ID="pCenter" runat="server">
<asp:Panel ID="pRight" runat="server">
<asp:ContentPlaceHolder ID="cphRight" runat="server" />
</div>
<div>
CS:
if(this.cphRight.Controls.Count > 0)
{
this.pCenter.CssClass = "col-sm-7";
this.pRight.CssClass = "col-sm-2";
}
else
{
this.pCenter.CssClass = "col-sm-9";
this.pRight.Visible = false;
}
I used asp:Panel instead of div, because they come handy and generate a div, too. Alternatively, you can still use a div but you should give it the attribute and value runat="server" to be able to access it in code behind.
Related
I use masterpage in asp.net web form, I use span to display message to users
<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder2" runat="server">
<div class="col-md-10 col-sm-10">
<span id="spnMessage" class="btnText" runat="server"></span>
</div>
</asp:Content>
and code is:
spnMessage.InnerText = "Add record successfully ";
but in runtime id of span change to "ContentPlaceHolder2_spnMessage" and my code does not work. What should I do?
Change the span into a Literal. Then there will be no more issues with ID conflicts.
<asp:Literal ID="spnMessage" runat="server"></asp:Literal>
Then accessing the Literal from code behind will always work.
spnMessage.Text = "Add record successfully ";
Or if you need to use the <span> element for CSS purposes, you can still wrap the Literal with it.
<span><asp:Literal ID="spnMessage" runat="server"></asp:Literal></span>
You could also use a aspnet Label.
A label will generate it's own <div> tag in HTML.
<asp:Label ID="spnMessage" runat="server" Text="Add record successfully"></asp:Label>
Will become
<div>Add record successfully</div>
I've been reading about user controls on msdn, and I was wondering how does one deal with element IDs that may be variable?
For example, say I have usercontrol1.ascx on my page that contains this:
<div id="myPageDiv1">
<div id="container1">
Contents
</div>
</div>
What if I need the IDs to be different across different pages?
Maybe I need another page that needs to look like this:
<div id="myPageDiv2">
<div id="container3">
Contents
</div>
</div>
Thanks
You could add a property to your usercontrol so you can change it on a page-by-page basic:
UserControl
Public Property SomeDivID as String
ASPX
<div id="<%= Me.SomeDivID %>">
</div>
Page
<control:yourusercontrol SomeDivID="myPageDiv1" runat="server" />
<control:yourusercontrol SomeDivID="myPageDiv2" runat="server" />
You can define a property in your user control.
Public Property DivName As String
You can set it in your codebehind to your desired name. You can even pass this from your controlling page.
DivName = "MyDesiredDivName"
Then you can use crocodile syntax in your markup to render the value of the property.
<div id="<%= Me.DivName %>">
<div id="container1">
Contents
</div>
</div>
I am working on asp.net website using webforms & i am facing strange problems for some unknown reason.
I am different banner in different areas of teh page & one common banner in the header section of the MasterPage, Banner show up as it should but problem is that link with the banner is not working.
Below is the partial code generated after page display.
<div class="horizontalBannerBar">
<!-- Header Banner -->
<div class="pnlHeaderBanner" id="pnlHeaderBanner">
<a target="_blank" href="http://abc.com" class="bannerlink" id="hypLnkHeaderBanner"><img style="border-width:0px;" src="../images/Banners/32dfe9ee-0832-4d89-8c61-45b0ef371f1f.jpg" id="imgHeaderBanner"></a>
</div>
<!-- Header Banner -->
</div>
I am using Panel as a wrapper so that i can hide the banner in case banner is not present .
Below us the Code i use to assign value to hyperlink control & image control
DataSet ds = DataProvider.GetTopBanner(ArticleID, PageID, IssueID, CategoryID, BannerLayoutPosition, LangID);
if (ds.Tables[0].Rows.Count > 0)
{
imgHeaderBanner.ImageUrl = ds.Tables[0].Rows[0]["ImagePath"].ToString();
hypLnkHeaderBanner.NavigateUrl = ds.Tables[0].Rows[0]["BannerURL"].ToString();
}
else
{
imgHeaderBanner.Visible = false;
pnlHeaderBanner.Visible = false;
}
Actual .ASPX page code
<div class="horizontalBannerBar">
<!-- Header Banner -->
<asp:Panel ID="pnlHeaderBanner" CssClass="pnlHeaderBanner" runat="server">
<asp:HyperLink ID="hypLnkHeaderBanner" CssClass="bannerlink" runat="server" Target="_blank">
<asp:Image ID="imgHeaderBanner" runat="server" BorderWidth="0" />
</asp:HyperLink>
</asp:Panel>
<!-- Header Banner -->
</div>
It seems HTML is breaking up somewhere but i am not able to see it even on fiddle it doent work in FF & Chrome while link works in IE 9..
Example LINK
It's because of the z-index: -999; in your CSS. If you set it to 0 then your link will work.
Also the <img /> tag is not properly closed in the HTML sample you posted at the top. I doubt that's the actual HTML generated by ASP.NET though.
<div class="horizontalBannerBar">
<!-- Header Banner -->
<div class="pnlHeaderBanner" id="pnlHeaderBanner">
<a target="_blank" href="http://abc.com" class="bannerlink" id="hypLnkHeaderBanner">
<img style="border-width:0px;" src="../images/Banners/32dfe9ee-0832-4d89-8c61-45b0ef371f1f.jpg" id="imgHeaderBanner" />
</a>
</div>
<!-- Header Banner -->
</div>
I have following code in aspx page:
<div id="a" runat="server" style="display:block;">
abc
</div>
I am trying to show the div in code like this:
a.Visible = True
But this is not working. Can anyone suggest how to do this without using any scripting language?
A div with runat=server becomes a HtmlGenericControl on serverside. This has the Visible-property as every server-control. So you can hide it on serverside. But that means on clientside it won't get rendered at all.
If you instead want it to be rendered invisibly, add the Styledisplay:none:
a.Style.Add("display","none")
Then you can also switch the visibility on clientside.
Apart from that your tag is malformed, change
runat="server
to
runat="server"
You are missing doube quotes after runat Server. It should be like this..
<div id="a" runat="server" style="display:block;">
abc
</div>
Or in code Behind to hide the div
a.Style.Add("display","none")
in code Behind to show the div
a.Style.Add("display","block")
Try this:
a.Attributes.Add("style", "display:block;");
Mode details:
http://msdn.microsoft.com/en-us/library/7512d0d0(v=vs.71).aspx
http://msdn.microsoft.com/en-us/library/system.web.ui.control.visible.aspx
<div id="a" runat="server" style="visibility:hidden" >
</div>
you can try : hidden in code vb.net
a.Attributes("style") = "visibility:hidden"
you can try : visible
a.Attributes("style") = "visibility:visible"
thanx
a.Style.Add("display", "block")
for visible
a.Style.Add("display", "none")
for hide
I have a set of websites that basically do the exact same thing in terms of functionality, the only thing that varies is the css and how the html is laid out.
Is there a way to generate the html from a database (ie retreiving the html from a table) and then catching the controls (like buttons, textboxes etc) from the code behind?
UPDATE:
Here is an example of what I want to acheive:
<html>
<div id="generatedContent" runat="server">
<!-- the following content has been generated from the database on the page load event -->
<div>
This is a textbox <input id="tb1" runat="server" type="text" />
This is a button <input type="submit" id="btn1" runat="server" value="My Button" />
</div>
</div>
</html>
This is the code behind
var tb1 = new HtmlControls.HtmlInputText();
tb1 = FindControl("tb1");
var btn1 = new New HtmlControls.HtmlInputSubmit();
btn1 = FindControl("btn1");
Now obviously since the html has been generated from the database (ie after the page has already been initialised) the FindControl method will return null.
For static HTML content, you can easily add your content to your form by using LiteralControl like that :
Page.Controls.Add(new LiteralControl("<b>content from db</b>"));
EDIT : Your code-behind code (FindControl) should work if you put them in a form tag with runat=server attribute. But beware, your content should be added in every postback. Also you can get the values of your form elements by Request["FormElementId"].