C#/MVC/Knockout
I'm playing around with knockout and I can't seem to get a click handler to work on the name column. However, I can add in an image and assign a click handler to it. It seems to be an issue if the column is being assigned a databind.
This is an example:
<tbody data-bind="foreach: CurrentFeeds" class="table-news-body">
<tr class="panel-danger">
<td id="AllFeeds" data-bind="text: RSSName, click: $parent.showfeed" class="h3"></td>
<td>
<a href="#" data-bind="click: $parent.showFeed"class="btn btn-white btn-sm">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</td>
#if (bIsEditor)
{
<td>
<button data-bind='click: $.deleteFeed' class="btn btn-primary btn-xs">
<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>
Remove
</button>
</td>
}
</tr>
</tbody>
If I change the allfeeds line to this:
<td id="AllFeeds" data-bind="text: RSSName, click: $parent.showfeed" class="h3"></td>
I don't get an error message but I can't click on that column.
However, if I add in this code:
<td>
<a href="#" data-bind="click: $parent.showFeed"class="btn btn-white btn-sm">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
</a>
</td>
I can click on the icon that's created for it.
Whats going on?
Related
I want to display #s.CARDNAME that is used in the for each loop inside the else statement outside the loop as a heading:
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#ViewData["0"]</span> </h4> </div>
Razor Page Code
<div class="container">
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#ViewData["0"]</span> </h4> </div>
#if ((Convert.ToInt32(ViewData["hascard"])) == 2)
{
<h1>#ViewData["message"]</h1>
}
else
{
<div class="Debit-Card-Boxes">
#foreach (var s in ViewData["card"] as IEnumerable<DebitCardListingResponeDTOCardInfo>)
{
<div class="Debit-Card">
<div class="credit-card">
<img class="Abl-Logo" src="~/images/ABL-Logo.webp" />
<div class="chip"><img src="~/images/chip-logo-black-and-white.png" alt="chip"></div>
<div class="numbers">#s.ACCOUNTNUMBER</div>
<div class="name-and-expiry">
<span>#s.CARDNAME</span>
<span>#s.CARDEXPIRYDATE</span>
</div>
</div>
<a class="activatebtn" href="#modal">Activate</a>
<div class="modal" id="modal" tabindex="1">
<div class="modal__content">
×
<h1 id="genotpheading">OTP Generation</h1>
<table border="0" cellpadding="3" cellspacing="0">
<tr>
<td>
Pin:
</td>
<td>
<input type="password" id="txtPin" />
</td>
</tr>
<tr>
<td>
Confirm Pin:
</td>
<td>
<input type="password" id="txtConfirmPin" />
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="button" id="btnSubmit" value="Submit" />
</td>
</tr>
</table>
</div>
</div>
</div>
}
</div>
}
I suppose #s.CARDNAME is the same for all records, right? if that is not the case you will have to decide which cardname to use since there are many. Anyway if they are the same and you can't change your DTO to separate this property from an IEnumerable.
You can simply cast your viewdata item to IEnumrable and show the first(or last) item's cardname like
<h1>Your Card: #(((IEnumerable<DebitCardListingResponeDTOCardInfo>)ViewData["card"]).First().CARDNAME)</h1>
also, review this dotnetfiddle for a working example
P.S: You can also .Last() simply use any function of LINQ including ElementAt as you wish
Try to use the following code:
<div><h4 style="text-align:center; margin-bottom:20px;">WELCOME <span id="UserName">#(((List<Index3Model>) ViewData["card"])[0].CARDNAME)</span> </h4> </div>
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();
}
New to Knockout.Js and just about getting my head around the data-bindings after three days...
I have created a dynamic accordion and when doing my data-bind with the attr: {'data-target': '#' + RecipeName' i get back Data-target=#[object object] I understand that i can get back the name
of the parameter if i used data-bind="text: RecipeName" (But i need to append the # to it
to allow my accordion to be opened on the correct Id..)
I have looked online and i can't seem to find a sufficient answer. I have tried google
dev tools to change the #[object object] to the value im expecting and it works fine.
Please can someone explain why this happens and what is needed to resolve.. I guess its pretty straight forward?
<section id="results" style="margin-top: 1em;">
<div class="accordion-group">
<div class="accordion-heading">
<table class="table table-striped table-hover accordion">
<thead>
<tr>
<th>Set Next</th>
<th>Name</th>
<th>Bench</th>
<th>Transacted</th>
<th>Receipe Name</th>
</tr>
</thead>
<tbody data-bind="foreach: Stages">
*****<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': '#' + RecipeName}">*****
<td data-bind="css: CellClass">
<button class="btn btn-warning" data-bind="attr: {'data-id': Id}" data-toggle="modal" data-target="#moveReason">#Html.LocalisedStringFor(model => model.MoveToStageText)</button>
<a class="text" data-bind="attr: {'data-id': Id}" data-toggle="modal" data-target="#moveReason"><span>#Html.LocalisedStringFor(model => model.CurrentPositionText)</span></a>
</td>
<td><span data-bind="text: ProcessName"></span></td>
<td><span data-bind="text: BenchName"></span></td>
<td><span data-bind="text: TransactionStatus"></span></td>
<td><span data-bind="text: RecipeName"></span></td>
</tr>
<tr id="" class="accordion-body collapse" data-bind="attr: {'id':RecipeName}">
<td colspan="5">
<div class="accordion-inner" data-bind="foreach: $parent.Stages">
<ul>
<li> <span data-bind="text: StepName"></span></li>
<button class="btn btn-warning" data-bind="attr: {'data-id': Id}" data-toggle="modal" data-target="#moveReason">#Html.LocalisedStringFor(model => model.MoveToStageText)</button>
</ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
This is the result it returns
I suspect that <tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': '#' + RecipeName}">
needs to be
<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': '#' + RecipeName()}">
the other option would be to put a property on your viewmodel that does the logic you need like
function ViewModel(){
var self = this;
self.RecipeName = ko.observable();
self.RecipeNameHash = ko.pureComputed(function(){
return '#' + self.RecipeName();
});
}
then the table row becomes
<tr class="accordion-toggle" data-toggle="collapse" data-target="#" data-bind="attr: {'data-target': RecipeNameHash}">
So I'm trying to post back the value that's inside the <td> but for some reason it's not posting it back, all the properties are either null or set to their default value such as 0.
It should post back the values when I click this button
<button type="submit" class="btn btn-icon waves-effect waves-light btn-info"> <i class="fa fa-wrench"></i> </button>
But for some reason it's not grabbing things like <td>#Html.DisplayTextFor(x => x.ServerID)</td> and posting it back
Here is the razor
#using (Html.BeginForm("Edit", "Dashboard"))
{
<table class="table table-hover mb-0">
<thead>
<tr>
<th>#</th>
<th>Server Name</th>
<th>Credentials</th>
<th>Status</th>
<th>Modify</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>#Html.DisplayTextFor(x => x.ServerID)</td>
<td>Data</td>
<td>#Html.DisplayTextFor(x => x.Endpoint)</td>
if (Model.IsRunning)
{
<td><span class="badge badge-success">Running</span></td>
}
else
{
<td><span class="badge badge-danger">Stopped</span></td>
}
<td>
<button class="btn btn-icon waves-effect waves-light btn-success"> <i class="fa fa-power-off"></i> </button>
<button class="btn btn-icon waves-effect waves-light btn-danger"> <i class="fa fa-stop"></i> </button>
<button type="submit" class="btn btn-icon waves-effect waves-light btn-info"> <i class="fa fa-wrench"></i> </button>
</td>
<td>
<button class="btn btn-icon waves-effect waves-light btn-danger"> <i class="fa fa-trash"></i> </button>
</td>
</tr>
</tbody>
</table>
}
And the Controller
public ActionResult Edit(ServerModel serverModel)
{
var model = serverModel;
return View();
}
the model properties are null or 0 as I said.
And here is the Model
public class ServerModel
{
public int ServerID { get; set; }
public string Endpoint { get; set; }
public bool IsRunning { get; set; }
}
Try
#Html.HiddenFor(x => x.ServerID)
#Html.DisplayTextFor(x => x.ServerID)
DisplayTextFor will only render the item as text.
Including the hidden field will include them in the payload sent to the server - as form items.
I want to display the name of the value before deleting it.
Have no idea how to data bind in angular.
1.Angular html.
<div *ngIf="pnlItemType" class="col-12">
<table class="table table-bordered table-hover">
<thead class="thead-dark">
<th scope="col">Item Type Name</th>
<th scope="col" colspan="2"></th>
</thead>
<tbody class="bg-white">
<tr *ngFor="let itemType of itemTypes">
<td class="valign-middle">{{itemType.ItemTypeName}}</td>
<td class="w-80 text-center">
<button type="button" class="btn btn-outline-primary"
title="Edit" (click)="editItemType(itemType)"><i class="fas fa-
pen"></i></button>
</td>
<td class="w-80 text-center">
<button type="button" class="btn btn-outline-
secondary" title="Delete" (click)="deleteItemType()"> <i
class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
/div>
2.Modal view of delete box.
<ng-template #mdlDeleteItemType>
<div class="modal-header">
<h4 class="modal-title"> Confirm to delete this item</h4>
<button type="button" class="close" aria-label="Close" (click) =
"hideModal();">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<span> Are you sure you want to delete this item? </span>
<b>{{itemType?.ItemTypeName}}</b>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-secondary">
Delete</button>
<button type="button" class="btn btn-outline-secondary mg-rt-10"
(click)="hideModal()">Cancel</button>
</div>
</ng-template>
3.codebehind tsfile.
deleteItemType(){
this.hideModal();
this.openLargeModal(this.mdlDeleteItemType);
}
I would like to show the name of the item to be deleted in bold.
deleteItemType(itemType){
this.mdlDeleteItemType = itemType;
this.hideModal();
//Just Open Modal after it
}
And your HTML
(click)="deleteItemType(itemType)"