Count some nodes by Selenium, using xpath. C# - c#

class Program
{
static void Main(string[] args)
{
var driver = new ChromeDriver();
driver.Navigate().GoToUrl("https://www.favorit.com.ua/uk/live/");
string numberOfGame = driver.FindElement(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]/ul/li/div/div/div[1]/div[2]/div[1]/span")).Text;
string Command1_Goals = driver.FindElement(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]/ul/li/div/div/div[2]/div/div/div/div[1]/div[1]")).GetAttribute("innerHTML");
string Command2_Goals = driver.FindElement(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]/ul/li/div/div/div[2]/div/div/div/div[1]/div[2]")).GetAttribute("innerHTML");
string Command1 = driver.FindElement(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]/ul/li/div/div/div[1]/div[1]/span[1]")).GetAttribute("innerHTML");
string Command2 = driver.FindElement(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]/ul/li/div/div/div[1]/div[1]/span[2]")).GetAttribute("innerHTML");
string TimeOfGame = driver.FindElement(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]/ul/li/div/div/div[1]/div[2]/div[2]/div")).GetAttribute("innerHTML");
Console.OutputEncoding = Encoding.UTF8;
Console.WriteLine("Game: " + numberOfGame + " Team 1: " + Command1 + " Goals: " + Command1_Goals + " | Team 2: " + Command2 + " Goals: " + Command2_Goals);
Console.ReadLine();
}
}
Hey, guys! I am now creating the online statistic of games. I know that there is a statistic at website, but I want to get my personal one.
How can I count 'li' blocks which are here: //*[#id='livediv']/div/div[2]/ul/li[1]/ul/li[1]
I am going to count them and then use each number as ID to get numbers of games. Is it right way? Because there are many 'li' blocks and I want to get values in each of them. Check screenshot:
Each category--block sp_1 contains few 'li'. And I want to get game's values for each 'li';
Look at this
I have to get access into each category--block sp_1 and into each 'li' there.
<ul class="events--list">
<li>
<div class="event--head-block">
<u></u>
<div class="event--head">
<div class="event--name--info">
<div class="event--name two--name">
<span>Славен Белупо</span>
<span>Істра 1961</span>
</div>
<div class="event--short--info">
<div class="event--line--position">
<span>9953</span>
<b>1491</b>
</div>
<div class="time--block">
<div class="event--timer">9:31</div>
</div>
<div class="event--result--type--name">П1</div>
</div>
<div class="stat--button">
<a href="https://stats.betradar.com/s4/?clientid=65&language=ru&matchid=11953108" title="Перегляд статистики"
target="_blank">
<i class="fav-icon"></i>
</a>
</div>
<div class="video--button">
<span class="video-block" title="Для перегляду відео трансляції необхідний баланс на обраному гаманці в еквіваленті понад 400 грн., або зробіть ставку в еквіваленті мінімум 40 грн.">
<i class="fav-icon"></i>
</span>
</div>
<!-- react-empty: 1620 -->
</div>
<div class="result--block result-count-1 sp_1">
<div class="result--content">
<div class="result--absolute">
<div class="result--block--entire">
<!-- react-empty: 1625 -->
<div class="result--item result--item--ft">
<div class="result--score">0</div>
<div class="result--score">0</div>
</div>
<div class="result--item result--item--cur">
<div class="result--score">0</div>
<div class="result--score">0</div>
</div>
</div>
</div>
</div>
</div>
<div class="fav--button">
<button class="" title="Додати до обраних/Прибрати з обраних">
<i class="fav-icon"></i>
</button>
</div>
<ul class="outcome_list outcome-count-3 count-0">
<li>
<label class="outcome--empty">
<button></button>
</label>
</li>
<li>
<label class="outcome--empty">
<button></button>
</label>
</li>
<li>
<label class="outcome--empty">
<button></button>
</label>
</li>
</ul>
<ul class="outcome_list outcome-count-3 count-1">
<li class="outcome">
<label class="">
<u title="Славен Белупо (+0.5)">1 (+0.5)</u>
<span title="Славен Белупо (+0.5)">Славен Белупо (+0.5)</span>
<button>1.10</button>
</label>
</li>
<li class="param">
<span>+0.5</span>
</li>
<li class="outcome">
<label class="">
<u title="Істра 1961 (-0.5)">2 (-0.5)</u>
<span title="Істра 1961 (-0.5)">Істра 1961 (-0.5)</span>
<button>5.75</button>
</label>
</li>
</ul>
<ul class="outcome_list outcome-count-3 count-2 has-param">
<li>
<label class="outcome--empty">
<button></button>
</label>
</li>
<li>
<label class="outcome--empty">
<button></button>
</label>
</li>
<li>
<label class="outcome--empty">
<button></button>
</label>
</li>
</ul>
<div class="event--more">
<button>+0</button>
</div>
</div>
</div>
</li>
</ul>
</li>
<li class="category--block sp_1">
<div class="caterory--head">
<div class="outcomes--name">
<div class="category--name">
<span>Йорданія | Дивізіон 1</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">
<div class="event--name--info">
<div class="event--name two--name">
<span>Етхад Аль-Рамта</span>
<span>Шабаб Аль Хусейн</span>
</div>
<div class="event--short--info">
<div class="event--line--position">
<span>4672</span>
<b>1491</b>
</div>
<div class="time--block">
<div class="event--timer">41:14</div>
</div>
<div class="event--result--type--name">П1</div>
</div>
<div class="stat--button">
<i class="fav-icon"></i>
</div>
<div class="video--button">
<span class="video-block" title="Для перегляду відео трансляції необхідний баланс на обраному гаманці в еквіваленті понад 400 грн., або зробіть ставку в еквіваленті мінімум 40 грн.">
<i class="fav-icon"></i>
</span>
</div>
<!-- react-empty: 720 -->
</div>
<div class="result--block result-count-1 sp_1">
<div class="result--content">
<div class="result--absolute">
<div class="result--block--entire">
<!-- react-empty: 725 -->
<div class="result--item result--item--ft">
<div class="result--score">0</div>
<div class="result--score">0</div>
</div>
<div class="result--item result--item--cur">
<div class="result--score">0</div>
<div class="result--score">0</div>
</div>
</div>
</div>
</div>
</div>
<div class="fav--button">
<button class="" title="Додати до обраних/Прибрати з обраних">
<i class="fav-icon"></i>
</button>
</div>
<ul class="outcome_list outcome-count-3 count-0">
<li class="outcome">
<label class="">
<u title="Етхад Аль-Рамта">1</u>
<span title="Етхад Аль-Рамта">Етхад Аль-Рамта</span>
<button>2.55</button>
</label>
</li>
<li class="outcome">
<label class="">
<u title="Нічия">X</u>
<span title="Нічия">Нічия</span>
<button>2.30</button>
</label>
</li>
<li class="outcome">
<label class="">
<u title="Шабаб Аль Хусейн">2</u>
<span title="Шабаб Аль Хусейн">Шабаб Аль Хусейн</span>
<button>3.70</button>
</label>
</li>
</ul>
<ul class="outcome_list outcome-count-3 count-1">
<li class="outcome">
<label class="">
<u title="Етхад Аль-Рамта (0.0)">1 (0.0)</u>
<span title="Етхад Аль-Рамта (0.0)">Етхад Аль-Рамта (0.0)</span>
<button>1.55</button>
</label>
</li>
<li class="param">
<span>0.0</span>
</li>
<li class="outcome">
<label class="">
<u title="Шабаб Аль Хусейн (0.0)">2 (0.0)</u>
<span title="Шабаб Аль Хусейн (0.0)">Шабаб Аль Хусейн (0.0)</span>
<button>2.20</button>
</label>
</li>
</ul>
<ul class="outcome_list outcome-count-3 count-2">
<li class="outcome">
<label class="">
<u title="Більше (1.5)">Б (1.5)</u>
<span title="Більше (1.5)">Більше (1.5)</span>
<button>2.40</button>
</label>
</li>
<li class="param">
<span>1.5</span>
</li>
<li class="outcome">
<label class="">
<u title="Менше (1.5)">М (1.5)</u>
<span title="Менше (1.5)">Менше (1.5)</span>
<button>1.47</button>
</label>
</li>
</ul>
<div class="event--more">
<button>+20</button>
</div>
</div>
</div>
</li>
<li>
<div class="event--head-block">
<u></u>
<div class="event--head">
<div class="event--name--info">
<div class="event--name two--name">
<span>Аль Джаліл</span>
<span>Аль-Тора</span>
</div>
<div class="event--short--info">
<div class="event--line--position">
<span>4521</span>
<b>1491</b>
</div>
<div class="time--block">
<div class="event--timer">37:43</div>
</div>
<div class="event--result--type--name">П1</div>
</div>


First : how can I count 'li' blocks ?
Answer : use driver.FindElements(By.XPath("//*[#id='livediv']/div/div[2]/ul/li[1]/ul/li"))
This will return a list of WebElement (In your case all will be li elements)
then you can use something like list.size(); to count number of li blocks.
last one: What is the best way to keep turning on ?
You should initialize your browser instance only once. and rotate the reference of driver object anywhere you want, may be you would like to use constructor in few cases.

Related

Make a bootstrap Gallery Dynamic with Razor

I am trying to use the bootstrap 4 gallery however I am a bit lost I have my carsoul showing just with dummy data at present.
As you will notice the bootstrap carousel identifies each image with a number I need to know how to handle this.
This is the orginal code pen I found
https://codeply.com/go/tBbcVXe1xZ
I tried to setup a dotnetfiddle but was unsure how the models works on the online compiler
https://dotnetfiddle.net/Cc5ahV
I have to account for this on the mini pictures
id="carousel-selector-1" data-slide-to="1"
And this for the large pictures
Where the numbers in both should increase per photo
<div class="container">
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
#foreach (var item in FileAttachments)
{
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" class="img-fluid">
</div>
}//this should print out same div set for every image attached to the record
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#foreach (var item in FileAttachments)
{
<li class="list-inline-item active">
<a id="carousel-selector-0" class="selected" data-slide-to="0" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
}
<li class="list-inline-item">
<a id="carousel-selector-1" data-slide-to="1" data-target="#myCarousel">
<img src="https://photo-assets.superyachttimes.com/photo/121447/image/large-7b0d6a0b3217dd17aa8cc9e9eef912f8.jpg" style="width: 86px; height:86px" class="img-fluid">
</a>
</li>
</ul>
</div>
The model would be
public class FileAttachments
{
public int Id
{
get;
set;
}
public string UrlOrPath
{
get;
set
}
}
Edit 2
<div id="myCarousel" class="carousel slide shadow" styl>
<!-- main slider carousel items -->
<div class="carousel-inner">
<div class="active carousel-item active" data-slide-number="1">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" class="img-fluid">
</div>
<div class="active carousel-item " data-slide-number="2">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" class="img-fluid">
</div>
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
<li class="list-inline-item active">
<a id="carousel-selector-1" class="selected" data-slide-to="1" data-target="#myCarousel">
<img src="/Uploads/7bbc8503-a686-40d3-b70c-d6f0e0423e9b_DILBAR4.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
<li class="list-inline-item active">
<a id="carousel-selector-2" class="selected" data-slide-to="2" data-target="#myCarousel">
<img src="/Uploads/cc4263a9-cdfe-48a2-82d4-b976d76b9a3c_DILBAR3.jpg" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
</ul>
</div>
I have tried the following razor but it doesnt produce what i need from the code pen
The above html is produced by the below razor but its not working the next and previous.
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
i++;
var active = i == 1 ? "active" : "";
<div class="active carousel-item #active" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
}
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
j++;
<li class="list-inline-item active">
<a id="carousel-selector-#j" class="selected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
}
</ul>
</div>
</div>

For anyone else this is what works I just had to do a counter in relation to the loop.
<div class="col-lg-8 offset-lg-2" id="slider">
<div id="myCarousel" class="carousel slide shadow">
<!-- main slider carousel items -->
<div class="carousel-inner">
#{int i = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
<div class="#active carousel-item" data-slide-number="#i">
<img src="~/Uploads/#item.File" class="img-fluid">
</div>
i++;
}
<a class="carousel-control-prev" href="#myCarousel" 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="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!-- main slider carousel nav controls -->
<ul class="carousel-indicators list-inline mx-auto border px-2">
#{int j = 0;}
#foreach (var item in Model.PhotosAttachments) {
var active = i == 0 ? "active" : "";
var isSelected = i == 0 ? "selected" : "";
<li class="list-inline-item #active">
<a id="carousel-selector-#j" class="#isSelected" data-slide-to="#j" data-target="#myCarousel">
<img src="~/Uploads/#item.File" style="width: 86px; height: 86px" class="img-fluid">
</a>
</li>
j++;
}
</ul>
</div>
</div>

Bootstrap Modal Pop Up bind controls - Dropdownlist

I have an HTML table which loads data from the database. When I click on a row a modal pop fetches more content from the database with an option to edit a change on the selected row.
My predicament is how do I populate a drop-down list and select a value saved in the database?
It is easy to bind other controls i.e. Textarea, input boxes etc. My issue is with dropdown lists.
FYI I'm using ASP.NET Web Forms with C# and I fetch the data from the database using jQuery AJAX and a WebService.
Thanx in advance.
I have mixed the presentation with the logic.
I have updated the question here is the js:
$("body").delegate("a.view-link", "click", function (e) {
e.preventDefault();
var requestID = $(this).data("reqid");
$.ajax({
type: "POST",
url: "../helpdeskservice.asmx/GetModalContent",
data: "{'requestID':'" + requestID + "'}",
contentType: "application/json;
charset=utf-8",
dataType: "json",
success: function (response) {
$('#modalEditCall').html(response.d); //Bind
$('#requestConfirmed').modal('toggle') } });
$('#modalEditCall').modal('toggle')
});
The WebService Method
[WebMethod]
public string GetModalContent(string requestID)
{
try
{
return ViewExtensions.GetCallModal(requestID);
}
catch (Exception ex)
{
throw ex;
}
}
The C# Class I use to build the html
public static string GetCallModal(string requestID)
{
var usrRequestObject = new DBHelpDesk();
var categories = usrRequestObject.GetCategories();
var modalddlCategories = new StringBuilder(String.Empty);
modalddlCategories.Append(#"<select class='custom-select w-100' id='modalddlCategory' required>");
foreach (var category in categories)
{
modalddlCategories.AppendFormat(#"<option value='{0}'>{1}</option>",category.CategoryID,category.Description);
}
modalddlCategories.Append("</select>");
var sb = new StringBuilder(String.Empty);
var userRequest = DBHelpDesk.GetCallByID(requestID);
sb.AppendFormat(#"
<div class='modal-dialog' role='document'>
<div class='modal-content'>
<div class='modal-header'>
<h5 class='modal-title'>{0}</h5>
<button type='button' class='close' data-dismiss='modal' aria-label='Close'>
<span aria-hidden='true'>×</span>
</button>
</div>
<div class='modal-body'>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='txtDescription'>Description</label>
<input type='text' class='form-control' id='txtmodalDescription' placeholder='' value='' required>
<div class='invalid-feedback'>
Valid first name is required.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Category</label>
{1}
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Sub-Category</label>
<select class='custom-select w-100' id='modalddlSubCategory' required>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-6 mb-3'>
<label for='state'>Status</label>
<select class='custom-select w-100' id='modalddlStatus' required>
<option value='0'>Open</option>
<option value='1'>In-Progress</option>
<option value='2'>Awaiting Reply</option>
<option value='3'>Closed</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
<div class='col-md-6 mb-3'>
<label for='state'>Request Mode</label>
<select class='custom-select w-100' id='modalddlRequest' required>
<option value='0'>Low</option>
<option value='1'>Medium</option>
<option value='2'>High</option>
<option value='3'>Critical</option>
</select>
<div class='invalid-feedback'>
Please provide a valid state.
</div>
</div>
</div>
<div class='row'>
<div class='col-md-12 mb-3'>
<label for='cc-name'>Comments</label>
<textarea id='txtmodalEditor' class='form-control'>{3}</textarea>
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-primary'>Update Call</button>
<button type='button' class='btn btn-secondary' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
", DBHelpDesk.GetUserFullName(userRequest.UserID)
, modalddlCategories
, userRequest.Description
, userRequest.Comments);
return sb.ToString();
}
<div>
<div class="row">
<nav class="col-md-2 d-none d-md-block bg-light sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">
<span data-feather="home"></span>
Dashboard <span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="../new/request.aspx">
<span data-feather="file"></span>
New Request
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="shopping-cart"></span>
Products
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="users"></span>
Customers
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="bar-chart-2"></span>
Reports
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="layers"></span>
Integrations
</a>
</li>
</ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted">
<span>Reports</span>
<a class="d-flex align-items-center text-muted" href="#">
<span data-feather="plus-circle"></span>
</a>
</h6>
<ul class="nav flex-column mb-2">
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Current month
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
<span data-feather="file-text"></span>
Last quarter
</a>
</li>
</ul>
</div>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 pt-3 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
<button class="btn btn-sm btn-outline-secondary dropdown-toggle">
<span data-feather="calendar"></span>
This week
</button>
</div>
</div>
<canvas class="my-4" id="myChart" width="900" height="380"></canvas>
<div class="row">
<div class="col-md-9 mb-3">
<h2>CALL LOG SHEET</h2>
</div>
<div class="col-md-3 mb-3">
<select class="form-control float-right">
<option>Open</option>
<option>Closed</option>
<option>All</option>
</select>
</div>
</div>
<asp:Literal ID="lblContent" runat="server"></asp:Literal>
</main>
</div>
</div>
<div id="modalEditCall" class="modal" tabindex="-1" role="dialog">
<asp:Literal ID="lblModalContent" runat="server"></asp:Literal>
</div>
Here is the dropdown list
enter image description here

How to get the 3rd div value with the same class name in C#?

How to get 3rd div in this code snippet using C#?
For example I'd like to get the text in the 3rd div with a class name of gwt-Label WBCI. I'm having issues on getting the right values and at the same time figuring out on what codes do i need to get it
What my code now is something like this but I'm getting the wrong value
browser.Div(Find.ByClass("gwt-Label WBCI")).OuterText.ToString();
<ul class="WCVH WKVH" role="list">
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.POSTED_DATE--uid6-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.POSTED_DATE--uid6">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="b7e15031a749444a855366b1f1a87a46" data-automation-id="menuItem" aria-label="Posted Today, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WKQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="POSTED_DATE_charm" alt="" aria-label=""
aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Posted Today" aria-label="Posted Today" data-automation-label="Posted Today" aria-labelledby="labeledImage.POSTED_DATE--uid6-formLabel">Posted Today</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_TYPE--uid7-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_TYPE--uid7">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="5c6eda594d0d46609fa4c8e2ff13e731" data-automation-id="menuItem" aria-label="Full time, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WCQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_TYPE_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="Full time" aria-label="Full time" data-automation-label="Full time" aria-labelledby="labeledImage.JOB_TYPE--uid7-formLabel">Full time</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="WIUH" role="listitem">
<div class="WKUH">
<label id="labeledImage.JOB_REQ--uid8-formLabel" data-automation-id="formLabel"></label>
</div>
<div class="WMUH">
<div class="WDBN WMP WDCN" data-automation-id="responsiveMonikerInput" id="labeledImage.JOB_REQ--uid8">
<div class="WIBN">
<ul tabindex="-2" class="WCHJ WHBN" role="list" data-automation-id="selectedItemList">
<li class="WGHJ" role="presentation">
<div class="WOGJ WFHJ" tabindex="-2" id="cc054d6cca664a3282855669711520d5" data-automation-id="menuItem" aria-label="T_R_1616417, press delete to clear value." role="listitem" aria-posinset="1" aria-setsize="1">
<div class="WPGJ">
<div class="WACI">
<ul class="WCBI WIBI" role="presentation">
<li class="WPBI"><img class="gwt-Image WHWI WFPJ WBQJ" src="https://vps-wd5.myworkdaycdn.com/assets/ui-html/update/WorkdayApp/8CB9E57BEDDE62E4F67DEB6E19F5308C.cache.png" draggable="false" data-automation-id="JOB_REQ_charm" alt="" aria-label="" aria-labelledby="promptOption"></li>
</ul>
<div class="gwt-Label WBCI" data-automation-id="promptOption" id="promptOption" title="T_R_1616417" aria-label="T_R_1616417" data-automation-label="T_R_1616417" aria-labelledby="labeledImage.JOB_REQ--uid8-formLabel">T_R_1616417</div>
<ul class="WCBI"></ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>

How to make a tab control with bootstrap in asp.net

Here I am implementing bootstrap tab control in asp.net application.
1) On click on next i want to go to next tab.
I want to make tab control working by clicking on tabs of tab control to go to next tab or by clicking on next button.
<form id="form1" runat="server">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
<li><a data-toggle="tab" href="#professional">Professional Information</a></li>
<li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li>
</ul>
<div class="tab-content">
<div id="personal" class="tab-pane fade in active">
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-4">
<span class="Star-clr">*</span>First Name :
</div>
<div class="col-sm-8">
<asp:TextBox ID="txtName" runat="server" placeholder="First Name"</asp:TextBox>
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-2">
</div>
<div class="col-sm-10" style="float: right">
<asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" />
</div>
</div>
</div>
</div>
</div>
<div id="professional" class="tab-pane fade">
</div>
<div id="accountinformation" class="tab-pane fade">
</div>
</div>
</div>
</form>
Image of Tab control:

Create a button after your content divs and call function on this button
<input type="button" value="Next" onclick="ShowNextTab();" />
function ShowNextTab() {
if ($('.nav-tabs > .active').next('li').length == 0) //If you want to select first tab when last tab is reached
$('.nav-tabs > li').first().find('a').trigger('click');
else
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
Below is a complete solution
HTML
<form id="form1" runat="server">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#personal">Personal Information</a></li>
<li><a data-toggle="tab" href="#professional">Professional Information</a></li>
<li><a data-toggle="tab" href="#accountinformation">User Account Infromation</a></li>
</ul>
<div class="tab-content">
<div id="personal" class="tab-pane fade in active">
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-4">
<span class="Star-clr">*</span>First Name :
</div>
<div class="col-sm-8">
<asp:TextBox ID="txtName" runat="server" placeholder="First Name"></asp:TextBox>//close tag is missing
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12">
<div class="col-sm-2">
</div>
<div class="col-sm-10" style="float: right">
<asp:Button ID="btnNext" Width="150" runat="server" Text="NEXT" />
</div>
</div>
</div>
</div>
</div>
<div id="professional" class="tab-pane fade">
</div>
<div id="accountinformation" class="tab-pane fade">
</div>
<input type="button" value="Next" onclick="ShowNextTab();" />
<input type="button" value="Prev" onclick="ShowPrevTab();" />
</div>
</div>
</form>
JavaScript
function ShowNextTab() {
$('.nav-tabs > .active').next('li').find('a').trigger('click');
}
function ShowPrevTab() {
$('.nav-tabs > .active').prev('li').find('a').trigger('click');
}

Show bootstrap panel in a row inside foreach loop

Here is my code, what should I do to show 3 panels in a row. Is there any way to do this?
Its showing in the same row but the next panel starts slightly below the previous one I'll be really thankful to you for your help
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
<div class="col-md-4">
<div class="panel panel-info">
<div class="panel-heading text-center">
<h4>#c.PhaseText, #c.SectorText-#c.PlotAddress</h4>
</div>
<div class="panel-body text-center">
<p class="lead">
<img src="~/images/plot...image.jpg" />
</p>
</div>
<ul class="list-group list-group-flush text-center">
<li class="list-group-item" style="border:none">
#c.AreaText
</li>
<li class="list-group-item" style="border:none">
Facing Park
</li>
<li class="list-group-item text-center" style="border:none">
Near Mosque
</li>
<li class="list-group-item" style="border:none">
Near Commercial
</li>
<li class="list-group-item" style="border:none">
Corner
</li>
</ul>
<div class="panel-footer">
<a class="btn btn-lg btn-block btn-info">Detail View</a>
</div>
</div>
</div>

Just Add <div class="row"> like this:
<div class="row">
#foreach (DEProperty.Web.Models.PlotsViewModelSearchResult c in Model)
{
....
}
</div>

Categories

Resources