Develop Reference

Count some nodes by Selenium, using xpath. 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.

Bootstrap slider in ASP.NET MVC from SQL Server database

I tried to make Bootstrap carousel slider for news from SQL Server database
I want the slider to look like this: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
But the role said
The .active class needs to be added to one of the slides. Otherwise, the carousel will not be visible.
but I did not know how to use .active class to one of my news because it is foreach loop.
All of my news has been under each other also, the left and right controls not working
Here is a screenshot of news slider result now
The code now:
HomeController.cs
public ActionResult Index()
{
return View(db.News.ToList());
}
Index.cshtml
#model IEnumerable<Project.Models.News>
#{
ViewBag.Title = "Home Page";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/bundles/bootstrap")
<!--Start slide code-->
<div class="container imgs">
<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 -->
#foreach (var item in Model)
{
<div class="carousel-inner">
<div class="item active"> //My mistake is here, how to make first news of class active?
<div class="item ">
#{ string imageBase64 = Convert.ToBase64String(item.newImg);
string imageSrc = string.Format("data:image/gif;base64,{0}", imageBase64);
<img src="#imageSrc" />
}
<div class="carousel-caption">
<h3>#item.newName</h3>
Read More
#*<button type="button" class="btn btn-default">Read More</button>*#
</div>
</div>
</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>
Any help?

To add class="active" to the first element in the list you can either:
#{int v = 0;}
#foreach (var item in Model)
{
<div class="carousel-inner">
<div class="item#(v == 0 ? " active" : "")">
#item.newName
</div>
</div>
v++;
}
Or:
#foreach (var item in Model.Select((value, i) => new { i, value }))
{
<div class="carousel-inner">
<div class="item#(item.i == 0 ? " active" : "")">
#item.value.newName
</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>

pass a list of object to modal popup in ASP.net MVC

I want to pass a list of objects to modal popup which is represented as view in a separate .cshtml file
here what I did :
first, I have the following index.cshtml view:
#model E_Voucher.Models.Contract
#{
ViewBag.Title = "Details";
Layout = "~/Areas/Admin/Views/Shared/_Layout.cshtml";
}
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="portlet box blue">
<div class="portlet-title">
<div class="caption">
Contract #Html.DisplayFor(model => model.ContractId) Details
</div>
</div>
<div class="portlet-body">
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
Info
</li>
<li>
Projects
</li>
<li>
Devices
</li>
<li>
Cards
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab_info">
#1 Tab
</div>
<div class="tab-pane" id="tab_project">
#2 Tab
</div>
<div class="tab-pane" id="tab_devices">
<div class="portlet light bordered">
<div class="portlet-title">
<div class="actions" style="padding-left:5px">
<a class="btn btn-circle btn-outline red" data-target="#AssignDeviceModal" data-toggle="modal">
<i class="fa fa-plus"></i>
<span class="hidden-sm hidden-xs">Assign Device </span>
</a>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="tab_cards">
#4Tab
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="AssignDeviceModal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
#Html.Action("AssignDevice")
</div>
</div>
</div>
</div>
</div>
the index.cshtml view contains 4 tabs, in the device_tab there is a button which is responsible to show a modal popup contains all the available device to the user, as you can see in the div with id=AssignDeviceModal I put a #Html.Action("AssignDevice") to call the Action Method AssignDevice which fetch the devices from DB, and render the following AssignDevice.cshtml view:
#model IEnumerable<E_Voucher.Models.Device>
<div class="modal-header">
<h4 class="modal-title">Assign Device</h4>
</div>
<div class="modal-body">
#*for example print the brand of device*#
#foreach (var item in Model)
{
<li>#item.Brand</li>
}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Save</button>
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
and here is the Action Method AssignDevice:
public ActionResult AssignDevice()
{
List<Device> _dev = new List<Device>();
Device dev1 = new Device();
dev1.Brand = "Samasung";
_dev.Add(dev1);
Device dev2 = new Device();
dev1.Brand = "SONY";
_dev.Add(dev2);
return View(_dev);
}
the problem is, when I click the button, the popup modal is shown and disappeared immediately !
how to fix this ?