We Keep Coding

Dynamic menu through use of repeater

I am using a repeater to create a menu (Bootstrap styled). I need to initially make the first item active and can't figure out how. This is what I have:
<!-- Nav tabs -->
<ul id="teamTab" class="nav nav-pills pill-marg" role="tablist">
<asp:Repeater runat="server" ID="rptMenu">
<ItemTemplate>
<li role="presentation">
<a class="circular" href='#<%# DataBinder.Eval(Container.DataItem, "GroupAbbrev") %>' aria-controls="home"
role="tab" data-toggle="tab"><%# String.Format("{0}", Eval("GroupName").ToString().ToUpper()) %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
To make the first menu item active, its style has to be "active", like:
<li role="presentation" class="active"><a class="circular" ...>

I think you can just add <%# Container.ItemIndex == 0 ? "active circular" : "circular" %> inside your repeater template (however its been years since I have used WebForms.
Example:
<!-- Nav tabs -->
<ul id="teamTab" class="nav nav-pills pill-marg" role="tablist">
<asp:Repeater runat="server" ID="rptMenu">
<ItemTemplate>
<li role="presentation" class="<%# Container.ItemIndex == 0 ? "active" : "" %>">
<a class="circular" href='#<%# DataBinder.Eval(Container.DataItem, "GroupAbbrev") %>' aria-controls="home"
role="tab" data-toggle="tab"><%# String.Format("{0}", Eval("GroupName").ToString().ToUpper()) %></a>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>
Syntax issues aside (if I have any), I know the index is available via ItemIndex, see the docs here.

Repeater not firing proper with Divs on page in asp.net

I want to make a slideshow with divs in repeater items. there are two divs with different classes and cannot show page properly with it. Could you help me please to fix the problem?
Design cs is like this:
<div id="wowslider-container1">
<asp:Repeater ID="rpSlideshow" runat="server" >
<ItemTemplate>
<div class="ws_images">
<ul>
<li id="<%# Container.ItemIndex + 1 %>">
<img src="Yazar/data1/images/<%#Eval("Resmi") %>" alt="<%#Eval("AdSoyad") %>" title="<%#Eval("AdSoyad") %>"
id="<%#Eval("SlideID") %>" />
</li>
</ul>
</div>
<div class="ws_bullets">
<div>
<a href="#" title="<%#Eval("SlideID") %>"><span>
<img src="Yazar/data1/tooltips/<%#Eval("Resmi") %>" alt="<%#Eval("AdSoyad") %>" /><%#Eval("SlideID") %></span></a>
</div>
</div>
<div class="ws_shadow">
</div>
</ItemTemplate>
</asp:Repeater>
</div>
PS: I tried to combine divisions like below but it did not work proper.
((HtmlGenericControl)(e.Item.FindControl("myDiv"))).
Attributes["class"] = "id" + indexi++;

You need runat="server" attribute, if you want to access it at code behind.
<div id="myDiv" runat="server">...</div>
TIP: For that purpose, we normally use Panel server control which basically renders html div tag. The advantage is you can use strongly type CssClass property.
<asp:Panel id="MyPanel" runat="server">...</asp:Panel>
Usage: ((Panel)e.Item.FindControl("MyPanel")).CssClass = "id" + indexi++;
Please note that I rename the control id to MyPanel.

Bootstrap Tabs in .NET with persist state after page refresh

I am using native bootstrap tabs and trying to persist state of the current tab after the page refresh. Here is my form bootstrap 3 with Tabs:
<form runat="server" id="mainForm">
<div class="Tabs">
<ul class="nav nav-tabs">
<li runat="server" id="liSectionContractPayments" onclick="return makeActiveTab('sectionA');">
<a data-toggle="tab" href="#sectionA">
Heading 1
</li>
<li runat="server" id="liSectionTracking" onclick="return makeActiveTab('sectionB');">
<a data-toggle="tab" href="#sectionB">
Heading 2
</li>
<li runat="server" id="liSectionNotes>
<a data-toggle="tab" href="#sectionC" onclick="return makeActiveTab('sectionC');">
Heading 3</li>
</ul>
<div class="tab-content">
<div id="sectionContractPayments" class="tab-pane fade">
<h4>Heading 1</h4>
Content for heading 1
</div>
<div id="sectionTracking" class="tab-pane fade">
<h4>Heading 2</h4>
Content for heading 2
</div>
<div id="sectionNotes" class="tab-pane fade">
<h4>Heading 3</h4>
Content for heading 3
</div>
</div>
</div>
<%-- This is to keep the state of current tab. --%>
<asp:HiddenField ID="SetActiveNavTab" runat="server" />
</form>
I am using a hidden field SetActiveNavTab to persist state of the current tab, to do that I have the following script:
<script>
/* Not working ... */
function activaTab2(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
function makeActiveTab(activeTabName) {
$('#<%=SetActiveNavTab.ClientID%>').val(activeTabName);
activaTab2($('#<%=SetActiveNavTab.ClientID%>').val(activeTabName));
alert(activeTabName + "AND" + activaTab2($('#<%=SetActiveNavTab.ClientID%>').val()););
}
/* Not working ... */
$(document).ready(function() {
function activaTab(tab) {
$('.nav-tabs a[href="#' + tab + '"]').tab('show');
};
activaTab($('#<%=SetActiveNavTab.ClientID%>').val());
});
</script>
The part which is not working is marked with comments. I can't seems to save the clicked on tab to a SetActiveNavTab hidden field. Something wrong with the script?
Also not sure if there is a better way to do that?

You need to post the some part of page rather then full page post back. i-e AJAX
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
HOW IT WORKS
Source
FOR AJAX IN ASP.NET WEB FORMS
In asp.net web forms you need to put update panel
Introduction to the UpdatePanel Control
Understanding ASP.NET AJAX UpdatePanel Triggers

How to access a tag which inside the header

I want to access a tag inside the header from the C# code.
I want to check "IF" condition and for one result disable the visibility of the tag and in other to send to another page.
the following code:
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~\Images\AssetManagementIcon.PNG" Style="background-color: transparent; border: none;" Height="67px" Width="242px" OnClick="ImageButton1_Click" />
</p>
</div>
<div class="float-right">
<section id="login">
</section>
<nav>
<ul id="menu">
<li><a runat="server" href="~/">Log Out</a></li>
</ul>
</nav>
</div>
</div>
</header>
I want to get access to the <li><a runat="server" href="~/">Log Out</a></li>.

Looks like you're using asp.net and as you wrote you want to access the Log out tag.
I would suggest that you use the asp.net hyperlink. you could use your code as it's but you need to add an ID so you can call it in your javascript but it would be cleaner with a hyperlink like this i would recommend.
<asp:HyperLink id="hpLogout" runat="server">Log Out</asp:HyperLink>
You could also put your text inside the hyperlink control like:
<asp:HyperLink id="hpLogout" runat="server" Text="Log Out" />
but it's the same as the previous one.
You could on the other hand put your function inside your hyperlink tag like
<asp:HyperLink id="hpLogout" runat="server" Text="Log Out" OnClick="MyFunction" />
Of course MyFunction is your already defined function in c# codebehind.
and again all you need is a ID that you can call to validate with youron the codebehind for your C# code.
I hope this will help you.
Good luck.

Put an id to the '' tag. Do as following...
<header>
<ul id="menu">
<li><a id="aID" runat="server" href="~/">Log Out</a></li>
</ul>
</header>
And access it from code behind using it's id...
aID.InnerText = "hello";

asp.net repeater select ID with Jquery

I hope i make sense this, i have a repeater and on click of a button, the corresponding div should open up, I can do this when it is hardcoded however since its a repeater there will be different IDs. Here is my repeater;
<asp:Repeater ID="rptProfileStatus" OnItemDataBound="rptProfileStatus_OnItemDataBound"
runat="server">
<ItemTemplate>
<li class="bar1">
<a name="jh"></a>
<div align="left" class="post_box">
<div class="itembottom">
<span class="date">
<asp:Label ID="lblDate" Font-Underline="false"
ForeColor="white" runat="server"></asp:Label>
</span>
<span class='feed_link'>
</span>
<span class="commentsno">
2 comments
</span>
</div>
<span class="delete_button">
</span>
</div>
<div id="fullbox" class="fullboxahrefReply"></div>
<div id="commentload"></div>
</li>
</ItemTemplate>
</asp:Repeater>
Here is the jquery which i am trying to get to call it, it works now however when i start changing the ID's i will have a problem, how do i solve this;
//Comment Box Slide
$("[id$=ahrefReply]").live("click", function ()
{
var ID = $(this).attr("id");
$(".fullbox" + "ahrefReply").show();
$("#c" + "ahrefReply").slideToggle(300);
});

In the anchor's click event, you can do something like,
click="YourFunction(<%# ((YourClass)Container.DataItem).Id %>)"
Then handle the id in your function. You will have to modify this to work with your situation as well.

Try just walking up the DOM. Something like this:
$(this).parent().parent().find('fullboxahrefReply').show()