Could anyone give me an idee on how could I generate dynamically this piece od code:
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown" runat="server">
<span class="caret"></span></button>
<ul class="dropdown-menu" id="testingPurposes">
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 1</span>
<asp:Image ID="Image1" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
<li>
<div>
<span class="text-left" onclick="fct1()"> Text nr 2 </span>
<asp:Image ID="Image2" ImageUrl="myImg.png" runat="server" onclick="fct2()"/>
</div>
</li>
</ul>
</div>
The main idea of this code is to have some kind of dropdown list looking control that would have a span with text, and an image on each row.
This is basicly how my control shoud look when it's clicked:
Text1 img1
Text2 img2
If a user clicks TextN i get an event for that click, and i can update the page based on selected item.
If a user clicks imgN then TextN and imgN would disappear from the list.
Related
Below is the main code
<%# Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="Webwite1.Site1" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<meta charset = "UTF-8" />
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="bootstrap/js/bootstrap.js"></script>
<link rel = "stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
<script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://kit.fontawesome.com/99d54f1718.js"></script>
<link href="css/customstylesheet.css" rel="stylesheet" />
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-lg navbar-lg" style="background-color: #e3f2fd;">
<a class="navbar-brand" href="homepage.aspx">
<img src="imgs/books.png" width="30" height="30" />
Website Test
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto">
<li class="nav-item active">
<a class="nav-link" href="homepage.aspx">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Internships</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Research</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Jobs</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Clubs</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Social</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">MyPages</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Other</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">View Books</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">User Login</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton2" runat="server" OnClick="LinkButton2_Click">Sign Up
</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton3" runat="server" OnClick="LinkButton3_Click" Visible="False">Logout</asp:LinkButton>
</li>
<li class="nav-item active">
<asp:LinkButton class="nav-link" ID="LinkButton7" runat="server" OnClick="LinkButton7_Click" Visible="False">Hello user</asp:LinkButton>
</li>
</ul>
</div>
</nav>
</div>
<!-- Main Content Placeholder -->
<div>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</div>
<!-- Main Content Placeholder -->
<!-- Footer -->
<footer>
<div id="footer1" class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<p>
<center><asp:LinkButton class="footerlinks" ID="LinkButton6" runat="server" OnClick="LinkButton6_Click">Admin Login</asp:LinkButton></center>
<asp:LinkButton class="footerlinks" ID="LinkButton11" runat="server" OnClick="LinkButton11_Click" Visible="False">Author Management</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton12" runat="server" OnClick="LinkButton12_Click" Visible="False">Publisher Management</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton8" runat="server" OnClick="LinkButton8_Click" Visible="False">Book Inventory</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton9" runat="server" OnClick="LinkButton9_Click" Visible="False">Book Issuing</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton10" runat="server" OnClick="LinkButton10_Click" Visible="False">Member Management</asp:LinkButton>
</p>
</div>
</div>
</div>
<div id="footer3" class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<p>
<asp:LinkButton class="footerlinks" ID="LinkButton5" runat="server" OnClick="LinkButton5_Click">About Us</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton13" runat="server" OnClick="LinkButton13_Click">Version History</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton14" runat="server" OnClick="LinkButton14_Click">Contact Information</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton15" runat="server" OnClick="LinkButton15_Click">Donate</asp:LinkButton>
<asp:LinkButton class="footerlinks" ID="LinkButton16" runat="server" OnClick="LinkButton16_Click">Report Issues</asp:LinkButton>
</p>
</div>
</div>
</div>
<div id="footer2" class="container-fluid">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<p style="color:whitesmoke">Text</p>
</div>
</div>
</div>
</footer>
<!-- ./Footer -->
</form>
</body>
</html>
Below is the CSS file that goes with the main code
.footerlinks {
color: #ffffff;
text-decoration: none !important;
}
.footerlinks:hover {
color: #ffd800;
}
#footer2 {
background: #0e47e3;
}
#footer3 {
background: #40d90d;
}
#footer1 {
background: #870ee3;
}
.badge-primary {
color: #ebeef0;
background-color: #B23CFD;
}
.card-body{
min-height: 800px;
}
.short-context{
min-height:400px;
}
In the main section, there is code:
<asp:LinkButton class="nav-link" ID="LinkButton4" runat="server" OnClick="LinkButton4_Click">View Books</asp:LinkButton>
I am trying to create a dropdown menu with several responsive buttons labeled A, B, C. Once you hover over "View Book", the options A, B, and C should show up.
I know how to do this in regular HTML without the ASP.net buttons.
Is there anyway to create a dropdown menu with the ASP buttons?
Thank you very much
I am not sure of "where" or "why" the confusing comes from in regards to asp.net controls such as a button, or a link button vs that of html markup?
I don't "much" see how these 2 issures are related to the question.
You have a bootstrap menu.
so, the simple question then is how can I have a drop drop trigger automatic on hover as opposed to having to click on that menu?
so, say this menu:
(I skpped some of the menu, but you get the idea).
so this:
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li><a runat="server" href="~/">Home</a></li>
<li><a runat="server" href="~/About">About</a></li>
<li><a runat="server" href="~/Contact">Contact</a></li>
<li id="mAdmin" runat="server" class="dropdown" ClientIDMode="Static">
<a runat="server" href="#" data-toggle="dropdown"
class="dropdown-toggle"
>Auto Buttons Dropdown Test<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a runat="server" href="~/SiteAdmin/Messages">Manage Portal Email Messages</a></li>
<li><a runat="server" href="~/Staff/CurrentUsersS">Show Logged on users</a></li>
<li><a runat="server" href="~/SiteAdmin/OneMonth">Month Logon Summary</a></li>
<li><a runat="server" href="~/SiteAdmin/EditChoices">Change/Edit Issue tracker choices</a></li>
<li><a runat="server" href="~/SiteAdmin/SetUp">Developer site settings</a></li>
<li><a onclick="hasproof()">My Proofs - testing</a></li>
<li><a runat="server" href="~/SiteAdmin/Issues">Issues Tracker and to-do list</a></li>
<li><asp:LinkButton ID="LinkButton1" runat="server">LinkButton Test</asp:LinkButton></li>
</ul>
</li>
</ul>
</div>
Now, the LAST choice is a "typical" and "standard" and "plain jane" example of a drop down in a bootstrap menu bar. (gain, ZERO to do with asp.net).
So, above results in this:
(note how I HAVE to click on the drop down).
However, you can have/set/enjoy the menu to drop down on hover.
Just add this style into the page
<style>
.dropdown:hover .dropdown-menu {
display: block;
margin-top: 0; /* remove the gap so it doesn't close */
}
</style>
Now, I don't have to click on the menu - just a hover will drop the menu bar, so it now works/looks like this:
And as your markup show, you "already" have some link buttons with a click event. And that looks rather fine also. (you can use a button, but the menu formatting applies MUCH better if you using a link button as your example shows. You still get/have/can/enjoy a click event, so it really now just a asp.net button.
So, the bootstrap menu, the goal and want of a "auto drop down" is really much 100% un-attached to the fact that this is asp.net.
it still mostly html, and a boostrap menu, and thus it does not really care if you have a standard "a" link, or a link button for that menu. However all those issues don't change the simple goal and question:
I want the drop down menu in the menu bar to automatic expand on hover.
Adding the above simple style to that page should thus then trigger, result in the menu drop down expanding without you having to click on that drop down you add/placed into the menu bar.
So needed help again
Sorry a bit confusing but, I am trying to create a chat box which user can submit and then retrieve it again from the DB, I am following this script https://bootsnipp.com/snippets/EkQe7
As you can see, from the HTML code, there is two types, one is when you chat and another is when other people chat,
<div class="chat">
<div class="chat-history">
<ul class="chat-ul">
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
</li>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
</ul>
</div> <!-- end chat-history -->
</div> <!-- end chat -->
So now, what I am trying to do is from the retrieve the message from DB then code-behind submit the HTML code into the Repeater,
If it is "You", then will use this code
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
A new client?!?! I would love to help them, but where are we going to find the time?
</div>
If it is other people, then will use this code
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name">Ada, your OperationsAlly</span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right"> We should take a look at your onboarding and service delivery workflows, for most businesess there are many ways to save time and not compromise quality. </div>
</li>
My question is how to do that from Code-Behind PageLoad? How to add the code above into the Repeater from code-behind?
Thanks!
First, you'll have to retrieve the records in the database in the code behind. (See this msdn article for details)
messages.DataSource = myMessages;
messages.DataBind();
Now we can use Repeater, in which the html is separated by author, to iterate the data. Note that I am assuming how your database of messages is structured.
<asp:Repeater id="messages" runat="server">
<ItemTemplate>
<div runat="server" visible='<% (Container.DataItem("author") == "us") %>'>
<li>
<div class="message-data">
<span class="message-data-name"><i class="fa fa-circle you"></i> You</span>
</div>
<div class="message you-message">
<%# Eval("testMessage") %>
</div>
</li>
</div>
<div runat="server" visible='<% (Container.DataItem("author") != "them") %>'>
<li class="clearfix">
<div class="message-data align-right">
<span class="message-data-name"><%# Eval("authorName") %></span> <i class="fa fa-circle me"></i>
</div>
<div class="message me-message float-right">
<%# Eval("testMessage") %>
</div>
</li>
</div>
</ItemTemplate>
</asp:Repeater>
I haven't tested this code, but its a high level idea of what to do. You may also want to see some Examples on using Repeater.
I have a dropdown from boostrap such as this:
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">
<i class="fa fa-bell-o"></i>
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
<li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
</ul>
</div>
I'd like to add list items to this boostrap dropdown menu from my C# code behind. I'm adding items through a String foreach Loop. How do I access the dropdown id, since its not displayed in the code behind because it requires ASP controls?
You will need a repeater.
Repeater1.DataSource = yourdatasource
Repeater1.Databind()
<asp:Repeater id="Repeater1" runat="server">
<HeaderTemplate><Ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"></HeaderTemplate>
<ItemTemplate>
<li role="presentation">
<a role="menuitem" href="#"> <%# Eval("yourfieldfromcodebhind here") %> </a>
</li>
</ItemTemplate>
</asp:Repeater>
I am trying to implement a dropDownList which, on each row to contain two controls: a Label and a Button, but my problem is that I have no clue how to do that.
Searching on google gave me no usefull results, so I don't know from where to start, or perhaps I don't know what to search. This dropDownList should work as a standard one if user clicks on the label, or rise a different event if the button is clicked.
I know this in not the standard type of question here, but if anyone could help me would be greatly appreciated.
Dropdownlist is simply a list. then Why you need Button and label in Dropdownlist ?
The DropDownList is a control. So it is not possible to add buttons and label in dropdownlist
If you need to do some activities when dropdownvalue changed then you can use OnSelectedIndexChanged . You can use it like buttonclick event
If button and Label are necessary for you then add them in a different way Use frames, or in OnSelectedIndexChanged event create your buttons and labels
Try this if you are looking for double options related to dropdownlist then try something like below
css
ul.dropdown-menu li{
width: 500px;
}
ul.dropdown-menu li a.text-left{
float: left;
width: 49%;
}
ul.dropdown-menu li a.text-right{
float: right;
width: 50%;
}
html
<div class="btn-group">
<button type="button" class="btn btn-default btn-lg">big button</button>
<button type="button" class="btn btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span></button>
<ul class="dropdown-menu">
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
left
right
</div>
</li>
<li>
<div>
<a href="#" class="text-left">
full name must align to left
</a>
<a href="#" class="text-right">
short name - align to right
</a>
</div>
</li>
</ul>
</div>
I wanted to implement Bootstrap dropdown button in asp.net button
Here is Bootstrap Button
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
Here i implement upto button but i don't know how to do the dropdown part
<asp:Button ID="btnMore" class="btn btn-danger dropdown-toggle"
data-toggle="dropdown" runat="server" Text="SMS" />
You can see this button in bootstrap Click Here
Two points you need to change.
The button action that make the post back and call your function on code behind and the link on the menu to do the same.
You only need to add the correct CssClass on the asp.net button for the first.
For the menu links you can use the LinkButton asp.net control with out any other settings (css style I mean)
And here is a working tested example:
<!-- Split button -->
<div class="btn-group">
<!-- here is the asp.net button to make post back -->
<asp:Button ID="Button1" runat="server" Text="Action" CssClass="btn btn-danger" />
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<!-- here is the asp.net link button to make post back -->
<li><asp:LinkButton ID="LinkButton1" runat="server">Action</asp:LinkButton></li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</div>
The second button that opens the menu is not need to be asp.net control, is just opens the menu, is not call any code behind function. So you left it as is.