Related
Goal: I would like to have a Dropdown list that shows the color green if someones if Availability is True, and red is someones Availability is False.
NOTE: I need to do it without jQuery (I was just told we are not allowed to use jquery in our project).
Problem/Background:
The only way I could get anything to show was with CSS and placing it on the Dropdown list itself, as seen in the first row of this image for Prof Smith. You'll see the next row with Prof. Jones is displaying the actual boolean value from the database in the dropdown, although I want a colored circle.
I'd like it to be within the dropdown box itself. It should also (eventually) be able to update the value in the DB if they make a change.
How can I get these circles to show inside the dropdown box?
What I want it the dropdown to look like:
What it actually looks like:
What I've done:
Tried CSS on the DropdownList as well as the ListItem, and inside of the listitem.
I have also tried SVG but that didn't insert into the ListItem at all
I've tried adding CSS through the C# code but couldn't get it to work that way
CSS:
.dot {
height: 20px;
width: 20px;
border-radius: 50%;
display: inline-block;
}
.greendot {
background-color: #89C742;
}
.reddot {
background-color: #fe0505;
}
aspx/html:
<asp:DropdownList runat="server" id="ddl1" class="dot greendot">
<asp:ListItem ID="LT1"></asp:ListItem>
<asp:ListItem ID="RT1"></asp:ListItem>
</asp:DropdownList>
<asp:DropdownList runat="server" id="ddl2">
<asp:ListItem ID="LT2"></asp:ListItem>
</asp:DropdownList>
C#:
LT2.Text = professorStatsList[1].Available.ToString();
I don't think you can create rounded option element without creating a complete copy of the DDL with div elements like in this example. But the closest you can get is something like this.
Give the DDL a class, in this case RoundedDDL
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="RoundedDDL">
<asp:ListItem Text="" Value=""></asp:ListItem>
<asp:ListItem Text="" Value="True"></asp:ListItem>
<asp:ListItem Text="" Value="False"></asp:ListItem>
</asp:DropDownList>
Then with CSS make it round and remove the arrow with appearance: none;. You can style the select elements by value with option[value="True"]
<style>
.RoundedDDL {
appearance: none;
width: 30px;
height: 30px;
border-radius: 15px;
border: 1px solid black;
background-color: white;
cursor: pointer;
}
select option {
background-color: white;
}
select option[value="True"] {
background-color: green;
}
select option[value="False"] {
background-color: red;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
</style>
And then some javascript to add the correct class to the DDL when a specific value has been selected.
<script>
$('.RoundedDDL').bind('change', function () {
var $this = $(this);
$this.removeClass('green');
$this.removeClass('red');
if ($this.val() === 'True') {
$this.addClass('green');
} else if ($this.val() === 'False') {
$this.addClass('red');
}
});
</script>
I would just create some images and implement these CSS classes:
.available {
background-image:url('images/available.png');
}
.unavailable {
background-image:url('images/unavailable.png');
}
and would make sure that the items have the class you expect (set the CssClass attribute)
Also, you may want to implement a new Control class which extends ListItem, has a logical value for available and in the correct event (maybe PreRender, but I'm not sure) you set the CssClass to the correct value. That would separate your concerns.
I'm not sure if I misunderstood your question, but I understand that you want to put the circle inside each ListItem.
One way to do this is to use a customizable selectmenu using jQuery UI, but if you want to keep the circle in the selected item you will have to make a small change, for this I have used the answer to this question as a base: Keep picture with Selectmenu of jQuery UI
ASPX/JS/CSS Code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<script>
$(function () {
$.widget("custom.iconselectmenu", $.ui.selectmenu, {
_renderItem: function (ul, item) {
var li = $("<li>"),
wrapper = $("<div>", { html: item.element.html() });
if (item.disabled) {
li.addClass("ui-state-disabled");
}
$("<span>", {
style: item.element.attr("data-style"),
"class": "ui-icon " + item.element.attr("data-class")
})
.appendTo(wrapper);
return li.append(wrapper).appendTo(ul);
}
});
$("#<%=dpwTest.ClientID%>")
.iconselectmenu({
create: function (event, ui) {
var widget = $(this).iconselectmenu("widget");
$span = $('<span id="' + this.id + 'selected" class="status-selected"> ').html(" ").appendTo(widget);
// Keep always the selected item class (for example, when the page load a specific item)
$span.attr("style", $(this).children(":selected").data("style"));
},
change: function (event, ui) {
$("#" + this.id + 'selected').attr("style", ui.item.element.data("style"));
}
})
.iconselectmenu("menuWidget")
.addClass("ui-menu-icons status");
});
</script>
<style>
.ui-selectmenu-menu .ui-menu.status .ui-menu-item-wrapper {
padding: 15px 10px 0 30px;
padding-bottom: 10px;
}
.ui-selectmenu-menu .ui-menu.status .ui-menu-item .ui-icon {
height: 24px;
width: 24px;
top: 0.1em;
}
.ui-selectmenu-text {
padding-left: 2em;
}
.status-selected {
position:absolute;
right:auto;
margin-top:-12px;
top:50%;
}
.ui-icon, .ui-widget-content .ui-icon {
background-image: none;
}
.ui-selectmenu-button.ui-button {
text-align: left;
white-space: nowrap;
width: 7em;
}
</style>
<form id="form1" runat="server">
<div>
<label for="dpwTest">Prof. Smith</label>
<asp:DropDownList ID="dpwTest" runat="server">
<asp:ListItem Text="Yes" Value="True" data-class="status" data-style="height: 25px; width: 25px; background-color: green;border-radius: 50%; display: inline-block;" />
<asp:ListItem Text="No" Value="False" data-class="status" data-style="height: 25px; width: 25px; background-color: red;border-radius: 50%; display: inline-block;" />
</asp:DropDownList>
</div>
</form>
</body>
</html>
Result:
This is it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="Description" content="Enter your description here" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.0/css/all.min.css" />
<link rel="stylesheet" href="assets/css/style.css" />
<title>Title</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</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 mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">person1    </a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person2</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">person3</a>
</div>
</li>
</ul>
</div>
</nav>
<Script>
var avaliability = [true, false, false];
var x = document.getElementsByClassName('dropdown-item');
for (var i = x.length; i--;) {
if (avaliability[i] === true) {
x[i].innerHTML = `person  <span class="badge badge-success"
style="border-radius: 100%;">  </span>`
} else {
x[i].innerHTML = `person  <span class="badge badge-danger"
style="border-radius: 100%;">  </span>`;
}
}
</Script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>
check
https://jsfiddle.net/yubeog4c/
just get the values into availability array and it should converted to boolean types.
Thanks!!!!
I am working with ASP.NET Core 3.1 MVC and Bootstrap 4.4.1 and the default project template with DataTables.js (1.10.20 and css twitter bootstrap).
The first thing I must say is that I'm not good at all with css, so I think this could be the reason of this problem.
The following problem occurs when the screen has a lower resolution: (Tested resolution: 400x500)
I would like to know why this happened with the Fixed Footer and if there is a fix for this.
Thanks in advance for any assistance.
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>WebApplication1</title>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" /> <link rel="stylesheet" href="~/css/site.css" />
</head>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js"></script>
</body>
</html>
I used CSS flex to reduce the change to your markup.
The change I did were:
I added class content to your main content.
I changed the style for body to have these styles
body {
display: flex;
flex-direction: column;
height: 100vh;
}
Then I added these, and also updated the style for your .footer
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
a.navbar-brand {
white-space: normal;
text-align: center;
word-break: break-all;
}
/* Provide sufficient contrast against white background */
a {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
font-size: 14px;
}
#media (min-width: 768px) {
html {
font-size: 16px;
}
}
.border-top {
border-top: 1px solid #e5e5e5;
}
.border-bottom {
border-bottom: 1px solid #e5e5e5;
}
.box-shadow {
box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
}
button.accept-policy {
font-size: 1rem;
line-height: inherit;
}
/* Sticky footer styles
-------------------------------------------------- */
html {
position: relative;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
flex: 0 0 50px;
}
.content {
flex: 1 0 auto;
}
.footer {
flex-shrink: 0;
width: 100%;
line-height: 60px; /* Vertically center the text there */
}
<link href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container">
<a class="navbar-brand">WebApplication1</a>
</div>
</nav>
</header>
<div class="content container">
<main role="main" class="pb-3">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.css" />
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap4.min.css" />
<div class="table-responsive p-1">
<table class="table table-striped table-bordered" id="Table">
<thead>
<tr>
<th scope="col">
Name
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle">
Hello
</td>
</tr>
<tr>
<td class="align-middle">
World
</td>
</tr>
</tbody>
</table>
<script src="//cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/1.10.20/js/dataTables.bootstrap4.min.js"></script>
<script>
$(document).ready(function () {
$('#Table').DataTable(
{
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/English.json"
}
});
});</script>
</div>
</main>
</div>
<footer class="footer border-top footer text-muted text-center">
<div class="container">
Footer
</div>
</footer>
</body>
You can see it working here:
https://jsfiddle.net/8ba9cdxe/
you can change the position of the footer to static then it will be fixed.
Try remove posistion:absolute in footer class
.footer {
/*position: absolute;*/
bottom: 0;
width: 100%;
white-space: nowrap;
line-height: 60px; /* Vertically center the text there */
}
I have a view displays review from the database Reviews Table. Brief information for each item is display at first (ReviewID, Author and Date Create), then if you click on the ReviewID, the Rating and Feedback is displayed in a pop-up. The problem is pop-up gives the same details(Rating and Feedback) as the first item displayed. The pictures below give a visual representation of the problem
When on you click on Review Number: 5002(This is the ReviewID (ID:5002) in the table) a pop up is produced display the ReviewID's Rating and Feedback
However if you click on Review Number: 5006 (ID:5006), the content on the pop-up is not the corresponding to 5006 but to 5002
Here is my code for the View
#{
ViewBag.Title = "Index";
Layout = "";
}
#model PagedList.IPagedList<Siza.Models.Review>
#using PagedList.Mvc;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon"s
type="image/png"
href="~/Content/favicon.ico" />
<title>Siza</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="~/Content/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="~/Content/css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="~/Content/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!--Demo-->
<link rel="stylesheet" type="text/css" href="~/Content/css/normalize.css">
<style>
textarea {
overflow-y: scroll;
height: 100px;
resize: none;
}
.demo-3 {
position:relative;
width:300px;
height:200px;
overflow:hidden;
float:left;
margin-right:20px
}
.demo-3 figure {
margin:0;
padding:0;
position:relative;
cursor:pointer;
margin-left:-50px
}
.demo-3 figure img {
display:block;
position:relative;
z-index:10;
margin:-15px 0
}
.demo-3 figure figcaption {
display:block;
position:absolute;
z-index:5;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box
}
.demo-3 figure h2 {
font-family:'Lato';
color:#fff;
font-size:20px;
text-align:left
}
.demo-3 figure p {
display:block;
font-family:'Lato';
font-size:12px;
line-height:18px;
margin:0;
color:#fff;
text-align:left
}
.demo-3 figure figcaption {
top:0;
left:0;
width:100%;
height:100%;
padding:29px 44px;
background-color:rgba(26,76,110,0.5);
text-align:center;
backface-visibility:hidden;
-webkit-transform:rotateY(-180deg);
-moz-transform:rotateY(-180deg);
transform:rotateY(-180deg);
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure img {
backface-visibility:hidden;
-webkit-transition:all .5s;
-moz-transition:all .5s;
transition:all .5s
}
.demo-3 figure:hover img,figure.hover img {
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.demo-3 figure:hover figcaption,figure.hover figcaption {
-webkit-transform:rotateY(0);
-moz-transform:rotateY(0);
transform:rotateY(0)
}
.full-width {
width: 100%;
}
.carousel-caption {
position: absolute;
top: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
height: 100%;
}
h1 {
text-align: center;
font-family: Tahoma, Arial, sans-serif;
color: #06D85F;
margin: 80px 0;
}
.box {
width: 40%;
margin: 0 auto;
background: rgba(255,255,255,0.2);
padding: 35px;
border: 2px solid #fff;
border-radius: 20px/50px;
background-clip: padding-box;
text-align: center;
}
.button {
font-size: 1em;
padding: 10px;
color: #fff;
border: 2px solid #06D85F;
border-radius: 20px/50px;
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease-out;
}
.button:hover {
background: #06D85F;
}
.overlay {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.7);
transition: opacity 500ms;
visibility: hidden;
opacity: 0;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.popup {
margin: 70px auto;
padding: 20px;
background: #fff;
border-radius: 5px;
width: 30%;
position: relative;
transition: all 5s ease-in-out;
}
.popup h2 {
margin-top: 0;
color: #333;
font-family: Tahoma, Arial, sans-serif;
}
.popup .close {
position: absolute;
top: 20px;
right: 30px;
transition: all 200ms;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #333;
}
.popup .close:hover {
color: #06D85F;
}
.popup .content {
max-height: 30%;
overflow: auto;
}
screen and (max-width: 700px){
.box{
width: 70%;
}
.popup{
width: 70%;
}
}
</style>
</head>
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li href="#reviewpopup">
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
<table class="table text-center width:50%">
<tr>
<td>
#Html.PagedListPager(Model, Page => Url.Action("StudentWellnessReviews",
new { Page, pageSize = Model.PageSize }))
Showing #Model.FirstItemOnPage to #Model.LastItemOnPage of #Model.TotalItemCount Reviews
</td>
</tr>
</table>
I really not sure how to solve this issue. Help would be greatly apprececiated
On HTML page there can be only one element with specific id. In your case I would add Model.ReviewId to the id attribute of your popup and href attribute of your <a> element.
#foreach (var item in Model)
{
//Popup window content
<div id="reviewpopup_#Model.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: #Html.DisplayFor(modelItem => item.Rating)</h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
Also href attribute in <li> element is invalid, so you should remove it.
Desired result would be
<div id="reviewpopup_1">
//div content here
</div>
and later
Review Number: #Html.DisplayFor(modelItem => item.ReviewID)
I managed to figure it out:) You can use the item.ReviewID as a div ID
{
//Popup window content
<div id="#item.ReviewID" class="overlay">
<div class="popup">
<h4>Rating: #Html.DisplayFor(modelItem => item.Rating)</h4>
<h4>Feedback: </h4>
<a class="close" href="#">×</a>
<div class="content">
#Html.DisplayFor(modelItem => item.Feedback)<br />
</div>
</div>
</div>
<ul class="demo-3 col-lg-6 col-lg-offset-3 text-center nav navbar-nav">
<li>
<h4 align="center">Review Number: #Html.DisplayFor(modelItem => item.ReviewID)</h4>
<br/>
<figure>
<img src="~/Content/img/studentwellnessreviewcard.jpg" alt="">
<div class="carousel-caption">
<h4>Author: #Html.DisplayFor(modelItem => item.Username)</h4>
</div>
<figcaption>
<h4 align="center">Date Created: #Html.DisplayFor(modelItem => item.Date)</h4>
</figcaption>
</figure>
<hr/>
</li>
</ul>
}
I have a <asp:Button> button in a <form> and it is "connected" to the C# code. My C# code should redirect users to the homepage (Homepage.html). Something like this:
protected void Inlog_button_Click(object sender, EventArgs e)
{
Response.Redirect("~/Homepage.html");
}
But, instead redirecting to the Homepage, the action will reload the page with: Login.aspx?ctl00=Inloggen.
Why is the app "ignoring" my written C# action?
Here is the whole HTML code
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="OSGS_KANTINE_WEB.login" %>
<!DOCTYPE html>
<html class=" j-feature-js j-feature-no-touch j-feature-opacity j-feature-csstransitions" lang="nl-NL"><head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="https://u.jimdo.com/">
<link rel="dns-prefetch" href="//assets.jimstatic.com/">
<link rel="dns-prefetch" href="https://image.jimcdn.com">
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link rel="dns-prefetch" href="https://www.google-analytics.com">
<link rel="preconnect" href="https://u.jimdo.com/" crossorigin="anonymous">
<link rel="preconnect" href="//assets.jimstatic.com/" crossorigin="anonymous">
<link rel="preconnect" href="https://image.jimcdn.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
<link rel="preconnect" href="https://www.google-analytics.com" crossorigin="anonymous">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="">
<meta name="robots" content="NOINDEX, NOFOLLOW">
<meta property="st:section" content="">
<meta name="twitter:card" content="app">
<meta name="twitter:app:id:iphone" content="588950703">
<meta name="twitter:app:id:ipad" content="588950703">
<meta name="twitter:app:id:googleplay" content="com.jimdo">
<title>Login</title>
<link rel="icon" type="image/x-icon" href="logo_lyceum.ico" />
<link rel="canonical" href="http://osgs-kantine-site-design.jimdo.com/login-1/">
<style>
html,body{margin:0}.hidden{display:none}.n{padding:5px}#cc-website-title a {text-decoration: none}.cc-m-image-align-1{text-align:left}.cc-m-image-align-2{text-align:right}.cc-m-image-align-3{text-align:center}
.subbutton {
display: inline-block;
border-radius: 4px;
background-color: #f4511e;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.subbutton span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.subbutton span:after {
content: '»';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.subbutton:hover span {
padding-right: 25px;
}
.subbutton:hover span:after {
opacity: 1;
right: 0;
}
input[type=text] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=text]:focus {
border: 3px solid #f4511e;
}
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
border: 3px solid #ccc;
-webkit-transition: 0.5s;
transition: 0.5s;
outline: none;
}
input[type=password]:focus {
border: 3px solid #f4511e;
}
</style>
<link href="https://u.jimdo.com/www400/o/s2080dbef3339dc21/layout/dm_0daae465c1d01048b40b213ad7efcc70/css/layout.css?t=1456656473" rel="stylesheet" type="text/css" id="jimdo_layout_css">
<script src="//www.googletagmanager.com/gtm.js?id=GTM-WDBL3P&l=_jimdoDataLayer" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script src="//www.googletagmanager.com/gtm.js?id=GTM-WDBL3P&l=_jimdoDataLayer" async=""></script><script src="https://www.google-analytics.com/analytics.js" async=""></script><script> /* <![CDATA[ */ /*! loadCss [c]2014 #scottjehl, Filament Group, Inc. Licensed MIT */ window.loadCSS = window.loadCss = function(e,n,t){var r,l=window.document,a=l.createElement("link");if(n)r=n;else{var i=(l.body||l.getElementsByTagName("head")[0]).childNodes;r=i[i.length-1]}var o=l.styleSheets;a.rel="stylesheet",a.href=e,a.media="only x",r.parentNode.insertBefore(a,n?r:r.nextSibling);var d=function(e){for(var n=a.href,t=o.length;t--;)if(o[t].href===n)return e.call(a);setTimeout(function(){d(e)})};return a.onloadcssdefined=d,d(function(){a.media=t||"all"}),a}; window.onloadCSS = function(n,o){n.onload=function(){n.onload=null,o&&o.call(n)},"isApplicationInstalled"in navigator&&"onloadcssdefined"in n&&n.onloadcssdefined(o)} /* ]]> */ </script> <script>
// <![CDATA[
onloadCSS(loadCss('//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css') , function() {
this.id = 'jimdo_web_css';
});
// ]]>
</script><link media="all" href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet"><link id="jimdo_web_css" media="all" href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet">
<link href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="preload" as="style">
<noscript>
<link href="//assets.jimstatic.com/web_unresponsive.css.16b9ae9aa4f337928af181600e98551e.css" rel="stylesheet"/>
</noscript>
<script>
//<![CDATA[
var jimdoData = {"isTestserver":false,"isLcJimdoCom":false,"isJimdoHelpCenter":false,"isProtectedPage":false,"cstok":"b7572c81c13157a7c0f12ff29ba267b86ecc2b30","cacheJsKey":"5142cd437b8c2d4dc78374d706a685d16d36a82e","cacheCssKey":"5142cd437b8c2d4dc78374d706a685d16d36a82e","cdnUrl":"\/\/assets.jimstatic.com\/","minUrl":"\/\/assets.jimstatic.com\/app\/cdn\/min\/file\/","authUrl":"https:\/\/a.jimdo.com\/","webPath":"http:\/\/osgs-kantine-site-design.jimdo.com\/","appUrl":"http:\/\/a.jimdo.com\/","webserver":"http:\/\/web403.jimdo.com\/","cmsLanguage":"nl_NL","isFreePackage":true,"mobile":false,"isDevkitTemplateUsed":true,"isTemplateResponsive":false,"websiteId":"s2080dbef3339dc21","pageId":2147754849,"packageId":1,"shop":{"deliveryTimeTexts":{"1":"Levertijd: 1-3 dagen","2":"Levertijd: 3-5 dagen","3":"Levertijd: 5-8 dagen"},"checkoutButtonText":"Naar de kassa","isReady":false,"currencyFormat":{"pattern":"\u00a4 #,##0.00;\u00a4 #,##0.00-","convertedPattern":"$ #,##0.00","symbols":{"GROUPING_SEPARATOR":".","DECIMAL_SEPARATOR":",","CURRENCY_SYMBOL":"\u20ac"}},"currencyLocale":"nl_NL"},"tr":{"gmap":{"searchNotFound":"Het ingevoerde adres kon niet worden gevonden of bestaat niet.","routeNotFound":"De route kon niet berekend worden. Mogelijke oorzaken: het vertrekadres is niet precies genoeg aangegeven of te ver van het aankomstadres verwijderd."},"shop":{"checkoutSubmit":{"next":"Volgende stap","wait":"Een moment geduld"},"paypalError":"Helaas is er iets verkeerd gegaan. Probeer het nog een keer!","cartBar":"Naar de winkelwagen","maintenance":"Deze webwinkel is tijdelijk helaas niet bereikbaar. Probeer het later nog eens.","addToCartOverlay":{"productInsertedText":"Het product is aan de winkelwagen toegevoegd.","continueShoppingText":"Verder winkelen","reloadPageText":"Opnieuw laden"},"notReadyText":"Het opzetten van deze webwinkel is nog niet volledig afgerond.","numLeftText":"Er zijn op dit moment niet meer dan {:num} exemplaren van dit artikel beschikbaar.","oneLeftText":"Er is helaas nog maar \u00e9\u00e9n exemplaar van dit product beschikbaar."},"common":{"timeout":"Er is een fout opgetreden. De door jou gekozen actie werd onderbroken. Probeer het later nog een keer."},"form":{"badRequest":"Er is een fout opgetreden. De invoer kon helaas niet verzonden worden. Probeer het later nog een keer!"}},"jQuery":"jimdoGen002","isJimdoMobileApp":false,"bgConfig":{"id":82641349,"type":"color","color":"rgb(255, 255, 255)"},"responsiveBreakpointLandscape":767,"responsiveBreakpointPortrait":480,"copyableHeadlineLinks":false};
// ]]>
</script>
</head>
<body style="background-color: rgb(255, 255, 255);" class="body cc-page j-m-flash-styles j-m-gallery-styles j-m-video-styles j-m-hr-styles j-m-header-styles j-m-text-styles j-m-emotionheader-styles j-m-htmlCode-styles j-m-rss-styles j-m-form-styles j-m-table-styles j-m-textWithImage-styles j-m-downloadDocument-styles j-m-imageSubtitle-styles j-m-flickr-styles j-m-googlemaps-styles j-m-blogSelection-styles j-m-comment-styles j-m-jimdo-styles j-m-profile-styles j-m-guestbook-styles j-m-promotion-styles j-m-twitter-styles j-m-hgrid-styles j-m-shoppingcart-styles j-m-catalog-styles j-m-product-styles-disabled j-m-facebook-styles j-m-sharebuttons-styles j-m-externalSource-styles j-m-formnew-styles j-m-callToAction-styles j-m-turbo-styles j-m-spacing-styles j-m-googleplus-styles j-m-dummy-styles j-footer-styles cc-pagemode-default cc-content-parent jqbga-container jdbga-web--color" id="page-2147754849">
<div id="cc-inner" class="cc-content-parent">
<header><div class="navigation-colors">
<div class="tpl-topbar-wrapper">
<div class="tpl-title-wrapper">
<div id="cc-website-title" class="cc-single-module-element"><div id="cc-m-10956465649" class="j-module n j-header"><h1 class="cc-within-single-module-element j-website-title-content" id="cc-m-header-10956465649">OSG Schoonoord Kantine Website</h1></div></div>
</div>
<nav class="tpl-navigation"><div data-container="navigation"><div class="j-nav-variant-nested"><ul class="cc-nav-level-0 j-nav-level-0"><li id="cc-nav-view-2147752549" class="jmd-nav__list-item-0">--- Home ---</li><li id="cc-nav-view-2147754849" class="jmd-nav__list-item-0 cc-nav-current j-nav-current jmd-nav__item--current">Login</li><li id="cc-nav-view-2147754949" class="jmd-nav__list-item-0">Voorwaarden</li><li id="cc-nav-view-2147755049" class="jmd-nav__list-item-0">Contact</li></ul></div></div>
</nav><div class="clear"></div>
</div>
<div class="clear"></div>
</div>
<div class="logo-wrapper">
<div id="cc-website-logo" class="cc-single-module-element"><div id="cc-m-10956474449" class="j-module n j-imageSubtitle"><div class="cc-m-image-container"><figure class="cc-imagewrapper cc-m-image-align-1">
<img srcset="https://image.jimcdn.com/app/cms/image/transf/none/path/s2080dbef3339dc21/image/i2d821423f9ea4bff/version/1456656485/image.png 184w" sizes="(min-width: 184px) 184px, 100vw" id="cc-m-imagesubtitle-image-10956474449" src="https://image.jimcdn.com/app/cms/image/transf/none/path/s2080dbef3339dc21/image/i2d821423f9ea4bff/version/1456656485/image.png" alt="" class="" data-src-width="184" data-src-height="144">
</figure>
</div>
<div class="cc-clear"></div>
</div></div>
</div>
<div class="clear"></div>
</header>
<div class="content-wrapper content-options-box cc-content-parent">
<section class="content-options-css content-options-inner cc-content-parent"><div class="breadcrumbs breadcrumb-options">
<div data-container="navigation"><div class="j-nav-variant-breadcrumb"><ol><li itemscope="true" itemtype="http://data-vocabulary.org/Breadcrumb" class="cc-nav-current j-nav-current"><span itemprop="title">Login</span></li></ol></div></div>
</div>
<div id="content_area" data-container="content">
</div>
<div id="content_start">
</div>
<div id="formDiv">
<div id="form_div" runat="server" class="j-module n j-htmlCode ">
<form>
Stamnummer:
<p></p>
<input class="stname"type="text" />
<p></p>
Wachtwoord:
<p />
<input class="pass" type="password" />
<p />
<asp:Button ID="Inlog_button" runat="server" Text="Button" click="Inlog_button_Click"/>
</form>
</div>
<div id="cc-m-10956595049" class="j-module n j-callToAction ">
<div class="j-calltoaction-wrapper j-calltoaction-align-1">
</div>
</div>
</div>
</section>
</div>
<aside class="sidebar-options-box"><section class="sidebar-options-css sidebar-options-inner"><div data-container="sidebar"><div id="cc-matrix-2937969949"></div></div>
</section></aside><footer class="footer-options"><div class="tpl-footer-wrapper">
<div id="contentfooter" data-container="footer">
<div class="copyright-footer"> <p class="pull-left"> <strong>Copyright 2016 - Hugo Woesthuis</strong></p> </div>
</div>
</div>
</footer><aside class="tpl-shoppingcart">
</aside>
</div>
<script> /*<![CDATA[*/ (function(){ if (!window.GoogleAnalyticsObject) { (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','_jc_tracker'); } else { window._jc_tracker = window[window.GoogleAnalyticsObject]; } _jc_tracker('create', 'UA-54647672-2', { name: 'JC_TRACKER', alwaysSendReferrer: true, cookieDomain: location.hostname, cookieName: '_jc_tracker', siteSpeedSampleRate: 50, anonymizeIp: true }); var cParams = { 'page': location.hostname }; if (location.hash.indexOf('jc=') > -1) { var source = "garbled"; var passedSource = location.hash.match(/jc=([^&$]+)/); if (passedSource && passedSource[1]) { source = decodeURIComponent(passedSource[1]); } cParams = { campaignName: 'jimdo internal campaign', campaignMedium: 'link', campaignSource: source }; } _jc_tracker('JC_TRACKER.send', 'pageview', cParams); if (window.addEventListener && window.performance && performance.timing) { window.addEventListener('load', function() { if (performance.timing.domContentLoadedEventStart > 0) { var timeToContentLoaded = performance.timing.domContentLoadedEventStart - performance.timing.domLoading; _jc_tracker('JC_TRACKER.send', 'timing', 'page speed', 'time to content loaded', timeToContentLoaded); } }); } }()); /* ]]> */ </script><!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-WDBL3P" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<script>
//<![CDATA[
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','_jimdoDataLayer','GTM-WDBL3P');
// ]]>
</script>
<!-- End Google Tag Manager -->
<script id="" type="text/javascript">(function(){try{var a=Math.max(document.documentElement.clientWidth,window.innerWidth||0),b=Math.max(document.documentElement.clientHeight,window.innerHeight||0);_jc_tracker&&_jc_tracker("JC_TRACKER.set","metric1",a);_jc_tracker&&_jc_tracker("JC_TRACKER.set","metric2",b);_jc_tracker("JC_TRACKER.send","event")}catch(c){}})();</script>
</body>
</html>
Thanks in advance.
1) You must send the whole page in <form> attribute. There is no partial send in asp.Net.
2) Input element cannot reach codebehind this way. You can easily do what you want to do by using asp.Net button object instead.
1.from should be <form runat=server>
2.Your click event should be onclick.
Then it will work.
<form runat=server>
Stamnummer:
<p></p>
<input class="stname"type="text" />
<p></p>
Wachtwoord:
<p />
<input class="pass" type="password" />
<p />
<asp:Button ID="Inlog_button" runat="server" Text="Button"
onclick="Inlog_button_Click"/>
</form>
I am very new to razor I always workder with aspx pages, I am trying to have a login form with 2 text and a submit button and down of it I am trying to add a square menu with gradients and hoover but I got stuck.
this is my Login.cshtml:
#model Magazzino.Models.LoginViewModel
#{
ViewBag.Title = "Login";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#if (TempData["message"] != null)
{
<script type="text/javascript">
alert(#Html.Raw(Json.Encode(TempData["message"])));
</script>
}
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
#Html.AntiForgeryToken()
<div>
<table>
<tr>
<td>#Html.LabelFor(a => a.Username)</td>
<td>#Html.TextBoxFor(a => a.Username)</td>
<td>#Html.ValidationMessageFor(a => a.Username)</td>
</tr>
<tr>
<td>#Html.LabelFor(a => a.Password)</td>
<td>#Html.PasswordFor(a => a.Password)</td>
<td>#Html.ValidationMessageFor(a => a.Password)</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Login" />
</td>
<td></td>
</tr>
</table>
</div>
}
<div style="background: grey">
<div style="float: left; margin-left: 35%; width: 15%; background: linear-gradient(red, orange);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Contatti", "Contatti")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Dove Siamo", "DoveSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
<div style="float: right; margin-right: 35%; width: 15%; text-align: right; background: linear-gradient(green, yellow);">
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Informazioni", "Informazioni")
</div>
<div style="height: 30%; border: 1px solid;">
#Html.ActionLink("Chi Siamo", "ChiSiamo", null, new { #style = "position: relative; top: 90%;" })
</div>
</div>
In this ways google and firefox render the div with the actionlink in a normal way but IE doesn't render the height so I added a layout page:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
</head>
<body>
<div>
#RenderBody()
</div>
</body>
</html>
#RenderSection("scripts", required: false)
And now IE, Chrome and Firefox are rendering the div with the action without height, I guess it's not the right way to put HTMl elements that are not linked to the form, but How do I put other HTML elements inside a razor page which has got already a form?
Thank you
I think this is mostly css and html problem.
I don't see the closing tag for <div style="background: grey">, I would verify that it is closed properly.
You have two floating divs, I would put an extra tag <div style='clear:both'> before closing the <div style="background: grey"> tag. This will clear the floating after that point.
After 1. and 2., if you don't see the grey background, I would suspect that the inner divs covered the background, if so, I would add some padding in the parent tag, for example <div style="background: grey; padding: 10px;">