Before I post my problem here, please be noted that i would really like to leave javascript and css for that menu as it is.
Now to my problem.
I have a menu in JavaScript that I am having a problem putting into asp.net page, I am having problem to produce the proper html to be more correct.
I would really appreciate if someone could point me to the right direction.
the menu in html looks like:
<!-- HOME -->
<div class="menu_item" onmouseover="hide_all_panels();">
Home
</div>
<!-- ABOUT SITE -->
<div id="trigger1" onmouseover="show_panel('0');">
<div class="menu_item">
About Us
</div>
<div class="hidden_div">
<!-- ABOUT WEB SITE POPOUT -->
<div class="menu" id="popout1">
<div class="menu_item">
Frequently Asked Questions
</div>
<div class="menu_item">
Our Team
</div>
<div class="menu_item">
The Board
</div>
</div>
</div>
</div>
Blog
</div>
<!-- CONTACT US -->
<div class="menu_item" onmouseover="hide_all_panels();">
Contact Us
</div>
as you can see, the divs are not symmetric for single menu that has not children I have simply link wraped into div, but for the menu with childrens I have a menu with one trigger div and 2 more somewhat main divs inside it.
I tryed to put something like that for this menu on asp.net side (don't put atentions to link namings now, they are not important):
<asp:Repeater ID="rpt_Menu" runat="server" OnItemDataBound="rpt_Menu_DataBound">
<ItemTemplate>
<asp:Panel ID="pnl_MainSubmenuDiv" runat="server" Visible="false" Enabled="false">
<div id="trigger<%= index %>" onmouseover="show_panel('<%= index %>');">
</asp:Panel>
<div class="menu_item" onmouseover="hide_all_panels();">
<%# Eval("menu_name") %>
</div>
<asp:HiddenField ID="hdn_Id" runat="server" Value='<%# Eval("menu_id") %>' />
<asp:Repeater ID="rpt_SubMenu" runat="server">
<ItemTemplate>
<div class="menu" id="popout<%= index %>">
<div class="menu_item">
<%# Eval("menu_name") %>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
and the code behind is very simple and there is nothing special, all i do is just bind second repeater that inside first repeater and make panels visible or invisible:
protected void rpt_Menu_DataBound(object obj, RepeaterItemEventArgs e)
{
int parent_id = Int32.Parse(((HiddenField)e.Item.FindControl("hdn_Id")).Value.ToString());
using (SamaraDataContext mycity = new SamaraDataContext())
{
var subMenu = from sm in mycity.tbl_menus
where (sm.menu_parent == parent_id)
select new
{
menu_id = sm.menu_id,
menu_name = sm.menu_name
};
int count = 0;
foreach (var item in subMenu)
{
count++;
}
if (count > 0)
{
((Panel)e.Item.FindControl("pnl_MainSubmenuDiv")).Visible = true;
((Panel)e.Item.FindControl("pnl_MainSubmenuClose")).Visible = true;
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataSource = subMenu.ToList();
((Repeater)e.Item.FindControl("rpt_SubMenu")).DataBind();
this.index++;
}
}
}
}
However my problems is that panels produce div's even if they are hidden, which breaks out all the html structure.
I would really dislike to put the divs formating inside the code behind.
Well for one thing this section here:
<asp:Panel ID="pnl_MainSubmenuClose" runat="server" Visible="false" Enabled="false">
</div>
</asp:Panel>
Will render invalid HTML if Visible is set to true, thus potentially screwing up your JavaScript and CSS interactions.
That will come out like so:
<div id="something_something_pnl_MainSubmenuClose">
</div>
</div>
as Panel controls render a around whatever they enclose. So figure a way around that, and you'll likely solve your problem.
To supplement blesh's answer, use the PlaceHolder control instead of Panel. Placeholders do not render HTML surrounding the contents.
Related
I currently have a panel within a listview, displaying a bunch of literals. There is a column I need to hide in the codebehind of the page. How would I go about this? The panel that contains these literal fields has UpdateMode on always.
<div class="col-md-2 col-sm-3 col-sm-offset-0 col-xs-4 col-xs-offset-0 col-md-offset-0 text-truncate ">
<p class="key">
<asp:Literal ID="Literal4" runat="server" Text='' />
</p>
<p class="text-truncate">
<asp:Literal ID="Literal7" runat="server" Text=' <%# Eval("Status") %>' />
</p>
</div>
If you are aiming to hide them from the view, you can use the code behind as displayed in this answer
Literal4.Visible = false;
I am using LinkButton in a repeater control inside UpdatePanel in my asp.net project like This
<asp:Repeater ID="rep_test" runat="server">
<HeaderTemplate>
<div class="form-group">
<br />
</HeaderTemplate>
<ItemTemplate>
<div class="col-sm-6">
<div class="form-group">
<asp:LinkButton runat="server" ID="itemid" >
<div id="ab-1" class="moder profile-tile-box">
<div class="itemname-box">
<asp:Label ID="lbltets" runat="server" Text='<%# Bind("itmName") %>'></asp:Label>
</div>
</div>
</asp:LinkButton>
</div>
</div>
</ItemTemplate>
<FooterTemplate>
</div>
</FooterTemplate>
</asp:Repeater>
This worked fine for me but the problem is when I click on linkbutton it refreshes the whole page and regenerate all controls and close all open Modal.
how do I fix this issue .. please guide
Check runat=server causing postback...try OnClientClick=“...return false” in link button
You have to wrap your code inside a update panel to prevent a whole page reload
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="true">
<ContentTemplate>
// add your repeater here
</ContentTemplate>
</asp:UpdatePanel>
This will do partial postback on the part thats inside the update panel. Incase of modal put it inside the modal so it will not close the modal itself because it will else rebuild the modal resulting in closing it.
I've created a DNN skin, and have approximately 35 module positions. I have HTML like the following in my DNN skin file (.ascx file) along with the pane:
<div class="gridcolumns onecol row1">
<div class="gridcolumns_outer">
<div class="gridcolumns_inner">
<div id="ContentPane01" class="gridcol-12" runat="server" visible="false"><!-- --></div>
</div>
</div>
</div>
I've already set runat="server" and visible="false" if no module is at the particular position, and this works correctly - the pane HTML for id="ContentPane01" doesn't show up. But I would also like to add some kind of C#-specific if condition to hide the HTML as well.
My semi-pseudo code example is as follows:
<% if (ContentPane01 !== empty) { %>
<div class="gridcolumns onecol row1">
<div class="gridcolumns_outer">
<div class="gridcolumns_inner">
<div id="ContentPane01" class="gridcol-12" runat="server" visible="false"><!-- --></div>
</div>
</div>
</div>
<% } %>
Does anyone know how I go about properly adding the C# code for this to work?
Thank you for your help.
I figured it out. I can use <% if(id.Visible == true){} %>, where id is the id provided to the pane, along with runat="server"
Here is the code from my original post, with the solution added:
<% if (ContentPane01.Visible == true) { %>
<div class="gridcolumns onecol row1">
<div class="gridcolumns_outer">
<div class="gridcolumns_inner">
<div id="ContentPane01" class="gridcol-12" runat="server" visible="false"><!-- --></div>
</div>
</div>
</div>
<% } %>
How can I get the value of the hiddenfield in code behind?
<telerik:RadRotator ID="RadRotator1" RotatorType="AutomaticAdvance" ScrollDirection="Up"
ScrollDuration="4000" runat="server" Width="714"
ItemWidth="695" Height="260px" ItemHeight="70" FrameDuration="1" InitialItemIndex="-1"
CssClass="rotator">
<ItemTemplate>
<div class="itemTemplate" style="background-image: url('IMAGES3/<%# this.GetDayOfWeek(XPath("pubDate").ToString()) %>.png');">
<div class="dateTime">
<div class="time">
<%# (this.GetTimeOnly(XPath("pubDate").ToString())) %>
</div>
<div class="date">
<%# (this.GetDateOnly(XPath("pubDate").ToString()))%>
</div>
</div>
<div class="title">
<span>
<%# System.Web.HttpUtility.HtmlEncode(XPath("title").ToString())%>
</span>
</div>
<div class="buttonDiv">
<asp:Button ID="Button1" class="button" runat="server" Text="View" OnClientClick="OnClick" />
THIS HIDDENFIELD >>>>> <asp:HiddenField id="rssLink" runat="server" value='<%= System.Web.HttpUtility.HtmlEncode(XPath("link").ToString()%>' />
</div>
<div class="description">
<span>
<%# System.Web.HttpUtility.HtmlEncode(XPath("description").ToString())%>
</span>
</div>
</div>
</ItemTemplate>
</telerik:RadRotator>
The hidden field is inside a RadRotator and I am battling to get the value of it in code behind.
You can use it's Value property
var value = this.rssLink.Value;
Edit: for the telerik control it looks like you'll need to use FindControl on the Databind - there's an article here.
when you write something like that in your aspx file you will see that in the designer file you've got a generated property with as name the id of the field you used.
So in the code behind you can use this property because the classes are partial
var value = this.rssLink.Value;
like said before
string hiddenFieldValue = rssLink.Value;
If the Hidden field has the runat="server" attribute then you should be able to access it from the server side using 2 ways:
1- using the value property.
2- using Request.Forms["hiddenFieldName"]
Check this link
I have a placholder that I dont just want to use Visible="false" on, becouse it reserv some space on the page. I dont want the space reservation. How can I do that? Maybe use somethingels?
<asp:DataList ID="ImageList" runat="server" RepeatDirection="Horizontal" EditItemStyle-VerticalAlign="Top"
RepeatColumns="4">
<ItemTemplate>
<asp:PlaceHolder ID="phImage" runat="server" Visible="false">
<div class="prodImagesBorder"> "SOME STUFF with auto length and width"
<div class="prodImages"> "SOME STUFF"
<div class="thumbnail"> "SOME STUFF"
</div>
</div>
</div>
</asp:PlaceHolder>
</ItemTemplate>
</asp:DataList>
Codebehind:
if(ImageTabel.Rows[i]["ImgUrl"].ToString() != lblOldImgUrl.Text)
{
PlaceHolder phImage = (PlaceHolder)ImageList.Items[i].FindControl("phImage");
phImage.Visible=true;
}
A PlaceHolder does not render a tag - it's just a container for other server controls. So there's no tag on which you can set display:none.
elements with the CSS style display:None will take up no space. if you apply it to div.prodImagesBorder, it should completely hide that element.