Set Bootstrap Accordion with specific id - c#

I have got a table shows a number of Errors in each the order. Each row shows how many errors in the specific order. I would like to add a See button at the end of the row and when a user clicks it, that row will expand like an accordion and shows error list.
OrderId Order From Number of Error Button
---------------------------------------------------
1 A 4 See
2 B 3 See
3 C 2 See
When a user click See button on row 2
OrderId Order From Number of Error Button
---------------------------------------------------
1 A 4 See
2 B 3 See
Error 1-
Error 2-
Error 3-
3 C 2 See
I couldn't figure out how to associate/link row with related error
#{int i = 0;}
#foreach (var item in Model.OrderList)
{
i++;
<tr>
<td>
#Html.DisplayFor(ID)
</td>
<td>
#Html.DisplayFor(FROM)
</td>
<td>
#Html.DisplayFor(NumberOfError)
</td>
<td class="text-right">
<a class="btn btn-warning" data-toggle="collapse" href="##i" role="button" aria-expanded="false" aria-
controls="multiCollapseExample:#i">Toggle</a>
</td>
</tr>
<tr class="collapse multi-collapse" id="#i">
<td colspan="3">
Error 1
Error 2
Error 3
</td>
</tr>
enter code here
I know that i need to set anchor href="#" tag to class="collapse multi-collapse" id="", but Bootstrap doesn't like if i start with number like "1abc" or "abc:1". I can't start with number or use ":" inside the id or href.
I tired "abc#{i}" it says i is variable can't use like that
tried this "abc:#i" no error but didn't work, also ":#iabc" or just "#i"

You can show hide the next tr if you are creating tr.
It is simple with jquery to toggle that next tr.
#{int i = 0;}
#foreach (var item in Model.OrderList)
{
i++;
<tr>
<td>
#Html.DisplayFor(ID)
</td>
<td>
#Html.DisplayFor(FROM)
</td>
<td>
#Html.DisplayFor(NumberOfError)
</td>
<td class="text-right">
<button type="button" class="btn btn-primary btn-sm" onclick="changeToggle(this)">See <i class="fa fa-arrow-down" ></i></button>
</td>
</tr>
<tr class="collapse" style="display:none;">
<td colspan="3">
Error 1
Error 2
Error 3
</td>
</tr>
}
<script>
function changeToggle(btn){
$(btn).find(i).removeClass("fa-arrow-up");
$(btn).find(i).removeClass("fa-arrow-down");
if($(btn).closest( "tr" ).next().css('display') == 'none'){
$(btn).find(i).addClass("fa-arrow-down");
$(btn).find(i).removeClass("fa-arrow-up");
}else{
$(btn).find(i).removeClass("fa-arrow-down");
$(btn).find(i).addClass("fa-arrow-up");
}
$(btn).closest( "tr" ).next().toggle();
}
</script>

Related

Handle with tables in selenium C#

I a trying to handle with tables in selenium C#.
I have a table which has a few rows and a few columns.
Each row has column with name and buttons.
I want to click "Open" button, where the name in the row is, for example "Name1".
But i can't find even the td's in the table.
Here's what i was trying to do:
public void SelectNameAndClick(string name)
{
IWebElement tableElement = driver.FindElement(By.XPath("//table[#id='TableMp']"));
IList<IWebElement> tableRow = tableElement.FindElements(By.TagName("tr"));
IList<IWebElement> rowTD;
foreach (IWebElement row in tableRow)
{
if (row.Text.Equals(name));
rowTD = row.FindElements(By.TagName("td"));
I attached screen shot of the table: here
<table class="table table-condensed table-hover" id="TableMp" style="" data-bind="visible: opAGents().length > 0">
<tbody data-bind="foreach: opAGents">
<tr>
<td>
<span agentid="OPAgents/4b2f885101f740fdb72c5874596577ac" data-original-title="4b2f885101f740fdb72c5874596577ac">4b2f885101f740fdb72c5874596577ac</span>
</td>
<td class="vert-align">
<span >Jun 23, 2020 9:07 PM</span>
</td>
<td class="vert-align">
<span data-original-title="4b2f885101f740fdb72c5874596577ac">4b2f...</span>
<button class="btn btn-default btn-aligned-left" title="" data-original-title="Copy token"></i></button>
</td>
<td>
<span class="agent-led agent-active" data-original-title="Connected"></span>
</td>
<td class="vert-align hidden-xs">
<button data-bind="class="btn-aligned-left quick-action btn btn-sm btn-primary">
<span class="no-pointer-events">
<span>Open</span>
</span>
</button>
</td>
<td class="vert-align">
<button class="btn btn-default btn-aligned-left" ></i></button>
</td>
</tr>
<tr>
<td class="vert-align">
<span agentid="OPAgents/46414e7df0234d01aa6df6df7c195d17" data-original-title="">Name1</span>
</td>
<td class="vert-align">
<span >Jul 23, 2020 10:17 AM</span>
</td>
<td class="vert-align" style="white-space:nowrap">
<span data-original-title="46414e7df0234d01aa6df6df7c195d17">4641...</span>
<button class="btn btn-default btn-aligned-left"><i class="fa fa-files-o" data-bind="attr:{ 'data-original-title': 'Copy token' }, toolTip: { hideOnMobile: true }" title="" data-original-title="Copy token"></i></button>
</td>
<td>
<span class="agent-led agent-active" data-original-title="Connected"></span>
</td>
<td class="vert-align hidden-xs">
<button class="btn-aligned-left quick-action btn btn-sm btn-primary">
<span class="no-pointer-events">
<span>Open</span>
</span>
</button>
</td>
This should work for you:
public void SelectNameAndClick(string name)
{
// Selecting your table element.
IWebElement table = driver.FindElement(By.XPath("//table[#id='TableMp']"));
// Select the row where name of the agent equals to the name we're searching for.
IWebElement row = table
.FindElements(By.TagName("tr"))
.FirstOrDefault(element =>
element.FindElements(
By.XPath($"//span[#agentid and text()='{name}']")).Count > 0);
// If there is no such row, do nothing.
if (row == null)
return;
// Find the button with the 'Open' text somewhere within it and click the button.
IWebElement button = row.FindElement(By.XPath("//button//*[text()='Open']"));
button.Click();
}

Creating a new row every 4 or 5 columns in C# razor code

I saw a way to do this in php, but I'm using razor code. I need to insert a close row and an open row tag every 4 loops. But the main loop I'm using is a foreach which doesn't really give me a good variable to use mod on. Here is what I have. Can you give me a quick solution? I'm sure it's simple.
This is what I have:
<tbody>
<tr align="center">
#foreach (var item in Model)
{ #for (int loops = 1; loops < 6; loops++)
{
<td>
<img src="#Html.DisplayFor(modelItem => item.PicUrl)" height="100" /><br />
<b>#Html.DisplayFor(modelItem => item.Name)</b><br />
#Html.DisplayFor(modelItem => item.Description)<br />
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
}
}
</tr>
</tbody>
Unfortunately, as you might imagine, this code simply puts 5 of the same photo before it loads 5 of the next photo, and all in a single row across.
Updated with counter and mod
#{int counter = 0;}
<tbody>
<tr align="center">
#foreach (var item in Model)
{
<td>
<img src="#Html.DisplayFor(modelItem => item.PicUrl)" height="100" /><br />
<b>#Html.DisplayFor(modelItem => item.Name)</b><br />
#Html.DisplayFor(modelItem => item.Description)<br />
<a asp-action="Edit" asp-route-id="#item.Id">Edit</a> |
<a asp-action="Details" asp-route-id="#item.Id">Details</a> |
<a asp-action="Delete" asp-route-id="#item.Id">Delete</a>
</td>
counter++;
if (counter % 5 == 0)
{
#:</tr><tr>
}
}
</tr>
</tbody>
I think counter % 5 logic will need some attention to make sure it's working as expected.

How to assign dynamic id to button in asp.net c#

I have created html table and getting dynamic data in table. But on each button I am calling function, My server side should understand this button. so I need to set dynamic id or name to button. Below is my code. I want to give unique id to submit button.
<table cellspacing='0'> <!-- cellspacing='0' is important, must stay -->
<!-- Table Header -->
<tr>
<th>ID</th>
<th>Name</th>
<th>Email</th>
<th>Subject</th>
<th>Action</th>
</tr>
<!-- Table Header -->
<!-- Table Body -->
<%for (int i = 0; i < row_count; i++) { %>
<tr id="h<%=i%>"><td><%=list[0][i]%></td>
<td><%=list[1][i]%></td>
<td><%=list[2][i]%></td>
<td><%=list[3][i]%></td>
<td><%=list[4][i]%></td>
<td></td>
<td><button type="submit" id="Submit" class="submit" runat="server" onserverclick="button_Click" > Approve</button>
</td>
</tr>
<%} %>
<!-- Table Body -->
</table>
I tried to assign id as below but did't worked.
<td><button type="submit" id="Submit<%=i%>" class="submit" runat="server" onserverclick="button_Click" > Approve</button>
</td>
You can take a look to : Dictionnary collection
https://msdn.microsoft.com/fr-fr/library/xfhwa508(v=vs.110).aspx

Multiple Select for Edit User Wtih CheckBox

I have table
<table class="table table-hover">
<thead>
<tr>
<th>userid</th>
<th>image</th>
<th>name</th>
<th>family</th>
<th>level</th>
<th>fild</th>
<th>operation</th>
<th>up to next level</th>
</tr>
</thead>
<tbody>
#foreach (var item in StudentFunc.ShowAllStudents(Model.Class))
{
<tr>
<td>#item.studentid</td>
<td>
<img src="~/Image/StudentImage/#item.studntimage" width="60" height="60"/>
</td>
<td>#item.studentname</td>
<td>#item.studentfamily</td>
<td>#item.studentpayename</td>
<td>#item.studentreshtename</td>
<td>
<a onclick="Edit()" class="btn btn-primary click" href="#Url.Action("InsertScore", "Home", new {payeid = #item.PayeID, reshteid = #item.ReshteID, studentiD = #item.studentid, MostamarID = #StudentFunc.ShowStudents(item.studentid).MostamarID})"><span class="glyphicon glyphicon-pencil"><span style="font-family: 'B Titr'; margin-right: 10px;">ثبت نمره</span></span></a>
<a class="btn btn-default" href="#Url.Action("ListofScore", "Home", new {studentid = #item.studentid})"><span class="glyphicon glyphicon-list"><span style="font-family: 'B Titr'; margin-right: 10px;">لیست نمرات</span></span></a>
<a class="btn btn-default" href="#Url.Action("AddAbsent", "Home", new {studentid = #item.studentid})"><span class="glyphicon glyphicon-list"><span style="font-family: 'B Titr'; margin-right: 10px;"> ثبت غیبت</span></span></a>
</td>
<td>#Html.CheckBox("Pass", false)</td>
</tr>
}
</tbody>
</table>
in table I put a checkbox for select user for update level. Now how do I find what students selected and and how to send information about them to action?
One option is to put your code in a form and replace
#Html.CheckBox("Pass", false)
//with something like
#Html.CheckBoxFor(item => item.Pass)
and submit the form (you should be able to do this).
Or you can keep a list with student ids in javascript (add/remove a student id on check/uncheck) and send that list to server with an ajax call.
These are just some hints, you will have to try to write this code yourself.
Since you're iterating through the students the render the checkbox, I would suggest something like creating the checkboxes with a customer name that contains the student ID.
Replace
<td>#Html.CheckBox("Pass", false)</td>
with something like
<td>#Html.CheckBox("Pass_" + item.studentid)</td>
Now, in the controller action wherever you're posting these to, the Form Collection will contain all the selected checkbox names, and you can parse each one for "Pass_{StudentId}" to figure out which students were selected.

This table has a column with check boxs that need to select the row and send rows to another table.

I need to send the coils selected on "AuctionPage" to the another table on "MyBids" Page. I think it would be best to grab the coilID and pass it that way but not sure how? Any help would be appreciated.
AuctionPage-->
#model NucorPrototypes_V1.ViewModel.AuctionPage
#{
ViewBag.Title = "Index";
}
<title>Auction </title>
<div id="header" style="background-color: #008751">
<h1 style="margin-bottom: 0; color: #FFFFFF">Secondary Coil Auction </h1>
</div>
<div id="content">
<h2>Index</h2>
<table id="myTable" border="3" style="background-color: #B0B0B0" cellpadding="10" class="table">
<tr>
<th>Select</th>
<th>Serial Number</th>
<th>Minimum Bid</th>
<th>Current High Bid</th>
<th>Grade</th>
<th>Heat Number</th>
<th>Gauge</th>
<th>Width</th>
<th>Weight</th>
<th>Defect 1</th>
<th>Defect 2</th>
<th>Defect 3</th>
</tr>
#foreach (var item1 in Model.Coils)
{
<tr>
<td>
<input type="checkbox" name="selection" id="#item1.Coil_ID" align="center">
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_ID)
</td>
<td>
#foreach (var item2 in Model.Auctions)
{
#Html.DisplayFor(modelItem => item2.Auc_MinBid)
}
</td>
<td>
#foreach (var item3 in Model.Bids)
{
#Html.DisplayFor(modelItem => item3.Bid_Amt)
//string sqlq = "select max(Bid_Amt) from Bid inner join AuctionItem ON Bid.Bid_ID = AuctionItem.Bid_ID where Coil_ID =" + item1.Coil_ID +"' '";
}
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Grade)
</td>
<td>
<a data-toggle="modal" data-target="#myModal">#Html.DisplayFor(modelItem => item1.Coil_HeatNo)</a>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">#Html.DisplayFor(modelItem => item1.Coil_HeatNo)</h4>
</div>
<div class="modal-body">
CHemistries
</div>
</div>
</div>
</div>
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Gauge)
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Width)
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Weight)
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Defect1)
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Defect2)
</td>
<td>
#Html.DisplayFor(modelItem => item1.Coil_Defect3)
</td>
</tr>
}
</table>
</center>
</div>
<center>
Place Bid(s)
</center>
MyBids Page-->
#model NucorPrototypes_V1.ViewModel.MyBids
#{
ViewBag.Title = "MyBids";
}
Auction
Secondary Coil Auction
Bid Amount per 100 weight
Remove Bid
Serial Number
Minimum Bid
Current High Bid
Grade
Heat Number
Gauge
Width
Weight
Defect 1
Defect 2
Defect 3
#foreach( var row in Model.Coils)
{
Remove Bid
#Html.DisplayFor( modelItem => row.Coil_ID)
}
<center>
Confirm Bids
Save as...
</center>
for getting the result of multiple check boxes I use Request.Form
on your controller
Request.Form["chkBoxName"].ToString();
make sure every check box has the same name (chxBoxName in this example) and it will give you a list of all of the check boxes that were selected. You can then add those items to the next table on the controller and redirect there. Hope this helps
Edit:
this will return a comma delimited list of the selected check boxes. since you want to add them to another table you will need to query the database for them.
[HttpPost]
public ActionResult PostBack(){
Model model = new Model();
List<Bids> bids = new List<Bids>();
List<int> result = Request.Form["chkBoxName"].ToString().split(',');
foreach(var id in result){
//query the database to get the record for id
bids.add("result of query");
}
Model.Bids = bids;
return RedirectToAction("Bids", bids);
}
Just put the checkboxes in a sub form where the action goes to the target form. I don't see where the statement is in the HTML you provided, but you can have multiple forms on the same page with differing targets.

Categories