Bootstrap Modal Pop Up bind controls - Dropdownlist - c#

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

Related

Why does site shows A page can have only one server-side Form tag

I am creating a modal in an aspx form which will add data in database. But it is showing this error
A page can have only one server-side Form tag.
I did the same in another file on same project where I created a Login page which worked completely fine. It also had 2 forms, the default one and the one I created. But here it is showing error although I have tried removing runat="server" from the second form but still no solution.
<body>
<form id="form1" runat="server">
<div>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark sticky-top">
<button class="navbar-toggler" data-toggle="collapse" data-target="#collapse_target">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsiblenavbar">
<a class="navbar-brand" href="index.aspx">
<img src="logo.ico" class="img-responsive" /></a>
<ul class="navbar-nav ">
<li class="nav-item">
<a class="nav-link" href="index.aspx"><i class="fa fa-home"></i> home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="logout.aspx"><i class="fa fa-sign-out"></i> logout </a>
</li>
<%--<asp:listview runat="server" id="listview1" --%>
</ul>
</div>
</nav>
<p></p>
<style>
p {
line-height: 5px;
}
</style>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<img src="user.png" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">profile info</h5>
<%--<p class="card-text" id="para1"><i class="fa fa-user-circle-o"></i> taimoor baig</p>--%>
<asp:Label ID="label1" CssClass="card-text fa fa-user-circle-o" runat="server"> </asp:Label>
<p class="card-text"><i class="fa fa-user-circle"></i> admin</p>
<p class="card-text"><i class="fa fa-clock-o"></i> last login : xx-xx-xxxx</p>
edit profile
</div>
</div>
</div>
<div class="col-md-8">
<div class="jumbotron" style="width: 100%; height: 100%;">
<h1>welcome admin</h1>
<div class="row">
<div class="col-md-6">
<iframe src="http://free.timeanddate.com/clock/i6ovwi4o/n106/szw160/szh160/hoc222/hbw6/cf100/hgr0/hcw2/hcd88/fan2/fas20/fdi70/mqc000/mqs3/mql13/mqw6/mqd94/mhc000/mhs3/mhl13/mhw6/mhd94/mmc000/mml5/mmw1/mmd94/hwm2/hhs2/hhl55/hhb18/hhw8/hms2/hml85/hmb18/hmw8/hmr7/hss3/hsl90/hsr5" frameborder="0" width="160" height="160"></iframe>
</div>
<div class="col-md-6">
<div class="card" <%--style="font-size: large;"--%>>
<div class="card-body" style="width: 20rem;">
<h5 class="card-title">new orders</h5>
<p class="card-text">here you can add new orders.</p>
new orders
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<br />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">brand</h5>
<p class="card-text">here you can manage brand.</p>
add brand
manage brand
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">product</h5>
<p class="card-text">here you can manage products.</p>
add product
manage products
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">market</h5>
<p class="card-text">here you can manage markets.</p>
add market
manage markets
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">salesman</h5>
<p class="card-text">here you can manage salesman.</p>
add salesman
manage salesman
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" style="width: 20rem;">
<div class="card-body">
<h5 class="card-title">vendor</h5>
<p class="card-text">here you can manage vendor.</p>
add vendor
manage vendors
</div>
</div>
</div>
</div>
</div>
<!-- modal of brand -->
<div class="modal fade" id="form_brand" tabindex="-1" role="dialog" aria-labelledby="examplemodallabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">add new brand</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="close">
<span aria-hidden="true">×</span>
</button>
</div>
<div runat="server" class="modal-body">
<form runat="server">
<div class="form-group" runat="server">
<label>brand name</label>
<%--<input type="text" class="form-control" name="brand_name" id="brand_name" placeholder="enter brand name"/>--%>
<asp:TextBox CssClass="form-control" ID="textbox1" runat="server">
enter brand name
</asp:TextBox>
</div>
<div class="form-group">
<label>brand sector name</label>
<%--<input type="text" class="form-control" id="brand_sector_name" placeholder="enter brand sector name"/>--%>
<asp:TextBox ID="textbox2" CssClass="form-control" runat="server">
enter brand sector name
</asp:TextBox>
<small id="brand_sector__error" class="form-text text-muted"></small>
</div>
<div class="form-group">
<label>vendor dealing</label>
<%--<input type="text" class="form-control" id="vendor_dealing" placeholder="enter vendor name"/>--%>
<asp:TextBox ID="textbox3" CssClass="form-control" runat="server">
enter vendor name
</asp:TextBox>
<small id="vendor_error" class="form-text text-muted"></small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">close</button>
<button type="button" class="btn btn-primary">add</button>
</div>
</div>
</div>
</div>
I expect a webform with a modal displaying after pressing the "add brand" button

Looks like you have two form tag, 1 in master page and 1 in the page that throws the error.
Try to remove 1

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.

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 ?

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