MVC C# Carousel Image - c#

i have been trying to create a carousel image on my MVC application. The below snippet from W3 was just used as an example. The result was the images displayed ont he webpage one below eachother. Do i need to do anything else on the MVC application to resolve this?
<div class="container">
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="https://www.w3schools.com/bootstrap/ny.jpg" alt="Los Angeles" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/chicago.jpg" alt="Chicago" style="width:100%;">
</div>
<div class="item">
<img src="https://www.w3schools.com/bootstrap/newyork.jpg" alt="New york" style="width:100%;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>

I had the same requirement sometime ago and I used below code, look if it works for you.
<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
#{
var first = true;
}
#foreach (var item in ViewBag.Images)
{
<div class="carousel-item #(first?Html.Raw("active"):Html.Raw(""))">
<img class="d-block w-100" src="#item.Image" alt="#item.Name">
</div>
first = false;
}
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button"
data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button"
data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>

Please Try this.I hope your problem is solved
<div id="demo" class="carousel slide" data-ride="carousel">
<ul class="carousel-indicators">
<li data-target="#demo" data-slide-to="0" class="active"></li>
<li data-target="#demo" data-slide-to="1"></li>
<li data-target="#demo" data-slide-to="2"></li>
</ul>
<div class="carousel-inner" role="listbox">
#{int i = 0;}
#foreach (var item in Model)
{
i++;
var active = i == 1 ? "active" : "";
<div class="carousel-item #active">
<img src="#Url.Content(#item.FilePath)" alt="">
</div>
}
</div>
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>

Related

How we can divide row in 3 columns in foreach loop

I want to divide a row into 3 columns in a foreach loop using asp.net mvc core
This is my code
#foreach (var item in Model)
{
<div class="container">
<h3 class="h3">Products</h3>
<div class="row">
<div class="col-md-4 col-lg-3">
<div class="product-grid2">
<div class="product-image2">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
</a>
<ul class="social">
<li><i class="fa fa-eye"></i></li>
<li><i class="fa fa-shopping-bag"></i></li>
<li><i class="fa fa-shopping-cart"></i></li>
</ul>
<a class="add-to-cart" href="">Add to cart</a>
</div>
<div class="product-content">
<h3 class="title">Women's Designer Top</h3>
<span class="price">$599.99</span>
</div>
</div>
</div>
</div>
</div>
}
Here's the output
I would like to move that 2nd product into the 2nd column of the first row
Anu ideas?
It seems like your foreach loop is on the wrong line. You were creating multiple containers because the container itself was in the foreach loop, while I guess you only want the div with the products in there.
<div class="container">
<h3 class="h3">Products</h3>
<div class="row">
#foreach (var item in Model)
{
<div class="col-md-4 col-lg-3">
<div class="product-grid2">
<div class="product-image2">
<a href="#">
<img class="pic-1" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
<img class="pic-2" src="http://bestjquery.com/tutorial/product-grid/demo3/images/img-2.jpeg">
</a>
<ul class="social">
<li><i class="fa fa-eye"></i></li>
<li><i class="fa fa-shopping-bag"></i></li>
<li><i class="fa fa-shopping-cart"></i></li>
</ul>
<a class="add-to-cart" href="">Add to cart</a>
</div>
<div class="product-content">
<h3 class="title">Women's Designer Top</h3>
<span class="price">$599.99</span>
</div>
</div>
</div>
}
</div>
</div>
I do not know your browser requirements and the following is not a Razor template solution.
However, you might want to check out CSS grid and/or flexbox:
https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
It will give you a bunch more options when creating a responsive website.

Html/Css CSHTML - Accordion not opening for SOME items

My issue is that I am creating a comments section for a page. Each comment can have a number of replies. I am using bootstrap accordion to achieve this and by dynamically creating the accordions via C# MVC code. I cant work out why some of the accordions open correctly and some do not. each comment is comprised of a comment, an edit button a delete button and a reply button.
Sometimes the Accordion will not open, but when I go to the inspection hatch in Chrome, I can put the "show" keyword into the div I want to expand, and it does so.
Here is the rendered code. I dont think the issue is the C# code as the accordions sometimes open. is there a hierarchy thing going on that I dont know about? BTW the first div is an outermost accorion to show or hide all the comments.
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion" href="#div-10" data-toggle="collapse" aria-expanded="true">
<span class="btn-accordion-arrow comments-top"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="div-10" style="">
<br>
<br>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:0px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:41</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#0d41c31f-8629-4f02-bf4c-64af8f830975" data-toggle="collapse" data-target="#0d41c31f-8629-4f02-bf4c-64af8f830975" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="0d41c31f-8629-4f02-bf4c-64af8f830975">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-0d41c31f-8629-4f02-bf4c-64af8f830975"> First Comment for Dispute 001 - PARENT</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="0d41c31f-8629-4f02-bf4c-64af8f830975" href="#" onclick="deleteComment('0d41c31f-8629-4f02-bf4c-64af8f830975');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="0d41c31f-8629-4f02-bf4c-64af8f830975" id="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" name="shareWCustomer-0d41c31f-8629-4f02-bf4c-64af8f830975" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:45</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="#612de2eb-f33c-4b30-b69c-825d0c8171bd" data-toggle="collapse" data-target="#612de2eb-f33c-4b30-b69c-825d0c8171bd" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse" id="612de2eb-f33c-4b30-b69c-825d0c8171bd">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-612de2eb-f33c-4b30-b69c-825d0c8171bd"> Second Comment for Dispute 001 - First Child</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="612de2eb-f33c-4b30-b69c-825d0c8171bd" href="#" onclick="deleteComment('612de2eb-f33c-4b30-b69c-825d0c8171bd');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="612de2eb-f33c-4b30-b69c-825d0c8171bd" id="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" name="shareWCustomer-612de2eb-f33c-4b30-b69c-825d0c8171bd" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 14:51</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#a869e748-f0c3-461a-89bb-07bf29620d66" data-toggle="collapse" data-target="#a869e748-f0c3-461a-89bb-07bf29620d66" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="a869e748-f0c3-461a-89bb-07bf29620d66" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-a869e748-f0c3-461a-89bb-07bf29620d66"> First REPLY for Dispute 001 - to comment 1</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="a869e748-f0c3-461a-89bb-07bf29620d66" href="#" onclick="deleteComment('a869e748-f0c3-461a-89bb-07bf29620d66');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="a869e748-f0c3-461a-89bb-07bf29620d66" id="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" name="shareWCustomer-a869e748-f0c3-461a-89bb-07bf29620d66" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
<div class="container-fluid-0d41c31f-8629-4f02-bf4c-64af8f830975" style="padding-left:40px">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">Mike Cave • </span><span class="blue-slate-text">03-Oct-2018 15:12</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion" href="#c768c95c-d926-41f7-a237-8b6803c9521d" data-toggle="collapse" data-target="#c768c95c-d926-41f7-a237-8b6803c9521d" aria-expanded="true">
<span class="btn-accordion-arrow"><img src="/Content/Images/up-chevron-blue.png" alt=""></span>
</a>
</div>
</div>
<div class="collapse show" id="c768c95c-d926-41f7-a237-8b6803c9521d" style="">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-c768c95c-d926-41f7-a237-8b6803c9521d"> Second REPLY for Dispute 001 - to comment that was working</span>
</div>
</div>
<br>
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="c768c95c-d926-41f7-a237-8b6803c9521d" href="#" onclick="deleteComment('c768c95c-d926-41f7-a237-8b6803c9521d');return false;" class="collapse show" style=""><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
<input type="checkbox" value="c768c95c-d926-41f7-a237-8b6803c9521d" id="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" name="shareWCustomer-c768c95c-d926-41f7-a237-8b6803c9521d" unchecked=""> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="/Content/Images/icon-replies.png" class="img-responsive icon-replies">
</div>
</div>
<hr class="hr-white">
<br>
</div>
</div>
</div>
*** As you can see the rendered code looks ok,here is the C# View .cshtml:--
<div class="container-fluid">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<h2 class="fl-left pt-40 text-white fbold">COMMENTS</h2>
</div>
<div class="col-sm-1 col-md-1 col-lg-1 pt-40">
<a class="btn-accordion collapsed" href="#div-10" data-toggle="collapse" aria-expanded="false">
<span class="btn-accordion-arrow comments-top"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="div-10">
<br /><br />
#if (Model.DisputeComments != null)
{#*list of comment lists*#
foreach (var list in Model.DisputeComments)
{ #*comment list*#
foreach (var comment in list)
{
var indent = comment.ParentID != Guid.Empty ? "40px" : "0px";
var containerName = comment.ParentID == Guid.Empty ? comment.Id : comment.ParentID; #*use for removing on delete*#
<div class="container-fluid-#containerName" style="padding-left:#indent">
<div class="row">
<div class="col-sm-11 col-md-11 col-lg-11">
<span class="text-white fbold">#comment.IbasUser.FirstName #comment.IbasUser.LastName • </span><span class="blue-slate-text">#comment.EntryDate.ToString("dd-MMM-yyyy HH:mm")</span>
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<a class="btn-accordion collapsed" href="##comment.Id" data-toggle="collapse" data-target="##comment.Id" aria-expanded="false">
<span class="btn-accordion-arrow"><img src="~/Content/Images/up-chevron-blue.png" alt="" /></span>
</a>
</div>
</div>
<div class="collapse" id="#comment.Id">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<span id="span-#comment.Id"> #comment.Description</span>
</div>
</div>
<br />
<div class="row">
<div class="col-sm-8 col-md-8 col-lg-8">
<i class="fa fa-pencil-square-o"></i> Edit
<a id="#comment.Id" href="#" onclick="deleteComment('#comment.Id');return false;"><i class="fa fa-trash"></i> Delete</a>
</div>
<div class="col-sm-3 col-md-3 col-lg-3">
#{
var isChecked = "checked";
if (comment.ShareWithCustomer == false) { isChecked = "unchecked"; }
}
<input type="checkbox" value="#comment.Id" id="shareWCustomer-#comment.Id" name="shareWCustomer-#comment.Id" #isChecked> Share With Customer
</div>
<div class="col-sm-1 col-md-1 col-lg-1">
<img src="~/Content/Images/icon-replies.png" class="img-responsive icon-replies" />
</div>
</div>
<hr class="hr-white" />
<br />
</div>
</div>
} #* end of inner for each *#
} #*end of outer for each*#
}
</div>#*end of Comments accordian*#
#* end of container *#
** I tried to add the CSS but as usual Stack overflow said it was unformatted, I will try and add it after I post this lot. Thanks for any help!
I finally got to the bottom of my issue. The Collapsing divs were using the current comments GUId as an identifier. I did this because the comments are rendered on the fly and the Comment id is used for editing and deleting the comment within the div. I stripped out all but the collapse div and button, but it still didnt work. This is when I substituted the GUID for a counter as an identifier for the collapse div. This did the trick and the accordion works as normal. I dont know why a GUID as an ID should flummox the Accordion, especially as I use GUIDs as ids when rendering lists to html on the fly quite often. In any case I take it as a win. Thanks to Pete for having a look.

selenium wrong xpath with li c#

var driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://www.favorit.com.ua/uk/live/");
string myTime = driver.FindElement(By.XPath("/html/body/div[#class='wrapper']/" +
"div[#class='contentdiv']/" +
"div[#id='middle']/" +
"div[#id='container']/" +
"div[#id='content']/" +
"div[#class='content clear-block bet_a_c']/" +
"div[#id='livediv']/" +
"div[#class='selected--sport--block']/" +
"div[#class='view-wrapper']/" +
"ul[#class='sport--list']/" +
"li[#class='sport--block']/" +
"ul[#class='category--list--block']/" +
"li[#class='category--block sp_1']/" +
"ul[#class='events--list']/" +
"li['']/" +
"ul[#class='event--head-block']/" +
"div[#class='event--head']/" +
"div[#class='event--short--info']/" +
"div[#class='time--block']/" +
"div[#class='headerdiv']/" +
"div[#class='event--timer']")).GetAttribute("innerHTML");
Console.WriteLine(myTime);
Console.ReadLine();
Hello everybody. I just started to learn selenium and collided with the issue of finding an element. I want to get the value of the timer, but it is unsuccessful. I bet my problem is that I am making mistake in XPath at line
"li['']/" +
Do you have an idea how can I get it in a correct way?
I am going to get value '45:00'
from <div class="event--timer">45:00</div>
Oh, by the way when I start debugging my project Chrome browser starts twice. I don't know why, but it happens each time.
Thank you in advance for any suggests.
<body class="tm_18 uk " data-gr-c-s-loaded="true" style="">
<noscript>
<div id="noscript">Будь ласка, увімкніть JavaScript у вашому браузері!</div>
</noscript>
<a id="topsite" name="topsite"></a>
<div id="dialog" title=""></div>
<div id="dialogPre">
<!-- react-empty: 1 -->
</div>
<div id="full_vers" style="display:none;">
<button class="close" rel="fullcls">close</button>
<div class="full_blok">
<p>
Вы перешли на полную версию сайта.
Хотите запомнить Ваш выбор для следующего посещения сайта?
<button rel="fullyes" class="btn-chs">Так</button>
<button rel="fullno" class="btn-chs">Ні</button>
</p>
</div>
<div class="cl"></div>
</div>
<div class="wrapper">
<div class="header">
<div class="headerdiv">
<div class="logo">
<img src="./Фаворит спорт - Зробити ставку. Компанiя_files/blank.gif" alt="" id="logo">
</div>
<div id="counterPl" class="counter--playing" style="display:none;"></div>
<div class="head--block">
<div class="nav--block" style="overflow: visible;">
<ul class="nav--level--1">
<li>
<a href="https://www.favorit.com.ua/uk/bets/" class="service_id_1">
<span class="">СПОРТ</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/bets/results/" class="service_id_1">
<span class="">Результати</span>
</a>
</li>
<li>
<a href="javascript:openPopup('12345','http://stats.betradar.com/s4/?clientid=509&language=ukr');" class="service_id_1">
<span class="">Статистика</span>
</a>
</li>
</ul>
<div id="vip-dropdown">
<!-- react-empty: 1 -->
</div>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/live/" class="service_id_1 active">
<span class="">Live</span>
<b>159</b></a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/live/calendar/" class="service_id_1">
<span class="">Календар Live</span>
</a>
</li>
<li>
<a href="javascript:openPopup('123459','http://ls.betradar.com/ls/livescore/?/favoritbetua/ukr/page');" class="service_id_1">
<span class="">Результати Live</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/favoritsporttv/" class="service_id_1">
<span class="">Прямі трансляції</span>
</a>
</li>
</ul>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/virtual/" class="service_id_1">
<span class="">Віртуальний спорт</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/vfl/" class="service_id_1">
<span class="null">Віртуальна футбольна ліга</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/ncup/" class="service_id_1">
<span class="">Кубок націй</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/vto/" class="service_id_1">
<span class="">Віртуальний теніс</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/vbl/" class="service_id_1">
<span class="">Віртуальний баскетбол</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36334" class="service_id_1">
<span class="new">Конячі перегони</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36335" class="service_id_1">
<span class="new">Футбол</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36338" class="service_id_1">
<span class="new">Коняча Рулетка</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual-games/?category_id=36339" class="service_id_1">
<span class="new">Настільний теніс</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=1559" class="service_id_1">
<span class="">Віртуальний футбол</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/virtual/" class="service_id_1">
<span class="new">Віртуальний спорт від Inspired</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35937" class="service_id_1">
<span class="">Віртуальні Мотогонки</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35938" class="service_id_1">
<span class="">Віртуальні Велоперегони</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35939" class="service_id_1">
<span class="">Віртуальні Скачки</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=35941" class="service_id_1">
<span class="">Віртуальні Собачі перегони</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/virtual/?category_id=36097" class="service_id_1">
<span class="">Віртуальна Формула 1</span>
</a>
</li>
</ul>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/casino/" class="service_id_1">
<span class="new">Казино</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/page/casino/cashrace/" class="service_id_1">
<span class="new">Гонка призових</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/casino/rating/" class="service_id_1">
<span class="">Рейтинг</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/casino/winners/" class="service_id_1">
<span class="">Переможці</span>
</a>
</li>
</ul>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/live-casino/" class="service_id_1">
<span class="">Казино LIVE</span>
</a>
<button class="sub--level--yes"><i class="fa fa-caret-down"></i></button>
<ul class="nav--level--2">
<li>
<a href="https://www.favorit.com.ua/uk/page/live-casino/tips-and-strategy/" class="service_id_1">
<span class="">Поради та Стратегія</span>
</a>
</li>
</ul>
</li>
</ul>
<button class="menu_button">
<div class="toggle_switch"><span></span><span></span><span></span></div>
</button>
<ul class="nav-dop-menu">
<li>
<a href="https://www.favorit.com.ua/uk/tvloto/" class="service_id_1">
<span class="">ТВ ЛОТО</span>
</a>
</li>
<li>
<a href="https://www.favorit.com.ua/uk/page/main_promo/" class="service_id_1">
<span class="">Акції</span>
</a>
</li>
</ul>
</div>
</div>
<div class="user--block">
<script id="usermessagewc" type="text/x-jsrender">
<div class="u_msg_tci">
Total critical/important messages <span rel="count">0</span>
</div>
<div class="u_msg_txt">
[[:text]]
</div>
</script>
<script id="usermessage" type="text/x-jsrender">
<div class="u_msg_dt">[[:dt_sesent]]</div>
<div class="u_msg_bl">
<div class="u_msg_subject">[[:subject]]</div>
<div class="u_msg_bd">[[:message]]</div>
</div>
</script>
<div id="user-block">
<div data-reactroot="" class="loginbgL">
<div class="loginbgR">
<div class="loginicon">
<div id="nauth">
<div class="not_login">
<a class="loginpagecl but-blue-1"><span>Увійти</span></a>
<div class="but-red-1" rel="mdlreg"><span>Реєстрація</span></div>
</div>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<script src="./Фаворит спорт - Зробити ставку. Компанiя_files/loginUser.js.download" type="text/javascript" charset="utf-8"></script>
</div>
</div>
<div class="second--menu">
<div class="settings--block">
<div id="timeplace" class="times_place">
<div data-reactroot="" class="times">
<p>20:20 (UTC +3)</p>
<div></div>
</div>
</div>
</div>
</div>
</div>
<div class="contentdiv">
<div id="middle">
<div id="container">
<div id="content">
<div class="content clear-block bet_a_c">
<div class="badwe" style="display:none;">
<div class="entire">
<div class="close"></div>
<div class="lst-err">
<ul>
<li>Unknown error</li>
</ul>
</div>
</div>
</div>
<div id="scenter"></div>
<div id="video_player"></div>
<div id="video_modal_auth"></div>
<div id="livediv" class="livediv">
<div data-reactroot="" class="selected--sport--block">
<div class="message--widget">
<div class="message--content new--user">
<i class="fa"></i><!-- react-text: 5 -->Новий користувач?<!-- /react-text --><span>Зареєструйтесь</span><b>та отримайте бонус ''Ставка без ризику'' до 500 грн!</b>
</div>
<div class="close--buton"><span>Закрити</span><i class="fa"></i></div>
</div>
<!-- react-empty: 11 -->
<div class="view-wrapper">
<ul class="sport--list">
<li class="sport--block">
<div class="sport--head sp--bg sp_1 head--folding folding--open">
<i class="sporticon sp_1"></i>
<span>
<!-- react-text: 25 -->Футбол<!-- /react-text --><u>83</u>
</span>
<b>Показати все</b>
</div>
<ul class="category--list--block">
<li class="category--block sp_1">
<div class="caterory--head">
<div class="outcomes--name">
<div class="category--name"><i class="sporticon sp--color sp_1"></i><span>Футбол | Іспанія | Ла Ліга</span></div>
<ul class="count--label count-0 outcome-count-3">
<li title="1">1</li>
<li title="X">X</li>
<li title="2">2</li>
</ul>
<ul class="count--label count-1 outcome-count-3 has-param">
<li title="1">1</li>
<li>Фора</li>
<li title="2">2</li>
</ul>
<ul class="count--label count-2 outcome-count-3 has-param">
<li title="Б">Б</li>
<li>Тотал</li>
<li title="М">М</li>
</ul>
<div class="close--category"></div>
</div>
</div>
<ul class="events--list">
<li>
<div class="event--head-block">
<u></u>
<div class="event--head event-has-description">
<div class="event--short--info">
<div class="event--line--position"><span>3371</span><b>1489</b></div>
<div class="time--block">
<div class="event--timer">45:00</div>
</div>
<div class="event--result--type--name">П2</div>
</div>
Can you try with below xpath
"/html/body/div[4]/div[2]/div/div/div/div/div[5]/div/div[2]/ul/li/ul/li/ul/li/div/div/div/div[2]/div"
What about simple //div[#class='event--timer'] ?
string myTime = driver.FindElement(By.XPath("//div[#class='event--timer']")).GetAttribute("innerHTML");

Creating an active link on a navigation bar while using a master page

I know there are a lot of questions surrounding this topic online however I cannot get any of the solutions to work for me.I have tried numerous way suggested online. I have a master page with my navigation bar code and I want the active link to be highlighted in green when I am on a particular page of the website. I can't figure out what I am doing wrong or missing to get this to work. I am new to ASP.Net and C# so any help would be appreciated.
Here is my current code in body tags of my master page:
<script>
$(document).ready(function () {
var url = window.location;
$('.sidebar .nav').find('.active').removeClass('active');
$('.sidebar .nav li a').each(function () {
if (this.href == url) {
$(this).parent().addClass('active');
}
});
});
</script>
<form id ="form1" runat="server">
<div class="wrapper">
<div class="sidebar" data-color="green" data-image="../assets/img/side-navship.jpg">
<div class="logo">
<a href="Default.aspx" class="simple-text">
Speed-E
</a>
</div>
<div class="sidebar-wrapper">
<ul class="nav">
<li class="">
<a href="<%= Page.ResolveUrl("~/Default.aspx") %>">
<i class="material-icons">dashboard</i>
<p>Home</p>
</a>
</li>
<li class="">
<a href="<%= Page.ResolveUrl("~/NewCert.aspx") %>">
<i class="material-icons">content_paste</i>
<p>New Certificate</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-transparent navbar-absolute">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> </a>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<asp:ContentPlaceHolder ID="BodyContent"runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
</div>
</div>
</form>

Using Partial Views in ASP.NET 5

I've got a HTML file that I want to load using a partial view; however, when I type
#Html.P
the Partial function never shows up. Did partials get removed in ASP.NET 5 or has it been relocated to a different package? At the moment I'm using the following packages:
"Microsoft.AspNet.Mvc": "6.0.0-beta4",
"Microsoft.AspNet.Mvc.TagHelpers": "6.0.0-beta4",
"Microsoft.AspNet.Server.IIS": "1.0.0-beta4",
"Microsoft.AspNet.Server.WebListener": "1.0.0-beta4",
"Microsoft.AspNet.StaticFiles": "1.0.0-beta4",
"Microsoft.AspNet.Tooling.Razor": "1.0.0-beta4"
Team.html
<!-- Team Section -->
<section id="team" class="bg-light-gray">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading">Our Amazing Team</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/1.jpg" class="img-responsive img-circle" alt="">
<h4>Sayed Ibrahim Hashimi</h4>
<p class="text-muted">Co-Founder</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/2.jpg" class="img-responsive img-circle" alt="">
<h4>Mads Kristensen</h4>
<p class="text-muted">Co-Founder</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/3.jpg" class="img-responsive img-circle" alt="">
<h4>John Papa</h4>
<p class="text-muted">Contributor</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/1.jpg" class="img-responsive img-circle" alt="">
<h4>Brady Gaster</h4>
<p class="text-muted">Contributor</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/2.jpg" class="img-responsive img-circle" alt="">
<h4>Mike Lorbetske</h4>
<p class="text-muted">Contributor</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/3.jpg" class="img-responsive img-circle" alt="">
<h4>DanielTheCoder</h4>
<p class="text-muted">Contributor</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/1.jpg" class="img-responsive img-circle" alt="">
<h4>Naim Hammadi</h4>
<p class="text-muted">Contributor</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
<div class="col-sm-4">
<div class="team-member">
<img src="img/team/2.jpg" class="img-responsive img-circle" alt="">
<h4>Tyler Hughes</h4>
<p class="text-muted">Contributor</p>
<ul class="list-inline social-buttons">
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-github"></i></li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-8 col-lg-offset-2 text-center">
<p class="large text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut eaque, laboriosam veritatis, quos non quis ad perspiciatis, totam corporis ea, alias ut unde.</p>
</div>
</div>
</div>
</section>
#Html.Partial is definitely still there. However, I'd recommend using #await Html.PartialAsync(...) or #{ await Html.RenderPartialAsync(...) }.
The Html.Partial method is located in the Microsoft.AspNet.Mvc.Rendering namespace as an IHtmlHelper extension in the Microsoft.AspNet.Mvc.Core assembly (pulled in by Microsoft.AspNet.Mvc) for beta4.
What you might be seeing is if you type #Html. without pressing the P immediately the Razor editor will treat the . as an end of sentence period until you stop typing for a bit.
Hopefully this helps!

Categories