We Keep Coding

How to call code-behind code from a unordered list item

<ul runat="server" id="ulDrop">
<li>Update?</li>
<li>
<asp:DropDownList ID="yesno" ClientIDMode="Static" runat="server">
<asp:ListItem>YES</asp:ListItem>
<asp:ListItem>NO</asp:ListItem>
</asp:DropDownList>
</li>
<li runat="server" id="liDrop" onclick="logout_Click"><span class="ondrop">Logout</span></li>
</ul>
I am trying to handle the onclick method from the LI from code-behind, so I added the following C# code:
public void logout_Click(object sender, EventArgs e)
{
Session.RemoveAll();
Response.Redirect("log-in.aspx");
}
It keeps giving me an error, that the function cannot be found.
I am looking to clear out all session set in the asp.net page when "Logout" is clicked, not just the text but the entire LI and redirect to another page.
Please help me resolve the issue

I would prefer Marcus's answer (Adding a server control "LinkButton"). But If you would like to keep your LI and still call a server side method, as workaround you could do as follows:
Add a hidden button to your form.
<asp:button id="btnId" OnClick="logout_Click" style="display:none"></asp:button>
change your LI to
<li id="liDrop" onclick="logout();"><span class="ondrop">Logout</span></li>
Javascript
function logout()
{
document.getElementById('<%= btnId.ClientID %>').click();
}

The logout_Click method in your ASP.NET code is run on the server. The onclick attribute on the li tag refers to a JavaScript function called logout_Click that is run on the client.
In order to run the code on the server, you need to do a PostBack to the server. To test this, you can change your ASPX code as follows (this might introduce some design changes that you'd have to fix afterwards):
<li id="liDrop">
<asp:LinkButton runat="server"
OnClick="logout_Click"
Text="LogOut" />
</li>
This adds a LinkButton control that posts back to the server so that the logout_Click method is run.

The li element - even with runat="server" - is still a HTML element. When you use the onclick-Attribute of that element, it will treat it as a call to a client side JavaScript-function (which isn't defined).
The code behind is server side and cannot be executed from HTML elements. You need ASP Elements for that to work.

Solution for use <% ... %> where runat="server" (or vice versa) in asp.net

My idea
When the user click on the a tag with his avatar, he must redirect to another page. I do this with the code by number one (see below).
<div>
<!--show new messages | only show when log in. -->
<a href="<%=ResolveUrl("~/messages/inbox.aspx") %>" class="click headeritem" id="messages">
<img src="<%=ResolveUrl("~/images/message.png") %>" alt="new messages" id="messages" />
<asp:Label class="number" id="lblNewMessages" runat="server">1</asp:Label>
</a>
<!--log in | only show when log out. -->
<div class="user" id="logOut" runat="server">
Log in
Regist
</div>
<!--go to the profile of the user | only show when log in. -->
<!--1-->
<a class="click user" id="logIn" href="<%=ResolveUrl("~/gebruiker.aspx") %>">
<img id="picture" src="<%=ResolveUrl("~/afbeeldingen/person-male.png") %>" alt="user" />
<asp:Label runat="server" id="points" class="points">10</asp:Label>
</a>
</div>
With this C# code I place some tags invisible dependent on log in or out.
if (Request.Cookies["user"] != null) // log in
{
FindControl("logOut").Visible = false; // 2
}
else // log out
{
FindControl("logIn").Visible = false; // 2
FindControl("messages").Visible = false;
}
Extra information about the code: If you are login, I place a cookie with the user's id. If the cookie is not null, the user is login, other ways not. If you are login, it place the a-tag with id logout unvisible.
My problem
Now this code will give a NullReferenceException on line two.
Additional information: Object reference not set to an instance of an object.
If I place runat="server" to the a-tags, it give me this:
Server Labels should not contain <% ... %>-constructs.
There is an <% ... %>-constructor added on the a-tag in the code above for get the correct url to go to the correct page.
This is my problem. You can not add a <% ... %>-constructor where runat="server" stand. How can you do it on a correct way?
Other information
Maybe also important to know is that my project has sub directories. It must be important to go from messages/inbox.aspx to user/profile.aspx for eg.
All this code above is added to a master page that I use for all the pages.
Can anyone help me? Thanks and sorry for my poor English.

Instead of using plain a-tags, you could use WebForm-controls like Panels or Hyperlinks, e.g.:
<!--log in | only show when log out. -->
<asp:Panel CssClass="user" id="logOut" runat="server">
<asp:HyperLink NavigateUrl="~/gebruikers/aanmelden.aspx" CssClass="click" id="logIn" Text="Log in" runat="server" />
<asp:HyperLink NavigateUrl="~/gebruikers/registreren.aspx" CssClass="click" id="regist" style="left:100px" Text="Regist" runat="server"/>
</asp:Panel>
This might reduce the amount of control you have over the generated HTML (so you'd have to check whether the HTML is good for you), but would enable you to access the controls in Code behind more easily, e.g.:
if (Request.Cookies["user"] != null) // log in
{
logOut.Visible = false; // 2
}
else // log out
{
logIn.Visible = false; // 2
messages.Visible = false;
}

There are a few different varieties of ASP.net inline tags. Please see the full list here: https://support.microsoft.com/en-us/kb/976112
Not all of them support placement inside the attributes of a server-side control's tag. The <%# ... %> data-binding expression inline format would allow you to do that, and I think the older <% ... %> format also. The <%= ... %> inline tag will definitely not work inside the server-side control tag because the whole expression is directly compiled instead of displaying the content as an attribute value.
If your main goal is controlling visibility of a server-side control, then you should just be able to set control.Visible = false; in your code-behind. If you'd like to control visibility of a non-server-side control (or a block of controls), then the <asp:Panel> server-side control might be your best route. ASP.net has tried to move away from the excessive inlining approach of the old ASP.

I used to get errors similar to the one you specified. Because the ResolveUrl uses "", avoid using that for the HREF attribute too as it might break the code. Try the below code:
<a href='<%=ResolveUrl("~/messages/inbox.aspx") %>' class="click headeritem" id="messages">
<img src="<%=ResolveUrl("~/images/message.png") %>" alt="new messages" id="messages" />
<asp:Label class="number" id="lblNewMessages" runat="server">1</asp:Label>
</a>

How to set the current tab/content on page postback

I have the following JSFiddle which changes the tab/content based on user selection: http://jsfiddle.net/sikni8/3d64w6gf/1/
HTML snippet sample:
<asp:Button ID="btnRegister" ClientIDMode="Static" runat="server" Text="Register" OnClick="btnRegister_Click" />
<!--<input type="submit" name="commit" value="Register" runat="server" />-->
The btnRegister button perform some action when clicked. When the page does a postback, how can I ensure the tab/content which was there is displayed.
For example, if I click on the Register button the page refreshes and brings the first tab/content to view. I would like to change it so that when Register button is clicked and the page reloads, it should remain with the same tab/content.
I can use sessionStorage but I would like to request some assistance.
Tried this but didn't work:
<script>
$(document).ready(function (e) {
localStorage.setItem("whichTab", $("#tabs nav ul li.tab-current"));
alert(localStorage.getItem("whichTab"));
});
</script>
I am using cbpFWTabs.js file to achieve the tab class switch which is in the fiddle.

I did something similar by using hidden field, where I stored the id/class of the current tab in hidden field and after postback I just displayed the current tab again.

Create a customized alert box in c# asp.net

I want to create a alert box with asp controls, is it possible?
For example, a simple script alert would be like,
Response.Write("<script>alert('Alert Box');</script>");
On the alert box there are default buttons "Ok" and "Cancel" with the text "Alert Box"
Now all i want to do is call a function written in the respective Demo.aspx.cs page on the click of Ok button of alert.
Or
Is it possible to place a asp:Button control in that alert box to call that function?
Thanks if any of you could help! :)

You can't use asp:Button in JavaScript alert, The best way to make an alert or modal dialog box in asp.net is to create your own and make it hidden or in-active in master page and call it when you need it.
You can get a ready made modal or alert in GetBootstrap
Update:
Here some Idea how to use bootstrap modal.
This is how I use GetBootstrap Modal for asp.net webforms, you can use it if you want.
The following code is use to create a customize alert or modal box with proper asp.net button controls that you can use in back-end. "you can place this in master page to prevent repetitive"
<asp:Panel ID="pnlAlertBox" runat="server" style="position:absolute;top:0;> //You can make is visible or hidden -- you need to customize the style of panel
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">This is customize alertbox</h4>
</div>
<div class="modal-body">
This is the messages...
</div>
<div class="modal-footer">
<asp:Button ID="btnCancel" runat="server" CssClass="btn btn-default" Text="Cancel" />
<asp:Button ID="btnOk" runat="server" CssClass="btn btn-primary" Text="Ok" />
</div>
</div>
</div>
</asp:Panel>
But of course you need to include the getboostrap .js and .css files in master page to show the design.
Place this in header:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
Place this after form:
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

This is a fixed version of Abrar Jahin's answer. Calling e.preventDefault() prevents the default action being taken, which is to submit the form.
The following displays the alert on click, and then submits the form: -
$("#alert_button").click( function(e)
{
alert('This is a custom alert box', 'Alert Dialog');
});
EDIT:
If you want to call a specific function in your webpage, you have a few options: -
A PageMethod or HttpHandler
in your client-side code, call the ASP.NET-generated __doPostback function, and pass parameters indicating what to do to your server-side code

without redirect page alert code
ScriptManager.RegisterStartupScript(this, this.GetType(), "showalert", "alert('Demo');", true);
with redirect page
ScriptManager.RegisterStartupScript(this, this.GetType(), "err_msg", "alert('Demo');window.location='Demo.aspx';", true);

You can use javascript inside OnClientClick event handler for the button
<asp:Button ID="Button1" runat="server" Text="Delete User"
OnClientClick="return confirm('Are you sure you want to delete this user?');" />

Relay click to Button to trigger ASP.NET File Upload

In a ASP.NET C# website I have an input that uploads a file to my server. To overcome the issue of not being able to style an input of the type=file I have created a styled div that looks like the input but actually just relays the message to the actual input which has display: none to be invisible.
My Problem: Relaying the message isn't working, ie, when I relay the click message to the actual input the file is never uploaded(nothing happens). I know the button works because if I click the actual input it uploads the file sucessfully.
Is there some ASP.NET security stopping me from being able to do this? Whats going wrong? How can I acheive what I am trying to do:
Have a style input where type=file(not a boring browse button) & relay the click to the actual input?
My actual input which works:
<input id="fileUpload" type="file" Runat="server" NAME="fileUpload"/>
<asp:button id="btnSave" OnClick="bt1Clicked"
runat="server" Text="Upload File"></asp:button>
<asp:label id="lblMessage" runat="server"></asp:label>
My styled button:
<a onclick="$(\'btnSave\').click(); return false;" href="#">test</a>

Not sure what your aiming at but this should work
<a onclick="$('<%= btnSave.ClientID %>').click(); return false;"
href="#">test</a>
Why? Because by default, asp.net gives controls its own id, which is defined by ClientIdMode. See also System.Web.UI.Control.ClientID
In my humble opinion, this would be a neater solution:
<a id="btnRelay" href="#">test</a>
Hook it up with JQuery separately, so your code isn't mangled with your html.
$('btnRelay').click(function(event){
event.preventDefault();
$('<%= btnSave.ClientID %>').click()
}