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
Related
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>
I don't seem to know why my code cannot get cell value instead it always throws exception saying Additional information: no such element: Unable to locate element: {"method":"xpath","selector":"html/body/div[2]/div[2]/table/tr[1]/td[0]"}
Below is my table HTML page.
<div class="tableBlock">
<table class="tableTag">
<tr>
<th>Name</th>
<th>Favorite Color</tr>
<tr>
<td>Ken Master</td>
<td>
<input type="text" value="yellow" class="favoriteColorInput"/>
</td>
</tr>
<tr>
<td>Adon Matsui</td>
<td>
<input type="text" value="red" class="favoriteColorInput"/>
</td>
</tr>
<tr>
<td>Robert Carlos</td>
<td>
<input type="text" value="Green" class="favoriteColorInput"/>
</td>
</tr>
<tr>
<td>Ronaldo Luis</td>
<td>
<input type="text" value="Green" class="favoriteColorInput"/>
</td>
</tr>
</table>
</div>
When I execute the code below it returns successfully with this string:
"table = "Name Favorite Color\r\nKen Master\r\nAdon Matsui\r\nRobert Carlos\r\nRonaldo Luis"
string table = webDriver.FindElement(By.XPath("/html/body/div[2]/div[2]/table")).Text;
But when I try to get cell value based on row and column, it throws exception as mentioned above. And here is the code to call to get cell value.
string cellVal = webDriver.FindElement(By.XPath("html/body/div[2]/div[2]/table/tr[1]/td[0]")).Text;
So I wonder am I missing something?
thanks.
Update:
string cellVal = webDriver.FindElement(By.XPath("/html/body/div[2]/div[2]/table/tr[1]/td[0]")).Text;
Solved:
With Chrome XPath helper, somehow it adds tbody in there which I don't have it in my HTML page, but after using it, it works.
Thank you everyone for helping. Very appreciate.
The issue caused by td[0], in xpath, index start with 1 not 0, so change you xpath to /html/body/div[2]/div[2]/table/tr[1]/td[1]
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.
I have one following table html, the data of rows in the table is looped by foreach.
Can I use Razor to get the value of each row into a List or an array in C#?
My C# code Razor (I tried this so far)
#{
var l = new List<string>();
l.Add(#<input id="updated_value2" data-bind="value:value,visible:isEditing()" />);
}
Here's my table
<table class="table table-hover">
<tbody data-bind="foreach: $root.mapJsons(parameters())">
<tr class="data-hover">
<td>
<strong>
<span data-bind="text:key" />
</strong>
</td>
<td>
#*display label and input for dictionary<value> false DIS true APP*#
<input id="updated_value" data-bind="value:value,visible:isEditing()" />
<label id="display_value" data-bind="text:value,visible:!isEditing()" />
</td>
</tr>
</tbody>
<thead>
<tr>
<th style="width: 30%">
Name
</th>
<th style="width: 30%">
Value
</th>
<th></th>
</tr>
</thead>
</table>
Your foreach loop is being executed client-side (looks like a KnockoutJS binding?) rather than server-side, so any Razor code you embed in the table is only going to be called once as it's rendered by the server. So the answer is no, you cannot populate a server-side list with this particular foreach loop.
I'm working with in my first knockout experience and have been learning quite a bit. What I'm attempting to do is populate a new object and push it into the viewModel for display.
The select box ( drop down box) is populating but when I click on add, the object name is blank. Then it occurred to me, I have two fields I need to collect from to assemble the object so I'm not sure I'm going about this the right way....
My data model:
function Colors(data) {
this.ID = ko.observable(data.ID);
this.ColorName = ko.observable(data.ColorName);
this.Duration = ko.observable(data.Duration);
}
View:
<table id="NewColor">
<tbody>
<tr>
<td>
<select id="SelectColor" data-bind="options: AllColors, optionsText: 'ColorName', value: AllColorss.ID, optionsCaption: 'Select Color...'"></select>
<input id="Duration" data-bind="value: Duration" />
<button data-bind='click: addColor'>Add Color</button>
</td>
</tr>
</tbody>
The input ID="duration" isn't working / populating right but I'm working on getting the model data to update.... (This is a side issue I'll look at later so of there's syntax issues there, that's why)
The script to add from the button click:
self.addColor = function() { self.AddColors.push(new Color(NewColor )) };
When that runs, the ColorName is blank in the following table but a blank entry is added.
Display / update table:
<table>
<thead>
<tr>
<th padding: 10px; >Color</th>
<th padding: 10px; >Duration</th>
</tr>
</thead>
<tbody data-bind="foreach: AddColors">
<tr>
<td data-bind="text: ColorName"></td>
<td data-bind="text: Duration"></td>
<td>
<a href='#' data-bind='click: $parent.removeLine'>Remove</a>
</td>
</tr>
</tbody>
Is what I'm doing the way to add an object into the array for the newly created object? I don't see a SelectedColor.SelectedText or anything similar. How do I access the text property of the select drop down list?
I'm not sure if what I was doing before would work but I backed off what I had and added in the select box after the line was added which was the same thing the tutorial was doing. That worked. I can't thank you enough, Robert.