setting div to row but nothing happens - c#

I am trying to make the three items in the top_three div to be displayed in a row but when I set it to row nothing happens, but if I set the .scoreboard to row then I get the row, but I don't want the .restplaces div to be in a row I want it to be displayed underneath, I really don't understand why it's not working.
I use a css file with a Razor component:
Razor component:
#if (Teams is not null)
{
<div class="confetti_container">
<div class="confetti"></div>
**(There are like 20 more of this div but i don't wanna clutter this here)**
</div>
<div class="scoreboard">
#do
{
_place++;
var allteams = Teams.Where(team => team.TeamPoints ==
Teams[0].TeamPoints).ToList();
foreach (var team in allteams)
{
<div class="top_three">
#if (_place == 2)
{
<div class="secondplace">
<div class="secondplaceimg"></div>
<h1>#team.TeamName</h1>
</div>
}
#if (_place == 1)
{
<div class="firstplace">
<div class="firstplaceimg"></div>
<h1>#team.TeamName</h1>
</div>
}
#if (_place == 3)
{
<div class="thirdplace">
<div class="thirdplaceimg"></div>
<h1>#team.TeamName</h1>
</div>
}
</div>
#if (_place > 3)
{
<div class="restplaces">
<p>#_place. #team.TeamName</p>
</div>
}
Teams.Remove(team);
}
if (Teams.Count == 0)
{
_scoreboardCreated = true;
}
} while (_scoreboardCreated == false);
</div>
}
else if (_deleted is true)
{
<h1>Session expired</h1>
}
else
{
<h1>Loading...</h1>
}
And here the CSS-file (I use a div with a background-image because the img htmltag just doesn't seem to load the image).
.scoreboard {
display:flex;
flex-direction: column;
text-align: center;
align-items: center;
}
.top_three {
display: flex;
flex-direction: row;
justify-content: center;
align-content: center;
}
.firstplace {
padding: 8vh 5vw 5vh 5vw;
}
.firstplaceimg {
background-image: url("/images/Firstplace.png");
height: 340px;
width: 315px;
}
.secondplace {
padding: 15vh 5vw 5vh 5vw;
}
.secondplaceimg {
background-image: url("/images/Secondplace.png");
height: 270px;
width: 250px;
}
.thirdplace {
padding: 28vh 5vw 8vh 5vw;
}
.thirdplaceimg {
background-image: url("/images/Thirdplace.png");
height: 170px;
width: 155px;
}
.restplaces {
display:flex;
margin: 0vh 0vw 5vh 3vw;
background-color: #bd8379;
width: 10vw;
border-radius: 20px;
box-shadow: 0 0 5px 2px rgba(0,0,0, .30);
}
/*CONFETTI*/
.confetti_container {
min-height: 70vh;
overflow: hidden;
padding: 60px;
position: absolute;
width: 95%;
}
.confetti {
background: rgb(166,124,0);
background: linear-gradient(0deg, rgba(166,124,0,1) 0%, rgba(191,155,48,1) 10%,
rgba(255,191,0,1) 20%, rgba(255,207,64,1) 30%, rgba(255,220,115,1) 40%,
rgba(255,216,99,1)
50%, rgba(255,220,115,1) 60%, rgba(255,207,64,1) 70%, rgba(255,191,0,1) 80%,
rgba(191,155,48,1) 90%, rgba(166,124,0,1) 100%);
border: 1px solid #A57C01;
position: absolute;
display: flex;
width: 10px;
height: 25px;
top: -100px;
}
.confetti:nth-child(1) {
animation: fall 2.5s linear infinite;
left: 10%;
}
It feels like I'm just missing a tiny detail
Thanks for the help!


You can try to use display: inline-block; to make the divs in one row,change the css of scoreboard and top_three like this:
.scoreboard {
flex-direction: column;
text-align: center;
align-items: center;
}
.top_three {
display: inline-block;
flex-direction: row;
justify-content: center;
align-content: center;
}
result:

Related

How to pass a controller's Id to SignalR

I am trying to create a real-time chat with a database. Without SignalR it works as it's supposed to. However, I want to add real-time functionality. The application queries the database for the MessageId, and then it lists all the messages with the MessageId. I passed the MessageId as a parameter into the url. and use that to look through the database, e.g. sever:messages/open/{MessageId}. But signalR is not getting to the controller's Id. if I just have _FC.UserMessage.ToList(); without any parameters, it works fine. I just need to know how can i use it with the controller's parameter.
Update: I just did more test and when i take away the variables in the site.js file, i.e. ${v.Date}, ${v.Message} the messages appear. However, only three appear from one account appear. So this is a real head-scratcher. It seems like the way I'm naming the variables is wrong since it throws me an Uncaught TypeError: Cannot read properties of null (reading 'Date') error. And now the problem with only displaying three messages. Now I'm thinking it has nothing to do with the controller parameters, but the naming of the variables. I thought I could name it v.UM.Date since public IEnumerable<UserMessageModel> UM {get; set;} is the name of the variable I have in the UserMessagesObj.cs view model. But that's throwing me the same error.
MessagesController:
using Flubr.Areas.Identity.Data;
using Flubr.Models;
using Microsoft.AspNetCore.Identity;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.SignalR;
using Microsoft.EntityFrameworkCore;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Flubr.Controllers
{
public class MessagesController : Controller
{
private readonly FlubrContext _FC;
private readonly UserManager<ApplicationUser> _UM;
private readonly IHubContext<SignalHub> _signal;
public MessagesController(FlubrContext FC, UserManager<ApplicationUser> UM, IHubContext<SignalHub> signal)
{
_FC = FC;
_UM = UM;
_signal = signal;
}
[HttpGet]
public IActionResult GetOpen(string id, UserMessagesObj umo)
{
var message = _FC.UserMessage.Include("applicationUser").Where(o => o.MessageId == id).Where(o => o.Message != "").ToList();
umo.UM = message;
return View(umo);
}
public IActionResult Open(string id, UserMessagesObj umo)
{
var message = _FC.UserMessage.Include("applicationUser").Where(o => o.MessageId == id).Where(o => o.Message != "").ToList();
umo.UM = message;
return View(umo);
}
[HttpPost]
public async Task<IActionResult> Open(string id, UserMessagesModel um, UserMessagesObj umo)
{
var message = _FC.UserMessage.Include("applicationUser").Where(o => o.MessageId == id).Where(o => o.Message != "").ToList();
Guid g = Guid.NewGuid();
umo.UM = message;
umo.UM2.UserMessageId = g;
umo.UM2.Id = _UM.GetUserAsync(User).Result.Id;
umo.UM2.MessageId = id;
umo.UM2.Date = DateTime.Now;
_FC.UserMessage.Add(umo.UM2);
await _FC.SaveChangesAsync();
await _signal.Clients.All.SendAsync("LoadData");
return View(umo);
}
}
}
Open.cshtml
#model UserMessagesObj
#using Microsoft.AspNetCore.Identity
#using Flubr.Areas.Identity.Data
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="sidebar.css">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #abd9e9;
font-family: Arial;
}
#container {
width: 750px;
height: 800px;
background: #eff3f7;
margin: 0 auto;
font-size: 0;
border-radius: 5px;
overflow: hidden;
}
aside {
width: 260px;
height: 800px;
background-color: #3b3e49;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
main {
width: 490px;
height: 800px;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
aside header {
padding: 30px 20px;
}
aside input {
width: 100%;
height: 50px;
line-height: 50px;
padding: 0 50px 0 20px;
background-color: #5e616a;
border: none;
border-radius: 3px;
color: #fff;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_search.png);
background-repeat: no-repeat;
background-position: 170px;
background-size: 40px;
}
aside input::placeholder {
color: #fff;
}
aside ul {
padding-left: 0;
margin: 0;
list-style-type: none;
overflow-y: scroll;
height: 690px;
}
aside li {
padding: 10px 0;
}
aside li:hover {
background-color: #5e616a;
}
h2,
h3 {
margin: 0;
}
aside li img {
border-radius: 50%;
margin-left: 20px;
margin-right: 8px;
}
aside li div {
display: inline-block;
vertical-align: top;
margin-top: 12px;
}
aside li h2 {
font-size: 14px;
color: #fff;
font-weight: normal;
margin-bottom: 5px;
}
aside li h3 {
font-size: 12px;
color: #7e818a;
font-weight: normal;
}
.status {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 7px;
}
.green {
background-color: #58b666;
}
.orange {
background-color: #ff725d;
}
.blue {
background-color: #6fbced;
margin-right: 0;
margin-left: 7px;
}
main header {
height: 110px;
padding: 30px 20px 30px 40px;
}
main header>* {
display: inline-block;
vertical-align: top;
}
main header img:first-child {
border-radius: 50%;
}
main header img:last-child {
width: 24px;
margin-top: 8px;
}
main header div {
margin-left: 10px;
margin-right: 145px;
}
main header h2 {
font-size: 16px;
margin-bottom: 5px;
}
main header h3 {
font-size: 14px;
font-weight: normal;
color: #7e818a;
}
#chat {
padding-left: 0;
margin: 0;
list-style-type: none;
overflow-y: scroll;
height: 535px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#chat li {
padding: 10px 30px;
}
#chat h2,
#chat h3 {
display: inline-block;
font-size: 13px;
font-weight: normal;
}
#chat h3 {
color: #bbb;
}
#chat .entete {
margin-bottom: 5px;
}
#chat .message {
padding: 20px;
color: #fff;
line-height: 25px;
max-width: 90%;
display: inline-block;
text-align: left;
border-radius: 5px;
}
#chat .me {
text-align: right;
}
#chat .you .message {
background-color: #58b666;
}
#chat .me .message {
background-color: #6fbced;
}
#chat .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
}
#chat .you .triangle {
border-color: transparent transparent #58b666 transparent;
margin-left: 15px;
}
#chat .me .triangle {
border-color: transparent transparent #6fbced transparent;
margin-left: 375px;
}
main footer {
height: 155px;
padding: 20px 30px 10px 20px;
}
main footer textarea {
resize: none;
border: none;
display: block;
width: 100%;
height: 80px;
border-radius: 3px;
padding: 20px;
font-size: 13px;
margin-bottom: 13px;
}
main footer textarea::placeholder {
color: #ddd;
}
main footer img {
height: 30px;
cursor: pointer;
}
main footer a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #6fbced;
vertical-align: top;
margin-left: 333px;
margin-top: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<aside>
<header>
</header>
<ul>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
<div>
<h2>Prénom Nom</h2>
<h3>
<span class="status orange"></span>
offline
</h3>
</div>
</li>
</ul>
</aside>
<main>
<header>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
<div>
<h2>Chat with </h2>
<h3>already 1902 messages</h3>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
</header>
<ul id="chat"> </ul>
<footer>
<form method ="post" asp-controller="Messages" asp-action="Open" >
<textarea asp-for="#Model.UM2.Message" placeholder="Type your message"></textarea>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
<button type="submit" class="btn" style="float: right;">Send</button>
</form>
</footer>
</main>
</div>
</body>
</html>
site.js
#model UserMessagesObj
#using Microsoft.AspNetCore.Identity
#using Flubr.Areas.Identity.Data
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="sidebar.css">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #abd9e9;
font-family: Arial;
}
#container {
width: 750px;
height: 800px;
background: #eff3f7;
margin: 0 auto;
font-size: 0;
border-radius: 5px;
overflow: hidden;
}
aside {
width: 260px;
height: 800px;
background-color: #3b3e49;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
main {
width: 490px;
height: 800px;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
aside header {
padding: 30px 20px;
}
aside input {
width: 100%;
height: 50px;
line-height: 50px;
padding: 0 50px 0 20px;
background-color: #5e616a;
border: none;
border-radius: 3px;
color: #fff;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_search.png);
background-repeat: no-repeat;
background-position: 170px;
background-size: 40px;
}
aside input::placeholder {
color: #fff;
}
aside ul {
padding-left: 0;
margin: 0;
list-style-type: none;
overflow-y: scroll;
height: 690px;
}
aside li {
padding: 10px 0;
}
aside li:hover {
background-color: #5e616a;
}
h2,
h3 {
margin: 0;
}
aside li img {
border-radius: 50%;
margin-left: 20px;
margin-right: 8px;
}
aside li div {
display: inline-block;
vertical-align: top;
margin-top: 12px;
}
aside li h2 {
font-size: 14px;
color: #fff;
font-weight: normal;
margin-bottom: 5px;
}
aside li h3 {
font-size: 12px;
color: #7e818a;
font-weight: normal;
}
.status {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 7px;
}
.green {
background-color: #58b666;
}
.orange {
background-color: #ff725d;
}
.blue {
background-color: #6fbced;
margin-right: 0;
margin-left: 7px;
}
main header {
height: 110px;
padding: 30px 20px 30px 40px;
}
main header>* {
display: inline-block;
vertical-align: top;
}
main header img:first-child {
border-radius: 50%;
}
main header img:last-child {
width: 24px;
margin-top: 8px;
}
main header div {
margin-left: 10px;
margin-right: 145px;
}
main header h2 {
font-size: 16px;
margin-bottom: 5px;
}
main header h3 {
font-size: 14px;
font-weight: normal;
color: #7e818a;
}
#chat {
padding-left: 0;
margin: 0;
list-style-type: none;
overflow-y: scroll;
height: 535px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#chat li {
padding: 10px 30px;
}
#chat h2,
#chat h3 {
display: inline-block;
font-size: 13px;
font-weight: normal;
}
#chat h3 {
color: #bbb;
}
#chat .entete {
margin-bottom: 5px;
}
#chat .message {
padding: 20px;
color: #fff;
line-height: 25px;
max-width: 90%;
display: inline-block;
text-align: left;
border-radius: 5px;
}
#chat .me {
text-align: right;
}
#chat .you .message {
background-color: #58b666;
}
#chat .me .message {
background-color: #6fbced;
}
#chat .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
}
#chat .you .triangle {
border-color: transparent transparent #58b666 transparent;
margin-left: 15px;
}
#chat .me .triangle {
border-color: transparent transparent #6fbced transparent;
margin-left: 375px;
}
main footer {
height: 155px;
padding: 20px 30px 10px 20px;
}
main footer textarea {
resize: none;
border: none;
display: block;
width: 100%;
height: 80px;
border-radius: 3px;
padding: 20px;
font-size: 13px;
margin-bottom: 13px;
}
main footer textarea::placeholder {
color: #ddd;
}
main footer img {
height: 30px;
cursor: pointer;
}
main footer a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #6fbced;
vertical-align: top;
margin-left: 333px;
margin-top: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<aside>
<header>
</header>
<ul>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
<div>
<h2>Prénom Nom</h2>
<h3>
<span class="status orange"></span>
offline
</h3>
</div>
</li>
</ul>
</aside>
<main>
<header>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
<div>
<h2>Chat with </h2>
<h3>already 1902 messages</h3>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
</header>
<ul id="chat"> </ul>
<footer>
<form method ="post" asp-controller="Messages" asp-action="Open" >
<textarea asp-for="#Model.UM2.Message" placeholder="Type your message"></textarea>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
<button type="submit" class="btn" style="float: right;">Send</button>
</form>
</footer>
</main>
</div>
</body>
</html>
SignalHub.cs
#model UserMessagesObj
#using Microsoft.AspNetCore.Identity
#using Flubr.Areas.Identity.Data
#inject SignInManager<ApplicationUser> SignInManager
#inject UserManager<ApplicationUser> UserManager
<!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.0">
<title>Document</title>
<link rel="stylesheet" href="sidebar.css">
<style>
* {
box-sizing: border-box;
}
body {
background-color: #abd9e9;
font-family: Arial;
}
#container {
width: 750px;
height: 800px;
background: #eff3f7;
margin: 0 auto;
font-size: 0;
border-radius: 5px;
overflow: hidden;
}
aside {
width: 260px;
height: 800px;
background-color: #3b3e49;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
main {
width: 490px;
height: 800px;
display: inline-block;
font-size: 15px;
vertical-align: top;
}
aside header {
padding: 30px 20px;
}
aside input {
width: 100%;
height: 50px;
line-height: 50px;
padding: 0 50px 0 20px;
background-color: #5e616a;
border: none;
border-radius: 3px;
color: #fff;
background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_search.png);
background-repeat: no-repeat;
background-position: 170px;
background-size: 40px;
}
aside input::placeholder {
color: #fff;
}
aside ul {
padding-left: 0;
margin: 0;
list-style-type: none;
overflow-y: scroll;
height: 690px;
}
aside li {
padding: 10px 0;
}
aside li:hover {
background-color: #5e616a;
}
h2,
h3 {
margin: 0;
}
aside li img {
border-radius: 50%;
margin-left: 20px;
margin-right: 8px;
}
aside li div {
display: inline-block;
vertical-align: top;
margin-top: 12px;
}
aside li h2 {
font-size: 14px;
color: #fff;
font-weight: normal;
margin-bottom: 5px;
}
aside li h3 {
font-size: 12px;
color: #7e818a;
font-weight: normal;
}
.status {
width: 8px;
height: 8px;
border-radius: 50%;
display: inline-block;
margin-right: 7px;
}
.green {
background-color: #58b666;
}
.orange {
background-color: #ff725d;
}
.blue {
background-color: #6fbced;
margin-right: 0;
margin-left: 7px;
}
main header {
height: 110px;
padding: 30px 20px 30px 40px;
}
main header>* {
display: inline-block;
vertical-align: top;
}
main header img:first-child {
border-radius: 50%;
}
main header img:last-child {
width: 24px;
margin-top: 8px;
}
main header div {
margin-left: 10px;
margin-right: 145px;
}
main header h2 {
font-size: 16px;
margin-bottom: 5px;
}
main header h3 {
font-size: 14px;
font-weight: normal;
color: #7e818a;
}
#chat {
padding-left: 0;
margin: 0;
list-style-type: none;
overflow-y: scroll;
height: 535px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
}
#chat li {
padding: 10px 30px;
}
#chat h2,
#chat h3 {
display: inline-block;
font-size: 13px;
font-weight: normal;
}
#chat h3 {
color: #bbb;
}
#chat .entete {
margin-bottom: 5px;
}
#chat .message {
padding: 20px;
color: #fff;
line-height: 25px;
max-width: 90%;
display: inline-block;
text-align: left;
border-radius: 5px;
}
#chat .me {
text-align: right;
}
#chat .you .message {
background-color: #58b666;
}
#chat .me .message {
background-color: #6fbced;
}
#chat .triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 10px 10px 10px;
}
#chat .you .triangle {
border-color: transparent transparent #58b666 transparent;
margin-left: 15px;
}
#chat .me .triangle {
border-color: transparent transparent #6fbced transparent;
margin-left: 375px;
}
main footer {
height: 155px;
padding: 20px 30px 10px 20px;
}
main footer textarea {
resize: none;
border: none;
display: block;
width: 100%;
height: 80px;
border-radius: 3px;
padding: 20px;
font-size: 13px;
margin-bottom: 13px;
}
main footer textarea::placeholder {
color: #ddd;
}
main footer img {
height: 30px;
cursor: pointer;
}
main footer a {
text-decoration: none;
text-transform: uppercase;
font-weight: bold;
color: #6fbced;
vertical-align: top;
margin-left: 333px;
margin-top: 5px;
display: inline-block;
}
</style>
</head>
<body>
<div id="container">
<aside>
<header>
</header>
<ul>
<li>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
<div>
<h2>Prénom Nom</h2>
<h3>
<span class="status orange"></span>
offline
</h3>
</div>
</li>
</ul>
</aside>
<main>
<header>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/chat_avatar_01.jpg" alt="">
<div>
<h2>Chat with </h2>
<h3>already 1902 messages</h3>
</div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_star.png" alt="">
</header>
<ul id="chat"> </ul>
<footer>
<form method ="post" asp-controller="Messages" asp-action="Open" >
<textarea asp-for="#Model.UM2.Message" placeholder="Type your message"></textarea>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_picture.png" alt="">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/1940306/ico_file.png" alt="">
<button type="submit" class="btn" style="float: right;">Send</button>
</form>
</footer>
</main>
</div>
</body>
</html>
StartUp.cs
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.HttpsPolicy;
using Microsoft.Extensions.Configuration;
using Microsoft.Extensions.DependencyInjection;
using Microsoft.Extensions.Hosting;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Flubr
{
public class Startup
{
public Startup(IConfiguration configuration)
{
Configuration = configuration;
}
public IConfiguration Configuration { get; }
// This method gets called by the runtime. Use this method to add services to the container.
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddSignalR();
services.AddControllers().AddJsonOptions(o => {
o.JsonSerializerOptions.PropertyNamingPolicy = null;
});
services.AddRazorPages();
}
// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
else
{
app.UseExceptionHandler("/Home/Error");
// The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
app.UseHsts();
}
app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseAuthentication();
app.UseAuthorization();
app.UseEndpoints(endpoints =>
{
endpoints.MapControllerRoute(
name: "default",
pattern: "{controller=Home}/{action=Index}/{id?}");
endpoints.MapRazorPages();
endpoints.MapHub<SignalHub>("/SignalHub");
});
}
}
}
UserMessagesObj.cs:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
namespace Flubr.Models
{
public class UserMessagesObj
{
public IEnumerable<UserMessagesModel> UM { get; set; }
public UserMessagesModel UM2 { get; set; }
public MessagesModel MM { get; set; }
}
}

Bot Framework Greeting message with v4 Webchat Channel

I am trying to send a greeting message at the moment the web is loaded and the chatbot is initialized.
It works with the emulator but it doesn't seem to work that straight forward with on the webchat channel.
I have researched and found a couple of useful links but I am missing something...
[BotFramework]: How to fix:Welcome message is not getting displayed to the user in C# WebChatBot developed in V4 but displayed in Emulator?
Display Welcome Message in v4 Bot Framework Bot (C# + .Net Core Web Application)
https://github.com/microsoft/BotFramework-WebChat/issues/1397
So far this is my code:
default.htm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Core Bot Sample</title>
<style>
body {
margin: 0px;
padding: 0px;
font-family: Segoe UI;
}
html,
body {
height: 100%;
}
header {
background-image: url("data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 4638.9 651.6' style='enable-background:new 0 0 4638.9 651.6;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%2355A0E0;%7D .st1%7Bfill:none;%7D .st2%7Bfill:%230058A8;%7D .st3%7Bfill:%23328BD8;%7D .st4%7Bfill:%23B6DCF1;%7D .st5%7Bopacity:0.2;fill:url(%23SVGID_1_);enable-background:new ;%7D%0A%3C/style%3E%3Crect y='1.1' class='st0' width='4640' height='646.3'/%3E%3Cpath class='st1' d='M3987.8,323.6L4310.3,1.1h-65.6l-460.1,460.1c-17.5,17.5-46.1,17.5-63.6,0L3260.9,1.1H0v646.3h3660.3 L3889,418.7c17.5-17.5,46.1-17.5,63.6,0l228.7,228.7h66.6l-260.2-260.2C3970.3,369.8,3970.3,341.1,3987.8,323.6z'/%3E%3Cpath class='st2' d='M3784.6,461.2L4244.7,1.1h-983.9l460.1,460.1C3738.4,478.7,3767.1,478.7,3784.6,461.2z'/%3E%3Cpath class='st3' d='M4640,1.1h-329.8l-322.5,322.5c-17.5,17.5-17.5,46.1,0,63.6l260.2,260.2H4640L4640,1.1L4640,1.1z'/%3E%3Cpath class='st4' d='M3889,418.8l-228.7,228.7h521.1l-228.7-228.7C3935.2,401.3,3906.5,401.3,3889,418.8z'/%3E%3ClinearGradient id='SVGID_1_' gradientUnits='userSpaceOnUse' x1='3713.7576' y1='438.1175' x2='3911.4084' y2='14.2535' gradientTransform='matrix(1 0 0 -1 0 641.3969)'%3E%3Cstop offset='0' style='stop-color:%23FFFFFF;stop-opacity:0.5'/%3E%3Cstop offset='1' style='stop-color:%23FFFFFF'/%3E%3C/linearGradient%3E%3Cpath class='st5' d='M3952.7,124.5c-17.5-17.5-46.1-17.5-63.6,0l-523,523h1109.6L3952.7,124.5z'/%3E%3C/svg%3E%0A");
background-repeat: no-repeat;
background-size: 100%;
background-position: right;
background-color: #55A0E0;
width: 100%;
font-size: 44px;
height: 120px;
color: white;
padding: 30px 0 40px 0px;
display: inline-block;
}
.header-icon {
background-image: url("data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20150.2%20125%22%20style%3D%22enable-background%3Anew%200%200%20150.2%20125%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Anone%3B%7D%0A%09.st1%7Bfill%3A%23FFFFFF%3B%7D%0A%3C/style%3E%0A%3Crect%20x%3D%220.5%22%20class%3D%22st0%22%20width%3D%22149.7%22%20height%3D%22125%22/%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M59%2C102.9L21.8%2C66c-3.5-3.5-3.5-9.1%2C0-12.5l37-36.5l2.9%2C3l-37%2C36.4c-1.8%2C1.8-1.8%2C4.7%2C0%2C6.6l37.2%2C37L59%2C102.9z%22%0A%09%09/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M92.5%2C102.9l-3-3l37.2-37c0.9-0.9%2C1.4-2%2C1.4-3.3c0-1.2-0.5-2.4-1.4-3.3L89.5%2C20l2.9-3l37.2%2C36.4%0A%09%09c1.7%2C1.7%2C2.6%2C3.9%2C2.6%2C6.3s-0.9%2C4.6-2.6%2C6.3L92.5%2C102.9z%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M90.1%2C68.4c-4.5%2C0-8-3.5-8-8.1c0-4.5%2C3.5-8.1%2C8-8.1c4.4%2C0%2C8%2C3.7%2C8%2C8.1C98.1%2C64.7%2C94.4%2C68.4%2C90.1%2C68.4z%0A%09%09%20M90.1%2C56.5c-2.2%2C0-3.8%2C1.7-3.8%2C3.9c0%2C2.2%2C1.7%2C3.9%2C3.8%2C3.9c1.9%2C0%2C3.8-1.6%2C3.8-3.9S91.9%2C56.5%2C90.1%2C56.5z%22/%3E%0A%3C/g%3E%0A%3Cg%3E%0A%09%3Cpath%20class%3D%22st1%22%20d%3D%22M61.4%2C68.4c-4.5%2C0-8-3.5-8-8.1c0-4.5%2C3.5-8.1%2C8-8.1c4.4%2C0%2C8%2C3.7%2C8%2C8.1C69.5%2C64.7%2C65.8%2C68.4%2C61.4%2C68.4z%0A%09%09%20M61.4%2C56.5c-2.2%2C0-3.8%2C1.7-3.8%2C3.9c0%2C2.2%2C1.7%2C3.9%2C3.8%2C3.9c1.9%2C0%2C3.8-1.6%2C3.8-3.9S63.3%2C56.5%2C61.4%2C56.5z%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A");
background-repeat: no-repeat;
float: left;
height: 140px;
width: 140px;
display: inline-block;
vertical-align: middle;
}
.header-text {
padding-left: 1%;
color: #FFFFFF;
font-family: "Segoe UI";
font-size: 72px;
font-weight: 300;
letter-spacing: 0.35px;
line-height: 96px;
display: inline-block;
vertical-align: middle;
}
.header-inner-container {
min-width: 480px;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
vertical-align: middle;
}
.header-inner-container::after {
content: "";
clear: both;
display: table;
}
.main-content-area {
padding-left: 30px;
}
.content-title {
color: #000000;
font-family: "Segoe UI";
font-size: 46px;
font-weight: 300;
line-height: 62px;
}
.main-text {
color: #808080;
font-size: 24px;
font-family: "Segoe UI";
font-size: 24px;
font-weight: 200;
line-height: 32px;
}
.main-text-p1 {
padding-top: 48px;
padding-bottom: 28px;
}
.endpoint {
height: 32px;
width: 571px;
color: #808080;
font-family: "Segoe UI";
font-size: 24px;
font-weight: 200;
line-height: 32px;
padding-top: 28px;
}
.how-to-build-section {
padding-top: 20px;
padding-left: 30px;
}
.how-to-build-section > h3 {
font-size: 16px;
font-weight: 600;
letter-spacing: 0.35px;
line-height: 22px;
margin: 0 0 24px 0;
text-transform: uppercase;
}
.step-container {
display: flex;
align-items: stretch;
position: relative;
}
.step-container dl {
border-left: 1px solid #A0A0A0;
display: block;
padding: 0 24px;
margin: 0;
}
.step-container dl > dt::before {
background-color: white;
border: 1px solid #A0A0A0;
border-radius: 100%;
content: '';
left: 47px;
height: 11px;
position: absolute;
width: 11px;
}
.step-container dl > .test-bullet::before {
background-color: blue;
}
.step-container dl > dt {
display: block;
font-size: inherit;
font-weight: bold;
line-height: 20px;
}
.step-container dl > dd {
font-size: inherit;
line-height: 20px;
margin-left: 0;
padding-bottom: 32px;
}
.step-container:last-child dl {
border-left: 1px solid transparent;
}
.ctaLink {
background-color: transparent;
border: 1px solid transparent;
color: #006AB1;
cursor: pointer;
font-weight: 600;
padding: 0;
white-space: normal;
}
.ctaLink:focus {
outline: 1px solid #00bcf2;
}
.ctaLink:hover {
text-decoration: underline;
}
.step-icon {
display: flex;
height: 38px;
margin-right: 15px;
width: 38px;
}
.step-icon > div {
height: 30px;
width: 30px;
background-repeat: no-repeat;
}
.ms-logo-container {
min-width: 580px;
max-width: 980px;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
transition: bottom 400ms;
}
.ms-logo {
float: right;
background-image: url("data:image/svg+xml;utf8,%0A%3Csvg%20version%3D%221.1%22%20id%3D%22MS-symbol%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20400%20120%22%20style%3D%22enable-background%3Anew%200%200%20400%20120%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cstyle%20type%3D%22text/css%22%3E%0A%09.st0%7Bfill%3Anone%3B%7D%0A%09.st1%7Bfill%3A%23737474%3B%7D%0A%09.st2%7Bfill%3A%23D63F26%3B%7D%0A%09.st3%7Bfill%3A%23167D3E%3B%7D%0A%09.st4%7Bfill%3A%232E76BC%3B%7D%0A%09.st5%7Bfill%3A%23FDB813%3B%7D%0A%3C/style%3E%0A%3Crect%20x%3D%220.6%22%20class%3D%22st0%22%20width%3D%22398.7%22%20height%3D%22119%22/%3E%0A%3Cpath%20class%3D%22st1%22%20d%3D%22M171.3%2C38.4v43.2h-7.5V47.7h-0.1l-13.4%2C33.9h-5l-13.7-33.9h-0.1v33.9h-6.9V38.4h10.8l12.4%2C32h0.2l13.1-32H171.3%0A%09z%20M177.6%2C41.7c0-1.2%2C0.4-2.2%2C1.3-3c0.9-0.8%2C1.9-1.2%2C3.1-1.2c1.3%2C0%2C2.4%2C0.4%2C3.2%2C1.3c0.8%2C0.8%2C1.3%2C1.8%2C1.3%2C3c0%2C1.2-0.4%2C2.2-1.3%2C3%0A%09c-0.9%2C0.8-1.9%2C1.2-3.2%2C1.2s-2.3-0.4-3.1-1.2C178%2C43.8%2C177.6%2C42.8%2C177.6%2C41.7z%20M185.7%2C50.6v31h-7.3v-31H185.7z%20M207.8%2C76.3%0A%09c1.1%2C0%2C2.3-0.3%2C3.6-0.8c1.3-0.5%2C2.5-1.2%2C3.6-2v6.8c-1.2%2C0.7-2.5%2C1.2-4%2C1.5c-1.5%2C0.3-3.1%2C0.5-4.9%2C0.5c-4.6%2C0-8.3-1.4-11.1-4.3%0A%09c-2.9-2.9-4.3-6.6-4.3-11c0-5%2C1.5-9.1%2C4.4-12.3c2.9-3.2%2C7-4.8%2C12.4-4.8c1.4%2C0%2C2.7%2C0.2%2C4.1%2C0.5c1.4%2C0.4%2C2.5%2C0.8%2C3.3%2C1.2v7%0A%09c-1.1-0.8-2.3-1.5-3.4-1.9c-1.2-0.5-2.4-0.7-3.6-0.7c-2.9%2C0-5.2%2C0.9-7%2C2.8c-1.8%2C1.9-2.7%2C4.4-2.7%2C7.6c0%2C3.1%2C0.8%2C5.6%2C2.5%2C7.3%0A%09C202.6%2C75.4%2C204.9%2C76.3%2C207.8%2C76.3z%20M235.7%2C50.1c0.6%2C0%2C1.1%2C0%2C1.6%2C0.1s0.9%2C0.2%2C1.2%2C0.3v7.4c-0.4-0.3-0.9-0.5-1.7-0.8%0A%09c-0.7-0.3-1.6-0.4-2.7-0.4c-1.8%2C0-3.3%2C0.8-4.5%2C2.3c-1.2%2C1.5-1.9%2C3.8-1.9%2C7v15.6h-7.3v-31h7.3v4.9h0.1c0.7-1.7%2C1.7-3%2C3-4%0A%09C232.2%2C50.6%2C233.8%2C50.1%2C235.7%2C50.1z%20M238.9%2C66.6c0-5.1%2C1.4-9.2%2C4.3-12.2c2.9-3%2C6.9-4.5%2C12.1-4.5c4.8%2C0%2C8.6%2C1.4%2C11.3%2C4.3%0A%09c2.7%2C2.9%2C4.1%2C6.8%2C4.1%2C11.7c0%2C5-1.4%2C9-4.3%2C12c-2.9%2C3-6.8%2C4.5-11.8%2C4.5c-4.8%2C0-8.6-1.4-11.4-4.2C240.3%2C75.3%2C238.9%2C71.4%2C238.9%2C66.6z%0A%09%20M246.5%2C66.3c0%2C3.2%2C0.7%2C5.7%2C2.2%2C7.4c1.5%2C1.7%2C3.6%2C2.6%2C6.3%2C2.6c2.7%2C0%2C4.7-0.9%2C6.1-2.6c1.4-1.7%2C2.1-4.2%2C2.1-7.6c0-3.3-0.7-5.8-2.2-7.5%0A%09c-1.4-1.7-3.4-2.5-6-2.5c-2.7%2C0-4.7%2C0.9-6.2%2C2.7C247.2%2C60.5%2C246.5%2C63%2C246.5%2C66.3z%20M281.5%2C58.8c0%2C1%2C0.3%2C1.9%2C1%2C2.5%0A%09c0.7%2C0.6%2C2.1%2C1.3%2C4.4%2C2.2c2.9%2C1.2%2C5%2C2.5%2C6.1%2C3.9c1.2%2C1.5%2C1.8%2C3.2%2C1.8%2C5.3c0%2C2.9-1.1%2C5.3-3.4%2C7c-2.2%2C1.8-5.3%2C2.7-9.1%2C2.7%0A%09c-1.3%2C0-2.7-0.2-4.3-0.5c-1.6-0.3-2.9-0.7-4-1.2v-7.2c1.3%2C0.9%2C2.8%2C1.7%2C4.3%2C2.2c1.5%2C0.5%2C2.9%2C0.8%2C4.2%2C0.8c1.6%2C0%2C2.9-0.2%2C3.6-0.7%0A%09c0.8-0.5%2C1.2-1.2%2C1.2-2.3c0-1-0.4-1.9-1.2-2.5c-0.8-0.7-2.4-1.5-4.6-2.4c-2.7-1.1-4.6-2.4-5.7-3.8c-1.1-1.4-1.7-3.2-1.7-5.4%0A%09c0-2.8%2C1.1-5.1%2C3.3-6.9c2.2-1.8%2C5.1-2.7%2C8.6-2.7c1.1%2C0%2C2.3%2C0.1%2C3.6%2C0.4c1.3%2C0.2%2C2.5%2C0.6%2C3.4%2C0.9v6.9c-1-0.6-2.1-1.2-3.4-1.7%0A%09c-1.3-0.5-2.6-0.7-3.8-0.7c-1.4%2C0-2.5%2C0.3-3.2%2C0.8C281.9%2C57.1%2C281.5%2C57.8%2C281.5%2C58.8z%20M297.9%2C66.6c0-5.1%2C1.4-9.2%2C4.3-12.2%0A%09c2.9-3%2C6.9-4.5%2C12.1-4.5c4.8%2C0%2C8.6%2C1.4%2C11.3%2C4.3c2.7%2C2.9%2C4.1%2C6.8%2C4.1%2C11.7c0%2C5-1.4%2C9-4.3%2C12c-2.9%2C3-6.8%2C4.5-11.8%2C4.5%0A%09c-4.8%2C0-8.6-1.4-11.4-4.2C299.4%2C75.3%2C297.9%2C71.4%2C297.9%2C66.6z%20M305.5%2C66.3c0%2C3.2%2C0.7%2C5.7%2C2.2%2C7.4c1.5%2C1.7%2C3.6%2C2.6%2C6.3%2C2.6%0A%09c2.7%2C0%2C4.7-0.9%2C6.1-2.6c1.4-1.7%2C2.1-4.2%2C2.1-7.6c0-3.3-0.7-5.8-2.2-7.5c-1.4-1.7-3.4-2.5-6-2.5c-2.7%2C0-4.7%2C0.9-6.2%2C2.7%0A%09C306.3%2C60.5%2C305.5%2C63%2C305.5%2C66.3z%20M353.9%2C56.6h-10.9v25h-7.4v-25h-5.2v-6h5.2v-4.3c0-3.3%2C1.1-5.9%2C3.2-8c2.1-2.1%2C4.8-3.1%2C8.1-3.1%0A%09c0.9%2C0%2C1.7%2C0%2C2.4%2C0.1c0.7%2C0.1%2C1.3%2C0.2%2C1.8%2C0.4V42c-0.2-0.1-0.7-0.3-1.3-0.5c-0.6-0.2-1.3-0.3-2.1-0.3c-1.5%2C0-2.7%2C0.5-3.5%2C1.4%0A%09s-1.2%2C2.4-1.2%2C4.2v3.7h10.9v-7l7.3-2.2v9.2h7.4v6h-7.4v14.5c0%2C1.9%2C0.3%2C3.3%2C1%2C4c0.7%2C0.8%2C1.8%2C1.2%2C3.3%2C1.2c0.4%2C0%2C0.9-0.1%2C1.5-0.3%0A%09c0.6-0.2%2C1.1-0.4%2C1.6-0.7v6c-0.5%2C0.3-1.2%2C0.5-2.3%2C0.7c-1.1%2C0.2-2.1%2C0.3-3.2%2C0.3c-3.1%2C0-5.4-0.8-6.9-2.5c-1.5-1.6-2.3-4.1-2.3-7.4%0A%09V56.6z%22/%3E%0A%3Cg%3E%0A%09%3Crect%20x%3D%2231%22%20y%3D%2224%22%20class%3D%22st2%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%09%3Crect%20x%3D%2268.8%22%20y%3D%2224%22%20class%3D%22st3%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%09%3Crect%20x%3D%2231%22%20y%3D%2261.8%22%20class%3D%22st4%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%09%3Crect%20x%3D%2268.8%22%20y%3D%2261.8%22%20class%3D%22st5%22%20width%3D%2234.2%22%20height%3D%2234.2%22/%3E%0A%3C/g%3E%0A%3C/svg%3E%0A");
}
.ms-logo-container > div {
min-height: 60px;
width: 150px;
background-repeat: no-repeat;
}
.row {
padding: 90px 0px 0 20px;
min-width: 480px;
max-width: 1366px;
margin-left: auto;
margin-right: auto;
}
.column {
float: left;
width: 45%;
padding-right: 20px;
}
.row:after {
content: "";
display: table;
clear: both;
}
a {
text-decoration: none;
}
.download-the-emulator {
height: 20px;
color: #0063B1;
font-size: 15px;
line-height: 20px;
padding-bottom: 70px;
}
.how-to-iframe {
max-width: 700px !important;
min-width: 650px !important;
height: 700px !important;
}
.remove-frame-height {
height: 10px;
}
#media only screen and (max-width: 1300px) {
.ms-logo {
padding-top: 30px;
}
.header-text {
font-size: 40x;
}
.column {
float: none;
padding-top: 30px;
width: 100%;
}
.ms-logo-container {
padding-top: 30px;
min-width: 480px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
.row {
padding: 20px 0px 0 20px;
min-width: 480px;
max-width: 650px;
margin-left: auto;
margin-right: auto;
}
}
#media only screen and (max-width: 1370px) {
header {
background-color: #55A0E0;
background-size: auto 200px;
}
}
#media only screen and (max-width: 1230px) {
header {
background-color: #55A0E0;
background-size: auto 200px;
}
.header-text {
font-size: 44px;
}
.header-icon {
height: 120px;
width: 120px;
}
}
#media only screen and (max-width: 1000px) {
header {
background-color: #55A0E0;
background-image: none;
}
}
#media only screen and (max-width: 632px) {
.header-text {
font-size: 32px;
}
.row {
padding: 10px 0px 0 10px;
max-width: 490px !important;
min-width: 410px !important;
}
.endpoint {
font-size: 25px;
}
.main-text {
font-size: 20px;
}
.step-container dl > dd {
font-size: 14px;
}
.column {
padding-right: 5px;
}
.header-icon {
height: 110px;
width: 110px;
}
.how-to-iframe {
max-width: 480px !important;
min-width: 400px !important;
height: 650px !important;
overflow: hidden;
}
}
.remove-frame-height {
max-height: 10px;
}
</style>
</head>
<body>
<header class="header">
<div class="header-inner-container">
<div class="header-icon" style="display: inline-block"></div>
<div class="header-text" style="display: inline-block">Core Bot Sample</div>
</div>
</header>
<div class="row">
<div class="column" class="main-content-area">
<div class="content-title">Your bot is ready!</div>
<div class="main-text main-text-p1">
You can test your bot in the Bot Framework Emulator<br />
by connecting to http://localhost:3978/api/messages.
</div>
<div class="main-text download-the-emulator">
<a class="ctaLink" href="https://aka.ms/bot-framework-F5-download-emulator"
target="_blank">Download the Emulator</a>
</div>
<div class="main-text">
Visit <a class="ctaLink" href="https://aka.ms/bot-framework-F5-abs-home" target="_blank">
Azure
Bot Service
</a> to register your bot and add it to<br />
various channels. The bot's endpoint URL typically looks
like this:
</div>
<div class="endpoint">https://<i>your_bots_hostname</i>/api/messages</div>
</div>
<div class="column how-to-iframe" id="how-to-iframe">
</div>
</div>
<div class="ms-logo-container">
<div class="ms-logo"></div>
</div>
<div id="botDiv" style="height:38px; position:fixed; bottom:0; z-index:1000; background:#fff">
<div id="botTitleBar" style="height:38px; width:400px; position:fixed; cursor:pointer; background:blue; color:#fff; font-weight:bold;" onclick="toggleChatbot()">
ChatBot
</div>
<iframe id="botFrame" style="height:600px; width:400px" src="https://webchat.botframework.com/embed/TestBotBasicCSharp?s=[KEY]">
</iframe>
</div>
<!--<script src="https://cdn.botframework.com/botframework-webchat/latest/botchat.js"></script>-->
<script>
var toggleChatbot = function () {
var botDiv = document.querySelector('#botDiv');
botDiv.style.height = botDiv.style.height == '600px' ? '38px' : '600px';
};
//var user = {
// id: 'user-id',
// name: 'user name'
//};
//var botConnection = new BotChat.DirectLine({
// token: '[KEY]',
// user: user
//});
//botConnection
// .postActivity({
// from: user,
// name: 'requestWelcomeDialog',
// type: 'event',
// value: ''
// })
// .subscribe(function (id) {
// console.log('"trigger requestWelcomeDialog" sent');
// });
document.addEventListener('DOMContentLoaded', function () {
});
</script>
</body>
</html>
</script>
DialogBot.cs
public class DialogBot<T> : ActivityHandler
where T : Dialog
{
protected readonly Dialog Dialog;
protected readonly BotState ConversationState;
protected readonly BotState UserState;
protected readonly ILogger Logger;
public DialogBot(ConversationState conversationState, UserState userState, T dialog, ILogger<DialogBot<T>> logger)
{
ConversationState = conversationState;
UserState = userState;
Dialog = dialog;
Logger = logger;
}
public override async Task OnTurnAsync(ITurnContext turnContext, CancellationToken cancellationToken = default(CancellationToken))
{
await base.OnTurnAsync(turnContext, cancellationToken);
// Save any state changes that might have occured during the turn.
await ConversationState.SaveChangesAsync(turnContext, false, cancellationToken);
await UserState.SaveChangesAsync(turnContext, false, cancellationToken);
}
protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
{
Logger.LogInformation("Running dialog with Message Activity.");
// Run the Dialog with the new message Activity.
var welcomeUserStateAccessor = UserState.CreateProperty<WelcomeUserState>(nameof(WelcomeUserState));
var didBotWelcomeUser = await welcomeUserStateAccessor.GetAsync(turnContext, () => new WelcomeUserState());
if (didBotWelcomeUser.DidBotWelcomeUser == false)
{
didBotWelcomeUser.DidBotWelcomeUser = true;
// the channel should sends the user name in the 'From' object
var userName = turnContext.Activity.From.Name;
await turnContext.SendActivityAsync($"You are seeing this message because this was your first message ever to this bot.", cancellationToken: cancellationToken);
await turnContext.SendActivityAsync($"It is a good practice to welcome the user and provide personal greeting. For example, welcome {userName}.", cancellationToken: cancellationToken);
}
else
{
await Dialog.RunAsync(turnContext, ConversationState.CreateProperty<DialogState>("DialogState"), cancellationToken);
}
// Save any state changes.
await UserState.SaveChangesAsync(turnContext);
}
}
DialogAndWelcomeBot.cs
public class DialogAndWelcomeBot<T> : DialogBot<T>
where T : Dialog
{
public DialogAndWelcomeBot(ConversationState conversationState, UserState userState, T dialog, ILogger<DialogBot<T>> logger)
: base(conversationState, userState, dialog, logger)
{
}
protected override async Task OnMembersAddedAsync(IList<ChannelAccount> membersAdded, ITurnContext<IConversationUpdateActivity> turnContext, CancellationToken cancellationToken)
{
foreach (var member in membersAdded)
{
// Greet anyone that was not the target (recipient) of this message.
// To learn more about Adaptive Cards, see https://aka.ms/msbot-adaptivecards for more details.
if (member.Id != turnContext.Activity.Recipient.Id)
{
var welcomeCard = CreateAdaptiveCardAttachment();
var response = MessageFactory.Attachment(welcomeCard, ssml: "Welcome to Bot Framework!");
await turnContext.SendActivityAsync(response, cancellationToken);
await Dialog.RunAsync(turnContext, ConversationState.CreateProperty<DialogState>("DialogState"), cancellationToken);
}
}
}
// Load attachment from embedded resource.
private Attachment CreateAdaptiveCardAttachment()
{
var cardResourcePath = "CoreBot.Cards.welcomeCard.json";
using (var stream = GetType().Assembly.GetManifestResourceStream(cardResourcePath))
{
using (var reader = new StreamReader(stream))
{
var adaptiveCard = reader.ReadToEnd();
return new Attachment()
{
ContentType = "application/vnd.microsoft.card.adaptive",
Content = JsonConvert.DeserializeObject(adaptiveCard),
};
}
}
}
}
BotController.cs
[Route("api/messages")]
[ApiController]
public class BotController : ControllerBase
{
private readonly IBotFrameworkHttpAdapter Adapter;
private readonly IBot Bot;
public BotController(IBotFrameworkHttpAdapter adapter, IBot bot)
{
Adapter = adapter;
Bot = bot;
}
[HttpPost, HttpGet]
public async Task PostAsync()
{
// Delegate the processing of the HTTP POST to the adapter.
// The adapter will invoke the bot.
await Adapter.ProcessAsync(Request, Response, Bot);
}
}
https://testbotbasiccsharp.azurewebsites.net/

Your issue looks related to the name of the event. The WebChat is sending an event named requestWelcomeDialog, where your bot code is looking for an event named webchat/join. If you change one of them, it should work.
There are two possibilities for handling welcome messages.
Conversation Update. DirectLine broadcasts a conversation update event by default, however this is not preferred. This event will end up in OnMembersAddedAsync.
Custom Event. Send a custom event using WebChat v4, as described in this sample. This event will end up in OnEventActivityAsync.
My advice would be to upgrade to the new WebChat (v4) and to have a look at this sample. The ConversationUpdate has limitations and you are more flexible by sending a custom event.

How can I handling with nested data-parent

I want to do a Menu with 3 levels using data-parents do close like that:
Menu1
---SubMenu1
------Sub_SubMenu1
------Sub_SubMenu2
---SubMenu2
Menu2
---SubMenu22
------Sub_SubMenu21
------Sub_SubMenu22
---SubMenu22
So I have the following sample code (not with full menu):
<div id="Menu1">
<button data-toggle="collapse" data-target="#div1">
Menu1
</button>
<div id="div1" data-parent="Menu1">
<div id="SubMenu1">
<button data-toggle="collapse" data-target="#div1">
SubMenu1
</button>
<div id="submenu1"></div>
<button data-toggle="collapse" data-target="#submenu2">
SubMenu2
</button>
<div id="submenu2"></div>
</div>
</div>
</div>
My problem is when I open any SubSubMenu And after I open a Menu , SubSubMenu isn't closed.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Sidebar Menu Example</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<style>
.animate-menu-push {
left: 0;
position: relative;
transition: all 0.3s ease; }
.animate-menu-push.animate-menu-push-right {
left: 200px; }
.animate-menu-push.animate-menu-push-left {
left: -200px; }
.animate-menu {
position: fixed;
top: 0;
width: 200px;
height: 100%;
transition: all 0.3s ease; }
.animate-menu-left {
left: -200px; }
.animate-menu-left.animate-menu-open {
left: 0; }
.animate-menu-right {
right: -200px; }
.animate-menu-right.animate-menu-open {
right: 0; }
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
background-color: #222d32; }
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0; }
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
border-left: 3px solid transparent;
color: #b8c7ce; }
.sidebar-menu > li > a > .fa {
width: 20px; }
.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc; }
.sidebar-menu > li .label,
.sidebar-menu > li .badge {
margin-top: 3px;
margin-right: 5px; }
.sidebar-menu li.sidebar-header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226; }
.sidebar-menu li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px; }
.sidebar-menu li.active > a > .fa-angle-left {
transform: rotate(-90deg); }
.sidebar-menu li.active > .sidebar-submenu {
display: block; }
.sidebar-menu a {
color: #b8c7ce;
text-decoration: none; }
.sidebar-menu .sidebar-submenu {
display: none;
list-style: none;
padding-left: 5px;
margin: 0 1px;
background: #2c3b41; }
.sidebar-menu .sidebar-submenu .sidebar-submenu {
padding-left: 20px; }
.sidebar-menu .sidebar-submenu > li > a {
padding: 5px 5px 5px 15px;
display: block;
font-size: 14px;
color: #8aa4af; }
.sidebar-menu .sidebar-submenu > li > a > .fa {
width: 20px; }
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu .sidebar-submenu > li > a > .fa-angle-down {
width: auto; }
.sidebar-menu .sidebar-submenu > li.active > a, .sidebar-menu .sidebar-submenu > li > a:hover {
color: #fff; }
.sidebar-menu-rtl {
list-style: none;
margin: 0;
padding: 0;
background-color: #222d32; }
.sidebar-menu-rtl > li {
position: relative;
margin: 0;
padding: 0; }
.sidebar-menu-rtl > li > a {
padding: 12px 15px 12px 5px;
display: block;
border-left: 3px solid transparent;
color: #b8c7ce; }
.sidebar-menu-rtl > li > a > .fa {
width: 20px; }
.sidebar-menu-rtl > li:hover > a, .sidebar-menu-rtl > li.active > a {
color: #fff;
background: #1e282c;
border-left-color: #3c8dbc; }
.sidebar-menu-rtl > li .label,
.sidebar-menu-rtl > li .badge {
margin-top: 3px;
margin-right: 5px; }
.sidebar-menu-rtl li.sidebar-header {
padding: 10px 15px 10px 25px;
font-size: 12px;
color: #4b646f;
background: #1a2226; }
.sidebar-menu-rtl li > a > .fa-angle-left {
width: auto;
height: auto;
padding: 0;
margin-right: 10px;
margin-top: 3px; }
.sidebar-menu-rtl li.active > a > .fa-angle-left {
transform: rotate(-90deg); }
.sidebar-menu-rtl li.active > .sidebar-submenu {
display: block; }
.sidebar-menu-rtl a {
color: #b8c7ce;
text-decoration: none; }
.sidebar-menu-rtl .sidebar-submenu {
display: none;
list-style: none;
padding-right: 5px;
margin: 0 1px;
background: #2c3b41; }
.sidebar-menu-rtl .sidebar-submenu .sidebar-submenu {
padding-right: 20px; }
.sidebar-menu-rtl .sidebar-submenu > li > a {
padding: 5px 15px 5px 5px;
display: block;
font-size: 14px;
color: #8aa4af; }
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa {
width: 20px; }
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-left,
.sidebar-menu-rtl .sidebar-submenu > li > a > .fa-angle-down {
width: auto; }
.sidebar-menu-rtl .sidebar-submenu > li.active > a, .sidebar-menu-rtl .sidebar-submenu > li > a:hover {
color: #fff; }
</style>
<body>
<section style="width: 200px">
<ul class="sidebar-menu">
<li class="sidebar-header">MAIN NAVIGATION</li>
<li>
<a href="#">
<i class="fa fa-dashboard"></i> <span>Dashboard</span> <i class="fa fa-angle-left pull-right"></i>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-share"></i> <span>Multilevel</span>
<i class="fa fa-angle-left pull-right"></i>
</a>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level One</li>
<li>
<i class="fa fa-circle-o"></i> Level One <i class="fa fa-angle-left pull-right"></i>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level Two</li>
<li>
<i class="fa fa-circle-o"></i> Level Two <i class="fa fa-angle-left pull-right"></i>
<ul class="sidebar-submenu">
<li><i class="fa fa-circle-o"></i> Level Three</li>
<li><i class="fa fa-circle-o"></i> Level Three</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-circle-o"></i> Level One</li>
</ul>
</li>
</ul>
</section>
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script>
$.sidebarMenu = function(menu) {
var animationSpeed = 300,
subMenuSelector = '.sidebar-submenu';
$(menu).on('click', 'li a', function(e) {
var $this = $(this);
var checkElement = $this.next();
if (checkElement.is(subMenuSelector) && checkElement.is(':visible')) {
checkElement.slideUp(animationSpeed, function() {
checkElement.removeClass('menu-open');
});
checkElement.parent("li").removeClass("active");
}
//If the menu is not visible
else if ((checkElement.is(subMenuSelector)) && (!checkElement.is(':visible'))) {
//Get the parent menu
var parent = $this.parents('ul').first();
//Close all open menus within the parent
var ul = parent.find('ul:visible').slideUp(animationSpeed);
//Remove the menu-open class from the parent
ul.removeClass('menu-open');
//Get the parent li
var parent_li = $this.parent("li");
//Open the target menu and add the menu-open class
checkElement.slideDown(animationSpeed, function() {
//Add the class active to the parent li
checkElement.addClass('menu-open');
parent.find('li.active').removeClass('active');
parent_li.addClass('active');
});
}
//if this isn't a link, prevent the page from being redirected
if (checkElement.is(subMenuSelector)) {
e.preventDefault();
}
});
}
$.sidebarMenu($('.sidebar-menu'))
</script>
</body>
</html>

If you want to test it in the "Code snippet" will appear exactly as it appears on smart phones, but the appearance will vary completely on the desktop
$("#cssmenu").menumaker({
title: "Menu",
breakpoint: 768,
format: "multitoggle"
});
#import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#cssmenu.small-screen {
width: 100%;
}
#cssmenu.small-screen ul {
width: 100%;
display: none;
}
#cssmenu.small-screen.align-center > ul {
text-align: left;
}
#cssmenu.small-screen ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu.small-screen ul ul li,
#cssmenu.small-screen li:hover > ul > li {
height: auto;
}
#cssmenu.small-screen ul li a,
#cssmenu.small-screen ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu.small-screen > ul > li {
float: none;
}
#cssmenu.small-screen ul ul li a {
padding-left: 25px;
}
#cssmenu.small-screen ul ul ul li a {
padding-left: 35px;
}
#cssmenu.small-screen ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu.small-screen ul ul li:hover > a,
#cssmenu.small-screen ul ul li.active > a {
color: #ffffff;
}
#cssmenu.small-screen ul ul,
#cssmenu.small-screen ul ul ul,
#cssmenu.small-screen.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu.small-screen > ul > li.has-sub > a:after,
#cssmenu.small-screen > ul > li.has-sub > a:before,
#cssmenu.small-screen ul ul > li.has-sub > a:after,
#cssmenu.small-screen ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu.small-screen #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu.small-screen #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
box-sizing: content-box;
}
#cssmenu.small-screen #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu.small-screen #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu.small-screen .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu.small-screen .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu.small-screen ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu.small-screen .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu.small-screen .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu.small-screen ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu.small-screen .submenu-button.submenu-opened:before {
display: none;
}
#cssmenu.small-screen.select-list {
padding: 5px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- jQuery -->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- MenuMaker Plugin -->
<script src="https://s3.amazonaws.com/menumaker/menumaker.min.js"></script>
<!-- Icon Library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<title>Test</title>
</head>
<body>
<div id="cssmenu">
<ul>
<li><i class="fa fa-fw fa-home"></i> Home</li>
<li><i class="fa fa-fw fa-bars"></i> Menus
<ul>
<li>Menu 1
<ul>
<li>Sub menu 1.1
<ul>
<li>Sub_SubMenu 1.1.1</li>
<li>Sub_SubMenu 1.1.2</li>
</ul>
</li>
<li>Sub menu 1.2</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub menu 2.1
<ul>
<li>Sub_SubMenu 2.1.1</li>
<li>Sub_SubMenu 2.1.2</li>
</ul>
</li>
<li>Sub menu 2.2</li>
</ul>
</li>
</ul>
</li>
<li><i class="fa fa-fw fa-cog"></i> Settings</li>
<li><i class="fa fa-fw fa-phone"></i> Contact</li>
</ul>
</div>
</body>
</html>

I have converted static menu code to dynamic menu code

I have converted static code to dynamic my static is working well but in dynamic mouser-hover effect has stop working when I do mouse hover it will show me sub menu.
<head runat="server">
<title></title>
<style>
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428bca;
}
li
{
float: left;
}
li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn
{
background-color: inherit;
}
li.dropdown
{
display: inline-block;
}
.dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover
{
background-color: #f1f1f1;
}
.dropdown:hover .dropdown-content
{
display: block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<ul>
<li class="dropdown">MY ARTICLES
<div class="dropdown-content">
Aapnu Surat ચોકલેટી અભિનેતા વિનોદ મેહરા <a href="#">
ઋષિસમાન સંગીતકાર સચિનદેવ બર્મન</a>
</div>
</li>
<li class="dropdown">MY PRESENTATIONS
<div class="dropdown-content">
Safaltani Sargam Part I Safaltani Sargam Part II
The Art Of Illusion <a href="#">100 Years Of Indian Cinema - Part I
Silent Film Era</a>
</div>
</li>
<li class="dropdown">DRAMA
<div class="dropdown-content">
Result Of SMC Drama Contest RESULTS OF 39th SMC DRAMA CONTEST
The Result Of SMC Drama Contest 2012 An Enemy Of The People
</div>
</div> </li>
<li class="dropdown">GUJARAT
<div class="dropdown-content">
Link 1વી ધ પીપલ ઓફ ગુજરાત
</li>
<li class="dropdown">INDIAN CULTURE
<div class="dropdown-content">
The Vedic Culture - Guj
</div>
</li>
</ul>
</form>
</body>
</html>
Select all
Open in new window
this is for static
<style>
/* ul */
.submenu
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #428bca;
}
.submenu li
{
float: left;
}
.submenu li a, .dropbtn
{
display: inline-block;
color: white;
text-align: center;
padding: 12px 36px;
text-decoration: none;
}
.submenu li a:hover, .dropdown:hover .dropbtn
{
background-color: inherit;
}
.submenu li.dropdown
{
display: inline-block;
}
.submenu .dropdown-content
{
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.submenu .dropdown-content a
{
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.submenu .dropdown-content a:hover
{
background-color: #f1f1f1;
}
.submenu .dropdown:hover .submenu .dropdown-content
{
display: block;
}
</style>
<div class="Container">
<ul class="submenu" id="topicmenu" runat="server">
</ul>
</div>
private void fillMenu()
{
clsTopic objTopic = new clsTopic(true);
objTopic.SelectAll();
string str = string.Empty;
int i = 0;
for (i = 0; i < objTopic.ListclsTopic.Count; i++)
{
str +=#"<li class='dropdown'><a href='#' class='dropbtn' style='text-transform:uppercase;'>"+ objTopic.ListclsTopic[i].TopicName+#"</a></li>";
}
topicmenu.InnerHtml = str;
}
I want to convert it to dynamic coding I have converted it but when I do hover on menu I don't find sub menu.

Having problems getting getting Razor to see my CSS

I am trying to get my labels and text boxes to line up and I'm not getting it work right.
Here is what I have:
AddCustomer.cshtml
#model SuburbanCustPortal.Models.AddCustomerModel
#{
ViewBag.Title = "Add an Existing Account";
}
<h2>Change Password</h2>
<p>
Use the form below to add an existing account to your web login.
</p>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true, "Account not found. Please verify the infomartion below and try again.")
<div>
<fieldset>
<legend>Account Information</legend>
<p>
<span class="smalllabel">
#Html.LabelFor(m => m.Branch)
</span>
<span class="largelabel">
#Html.LabelFor(m => m.AccountNumber)
</span>
<br />
<span class="smalltextbox">
#Html.TextBoxFor(m => m.Branch)
#Html.ValidationMessageFor(m => m.Branch)
</span>
<span class="largetextbox">
#Html.TextBoxFor(m => m.AccountNumber)
#Html.ValidationMessageFor(m => m.AccountNumber)
</span>
</p>
<div class="editor-label">
AND
</div>
<div class="editor-label">
#Html.LabelFor(m => m.LastName)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.LastName)
#Html.ValidationMessageFor(m => m.LastName)
</div>
<div class="editor-label">
OR
</div>
<div class="editor-label">
#Html.LabelFor(m => m.PhoneNumber)
</div>
<div class="editor-field">
#Html.TextBoxFor(m => m.PhoneNumber)
#Html.ValidationMessageFor(m => m.PhoneNumber)
</div>
<p>
<input type="submit" value="Register" />
</p>
</fieldset>
</div>
}
This is my Site.css:
/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
body {
background-color: #5c87b2;
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #696969;
}
a:link {
color: #034af3;
text-decoration: underline;
}
a:visited {
color: #505abc;
}
a:hover {
color: #1d60ff;
text-decoration: none;
}
a:active {
color: #12eb87;
}
p, ul {
margin-bottom: 20px;
line-height: 1.6em;
}
header,
footer,
nav,
section {
display: block;
}
/* HEADINGS
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
font-size: 1.5em;
color: #000;
}
h1 {
font-size: 2em;
padding-bottom: 0;
margin-bottom: 0;
}
h2 {
padding: 0 0 10px 0;
}
h3 {
font-size: 1.2em;
}
h4 {
font-size: 1.1em;
}
h5, h6 {
font-size: 1em;
}
/* PRIMARY LAYOUT ELEMENTS
----------------------------------------------------------*/
/* you can specify a greater or lesser percentage for the
page width. Or, you can specify an exact pixel width. */
.page {
width: 90%;
margin-left: auto;
margin-right: auto;
}
header, #header {
position: relative;
margin-bottom: 0px;
color: #000;
padding: 0;
}
header h1, #header h1 {
font-weight: bold;
padding: 5px 0;
margin: 0;
color: #fff;
border: none;
line-height: 2em;
font-size: 32px !important;
text-shadow: 1px 1px 2px #111;
}
#main {
padding: 30px 30px 15px 30px;
background-color: #fff;
border-radius: 4px 0 0 0;
-webkit-border-radius: 4px 0 0 0;
-moz-border-radius: 4px 0 0 0;
}
footer,
#footer {
background-color: #fff;
color: #999;
padding: 10px 0;
text-align: center;
line-height: normal;
margin: 0 0 30px 0;
font-size: .9em;
border-radius: 0 0 4px 4px;
-webkit-border-radius: 0 0 4px 4px;
-moz-border-radius: 0 0 4px 4px;
}
/* TAB MENU
----------------------------------------------------------*/
ul#menu {
border-bottom: 1px #5C87B2 solid;
padding: 0 0 2px;
position: relative;
margin: 0;
text-align: right;
}
ul#menu li {
display: inline;
list-style: none;
}
ul#menu li#greeting {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
color: #fff;
}
ul#menu li a {
padding: 10px 20px;
font-weight: bold;
text-decoration: none;
line-height: 2.8em;
background-color: #e8eef4;
color: #034af3;
border-radius: 4px 4px 0 0;
-webkit-border-radius: 4px 4px 0 0;
-moz-border-radius: 4px 4px 0 0;
}
ul#menu li a:hover {
background-color: #fff;
text-decoration: none;
}
ul#menu li a:active {
background-color: #a6e2a6;
text-decoration: none;
}
ul#menu li.selected a {
background-color: #fff;
color: #000;
}
/* FORM LAYOUT ELEMENTS
----------------------------------------------------------*/
fieldset {
border: 1px solid #ddd;
padding: 0 1.4em 1.4em 1.4em;
margin: 0 0 1.5em 0;
}
legend {
font-size: 1.2em;
font-weight: bold;
}
textarea {
min-height: 75px;
}
input[type="text"],
input[type="password"] {
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
width: 200px;
}
select {
border: 1px solid #ccc;
padding: 2px;
font-size: 1.2em;
color: #444;
}
input[type="submit"] {
font-size: 1.2em;
padding: 5px;
}
/* TABLE
----------------------------------------------------------*/
table {
border: solid 1px #e8eef4;
border-collapse: collapse;
}
table td {
padding: 5px;
border: solid 1px #e8eef4;
}
table th {
padding: 6px 5px;
text-align: left;
background-color: #e8eef4;
border: solid 1px #e8eef4;
}
/* MISC
----------------------------------------------------------*/
.clear {
clear: both;
}
.error {
color: Red;
}
nav,
#menucontainer {
margin-top: 40px;
}
div#title {
display: block;
float: left;
text-align: left;
}
#logindisplay {
font-size: 1.1em;
display: block;
text-align: right;
margin: 10px;
color: White;
}
#logindisplay a:link {
color: white;
text-decoration: underline;
}
#logindisplay a:visited {
color: white;
text-decoration: underline;
}
#logindisplay a:hover {
color: white;
text-decoration: none;
}
/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
color: #ff0000;
}
.field-validation-valid {
display: none;
}
.input-validation-error {
border: 1px solid #ff0000;
background-color: #ffeeee;
}
.validation-summary-errors {
font-weight: bold;
color: #ff0000;
}
.validation-summary-valid {
display: none;
}
/* Styles for editor and display helpers
----------------------------------------------------------*/
.display-label,
.editor-label {
margin: 1em 0 0 0;
}
.display-field,
.editor-field {
margin: 0.5em 0 0 0;
}
.text-box {
width: 30em;
}
.text-box.multi-line {
height: 6.5em;
}
.tri-state {
width: 6em;
}
/* custom created by eric */
.smalllabel {
margin: 1em 0 0 0;
width: 30em;
}
.smalltextbox {
margin: 1em 0 0 0;
width: 30em;
}
.largelabel {
margin: 1em 0 0 0;
width: 60em;
}
.largetextbox {
margin: 1em 0 0 0;
width: 60em;
}
And this is the results:
I am trying to get the Branch label and text box to be the same small size and the account number to be the larger (same) size.
Apparently I'm not getting the css classes right in the code.
Any ideas what I am doing wrong?

try using -
#Html.TextBoxFor(m => m.Branch, new { #class = "smalltextbox" })
this will apply the class to the textbox directly and not the span wrapper - I think you are using the default css file with a razor page that contains a css class that is applying to your textbox while you are applying your css to the span wrapper.
Also, smalltextbox and smalllabel look the same to me :) - not sure if you need them both.

Make smalltextbox and small label float: left.

Categories